ui: Style error flash, add close link

ui/src/Main.elm

@@ -60,13 +60,13 @@ init sessionValue location key =
 
 
 type Msg
-    = SetRoute Route
-    | UrlChanged Url
+    = UrlChanged Url
     | LinkClicked UrlRequest
-    | UpdateSession (Result D.Error Session.Persistent)
+    | SessionUpdated (Result D.Error Session.Persistent)
     | TimeZoneLoaded Time.Zone
     | OnMailboxNameInput String
     | ViewMailbox String
+    | SessionMsg Session.Msg
     | HomeMsg Home.Msg
     | MailboxMsg Mailbox.Msg
     | MonitorMsg Monitor.Msg
@@ -81,7 +81,7 @@ subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.batch
         [ pageSubscriptions model.page
-        , Sub.map UpdateSession sessionChange
+        , Sub.map SessionUpdated sessionChange
         ]
 
 
@@ -125,7 +125,7 @@ update msg model =
                             _ ->
                                 ( model
                                 , Nav.pushUrl model.session.key (Url.toString url)
-                                , Session.none
+                                , Session.ClearFlash
                                 )
 
                     Browser.External url ->
@@ -140,11 +140,10 @@ update msg model =
                     -- Skip once, but re-enable routing.
                     ( model, Cmd.none, Session.EnableRouting )
 
-            SetRoute route ->
-                -- Updates broser URL to requested route.
-                ( model, Route.pushUrl model.session.key route, Session.none )
+            SessionMsg sessionMsg ->
+                ( model, Cmd.none, sessionMsg )
 
-            UpdateSession (Ok persistent) ->
+            SessionUpdated (Ok persistent) ->
                 let
                     session =
                         model.session
@@ -154,10 +153,10 @@ update msg model =
                 , Session.none
                 )
 
-            UpdateSession (Err error) ->
+            SessionUpdated (Err error) ->
                 ( model
                 , Cmd.none
-                , Session.SetFlash ("Error decoding session: " ++ D.errorToString error)
+                , Session.SetFlash ("Error decoding session:\n" ++ D.errorToString error)
                 )
 
             TimeZoneLoaded zone ->
@@ -176,7 +175,7 @@ update msg model =
             ViewMailbox name ->
                 ( { model | mailboxName = "" }
                 , Route.pushUrl model.session.key (Route.Mailbox name)
-                , Session.none
+                , Session.ClearFlash
                 )
 
             _ ->
@@ -214,8 +213,8 @@ changeRouteTo route model =
     let
         ( newModel, newCmd, newSession ) =
             case route of
-                Route.Unknown hash ->
-                    ( model, Cmd.none, Session.SetFlash ("Unknown route requested: " ++ hash) )
+                Route.Unknown path ->
+                    ( model, Cmd.none, Session.SetFlash ("Unknown route requested: " ++ path) )
 
                 Route.Home ->
                     Home.init
@@ -293,6 +292,7 @@ view model =
             , mailboxValue = model.mailboxName
             , recentOptions = model.session.persistent.recentMailboxes
             , recentActive = mailbox
+            , clearFlash = SessionMsg Session.ClearFlash
             }
 
         framePage :

ui/src/Views/Page.elm

@@ -33,6 +33,7 @@ type alias FrameControls msg =
     , mailboxValue : String
     , recentOptions : List String
     , recentActive : String
+    , clearFlash : msg
     }
 
 
@@ -58,7 +59,7 @@ frame controls session page content =
                         ]
                     ]
                 ]
-            , div [] [ text ("Status: " ++ session.flash) ]
+            , errorFlash controls session.flash
             ]
         , div [ id "navbg" ] [ text "" ]
         , content
@@ -73,6 +74,21 @@ frame controls session page content =
         ]
 
 
+errorFlash : FrameControls msg -> String -> Html msg
+errorFlash controls message =
+    if message == "" then
+        text ""
+
+    else
+        div [ class "error" ]
+            [ div [ class "flash-header" ]
+                [ h2 [] [ text "Error" ]
+                , a [ href "#", Events.onClick controls.clearFlash ] [ text "Close" ]
+                ]
+            , pre [] [ text message ]
+            ]
+
+
 externalLink : String -> String -> Html a
 externalLink url title =
     a [ href url, target "_blank", rel "noopener" ] [ text title ]

ui/src/main.css

@@ -133,6 +133,30 @@ h1 {
   font-weight: 500;
 }
 
+.error {
+  background-color: #f58080;
+  background-image: linear-gradient(to bottom, #e86060 0, #f58080 100%);
+  border: 1px solid #e86060;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  padding: 4px 10px;
+  margin: 20px 0;
+}
+
+.error a {
+  color: #a00000;
+  font-weight: bold;
+}
+
+.error a:hover {
+  text-decoration: underline;
+}
+
+.flash-header {
+  display: flex;
+  justify-content: space-between;
+}
+
 .greeting {
   max-width: 1000px;
 }