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>
+            {mounted && (
-              {tournamentStart.toLocaleDateString(i18n.locale, {
+              <Trans>
-                weekday: "short",
+                {tournamentStart.toLocaleDateString(i18n.locale, {
-                month: "short",
+                  weekday: "short",
-                day: "numeric",
+                  month: "short",
-              })}{" "}
+                  day: "numeric",
-              at{" "}
+                })}{" "}
-              {tournamentStart.toLocaleTimeString(i18n.locale, {
+                at{" "}
-                hour: "2-digit",
+                {tournamentStart.toLocaleTimeString(i18n.locale, {
-                minute: "2-digit",
+                  hour: "2-digit",
-              })}
+                  minute: "2-digit",
-            </Trans>
+                })}
+              </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, {
+                {mounted &&
-                  month: 'short',
+                  startDate.toLocaleDateString(i18n.locale, {
-                  day: 'numeric',
+                    month: 'short',
-                  year: 'numeric'
+                    day: 'numeric',
-                })}
+                    year: 'numeric'
+                  })}
               </Text>
             </Group>
           )}

src/locales/de/messages.po

@@ -93,7 +93,7 @@ msgstr "{0, plural, one {Spieler angemeldet} other {Spieler angemeldet}}"
 
 #. placeholder {0}: tournamentStart.toLocaleDateString(i18n.locale, { weekday: "short", month: "short", day: "numeric", })
 #. placeholder {1}: tournamentStart.toLocaleTimeString(i18n.locale, { hour: "2-digit", minute: "2-digit", })
-#: src/features/tournaments/components/started-tournament/header.tsx:51
+#: src/features/tournaments/components/started-tournament/header.tsx:56
 msgid "{0} at {1}"
 msgstr "{0} um {1}"
 
@@ -1843,7 +1843,7 @@ msgstr "Noch keine Teams angemeldet"
 msgid "No teams found matching \"{search}\""
 msgstr "Keine Teams gefunden, die zu \"{search}\" passen"
 
-#: src/features/tournaments/components/tournament-list.tsx:95
+#: src/features/tournaments/components/tournament-list.tsx:98
 msgid "No tournaments found"
 msgstr "Keine Turniere gefunden"
 

src/locales/en/messages.po

@@ -93,7 +93,7 @@ msgstr "{0, plural, one {player enrolled} other {players enrolled}}"
 
 #. placeholder {0}: tournamentStart.toLocaleDateString(i18n.locale, { weekday: "short", month: "short", day: "numeric", })
 #. placeholder {1}: tournamentStart.toLocaleTimeString(i18n.locale, { hour: "2-digit", minute: "2-digit", })
-#: src/features/tournaments/components/started-tournament/header.tsx:51
+#: src/features/tournaments/components/started-tournament/header.tsx:56
 msgid "{0} at {1}"
 msgstr "{0} at {1}"
 
@@ -1843,7 +1843,7 @@ msgstr "No teams enrolled yet"
 msgid "No teams found matching \"{search}\""
 msgstr "No teams found matching \"{search}\""
 
-#: src/features/tournaments/components/tournament-list.tsx:95
+#: src/features/tournaments/components/tournament-list.tsx:98
 msgid "No tournaments found"
 msgstr "No tournaments found"
 

src/locales/es/messages.po

@@ -93,7 +93,7 @@ msgstr "{0, plural, one {jugador inscrito} other {jugadores inscritos}}"
 
 #. placeholder {0}: tournamentStart.toLocaleDateString(i18n.locale, { weekday: "short", month: "short", day: "numeric", })
 #. placeholder {1}: tournamentStart.toLocaleTimeString(i18n.locale, { hour: "2-digit", minute: "2-digit", })
-#: src/features/tournaments/components/started-tournament/header.tsx:51
+#: src/features/tournaments/components/started-tournament/header.tsx:56
 msgid "{0} at {1}"
 msgstr "{0} a las {1}"
 
@@ -1843,7 +1843,7 @@ msgstr "Aún no hay equipos inscritos"
 msgid "No teams found matching \"{search}\""
 msgstr "No se encontraron equipos que coincidan con \"{search}\""
 
-#: src/features/tournaments/components/tournament-list.tsx:95
+#: src/features/tournaments/components/tournament-list.tsx:98
 msgid "No tournaments found"
 msgstr "No se encontraron torneos"
 

src/locales/ja/messages.po

@@ -93,7 +93,7 @@ msgstr "{0, plural, one {人のプレイヤーが登録済み} other {人のプ
 
 #. placeholder {0}: tournamentStart.toLocaleDateString(i18n.locale, { weekday: "short", month: "short", day: "numeric", })
 #. placeholder {1}: tournamentStart.toLocaleTimeString(i18n.locale, { hour: "2-digit", minute: "2-digit", })
-#: src/features/tournaments/components/started-tournament/header.tsx:51
+#: src/features/tournaments/components/started-tournament/header.tsx:56
 msgid "{0} at {1}"
 msgstr "{0} {1}"
 
@@ -1843,7 +1843,7 @@ msgstr "まだチームが登録されていません"
 msgid "No teams found matching \"{search}\""
 msgstr "「{search}」に一致するチームが見つかりません"
 
-#: src/features/tournaments/components/tournament-list.tsx:95
+#: src/features/tournaments/components/tournament-list.tsx:98
 msgid "No tournaments found"
 msgstr "トーナメントが見つかりません"