ui: Implement clear button on monitor

ui/src/Page/Monitor.elm

@@ -34,6 +34,7 @@ init session =
 type Msg
     = Connected Bool
     | MessageReceived D.Value
+    | Clear
     | OpenMessage MessageHeader
 
 
@@ -64,6 +65,9 @@ update msg model =
                     , Cmd.none
                     )
 
+        Clear ->
+            ( { model | messages = [] }, Cmd.none )
+
         OpenMessage header ->
             ( model
             , Route.pushUrl model.session.key (Route.Message header.mailbox header.id)
@@ -80,16 +84,21 @@ view model =
     , modal = Nothing
     , content =
         [ h1 [] [ text "Monitor" ]
-        , p []
+        , div [ class "monitor-header" ]
-            [ text "Messages will be listed here shortly after delivery. "
+            [ span [ class "monitor-description" ]
-            , em []
+                [ text "Messages will be listed here shortly after delivery. "
-                [ text
+                , em []
-                    (if model.connected then
+                    [ text
-                        "Connected."
+                        (if model.connected then
+                            "Connected."
 
-                     else
+                         else
-                        "Disconnected!"
+                            "Disconnected!"
-                    )
+                        )
+                    ]
+                ]
+            , span [ class "button-bar monitor-buttons" ]
+                [ button [ Events.onClick Clear ] [ text "Clear" ]
                 ]
             ]
         , node "monitor-messages"

ui/src/main.css

@@ -538,6 +538,16 @@ nav.tab-bar a.active:hover {
 
 /** MONITOR **/
 
+.monitor-header {
+  display: flex;
+  width: 100%;
+}
+
+.monitor-description {
+  display: inline-block;
+  margin-right: auto;
+}
+
 .monitor {
   border-collapse: collapse;
   width: 100%;