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 { LOCALES, useI18n } from "@/lib/i18n";
|
||||
import { verifyOllamaKey } from "@/lib/client-api";
|
||||
import { saveSettings, settingsStore } from "@/lib/settings";
|
||||
import { useHealth } from "@/lib/use-health";
|
||||
|
|
@ -78,6 +79,7 @@ function CornerButton({
|
|||
function GateScreen() {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const { theme, toggle } = useTheme();
|
||||
const { locale, setLocale, t } = useI18n();
|
||||
const [draft, setDraft] = useState("");
|
||||
const [reveal, setReveal] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
|
@ -192,17 +194,30 @@ function GateScreen() {
|
|||
}}
|
||||
>
|
||||
<CornerButton
|
||||
label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
|
||||
title={theme === "dark" ? "Light mode" : "Dark mode"}
|
||||
label={theme === "dark" ? t("common.switchToLight") : t("common.switchToDark")}
|
||||
title={theme === "dark" ? t("common.lightMode") : t("common.darkMode")}
|
||||
onClick={toggle}
|
||||
>
|
||||
{theme === "dark" ? <SunIcon className="size-[18px]" /> : <MoonIcon className="size-[18px]" />}
|
||||
</CornerButton>
|
||||
|
||||
<CornerButton
|
||||
label={t("language.label")}
|
||||
title={t("language.label")}
|
||||
onClick={() => {
|
||||
const index = LOCALES.findIndex((entry) => entry.id === locale);
|
||||
setLocale(LOCALES[(index + 1) % LOCALES.length].id);
|
||||
}}
|
||||
>
|
||||
<span className="text-[12px] font-bold tracking-wide">
|
||||
{LOCALES.find((entry) => entry.id === locale)?.short ?? "EN"}
|
||||
</span>
|
||||
</CornerButton>
|
||||
|
||||
<div className="group relative">
|
||||
<CornerButton
|
||||
label="How do I get an Ollama API key?"
|
||||
title="How do I get a key?"
|
||||
label={t("gate.howGetAria")}
|
||||
title={t("gate.howGet")}
|
||||
onClick={() => setHelpOpen(true)}
|
||||
>
|
||||
<QuestionIcon className="size-[18px]" />
|
||||
|
|
@ -211,7 +226,7 @@ function GateScreen() {
|
|||
role="tooltip"
|
||||
className="pointer-events-none absolute right-0 top-full mt-2 whitespace-nowrap rounded-lg border border-[var(--hairline)] bg-[var(--gate-card)] px-2.5 py-1.5 text-[11.5px] text-[var(--text-muted)] opacity-0 shadow-[var(--shadow-card)] transition group-hover:opacity-100 group-focus-within:opacity-100"
|
||||
>
|
||||
How do I get a key?
|
||||
{t("gate.howGet")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -241,16 +256,16 @@ function GateScreen() {
|
|||
/>
|
||||
|
||||
<h1 className="mt-6 text-[24px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] sm:text-[28px]">
|
||||
Connect your Ollama key
|
||||
{t("gate.title")}
|
||||
</h1>
|
||||
<p className="mx-auto mt-1.5 max-w-[300px] text-balance text-[15px] leading-relaxed text-[var(--text-subtle)]">
|
||||
One step to freeze your first deck.
|
||||
{t("gate.subtitle")}
|
||||
</p>
|
||||
|
||||
<form className="mt-6" onSubmit={submit} noValidate>
|
||||
<div className="relative">
|
||||
<label className="sr-only" htmlFor="gate-api-key">
|
||||
Ollama API key
|
||||
{t("gate.apiKeyLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={inputRef}
|
||||
|
|
@ -261,7 +276,7 @@ function GateScreen() {
|
|||
setDraft(event.target.value);
|
||||
if (error) setError(null);
|
||||
}}
|
||||
placeholder="Paste your Ollama API key"
|
||||
placeholder={t("gate.placeholder")}
|
||||
autoComplete="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
|
|
@ -273,7 +288,7 @@ function GateScreen() {
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setReveal((value) => !value)}
|
||||
aria-label={reveal ? "Hide API key" : "Show API key"}
|
||||
aria-label={reveal ? t("gate.hide") : t("gate.show")}
|
||||
aria-pressed={reveal}
|
||||
className="absolute right-1.5 top-1/2 grid size-9 -translate-y-1/2 place-items-center rounded-[10px] text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
|
|
@ -307,10 +322,10 @@ function GateScreen() {
|
|||
>
|
||||
{busy ? (
|
||||
<>
|
||||
<Spinner className="size-4" /> Checking…
|
||||
<Spinner className="size-4" /> {t("gate.checking")}
|
||||
</>
|
||||
) : (
|
||||
"Continue"
|
||||
t("gate.continue")
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -322,12 +337,12 @@ function GateScreen() {
|
|||
className="inline-flex items-center gap-1.5 text-[12.5px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline"
|
||||
>
|
||||
<QuestionIcon className="size-3.5" />
|
||||
How do I get a key?
|
||||
{t("gate.howGet")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="mx-auto mt-4 max-w-[320px] text-balance text-[12px] leading-relaxed text-[var(--text-subtle)]">
|
||||
Your key stays in this browser. Our server never stores it.
|
||||
{t("gate.stays")}
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
|
@ -343,6 +358,7 @@ function GateScreen() {
|
|||
|
||||
function HelpDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
|
|
@ -370,12 +386,12 @@ function HelpDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
|||
id="gate-help-title"
|
||||
className="text-[19px] font-semibold leading-snug tracking-[-0.02em] text-[var(--text)]"
|
||||
>
|
||||
How to get your Ollama API key
|
||||
{t("gate.helpTitle")}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
aria-label={t("common.close")}
|
||||
className="grid size-9 shrink-0 place-items-center rounded-[10px] text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
|
|
@ -385,33 +401,33 @@ function HelpDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
|||
<div className="mt-4 flex items-start gap-2.5 rounded-xl border border-[var(--gate-callout-border)] bg-[var(--gate-callout-bg)] px-3.5 py-3">
|
||||
<CheckCircleIcon className="mt-px size-[18px] shrink-0 text-[var(--text-muted)]" />
|
||||
<p className="text-[12.5px] leading-relaxed text-[var(--text-muted)]">
|
||||
You only need the{" "}
|
||||
<strong className="font-semibold text-[var(--text)]">free cloud tier</strong>. No
|
||||
payment and no credit card required.
|
||||
{t("gate.freeTier.before")}{" "}
|
||||
<strong className="font-semibold text-[var(--text)]">{t("gate.freeTier.strong")}</strong>
|
||||
{t("gate.freeTier.after")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ol className="mt-5 space-y-4">
|
||||
<Step index={1}>
|
||||
Go to{" "}
|
||||
<ExternalLink href="https://ollama.com">ollama.com</ExternalLink> and sign in, or
|
||||
create a free account.
|
||||
{t("gate.step1.before")}{" "}
|
||||
<ExternalLink href="https://ollama.com">ollama.com</ExternalLink>{" "}
|
||||
{t("gate.step1.after")}
|
||||
</Step>
|
||||
<Step index={2}>
|
||||
Open Settings → API keys at{" "}
|
||||
<ExternalLink href={KEYS_URL}>ollama.com/settings/keys</ExternalLink>.
|
||||
{t("gate.step2.before")}{" "}
|
||||
<ExternalLink href={KEYS_URL}>ollama.com/settings/keys</ExternalLink>
|
||||
{t("gate.step2.after")}
|
||||
</Step>
|
||||
<Step index={3}>
|
||||
Click{" "}
|
||||
<span className="font-medium text-[var(--text-muted)]">“Create new key”</span>,
|
||||
give it any name, and copy it.
|
||||
{t("gate.step3.before")}{" "}
|
||||
<span className="font-medium text-[var(--text-muted)]">{t("gate.step3.strong")}</span>
|
||||
{t("gate.step3.after")}
|
||||
</Step>
|
||||
<Step index={4}>Paste it into Freezmo and press Continue.</Step>
|
||||
<Step index={4}>{t("gate.step4")}</Step>
|
||||
</ol>
|
||||
|
||||
<p className="mt-5 text-[12px] leading-relaxed text-[var(--text-subtle)]">
|
||||
The free tier is enough for generating decks. You can swap or remove your key anytime in
|
||||
Settings.
|
||||
{t("gate.footnote")}
|
||||
</p>
|
||||
|
||||
<button
|
||||
|
|
@ -419,7 +435,7 @@ function HelpDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
|
|||
onClick={onClose}
|
||||
className="btn-primary mt-5 h-11 w-full rounded-[13px] text-[14px] font-medium"
|
||||
>
|
||||
Got it
|
||||
{t("gate.gotIt")}
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue