freezmo/lib/storage.ts
Martin Dvorak 618ad5fb9c 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).
2026-10-08 13:56:32 +00:00

264 lines
7.6 KiB
TypeScript

"use client";
/**
* Deck library backed by localStorage. No accounts, no server state.
* Exposes a tiny observable store so every screen stays in sync.
*/
import { t } from "./i18n";
import { deckSchema, UNORGANIZED_ID, type Activity, type Deck } from "./schemas";
import { createFolder, findFolderByName, getFolder, removeFolder } from "./folders";
import { uid } from "./utils";
const STORAGE_KEY = "freezmo.decks.v1";
const EMPTY: Deck[] = [];
type Listener = () => void;
let decks: Deck[] | null = null;
let cached: Deck[] = EMPTY;
const listeners = new Set<Listener>();
function read(): Deck[] {
if (typeof window === "undefined") return EMPTY;
try {
const raw = window.localStorage.getItem(STORAGE_KEY);
if (!raw) return EMPTY;
const parsed: unknown = JSON.parse(raw);
if (!Array.isArray(parsed)) return EMPTY;
const valid: Deck[] = [];
for (const entry of parsed) {
const result = deckSchema.safeParse(entry);
if (result.success) valid.push(result.data);
else console.warn("[freezmo] skipping invalid deck in storage", result.error.issues);
}
return valid;
} catch (error) {
console.warn("[freezmo] could not read the deck library", error);
return EMPTY;
}
}
function ensureLoaded(): void {
if (decks !== null) return;
decks = read();
cached = decks;
}
function write(next: Deck[]): void {
decks = next;
cached = next;
try {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
} catch (error) {
console.warn("[freezmo] could not save the deck library (storage full?)", error);
}
listeners.forEach((listener) => listener());
}
export const deckStore = {
subscribe(listener: Listener): () => void {
ensureLoaded();
listeners.add(listener);
// Another tab may have changed the library.
const onStorage = (event: StorageEvent) => {
if (event.key === STORAGE_KEY) {
decks = null;
ensureLoaded();
listeners.forEach((l) => l());
}
};
window.addEventListener("storage", onStorage);
return () => {
listeners.delete(listener);
window.removeEventListener("storage", onStorage);
};
},
getSnapshot(): Deck[] {
ensureLoaded();
return cached;
},
getServerSnapshot(): Deck[] {
return EMPTY;
},
};
/** Newest first. */
export function sortDecks(list: Deck[]): Deck[] {
return [...list].sort((a, b) => b.updatedAt - a.updatedAt);
}
export function getDeck(id: string): Deck | undefined {
return deckStore.getSnapshot().find((deck) => deck.id === id);
}
export function upsertDeck(deck: Deck): void {
ensureLoaded();
const current = deckStore.getSnapshot();
const index = current.findIndex((entry) => entry.id === deck.id);
const next = index === -1 ? [deck, ...current] : current.map((entry) => (entry.id === deck.id ? deck : entry));
write(next);
}
export function renameDeck(id: string, title: string): void {
ensureLoaded();
write(deckStore.getSnapshot().map((deck) => (deck.id === id ? { ...deck, title, updatedAt: Date.now() } : deck)));
}
export function deleteDeck(id: string): void {
ensureLoaded();
write(deckStore.getSnapshot().filter((deck) => deck.id !== id));
}
export function recordAttempt(
id: string,
result: { scorePercent: number; correct: number; total: number },
): void {
ensureLoaded();
write(
deckStore.getSnapshot().map((deck) =>
deck.id === id
? {
...deck,
attempts: deck.attempts + 1,
bestScore: Math.max(deck.bestScore ?? 0, Math.round(result.scorePercent)),
updatedAt: Date.now(),
}
: deck,
),
);
}
/** Move a deck into a folder (pass undefined/UNORGANIZED_ID for "Unorganized"). */
export function moveDeck(id: string, folderId: string | undefined): void {
ensureLoaded();
const target = !folderId || folderId === UNORGANIZED_ID ? undefined : folderId;
write(
deckStore.getSnapshot().map((deck) =>
deck.id === id ? { ...deck, folderId: target, updatedAt: Date.now() } : deck,
),
);
}
/** Used when a folder is deleted: every deck inside goes back to Unorganized. */
export function unfileDecks(folderId: string): void {
ensureLoaded();
write(
deckStore.getSnapshot().map((deck) =>
deck.folderId === folderId ? { ...deck, folderId: undefined, updatedAt: Date.now() } : deck,
),
);
}
/** Deletes a folder for good — its decks always survive in "Unorganized". */
export function deleteFolder(folderId: string): void {
unfileDecks(folderId);
removeFolder(folderId);
}
export function countDecksInFolder(folderId: string): number {
ensureLoaded();
if (folderId === UNORGANIZED_ID) return deckStore.getSnapshot().filter((deck) => !deck.folderId).length;
return deckStore.getSnapshot().filter((deck) => deck.folderId === folderId).length;
}
export function appendActivities(id: string, activities: Activity[], title?: string): void {
ensureLoaded();
write(
deckStore.getSnapshot().map((deck) =>
deck.id === id
? {
...deck,
title: title ?? deck.title,
activities: [...deck.activities, ...activities],
updatedAt: Date.now(),
}
: deck,
),
);
}
/* ------------------------------------------------------------------ */
/* Import / export */
/* ------------------------------------------------------------------ */
export type ExportBundle = {
app: "freezmo";
version: 1;
exportedAt: string;
/** Folder name travels with the deck so imports land in the right place. */
folder?: string | null;
deck: Deck;
};
export function exportDeck(deck: Deck): string {
const bundle: ExportBundle = {
app: "freezmo",
version: 1,
exportedAt: new Date().toISOString(),
folder: folderNameOf(deck),
deck,
};
return JSON.stringify(bundle, null, 2);
}
function folderNameOf(deck: Deck): string | null {
if (!deck.folderId) return null;
return getFolder(deck.folderId)?.name ?? null;
}
export function downloadDeck(deck: Deck): void {
const blob = new Blob([exportDeck(deck)], { type: "application/json" });
const url = URL.createObjectURL(blob);
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = `${deck.title.replace(/[^a-z0-9]+/gi, "-").toLowerCase() || "freezmo-deck"}.json`;
document.body.appendChild(anchor);
anchor.click();
anchor.remove();
URL.revokeObjectURL(url);
}
/** Accepts a Freezmo export bundle or a bare deck object. */
export function importDeck(raw: string): { deck: Deck } | { error: string } {
let parsed: unknown;
try {
parsed = JSON.parse(raw);
} catch {
return { error: t("import.notJson") };
}
const bundle = parsed && typeof parsed === "object" && "deck" in parsed ? (parsed as { folder?: unknown }) : null;
const candidate = bundle ? (parsed as { deck: unknown }).deck : parsed;
const result = deckSchema.safeParse(candidate);
if (!result.success) {
return { error: t("import.notDeck") };
}
// Recreate the exported folder (or reuse an existing one with the same name).
let folderId: string | undefined;
const folderName = typeof bundle?.folder === "string" ? bundle.folder.trim() : "";
if (folderName) {
const existing = findFolderByName(folderName);
if (existing) {
folderId = existing.id;
} else {
const created = createFolder(folderName);
folderId = "folder" in created ? created.folder.id : undefined;
}
}
const now = Date.now();
const deck: Deck = {
...result.data,
folderId,
id: uid("deck"),
createdAt: now,
updatedAt: now,
attempts: 0,
bestScore: undefined,
};
upsertDeck(deck);
return { deck };
}