src/Main.elm

@@ -53,7 +53,6 @@ init _ url key =
             , transactionId = 0
             , userData = Dict.empty
             , connected = True
-            , searchText = ""
             }
         cmd = getStoreValuePort "scylla.loginInfo"
     in
@@ -106,7 +105,6 @@ update msg model = case msg of
     ReceiveMarkdown md -> updateMarkdown model md
     DismissError i -> updateDismissError model i
     AttemptReconnect -> ({ model | connected = True }, firstSync model.apiUrl (Maybe.withDefault "" model.token))
-    UpdateSearchText s -> ({ model | searchText = s }, Cmd.none)
 
 requestScrollCmd : Cmd Msg
 requestScrollCmd = Task.attempt ViewportAfterMessage (Browser.Dom.getViewportOf "messages-wrapper")

src/Scylla/Model.elm

@@ -32,7 +32,6 @@ type alias Model =
     , transactionId : Int
     , userData : Dict Username UserData
     , connected : Bool
-    , searchText : String
     }
 
 type Msg =
@@ -69,7 +68,6 @@ type Msg =
     | ReceiveMarkdown MarkdownResponse
     | DismissError Int
     | AttemptReconnect
-    | UpdateSearchText String
 
 displayName : Model -> Username -> String
 displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData

src/Scylla/Views.elm

@@ -15,7 +15,7 @@ import Svg.Attributes
 import Url.Builder
 import Json.Decode as Decode
 import Html exposing (Html, Attribute, div, input, text, button, div, span, a, h2, h3, table, td, tr, img, textarea, video, source, p)
-import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src, classList)
+import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src)
 import Html.Events exposing (onInput, onClick, preventDefaultOn)
 import Dict exposing (Dict)
 import Tuple
@@ -91,13 +91,6 @@ roomListView m =
     in
         div [ class "rooms-wrapper" ]
             [ h2 [] [ text "Rooms" ]
-            , input
-                [ class "room-search"
-                , type_ "text"
-                , placeholder "Search chats..."
-                , onInput UpdateSearchText 
-                , value m.searchText
-                ] []
             , homeserverList
             ]
 
@@ -117,17 +110,8 @@ roomListElementView : Model -> String -> JoinedRoom -> Html Msg
 roomListElementView m s jr =
     let
         name = roomDisplayName m jr
-        isVisible = m.searchText == "" || (String.contains (String.toLower m.searchText) <| String.toLower name)
-        isCurrentRoom = case currentRoomId m of
-            Nothing -> False
-            Just cr -> cr == s
     in
-        div [ classList
-                [ ("room-link-wrapper", True)
-                , ("active", isCurrentRoom)
-                , ("hidden", not isVisible)
-                ]
-            ]
+        div [ class "room-link-wrapper" ]
             [ a [ href <| roomUrl s ] [ text name ]
             , roomNotificationCountView jr.unreadNotifications
             ]
@@ -172,7 +156,6 @@ joinedRoomView m roomId rd =
                 [ rows 1
                 , onInput <| ChangeRoomText roomId
                 , onEnterKey <| SendRoomText roomId
-                , placeholder "Type your message here..."
                 , value <| Maybe.withDefault "" <| Dict.get roomId m.roomText
                 ]  []
             , button [ onClick <| SendFiles roomId ] [ iconView "file" ]
@@ -183,8 +166,8 @@ joinedRoomView m roomId rd =
         div [ class "room-wrapper" ]
             [ h2 [] [ text <| roomDisplayName m rd.joinedRoom ]
             , messagesWrapper
-            , messageInput
             , typingWrapper
+            , messageInput
             ]
 
 onEnterKey : Msg -> Attribute Msg

static/scss/style.scss

@@ -2,20 +2,23 @@
 $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
+
 $background-color: #1b1e21;
 $background-color-light: lighten($background-color, 4%);
 $background-color-dark: darken($background-color, 4%);
+
 $error-color: #f01d43;
 $error-color-dark: darken(#f01d43, 10%);
-$inactive-input-color: lighten($background-color-light, 5%);
-$active-input-color: lighten($inactive-input-color, 5%);
 
-$transition-duration: .250s;
+$active-input-color: lighten($background-color-light, 2%);
+$active-input-border-color: $primary-color;
+$inactive-input-color: $background-color-light;
+$inactive-input-border-color: darken($inactive-input-color, 10%);
+
+$transition-duration: .125s;
 
 $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
 
-$border-radius: 3px;
-
 html, body {
     height: 100vh;
 }
@@ -30,27 +33,23 @@ body {
 
 @mixin input-common {
     padding: 5px;
-    border-radius: $border-radius;
+    border-radius: 3px;
     outline: none;
 
+    transition: background-color $transition-duration;
     font-family: inherit;
     font-size: inherit;
-
-    &:focus {
-        transition: background-color $transition-duration;
-    }
 }
 
 input, textarea {
     @include input-common();
-    overflow-x: hidden;
     background-color: $inactive-input-color;
     color: white;
-    border: none;
-    padding: 10px;
+    border: .5px solid $inactive-input-border-color;
 
     &:focus {
         background-color: $active-input-color;
+        border-color: $active-input-border-color;
     }
 }
 
@@ -106,6 +105,7 @@ div.errors-wrapper {
 div.error-wrapper {
     pointer-events: auto;
     width: 400px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, .25);
     padding: 5px;
     background-color: $error-color;
     border: 1px solid $error-color-dark;
@@ -155,42 +155,16 @@ div.base-wrapper {
  */
 div.rooms-wrapper {
     flex-shrink: 0;
-    width: 15%;
-    min-width: 200px;
     background-color: $background-color-light;
-
-    .room-search {
-        padding: 5px;
-        width: 100%;
-        box-sizing: border-box;
-    }
 }
 
 div.room-link-wrapper {
     whitespace: nowrap;
     display: flex;
     padding: 0px;
-    border-left: solid 2px $background-color-light;
-    padding-left: 5px;
-    margin: 3px;
-    align-items: center;
-    
+
     span, a {
         margin-right: 5px;
-        color: lightgrey;
-    }
-
-    &:hover a {
-        color: $primary-color;
-        transition: color $transition-duration;
-    }
-
-    &.active {
-        border-left: solid 2px $primary-color;
-    }
-
-    &.hidden {
-        display: none;
     }
 }
 
@@ -201,7 +175,8 @@ div.reconnect-wrapper {
     display: flex;
     align-items: center;
     background-color: $inactive-input-color;
-    border-radius: $border-radius;
+    border: 1px solid $inactive-input-border-color;
+    border-radius: 3px;
 
     .feather-icon {
         margin-right: 10px;
@@ -216,12 +191,13 @@ div.room-wrapper {
     display: flex;
     height: 100%;
     flex-direction: column;  
+    box-shadow: $inset-shadow;
     padding: 5px;
 }
 
 div.typing-wrapper {
     padding: 5px;
-    height: 1em;
+    height: 12px;
     flex-shrink: 0;
 }
 
@@ -241,7 +217,7 @@ div.message-wrapper {
         margin: 3px;
         height: 40px;
         width: 40px;
-        transition: background-color $transition-duration;
+        border-radius: 50px;
     }
 }
 
@@ -316,13 +292,13 @@ div.message {
         box-sizing: border-box;
         padding: 10px;
         background-color: $background-color-dark;
-        border-radius: $border-radius;
+        border-radius: 3px;
         box-shadow: $inset-shadow;
     }
 }
 
 span.sender-wrapper {
-    border-radius: $border-radius;
+    border-radius: 3px;
     padding-left: 5px;
     padding-right: 5px;
     display: inline-block;