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
|
|
@ -8,6 +8,7 @@ import { FolderBar } from "@/components/FolderBar";
|
|||
import { FolderIcon, UploadIcon } from "@/components/icons";
|
||||
import { Button, EmptyState } from "@/components/ui";
|
||||
import { folderStore, renameFolder } from "@/lib/folders";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { ALL_FOLDERS, folderSelection, useSelectedFolder } from "@/lib/nav";
|
||||
import { openSettings } from "@/lib/ui-events";
|
||||
import { UNORGANIZED_ID, type Deck } from "@/lib/schemas";
|
||||
|
|
@ -27,6 +28,7 @@ export function LibraryScreen() {
|
|||
);
|
||||
const selected = useSelectedFolder();
|
||||
const setSelected = folderSelection.set;
|
||||
const { t, plural } = useI18n();
|
||||
const [message, setMessage] = useState<{ tone: "ok" | "error"; text: string } | null>(null);
|
||||
const [editingFolder, setEditingFolder] = useState<{ id: string; name: string } | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
|
||||
|
|
@ -51,7 +53,7 @@ export function LibraryScreen() {
|
|||
const groups = useMemo(() => {
|
||||
const unorganized: { id: string; name: string; decks: Deck[]; virtual: boolean } = {
|
||||
id: UNORGANIZED_ID,
|
||||
name: "Unorganized",
|
||||
name: t("common.unorganized"),
|
||||
decks: sorted.filter((deck) => !deck.folderId),
|
||||
virtual: true,
|
||||
};
|
||||
|
|
@ -72,7 +74,7 @@ export function LibraryScreen() {
|
|||
virtual: false,
|
||||
}));
|
||||
return [...named, unorganized];
|
||||
}, [folderList, selected, sorted]);
|
||||
}, [folderList, selected, sorted, t]);
|
||||
|
||||
const totalActivities = decks.reduce((sum, deck) => sum + deck.activities.length, 0);
|
||||
const bestEver = decks.reduce((best, deck) => Math.max(best, deck.bestScore ?? 0), 0);
|
||||
|
|
@ -84,9 +86,9 @@ export function LibraryScreen() {
|
|||
const text = await file.text();
|
||||
const result = importDeck(text);
|
||||
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
||||
else setMessage({ tone: "ok", text: `Imported “${result.deck.title}”.` });
|
||||
else setMessage({ tone: "ok", text: t("library.imported", { title: result.deck.title }) });
|
||||
} catch {
|
||||
setMessage({ tone: "error", text: "Could not read that file." });
|
||||
setMessage({ tone: "error", text: t("library.couldNotRead") });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -94,7 +96,7 @@ export function LibraryScreen() {
|
|||
deleteFolder(folderId);
|
||||
setConfirmDelete(null);
|
||||
setSelected(ALL_FOLDERS);
|
||||
setMessage({ tone: "ok", text: "Folder deleted — its decks moved to Unorganized." });
|
||||
setMessage({ tone: "ok", text: t("library.folderDeleted") });
|
||||
};
|
||||
|
||||
const isEmpty = sorted.length === 0 && folderList.length === 0;
|
||||
|
|
@ -109,10 +111,10 @@ export function LibraryScreen() {
|
|||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-[24px] font-semibold leading-tight tracking-[-0.02em] text-[var(--text)] sm:text-[26px]">
|
||||
Your icebox
|
||||
{t("library.title")}
|
||||
</h1>
|
||||
<p className="mt-1.5 text-[13.5px] text-[var(--text-subtle)]">
|
||||
Decks frozen from your notes, saved in this browser.
|
||||
{t("library.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -124,7 +126,7 @@ export function LibraryScreen() {
|
|||
onClick={() => importRef.current?.click()}
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
Import JSON
|
||||
{t("library.import")}
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -132,7 +134,7 @@ export function LibraryScreen() {
|
|||
className="hidden items-center gap-1.5 text-[13px] font-medium text-[var(--text-muted)] transition hover:text-[var(--text)] hover:underline lg:inline-flex"
|
||||
>
|
||||
<UploadIcon className="size-4" />
|
||||
Import JSON
|
||||
{t("library.import")}
|
||||
</button>
|
||||
<input
|
||||
ref={importRef}
|
||||
|
|
@ -151,15 +153,15 @@ export function LibraryScreen() {
|
|||
where the sidebar already shows per-folder counts. */}
|
||||
{decks.length > 0 ? (
|
||||
<p className="text-[13px] text-[var(--text-subtle)] lg:hidden">
|
||||
{decks.length} {decks.length === 1 ? "deck" : "decks"}
|
||||
{plural(decks.length, "stats.decks")}
|
||||
<span aria-hidden> · </span>
|
||||
{folderList.length} {folderList.length === 1 ? "folder" : "folders"}
|
||||
{plural(folderList.length, "stats.folders")}
|
||||
<span aria-hidden> · </span>
|
||||
{totalActivities} activities
|
||||
{plural(totalActivities, "stats.activities")}
|
||||
{played ? (
|
||||
<>
|
||||
<span aria-hidden> · </span>
|
||||
best {bestEver}%
|
||||
{t("library.stats.best", { n: bestEver })}
|
||||
</>
|
||||
) : null}
|
||||
</p>
|
||||
|
|
@ -178,7 +180,7 @@ export function LibraryScreen() {
|
|||
setSelected(id);
|
||||
setMessage({
|
||||
tone: "ok",
|
||||
text: "Folder created — decks you freeze while it's selected land here.",
|
||||
text: t("library.folderCreated"),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
|
@ -200,22 +202,22 @@ export function LibraryScreen() {
|
|||
{/* deck grid ------------------------------------------------------ */}
|
||||
{isEmpty ? (
|
||||
<EmptyState
|
||||
title="No decks yet"
|
||||
title={t("library.noDecks")}
|
||||
action={
|
||||
<Link href="/create" className="btn-primary h-10 px-4 text-sm">
|
||||
Make your first deck
|
||||
{t("library.makeFirst")}
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
Freeze a page of notes into a feed of flashcards and quizzes.
|
||||
{t("library.emptyBody")}
|
||||
<span className="mt-3 block text-[12.5px] text-[var(--text-subtle)]">
|
||||
Using your own Ollama models —{" "}
|
||||
{t("library.emptyHint")}{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openSettings}
|
||||
className="font-medium text-[var(--text-muted)] underline underline-offset-2 hover:text-[var(--text)]"
|
||||
>
|
||||
check the connection in Settings
|
||||
{t("library.emptySettings")}
|
||||
</button>
|
||||
.
|
||||
</span>
|
||||
|
|
@ -245,7 +247,7 @@ export function LibraryScreen() {
|
|||
}
|
||||
if (event.key === "Escape") setEditingFolder(null);
|
||||
}}
|
||||
aria-label="Folder name"
|
||||
aria-label={t("library.renameFolderAria")}
|
||||
maxLength={60}
|
||||
className="min-w-32 max-w-xs flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface-strong)] px-2.5 py-1.5 text-[15px] font-semibold text-[var(--text)] outline-none focus:border-accent-400"
|
||||
/>
|
||||
|
|
@ -257,7 +259,7 @@ export function LibraryScreen() {
|
|||
else setEditingFolder(null);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
{t("common.save")}
|
||||
</Button>
|
||||
</span>
|
||||
) : (
|
||||
|
|
@ -280,15 +282,15 @@ export function LibraryScreen() {
|
|||
onClick={() => setEditingFolder({ id: group.id, name: group.name })}
|
||||
className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
Rename
|
||||
{t("common.rename")}
|
||||
</button>
|
||||
{confirmDelete === group.id ? (
|
||||
<>
|
||||
<Button size="sm" variant="danger" onClick={() => removeFolderEverywhere(group.id)}>
|
||||
Delete
|
||||
{t("common.delete")}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => setConfirmDelete(null)}>
|
||||
Cancel
|
||||
{t("common.cancel")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -297,7 +299,7 @@ export function LibraryScreen() {
|
|||
onClick={() => setConfirmDelete(group.id)}
|
||||
className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
|
||||
>
|
||||
Delete
|
||||
{t("common.delete")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -307,22 +309,19 @@ export function LibraryScreen() {
|
|||
{/* One quiet label replaces the redundant single-group heading. */}
|
||||
{!hasFolders ? (
|
||||
<p className="mb-4 hidden text-[12px] font-medium text-[var(--text-subtle)] lg:block">
|
||||
All decks
|
||||
{t("common.allDecks")}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{confirmDelete === group.id ? (
|
||||
<p className="mb-3 text-[12.5px] text-[var(--text-muted)]">
|
||||
The {group.decks.length} deck{group.decks.length === 1 ? "" : "s"} inside will move to
|
||||
Unorganized — nothing is deleted.
|
||||
{plural(group.decks.length, "library.deleteWarning")}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{group.decks.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-[var(--hairline)] px-5 py-8 text-center text-[13px] text-[var(--text-subtle)]">
|
||||
{group.virtual
|
||||
? "Nothing unfiled right now."
|
||||
: "Empty folder — freeze a deck into it or move one over from Unorganized."}
|
||||
{group.virtual ? t("library.nothingUnfiled") : t("library.emptyFolder")}
|
||||
</div>
|
||||
) : (
|
||||
<ul className="grid list-none grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 lg:grid-cols-[repeat(auto-fill,minmax(320px,1fr))]">
|
||||
|
|
@ -334,7 +333,7 @@ export function LibraryScreen() {
|
|||
upsertDeck({ ...deck, folderId });
|
||||
setMessage({
|
||||
tone: "ok",
|
||||
text: folderId ? "Deck moved." : "Deck moved to Unorganized.",
|
||||
text: folderId ? t("library.deckMoved") : t("library.deckMovedUnorganized"),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue