diff --git a/src/app/RootLayout.tsx b/src/app/RootLayout.tsx index 9c5ee59..7e942e1 100644 --- a/src/app/RootLayout.tsx +++ b/src/app/RootLayout.tsx @@ -6,7 +6,7 @@ import type { LucideIcon } from 'lucide-react'; import { useUiStore } from '@/stores/uiStore'; import { useLocaleStore } from '@/stores/localeStore'; import { useTournamentStore } from '@/stores/tournamentStore'; -import { useT, type Dict } from '@/lib/i18n'; +import { fmt, useFormat, useT, type Dict } from '@/lib/i18n'; import { cn } from '@/lib/cn'; interface NavItem { to: string; label: (t: Dict) => string; exact: boolean; icon: LucideIcon } @@ -88,6 +88,19 @@ export function LanguageToggle() { ); } +/** Slim stale-data notice while the live connection is down. */ +function OfflineBanner() { + const { t, kickoffDay, kickoffTime } = useFormat(); + const status = useTournamentStore((s) => s.status); + const generatedAt = useTournamentStore((s) => s.snapshot?.generatedAt); + if (status !== 'offline' || !generatedAt) return null; + return ( +
+ {fmt(t.common.offlineBanner, { time: `${kickoffDay(generatedAt)} ${kickoffTime(generatedAt)}` })} +
+ ); +} + function MobileNav() { const t = useT(); const [moreOpen, setMoreOpen] = useState(false); @@ -221,6 +234,8 @@ export function RootLayout() { + +
diff --git a/src/lib/i18n/de.ts b/src/lib/i18n/de.ts index f279af7..d8d4de8 100644 --- a/src/lib/i18n/de.ts +++ b/src/lib/i18n/de.ts @@ -22,6 +22,7 @@ export const de: Dict = { connected: "Verbunden", liveVia: "Live · {source}", offlineShowingSchedule: "Offline — Spielplan wird angezeigt", + offlineBanner: "Offline — letzte Daten von {time}. Verbinde neu…", switchToLightMode: "Zum hellen Modus wechseln", switchToDarkMode: "Zum dunklen Modus wechseln", draw: "Unentschieden", diff --git a/src/lib/i18n/en.ts b/src/lib/i18n/en.ts index 520542a..cf394be 100644 --- a/src/lib/i18n/en.ts +++ b/src/lib/i18n/en.ts @@ -21,6 +21,7 @@ export const en = { connected: "Connected", liveVia: "Live · {source}", offlineShowingSchedule: "Offline — showing the schedule", + offlineBanner: "Offline — showing the last data from {time}. Reconnecting…", switchToLightMode: "Switch to light mode", switchToDarkMode: "Switch to dark mode", draw: "Draw",