ui: Refactor page view/framing to handle titles

ui/src/Main.elm

@@ -255,10 +255,7 @@ setRoute route model =
 
                 Route.Status ->
                     ( { model | page = Status Status.init }
-                    , Cmd.batch
-                        [ Ports.windowTitle "Inbucket Status"
                     , Cmd.map StatusMsg Status.load
-                        ]
                     , Session.none
                     )
     in
@@ -313,27 +310,30 @@ view model =
             , recentActive = mailbox
             }
 
-        frame =
+        framePage :
-            Page.frame controls model.session
+            ActivePage
+            -> (msg -> Msg)
+            -> { title : String, content : Html msg }
+            -> Document Msg
+        framePage page toMsg { title, content } =
+            Document title
+                [ content
+                    |> Html.map toMsg
+                    |> Page.frame controls model.session page
+                ]
     in
-    Document "Inbucket Document"
+    case model.page of
-        [ case model.page of
         Home subModel ->
-                Html.map HomeMsg (Home.view model.session subModel)
+            framePage Page.Other HomeMsg (Home.view model.session subModel)
-                    |> frame Page.Other
 
         Mailbox subModel ->
-                Html.map MailboxMsg (Mailbox.view model.session subModel)
+            framePage Page.Mailbox MailboxMsg (Mailbox.view model.session subModel)
-                    |> frame Page.Mailbox
 
         Monitor subModel ->
-                Html.map MonitorMsg (Monitor.view model.session subModel)
+            framePage Page.Monitor MonitorMsg (Monitor.view model.session subModel)
-                    |> frame Page.Monitor
 
         Status subModel ->
-                Html.map StatusMsg (Status.view model.session subModel)
+            framePage Page.Status StatusMsg (Status.view model.session subModel)
-                    |> frame Page.Status
-        ]
 
 
 

ui/src/Page/Home.elm

@@ -19,12 +19,7 @@ type alias Model =
 
 init : ( Model, Cmd Msg )
 init =
-    ( Model ""
+    ( Model "", cmdGreeting )
-    , Cmd.batch
-        [ Ports.windowTitle "Inbucket"
-        , cmdGreeting
-        ]
-    )
 
 
 cmdGreeting : Cmd Msg
@@ -57,8 +52,10 @@ update session msg model =
 -- VIEW --
 
 
-view : Session -> Model -> Html Msg
+view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
+    { title = "Inbucket"
+    , content =
         div [ id "page" ]
             [ Html.node "rendered-html"
                 [ class "greeting"
@@ -66,3 +63,4 @@ view session model =
                 ]
                 []
             ]
+    }

ui/src/Page/Mailbox.elm

@@ -87,8 +87,7 @@ init mailboxName selection =
 load : String -> Cmd Msg
 load mailboxName =
     Cmd.batch
-        [ Ports.windowTitle (mailboxName ++ " - Inbucket")
+        [ Task.perform Tick Time.now
-        , Task.perform Tick Time.now
         , getList mailboxName
         ]
 
@@ -463,8 +462,10 @@ getMessage mailboxName id =
 -- VIEW
 
 
-view : Session -> Model -> Html Msg
+view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
+    { title = model.mailboxName ++ " - Inbucket"
+    , content =
         div [ id "page", class "mailbox" ]
             [ viewMessageList session model
             , main_
@@ -486,6 +487,7 @@ view session model =
                         text ""
                 ]
             ]
+    }
 
 
 viewMessageList : Session -> Model -> Html Msg

ui/src/Page/Monitor.elm

@@ -32,12 +32,7 @@ type alias Model =
 
 init : ( Model, Cmd Msg )
 init =
-    ( Model False []
+    ( Model False [], Ports.monitorCommand True )
-    , Cmd.batch
-        [ Ports.windowTitle "Inbucket Monitor"
-        , Ports.monitorCommand True
-        ]
-    )
 
 
 
@@ -95,8 +90,10 @@ update session msg model =
 -- VIEW
 
 
-view : Session -> Model -> Html Msg
+view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
+    { title = "Inbucket Monitor"
+    , content =
         div [ id "page" ]
             [ h1 [] [ text "Monitor" ]
             , p []
@@ -121,6 +118,7 @@ view session model =
                 , tbody [] (List.map viewMessage model.messages)
                 ]
             ]
+    }
 
 
 viewMessage : MessageHeader -> Html Msg

ui/src/Page/Status.elm

@@ -217,8 +217,10 @@ getMetrics =
 -- VIEW --
 
 
-view : Session -> Model -> Html Msg
+view : Session -> Model -> { title : String, content : Html Msg }
 view session model =
+    { title = "Inbucket Status"
+    , content =
         div [ id "page" ]
             [ h1 [] [ text "Status" ]
             , case model.metrics of
@@ -249,6 +251,7 @@ view session model =
                             ]
                         ]
             ]
+    }
 
 
 viewMetric : Metric -> Html Msg

ui/src/Ports.elm

@@ -3,7 +3,6 @@ port module Ports exposing
     , monitorMessage
     , onSessionChange
     , storeSession
-    , windowTitle
     )
 
 import Data.Session exposing (Persistent)
@@ -20,6 +19,3 @@ port onSessionChange : (Value -> msg) -> Sub msg
 
 
 port storeSession : Persistent -> Cmd msg
-
-
-port windowTitle : String -> Cmd msg

ui/src/index.js

@@ -34,8 +34,3 @@ function sessionObject() {
   }
   return null
 }
-
-// Window title.
-app.ports.windowTitle.subscribe(function (title) {
-  document.title = title
-})