Wire up the search bar.

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

@@ -91,7 +91,13 @@ roomListView m =
     in
         div [ class "rooms-wrapper" ]
             [ h2 [] [ text "Rooms" ]
-            , input [ class "room-search", type_ "text", placeholder "Search chats..." ] []
+            , input
+                [ class "room-search"
+                , type_ "text"
+                , placeholder "Search chats..."
+                , onInput UpdateSearchText 
+                , value m.searchText
+                ] []
             , homeserverList
             ]
 
@@ -111,6 +117,7 @@ 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
@@ -118,6 +125,7 @@ roomListElementView m s jr =
         div [ classList
                 [ ("room-link-wrapper", True)
                 , ("active", isCurrentRoom)
+                , ("hidden", not isVisible)
                 ]
             ]
             [ a [ href <| roomUrl s ] [ text name ]

static/scss/style.scss

@@ -172,7 +172,7 @@ div.room-link-wrapper {
     padding-left: 5px;
     margin: 3px;
     align-items: center;
-
+    
     span, a {
         margin-right: 5px;
         color: lightgrey;
@@ -186,6 +186,10 @@ div.room-link-wrapper {
     &.active {
         border-left: solid 2px $primary-color;
     }
+
+    &.hidden {
+        display: none;
+    }
 }
 
 div.reconnect-wrapper {