Add an English/Czech interface language switch
English stays the default; Czech is a full translation. Only the app chrome is translated - notes and generated decks keep their own language, which is a core feature, not a setting. i18n - lib/i18n-dict.ts: flat en/cs dictionaries (441 keys each), translate() and translatePlural() with real Czech plural rules (1 sada / 2-4 sady / 5+ sad). English is the default and the fallback for a missing key. - lib/i18n.ts: browser store (freezmo.locale.v1), useI18n() hook, and the x-freezmo-locale header. The hook's t/plural are bound to the locale React is rendering with, so the first client render matches the server HTML and then re-renders in the stored language; module-level t is only for event handlers and non-React helpers. - <html lang> follows the choice (inline script + setLocale). UI - Settings -> Language segmented control (English / Cestina), plus an EN/CS button on the key gate for first run. - Every screen translated: sidebar, header, tab bar, library, deck cards, folder bar, create flow, all seven activities, study chrome, results, settings + health panel, API-key gate and help, install sheet, offline and the deck-not-found page. - Plural-aware counts everywhere (decks, folders, activities, runs, photos, documents, pages, words, wrong attempts). Server - API routes and guards (generate, grade, health, http-guard, rate-limit, ollama error mapping) answer in the request's language, so error cards and the health panel never fall back to English mid-sentence. Fixes - A hydration mismatch when a non-default locale was stored silently dropped the .dark class after hydration; render-time t() is now bound to the hook's locale (UploadScreen.describeExtraction, ResultsScreen.answerFor, DeckCard's folder fallback). - Bumped the service worker cache to freezmo-v4 for this deploy. Tests: i18n 27/27 (gate toggle, persistence, html lang, Czech plurals, settings switch) and a rebuilt regression suite 72/72 (English default, library, create, all 7 activity types, results, settings, install sheet, offline, PWA, security, Czech smoke).
This commit is contained in:
parent
4c2834edac
commit
618ad5fb9c
42 changed files with 1892 additions and 509 deletions
|
|
@ -15,6 +15,7 @@ import {
|
|||
XIcon,
|
||||
} from "@/components/icons";
|
||||
import { Spinner } from "@/components/ui";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import {
|
||||
detectBrowser,
|
||||
detectPlatform,
|
||||
|
|
@ -52,6 +53,7 @@ export function InstallSheet() {
|
|||
const [installing, setInstalling] = useState(false);
|
||||
const dragControls = useDragControls();
|
||||
const reduceMotion = useReducedMotion();
|
||||
const { t } = useI18n();
|
||||
const domain = typeof window === "undefined" ? "" : window.location.hostname;
|
||||
|
||||
/** Everything needed to render the sheet, or null if it shouldn't appear. */
|
||||
|
|
@ -148,55 +150,64 @@ export function InstallSheet() {
|
|||
if (info.browser !== "safari") {
|
||||
steps.push(
|
||||
<>
|
||||
Open this page in <Chip icon={<CompassIcon className="size-4" />}>Safari</Chip>
|
||||
{t("install.openIn")} <Chip icon={<CompassIcon className="size-4" />}>Safari</Chip>
|
||||
</>,
|
||||
);
|
||||
}
|
||||
steps.push(
|
||||
<>
|
||||
Tap <IconChip icon={<EllipsisIcon className="size-4" />} label="More options" /> in the
|
||||
browser bar
|
||||
{t("install.tap")}{" "}
|
||||
<IconChip icon={<EllipsisIcon className="size-4" />} label={t("install.moreOptions")} />{" "}
|
||||
{t("install.inBrowserBar")}
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <Chip icon={<ShareIcon className="size-4" />}>Share</Chip>, then{" "}
|
||||
<Chip icon={<ChevronDownIcon className="size-4" />}>More</Chip>
|
||||
{t("install.tap")} <Chip icon={<ShareIcon className="size-4" />}>{t("install.share")}</Chip>
|
||||
{t("install.then")} <Chip icon={<ChevronDownIcon className="size-4" />}>{t("install.more")}</Chip>
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Choose <Chip icon={<AddToHomeIcon className="size-4" />}>Add to Home Screen</Chip>
|
||||
{t("install.choose")}{" "}
|
||||
<Chip icon={<AddToHomeIcon className="size-4" />}>{t("install.addToHome")}</Chip>
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <AccentPill icon={<PlusIcon className="size-4" />}>Add</AccentPill> to confirm
|
||||
{t("install.tapConfirm")}{" "}
|
||||
<AccentPill icon={<PlusIcon className="size-4" />}>{t("install.add")}</AccentPill>{" "}
|
||||
{t("install.toConfirm")}
|
||||
</>,
|
||||
);
|
||||
} else if (info?.platform === "android") {
|
||||
if (info.browser !== "chrome") {
|
||||
steps.push(
|
||||
<>
|
||||
Open this page in <Chip icon={<ChromeIcon className="size-4" />}>Chrome</Chip>
|
||||
{t("install.openIn")} <Chip icon={<ChromeIcon className="size-4" />}>Chrome</Chip>
|
||||
</>,
|
||||
);
|
||||
}
|
||||
steps.push(
|
||||
<>
|
||||
Tap <IconChip icon={<EllipsisIcon className="size-4" />} label="More options" /> in the top
|
||||
right of the browser
|
||||
{t("install.tap")}{" "}
|
||||
<IconChip icon={<EllipsisIcon className="size-4" />} label={t("install.moreOptions")} />{" "}
|
||||
{t("install.inTopRight")}
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Choose <Chip icon={<DownloadIcon className="size-4" />}>Install app</Chip> or{" "}
|
||||
<Chip icon={<AddToHomeIcon className="size-4" />}>Add to Home screen</Chip>
|
||||
{t("install.choose")}{" "}
|
||||
<Chip icon={<DownloadIcon className="size-4" />}>{t("install.installApp")}</Chip>{" "}
|
||||
{t("install.or")}{" "}
|
||||
<Chip icon={<AddToHomeIcon className="size-4" />}>{t("install.addToHomeScreen")}</Chip>
|
||||
</>,
|
||||
);
|
||||
steps.push(
|
||||
<>
|
||||
Tap <AccentPill icon={<DownloadIcon className="size-4" />}>Install</AccentPill> to confirm
|
||||
{t("install.tapConfirm")}{" "}
|
||||
<AccentPill icon={<DownloadIcon className="size-4" />}>{t("install.install")}</AccentPill>{" "}
|
||||
{t("install.toConfirm")}
|
||||
</>,
|
||||
);
|
||||
}
|
||||
|
|
@ -252,14 +263,12 @@ export function InstallSheet() {
|
|||
id="install-sheet-title"
|
||||
className="text-[17px] font-semibold tracking-[-0.02em] text-[var(--text)]"
|
||||
>
|
||||
{info.platform === "ios"
|
||||
? "Install Freezmo on iPhone"
|
||||
: "Install Freezmo on Android"}
|
||||
{info.platform === "ios" ? t("install.titleIos") : t("install.titleAndroid")}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={close}
|
||||
aria-label="Close"
|
||||
aria-label={t("common.close")}
|
||||
className="grid size-10 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
<XIcon className="size-[18px]" />
|
||||
|
|
@ -294,11 +303,11 @@ export function InstallSheet() {
|
|||
>
|
||||
{installing ? (
|
||||
<>
|
||||
<Spinner className="size-4" /> Installing…
|
||||
<Spinner className="size-4" /> {t("install.installing")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DownloadIcon className="size-4" /> Install
|
||||
<DownloadIcon className="size-4" /> {t("install.install")}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
|
@ -306,7 +315,7 @@ export function InstallSheet() {
|
|||
|
||||
{showNativePrompt ? (
|
||||
<p className="mt-4 text-center text-[12px] text-[var(--text-subtle)]">
|
||||
Or install manually:
|
||||
{t("install.orManually")}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
|
|
@ -329,7 +338,7 @@ export function InstallSheet() {
|
|||
onClick={close}
|
||||
className="mt-6 w-full rounded-[14px] py-3 text-center text-[15px] font-medium text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
Maybe later
|
||||
{t("install.maybeLater")}
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue