Render dates and times in the viewer's local timezone

assets/js/app.js

@@ -21,13 +21,10 @@ import Flash from "./hooks/flash.js"
 import HighlightCode from "./hooks/highlightCode.js"
 import { LiveFlowHook } from "live_flow"
 import LocalShell from "./hooks/localShell.js"
-import LocalTime from "./hooks/localTime.js"
-import LogLineLocalTime from "./hooks/logLineLocalTime.js"
 import PageVisible from "./hooks/pageVisible.js"
 import ScriptAutocomplete from "./hooks/scriptAutocomplete.js"
 import SharedSecretClipboardClick from "./hooks/sharedSecretClipboardClick.js"
 import SidebarToggle from "./hooks/sidebarToggle.js"
-import SimpleDate from "./hooks/simpleDate.js"
 import SupportScriptOutput from "./hooks/supportScriptOutput.js"
 import TagAutocomplete from "./hooks/tagAutocomplete.js"
 import ThemeSwitcher from "./hooks/themeSwitcher.js"
@@ -36,7 +33,6 @@ import UpdatingTimeAgo from "./hooks/updatingTimeAgo.js"
 import WorkflowDiagramFit from "./hooks/workflowDiagramFit.js"
 import WorldMap from "./hooks/worldMap.js"
 
-import dates from "./helpers/dates"
 
 TimeAgo.addDefaultLocale(en)
 
@@ -53,6 +49,12 @@ let csrfToken = document
 let time_zone = Intl.DateTimeFormat().resolvedOptions().timeZone
 let timezone_offset = -(new Date().getTimezoneOffset() / 60)
 
+// The connect params only reach the server once the LiveView connects, so the
+// static first render has no idea what zone to use. Persisting it here lets
+// NervesHubWeb.Plugs.Timezone put it in the session, and the first paint is
+// already local rather than UTC that flips an instant later.
+document.cookie = `time_zone=${encodeURIComponent(time_zone)}; path=/; max-age=31536000; SameSite=Lax`
+
 let liveSocket = new LiveSocket("/live", Socket, {
   params: {
     _csrf_token: csrfToken,
@@ -74,13 +76,10 @@ let liveSocket = new LiveSocket("/live", Socket, {
     HighlightCode,
     LiveFlow: LiveFlowHook,
     LocalShell,
-    LocalTime,
-    LogLineLocalTime,
     PageVisible,
     SharedSecretClipboardClick,
     SidebarToggle,
     ScriptAutocomplete,
-    SimpleDate,
     SupportScriptOutput,
     TagAutocomplete,
     ThemeSwitcher,
@@ -146,10 +145,6 @@ const delayedConnectionClosedAlert = () => {
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
-document.querySelectorAll(".date-time").forEach((d) => {
-  d.innerHTML = dates.formatDateTime(d.innerHTML)
-})
-
 window.addEventListener("ca:edit:jitp", () => {
   const checked = document.getElementById("jitp_toggle_ui").checked
 

assets/package.json

@@ -25,7 +25,6 @@
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
     "mapbox-gl": "^3.18.1",
-    "moment": "^2.29.4",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",

lib/nerves_hub_web.ex

@@ -89,6 +89,7 @@ defmodule NervesHubWeb do
   defp live_view_imports() do
     quote do
       import NervesHubWeb.Components.Breadcrumb
+      import NervesHubWeb.Components.DateTimes
       import NervesHubWeb.Components.Icons
       import NervesHubWeb.CoreComponents, only: [button: 1, input: 1, tag_input: 1, core_label: 1, error: 1, logo: 1]
       import NervesHubWeb.Helpers.Authorization
@@ -164,6 +165,7 @@ defmodule NervesHubWeb do
     quote do
       use Phoenix.LiveComponent
 
+      import NervesHubWeb.Components.DateTimes
       import NervesHubWeb.Components.Icons
       import NervesHubWeb.CoreComponents, only: [button: 1, input: 1, tag_input: 1, core_label: 1, error: 1, logo: 1]
       import NervesHubWeb.Helpers.Authorization
@@ -250,6 +252,7 @@ defmodule NervesHubWeb do
     quote do
       use Phoenix.Component
 
+      import NervesHubWeb.Components.DateTimes
       import NervesHubWeb.Components.Icons
       import NervesHubWeb.CoreComponents, only: [button: 1, input: 1, tag_input: 1, core_label: 1, error: 1, logo: 1]
 
@@ -285,6 +288,7 @@ defmodule NervesHubWeb do
 
   defp hooked_component_imports() do
     quote do
+      import NervesHubWeb.Components.DateTimes
       import NervesHubWeb.Components.Icons
       import NervesHubWeb.CoreComponents, only: [button: 1, input: 1, tag_input: 1, core_label: 1, error: 1, logo: 1]
       import NervesHubWeb.Helpers.Authorization