fix: render local-timezone dates client-side only

- started-tournament header and tournament list formatted times in the
  server timezone during ssr, mismatching hydration on every load

src/features/tournaments/components/started-tournament/header.tsx

@@ -2,11 +2,15 @@ import { Group, Stack, ThemeIcon, Text } from "@mantine/core";
 import { Tournament } from "../../types";
 import { CalendarIcon, MapPinIcon, TrophyIcon } from "@phosphor-icons/react";
 import { useMemo } from "react";
+import { useMounted } from "@mantine/hooks";
 import { Trans, useLingui } from "@lingui/react/macro";
 import GlitchAvatar from "@/components/glitch-avatar";
 
 const Header = ({ tournament }: { tournament: Tournament }) => {
   const { i18n } = useLingui();
+  // Local-timezone text cannot be server-rendered: the pod formats in UTC and
+  // hydration mismatches on every load.
+  const mounted = useMounted();
   const tournamentStart = useMemo(
     () => new Date(tournament.start_time),
     [tournament.start_time]
@@ -48,18 +52,20 @@ const Header = ({ tournament }: { tournament: Tournament }) => {
             <CalendarIcon size={14} />
           </ThemeIcon>
           <Text size="sm" c="dimmed" lineClamp={1}>
-            <Trans>
-              {tournamentStart.toLocaleDateString(i18n.locale, {
-                weekday: "short",
-                month: "short",
-                day: "numeric",
-              })}{" "}
-              at{" "}
-              {tournamentStart.toLocaleTimeString(i18n.locale, {
-                hour: "2-digit",
-                minute: "2-digit",
-              })}
-            </Trans>
+            {mounted && (
+              <Trans>
+                {tournamentStart.toLocaleDateString(i18n.locale, {
+                  weekday: "short",
+                  month: "short",
+                  day: "numeric",
+                })}{" "}
+                at{" "}
+                {tournamentStart.toLocaleTimeString(i18n.locale, {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </Trans>
+            )}
           </Text>
         </Group>
       </Stack>

src/features/tournaments/components/tournament-list.tsx

@@ -5,6 +5,7 @@ import { TournamentInfo } from "../types";
 import { Fragment, useCallback } from "react";
 import React from "react";
 import { TrophyIcon, CalendarIcon, MapPinIcon } from "@phosphor-icons/react";
+import { useMounted } from "@mantine/hooks";
 import { Trans, useLingui } from "@lingui/react/macro";
 
 interface TournamentListProps {
@@ -18,6 +19,7 @@ interface TournamentListItemProps {
 
 const TournamentListItem = React.memo(({ tournament }: TournamentListItemProps) => {
   const { i18n } = useLingui();
+  const mounted = useMounted();
   const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
 
   return (
@@ -43,11 +45,12 @@ const TournamentListItem = React.memo(({ tournament }: TournamentListItemProps)
                 <CalendarIcon size={10} />
               </ThemeIcon>
               <Text size="xs" c="dimmed">
-                {startDate.toLocaleDateString(i18n.locale, {
-                  month: 'short',
-                  day: 'numeric',
-                  year: 'numeric'
-                })}
+                {mounted &&
+                  startDate.toLocaleDateString(i18n.locale, {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric'
+                  })}
               </Text>
             </Group>
           )}