feat(chat): shot timestamp in correct timezone

assets/js/app.js

@@ -25,7 +25,10 @@ import topbar from "../vendor/topbar"
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
-  params: {_csrf_token: csrfToken}
+  params: {
+    _csrf_token: csrfToken,
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  }
 })
 
 // Show progress bar on live navigation and form submits

lib/slax_web/live/chat_room_live.ex

@@ -87,7 +87,12 @@ defmodule SlaxWeb.ChatRoomLive do
         </ul>
       </div>
       <div id="room-messages" class="flex flex-col flex-grow overflow-auto" phx-update="stream">
-        <.message :for={{dom_id, message} <- @streams.messages} dom_id={dom_id} message={message} />
+        <.message
+          :for={{dom_id, message} <- @streams.messages}
+          dom_id={dom_id}
+          message={message}
+          timezone={@timezone}
+        />
       </div>
       <div class="h-12 bg-white px-4 pb-4">
         <.form
@@ -119,7 +124,9 @@ defmodule SlaxWeb.ChatRoomLive do
   def mount(_params, _session, socket) do
     rooms = Chat.list_rooms()
 
-    {:ok, assign(socket, hide_topic?: false, rooms: rooms)}
+    timezone = get_connect_params(socket)["timezone"]
+
+    {:ok, assign(socket, hide_topic?: false, rooms: rooms, timezone: timezone)}
   end
 
   @impl Phoenix.LiveView
@@ -194,6 +201,7 @@ defmodule SlaxWeb.ChatRoomLive do
 
   attr :dom_id, :string, required: true
   attr :message, Message, required: true
+  attr :timezone, :string, required: true
 
   defp message(assigns) do
     ~H"""
@@ -204,7 +212,9 @@ defmodule SlaxWeb.ChatRoomLive do
           <.link class="text-sm font-semibold hover:underline">
             <span><%= username(@message.user) %></span>
           </.link>
-          <span class="ml-1 text-xs text-gray-500"><%= message_timestamp(@message) %></span>
+          <span :if={@timezone} class="ml-1 text-xs text-gray-500">
+            <%= message_timestamp(@message, @timezone) %>
+          </span>
           <p class="text-sm"><%= @message.body %></p>
         </div>
       </div>
@@ -216,8 +226,10 @@ defmodule SlaxWeb.ChatRoomLive do
     user.email |> String.split("@") |> List.first() |> String.capitalize()
   end
 
-  defp message_timestamp(message) do
-    Timex.format!(message.inserted_at, "%-l:%M %p", :strftime)
+  defp message_timestamp(message, timezone) do
+    message.inserted_at
+    |> Timex.Timezone.convert(timezone)
+    |> Timex.format!("%-l:%M %p", :strftime)
   end
 
   defp assign_message_form(socket, changeset) do