Add a button to reconnect.

src/Main.elm

@@ -49,6 +49,7 @@ init _ url key =
             , roomText = Dict.empty
             , transactionId = 0
             , userData = Dict.empty
+            , connected = True
             }
         cmd = getStoreValuePort "scylla.loginInfo"
     in
@@ -94,6 +95,7 @@ update msg model = case msg of
     SendFileResponse _ -> (model, Cmd.none)
     ReceiveMarkdown md -> updateMarkdown model md
     DismissError i -> updateDismissError model i
+    AttemptReconnect -> ({ model | connected = True }, firstSync model.apiUrl (Maybe.withDefault "" model.token))
 
 updateDismissError : Model -> Int -> (Model, Cmd Msg)
 updateDismissError m i = ({ m | errors = (List.take i m.errors) ++ (List.drop (i+1) m.errors)}, Cmd.none)
@@ -236,7 +238,7 @@ updateViewportAfterMessage m vr =
 updateUserData : Model -> String -> Result Http.Error UserData -> (Model, Cmd Msg)
 updateUserData m s r = case r of
     Ok ud -> ({ m | userData = Dict.insert s ud m.userData }, Cmd.none)
-    Err e -> ({ m | errors = ("Failed to retrieve user data for user " ++ s)::m.errors }, userData m.apiUrl (Maybe.withDefault "" m.token) s)
+    Err e -> ({ m | errors = ("Failed to retrieve user data for user " ++ s)::m.errors }, Cmd.none)
 
 updateSendRoomText : Model -> RoomId -> (Model, Cmd Msg)
 updateSendRoomText m r =
@@ -319,7 +321,7 @@ updateSyncResponse model r notify =
                 , setScrollCmd sr
                 , setReadReceiptCmd sr
                 ])
-            _ -> (model, syncCmd)
+            _ -> ({ model | connected = False }, Cmd.none)
 
 subscriptions : Model -> Sub Msg
 subscriptions m =

src/Scylla/Model.elm

@@ -29,6 +29,7 @@ type alias Model =
     , roomText : Dict String String
     , transactionId : Int
     , userData : Dict Username UserData
+    , connected : Bool
     }
 
 type Msg =
@@ -64,6 +65,7 @@ type Msg =
     | SendFileResponse (Result Http.Error ())
     | ReceiveMarkdown MarkdownResponse
     | DismissError Int
+    | AttemptReconnect
 
 displayName : Model -> Username -> String
 displayName m s = Maybe.withDefault (senderName s) <| Maybe.andThen .displayName <| Dict.get s m.userData

src/Scylla/Views.elm

@@ -18,6 +18,9 @@ import Html.Events exposing (onInput, onClick, preventDefaultOn)
 import Dict exposing (Dict)
 import Tuple
 
+maybeHtml : List (Maybe (Html Msg)) -> List (Html Msg)
+maybeHtml = List.filterMap (\i -> i)
+
 contentRepositoryDownloadUrl : ApiUrl -> String -> String
 contentRepositoryDownloadUrl apiUrl s =
     let
@@ -59,14 +62,19 @@ errorView i s = div [ class "error-wrapper", onClick <| DismissError i ] [ iconV
 baseView : Model -> Maybe (String, JoinedRoom) -> Html Msg
 baseView m jr = 
     let
-        roomView = case jr of
+        roomView = Maybe.map (\(id, r) -> joinedRoomView m id r) jr
-            Just (id, r) -> joinedRoomView m id r
+        reconnect = reconnectView m
-            Nothing -> div [] []
     in
-        div [ class "base-wrapper" ]
+        div [ class "base-wrapper" ] <| maybeHtml
-        [ roomListView m
+            [ Just <| roomListView m
-        , roomView
+            , roomView
-        ]
+            , reconnect
+            ]
+
+reconnectView : Model -> Maybe (Html Msg)
+reconnectView m = if m.connected
+    then Nothing
+    else Just <| div [ class "reconnect-wrapper", onClick AttemptReconnect ] [ iconView "zap", text "Disconnected. Click here to reconnect." ]
 
 roomListView : Model -> Html Msg
 roomListView m =

static/scss/style.scss

@@ -2,17 +2,20 @@
 $primary-color: #53C0FA;
 $primary-color-highlight: #4298C7;
 $primary-color-light: #9FDBFB;
-$active-input-color: #282d30;
+
 $background-color: #1b1e21;
 $background-color-dark: darken($background-color, 4%);
+
 $error-color: #f01d43;
 $error-color-dark: darken(#f01d43, 10%);
-$transition-duration: .125s;
 
-$inactive-input-color: darken($active-input-color, 3%);
+$active-input-color: #282d30;
 $active-input-border-color: $primary-color;
+$inactive-input-color: darken($active-input-color, 3%);
 $inactive-input-border-color: darken($inactive-input-color, 10%);
 
+$transition-duration: .125s;
+
 html, body {
     height: 100vh;
 }
@@ -160,6 +163,21 @@ div.room-link-wrapper {
     }
 }
 
+div.reconnect-wrapper {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    background-color: $inactive-input-color;
+    border: 1px solid $inactive-input-border-color;
+    border-radius: 3px;
+
+    .feather-icon {
+        margin-right: 10px;
+    }
+}
+
 /*
  * The current room, if any.
  */
@@ -229,7 +247,9 @@ table.events-table {
 
     td:nth-child(1) {
         width: 10%;
-        max-width: 100px;
+        @media screen and (min-width: 1000px) {
+            width: 100px;
+        }
         white-space: nowrap;
     }