Fix up room list's width.

src/Main.elm

@@ -53,6 +53,7 @@ init _ url key =
             , transactionId = 0
             , userData = Dict.empty
             , connected = True
+            , searchText = ""
             }
         cmd = getStoreValuePort "scylla.loginInfo"
     in
@@ -105,6 +106,7 @@ 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,6 +32,7 @@ type alias Model =
     , transactionId : Int
     , userData : Dict Username UserData
     , connected : Bool
+    , searchText : String
     }
 
 type Msg =
@@ -68,6 +69,7 @@ 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)
+import Html.Attributes exposing (type_, placeholder, value, href, class, style, src, id, rows, controls, src, classList)
 import Html.Events exposing (onInput, onClick, preventDefaultOn)
 import Dict exposing (Dict)
 import Tuple
@@ -91,6 +91,13 @@ 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
             ]
 
@@ -110,8 +117,17 @@ 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 [ class "room-link-wrapper" ]
+        div [ classList
+                [ ("room-link-wrapper", True)
+                , ("active", isCurrentRoom)
+                , ("hidden", not isVisible)
+                ]
+            ]
             [ a [ href <| roomUrl s ] [ text name ]
             , roomNotificationCountView jr.unreadNotifications
             ]
@@ -156,6 +172,7 @@ 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" ]
@@ -166,8 +183,8 @@ joinedRoomView m roomId rd =
         div [ class "room-wrapper" ]
             [ h2 [] [ text <| roomDisplayName m rd.joinedRoom ]
             , messagesWrapper
-            , typingWrapper
             , messageInput
+            , typingWrapper
             ]
 
 onEnterKey : Msg -> Attribute Msg

static/scss/style.scss

@@ -2,23 +2,20 @@
 $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%);
 
-$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;
+$transition-duration: .250s;
 
 $inset-shadow: inset 0px 0px 5px rgba(0, 0, 0, .25);
 
+$border-radius: 3px;
+
 html, body {
     height: 100vh;
 }
@@ -33,23 +30,27 @@ body {
 
 @mixin input-common {
     padding: 5px;
-    border-radius: 3px;
+    border-radius: $border-radius;
     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: .5px solid $inactive-input-border-color;
+    border: none;
+    padding: 10px;
 
     &:focus {
         background-color: $active-input-color;
-        border-color: $active-input-border-color;
     }
 }
 
@@ -105,7 +106,6 @@ 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,16 +155,42 @@ 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;
     }
 }
 
@@ -175,8 +201,7 @@ div.reconnect-wrapper {
     display: flex;
     align-items: center;
     background-color: $inactive-input-color;
-    border: 1px solid $inactive-input-border-color;
-    border-radius: 3px;
+    border-radius: $border-radius;
 
     .feather-icon {
         margin-right: 10px;
@@ -191,13 +216,12 @@ div.room-wrapper {
     display: flex;
     height: 100%;
     flex-direction: column;  
-    box-shadow: $inset-shadow;
     padding: 5px;
 }
 
 div.typing-wrapper {
     padding: 5px;
-    height: 12px;
+    height: 1em;
     flex-shrink: 0;
 }
 
@@ -217,7 +241,7 @@ div.message-wrapper {
         margin: 3px;
         height: 40px;
         width: 40px;
-        border-radius: 50px;
+        transition: background-color $transition-duration;
     }
 }
 
@@ -292,13 +316,13 @@ div.message {
         box-sizing: border-box;
         padding: 10px;
         background-color: $background-color-dark;
-        border-radius: 3px;
+        border-radius: $border-radius;
         box-shadow: $inset-shadow;
     }
 }
 
 span.sender-wrapper {
-    border-radius: 3px;
+    border-radius: $border-radius;
     padding-left: 5px;
     padding-right: 5px;
     display: inline-block;