ui: Add friendly date to Mailbox message view

- Refactor some date stuff

ui/src/Page/Mailbox.elm

@@ -5,6 +5,7 @@ import Data.MessageHeader as MessageHeader exposing (MessageHeader)
 import Data.Session as Session exposing (Session)
 import Date exposing (Date)
 import DateFormat.Relative as Relative
+import DateFormat
 import Json.Decode as Decode exposing (Decoder)
 import Html exposing (..)
 import Html.Attributes
@@ -538,7 +539,7 @@ viewMessage message bodyMode =
                 , dt [] [ text "To:" ]
                 , dd [] (List.map text message.to)
                 , dt [] [ text "Date:" ]
-                , dd [] [ text message.date ]
+                , dd [] [ verboseDate message.date ]
                 , dt [] [ text "Subject:" ]
                 , dd [] [ text message.subject ]
                 ]
@@ -615,6 +616,27 @@ relativeDate model date =
     Relative.relativeTime model.now date |> text
 
 
+verboseDate : Date -> Html Msg
+verboseDate date =
+    DateFormat.format
+        [ DateFormat.monthNameFull
+        , DateFormat.text " "
+        , DateFormat.dayOfMonthSuffix
+        , DateFormat.text ", "
+        , DateFormat.yearNumber
+        , DateFormat.text " "
+        , DateFormat.hourNumber
+        , DateFormat.text ":"
+        , DateFormat.minuteFixed
+        , DateFormat.text ":"
+        , DateFormat.secondFixed
+        , DateFormat.text " "
+        , DateFormat.amPmUppercase
+        ]
+        date
+        |> text
+
+
 
 -- UTILITY
 

ui/src/Page/Monitor.elm

@@ -94,19 +94,15 @@ view session model =
 viewMessage : MessageHeader -> Html Msg
 viewMessage message =
     tr [ Events.onClick (OpenMessage message) ]
-        [ td [] [ text (timestamp message.date) ]
+        [ td [] [ shortDate message.date ]
         , td [ class "desktop" ] [ text message.from ]
         , td [] [ text message.mailbox ]
         , td [] [ text message.subject ]
         ]
 
 
-
--- UTILITY
-
-
-timestamp : Date -> String
-timestamp =
+shortDate : Date -> Html Msg
+shortDate date =
     format
         [ dayOfMonthFixed
         , DateFormat.text "-"
@@ -118,3 +114,5 @@ timestamp =
         , DateFormat.text " "
         , amPmUppercase
         ]
+        date
+        |> text