German language option + a full wording-clarity pass

A tiny typed i18n layer (no library): en.ts is the single source of UI
copy and the clarity rewrite lives there — shorter sentences, plain
words, the dense Methodology/Scoreboard copy untangled. de.ts mirrors
its shape exactly, enforced by the compiler, with placeholder parity
covered by tests. Every page now reads from the dictionary via useT();
dates flip locale through useFormat() (en-GB/de-DE); raw server values
(status, outcome, stage) map through total records.

The header gains an EN/DE toggle (persisted, defaults from the
browser language); <html lang> stays in sync.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-06-12 00:20:07 +02:00
parent 92fdfdf398
commit 05010771a3
26 changed files with 1382 additions and 323 deletions
+8 -6
View File
@@ -1,23 +1,25 @@
import { Link } from '@tanstack/react-router';
import { cn } from '@/lib/cn';
import { teamFlag } from '@/lib/teams';
import { fmt, useT } from '@/lib/i18n';
import type { StandingRow } from '@/lib/types';
/** One group's standings. Top 2 qualify directly; 3rd may advance as a best-third. */
export function GroupTable({ group, rows }: { group: string; rows: StandingRow[] }) {
const t = useT();
return (
<div className="overflow-hidden rounded-xl border border-line bg-panel">
<div className="flex items-center justify-between border-b border-line px-3 py-2">
<span className="font-display text-sm font-bold text-ink">Group {group}</span>
<span className="smallcaps">Pld · Pts</span>
<span className="font-display text-sm font-bold text-ink">{fmt(t.common.group, { group })}</span>
<span className="smallcaps">{t.groups.tableHeaderPldPts}</span>
</div>
<table className="w-full border-collapse text-sm">
<thead>
<tr className="text-[11px] uppercase tracking-wide text-faint">
<th className="px-3 py-1.5 text-left font-semibold">Team</th>
<th className="w-8 py-1.5 text-center font-semibold">P</th>
<th className="w-8 py-1.5 text-center font-semibold">GD</th>
<th className="w-9 py-1.5 text-center font-semibold">Pts</th>
<th className="px-3 py-1.5 text-left font-semibold">{t.groups.colTeam}</th>
<th className="w-8 py-1.5 text-center font-semibold">{t.groups.colPlayed}</th>
<th className="w-8 py-1.5 text-center font-semibold">{t.groups.colGoalDiff}</th>
<th className="w-9 py-1.5 text-center font-semibold">{t.groups.colPoints}</th>
</tr>
</thead>
<tbody>