Add Simplified Chinese localization and language selector

docs/testing/zh-cn-localization-completion.tdd.md

@@ -0,0 +1,32 @@
+# Simplified Chinese localization completion — TDD evidence
+
+## Source and user journey
+
+This work was derived directly from the request to eliminate the 418 remaining
+English UI audit findings. No external plan file was used.
+
+As a user who selects Simplified Chinese, I want every reviewed static Svelte UI
+string to have a Chinese rendering, while technical identifiers and user-authored
+content remain unchanged.
+
+## RED → GREEN evidence
+
+| Guarantee | Test or command | Type | Result | Evidence |
+|---|---|---|---|---|
+| Every Svelte UI file is included in the localization audit | `bun test src/lib/i18n.test.ts` | Integration | PASS | The suite checks all 58 `.svelte` files. |
+| The previous untranslated inventory is rejected | `bun test src/lib/i18n.test.ts` before the translation update | Regression | RED | The new assertion failed with 418 findings. |
+| No reviewed static English copy remains without a translation or explicit technical classification | `bun test src/lib/i18n.test.ts` after the translation update | Regression | PASS | 13 tests passed; the global finding list is empty. |
+| The standalone audit agrees with the regression test | `bun run i18n:audit` | Static audit | PASS | `0 untranslated static strings across 58 Svelte files`. |
+| The localized application still type-checks and bundles | `bun run check` and `bun run build` | Build | PASS | Svelte reported 0 errors and 0 warnings; Vite completed the production build. |
+
+## Coverage and known gaps
+
+`bun test --coverage src/lib/i18n.test.ts` reports 86.32% line coverage for the
+static audit module. Aggregate coverage is 43.36% because the same module imports
+the browser-only DOM observer from `i18n.ts`; the Bun test environment has no DOM
+implementation and therefore cannot execute that path. Translation behavior,
+dynamic patterns, user-content boundaries, and the full 58-file audit are covered.
+The DOM observer itself remains a browser/E2E coverage gap.
+
+The audit intentionally preserves four technical examples: a DOI placeholder, an
+API-key placeholder, an author-name format, and the `Osaka Jade` theme name.

package.json

@@ -9,6 +9,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
+    "i18n:audit": "bun scripts/i18n-audit.ts",
     "sidecars": "bun scripts/fetch-sidecars.mjs",
     "tauri": "tauri"
   },
@@ -24,6 +25,7 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tauri-apps/cli": "^2.1.0",
     "@tsconfig/svelte": "^5.0.4",
+    "@types/bun": "^1.4.0",
     "@types/katex": "^0.16.8",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",

scripts/i18n-audit.ts

@@ -0,0 +1,107 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+import { parse } from "svelte/compiler";
+import { translateText } from "../src/lib/i18n";
+
+const TECHNICAL_COPY = new Set([
+  "10.xxxx/…",
+  "AIza…",
+  "Cortex",
+  "Esc",
+  "Groq",
+  "Last, F.; Last, F.",
+  "OpenAI",
+  "Osaka Jade",
+  "Tailscale",
+  "Rust · Tauri · Svelte",
+  "Omarchy ·",
+  "age",
+  "cortex",
+  "ffmpeg",
+  "mpv",
+  "rclone",
+  "sync",
+  "syncd",
+  "yt-dlp",
+]);
+
+function isTechnicalCopy(source: string): boolean {
+  return TECHNICAL_COPY.has(source)
+    || /^(?:https?:\/\/|~\/|\/)[^ ]+$/.test(source)
+    || /^[A-Z][A-Z0-9_-]+(?:=|[-])?…?$/.test(source)
+    || /^[A-Z][A-Z0-9_]+=/.test(source)
+    || /^(?:[\w.-]+\/)+[\w.-]+$/.test(source)
+    || /^[\w.-]+\/$/.test(source)
+    || /^[\w.-]+:[\w.-]+$/.test(source)
+    || /^[a-z0-9]+(?:[-/.][a-z0-9]+)+$/.test(source)
+    || /^[a-z0-9]{30,}$/.test(source)
+    || /^…?[\w.-]+\.[a-z]{2,}$/.test(source)
+    || /^(?:docker compose|git pull|sudo |rclone |age-keygen)/.test(source)
+    || /^(?:[\w.-]+:)?[\w.-]+\.(?:com|edu|net|org)(?:\/\S*)?$/.test(source);
+}
+
+function hasSkipAttribute(value: Record<string, unknown>): boolean {
+  const attributes = value.attributes;
+  return Array.isArray(attributes) && attributes.some((attribute) => {
+    return attribute
+      && typeof attribute === "object"
+      && "name" in attribute
+      && attribute.name === "data-i18n-skip";
+  });
+}
+
+export function svelteFilesUnder(directory: string): string[] {
+  return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) return svelteFilesUnder(path);
+    return entry.isFile() && entry.name.endsWith(".svelte") ? [path] : [];
+  });
+}
+
+export function findUntranslatedStaticCopy(files = svelteFilesUnder("src")): string[] {
+  const untranslated: string[] = [];
+  for (const file of files) {
+    const ast = parse(readFileSync(file, "utf8"), { filename: file }) as any;
+    const seen = new Set<object>();
+    const visit = (value: any, parent: any = null, skipped = false) => {
+      if (!value || typeof value !== "object" || seen.has(value)) return;
+      seen.add(value);
+      const skipChildren = skipped || hasSkipAttribute(value);
+      if (!skipChildren && value.type === "Text" && typeof value.data === "string") {
+        const inAttribute = parent?.type === "Attribute" || parent?.type?.endsWith?.("Directive");
+        const translatedAttribute = inAttribute && ["title", "placeholder", "aria-label"].includes(parent.name);
+        if (!inAttribute || translatedAttribute) {
+          const source = value.data.trim().replace(/\s+/g, " ");
+          if (
+            /[A-Za-z]{2}/.test(source)
+            && !isTechnicalCopy(source)
+            && translateText(source, "zh-CN") === source
+          ) {
+            untranslated.push(`${file}: ${source}`);
+          }
+        }
+      }
+      for (const [key, child] of Object.entries(value)) {
+        if (key === "parent" || key === "metadata") continue;
+        if (Array.isArray(child)) child.forEach((item) => visit(item, value, skipChildren));
+        else visit(child, value, skipChildren);
+      }
+    };
+    visit(ast.html);
+  }
+  return untranslated.sort();
+}
+
+if (import.meta.main) {
+  const findings = findUntranslatedStaticCopy();
+  const counts = new Map<string, number>();
+  for (const entry of findings) {
+    const file = entry.slice(0, entry.indexOf(":"));
+    counts.set(file, (counts.get(file) ?? 0) + 1);
+  }
+  const byFile = [...counts]
+    .map(([file, count]) => `${file}: ${count}`)
+    .join("\n");
+  console.log(`${findings.length} untranslated static strings across ${svelteFilesUnder("src").length} Svelte files`);
+  if (byFile) console.log(byFile);
+}

src/components/Dialog.svelte

@@ -3,6 +3,7 @@
   // window.confirm / window.prompt. Driven entirely by app.dialog; resolves via
   // app.resolveDialog. Mounted once globally in App.svelte.
   import { app } from "../lib/store.svelte";
+  import { translateText } from "../lib/i18n";
 
   let inputEl = $state<HTMLInputElement | null>(null);
   let draft = $state("");
@@ -45,19 +46,19 @@
 {#if app.dialog}
   <div class="dlg-back" onmousedown={cancel} role="presentation">
     <div class="dlg" role="dialog" aria-modal="true" tabindex="-1" onmousedown={(e) => e.stopPropagation()}>
-      <div class="dlg-title">{app.dialog.title}</div>
+      <div class="dlg-title">{translateText(app.dialog.title, app.language)}</div>
       {#if app.dialog.body}
-        <div class="dlg-body">{app.dialog.body}</div>
+        <div class="dlg-body">{translateText(app.dialog.body, app.language)}</div>
       {/if}
       {#if app.dialog.kind === "prompt"}
         {#if app.dialog.label}
-          <div class="dlg-label">{app.dialog.label}</div>
+          <div class="dlg-label">{translateText(app.dialog.label, app.language)}</div>
         {/if}
         <input
           bind:this={inputEl}
           bind:value={draft}
           class="input dlg-input"
-          placeholder={app.dialog.placeholder ?? ""}
+          placeholder={translateText(app.dialog.placeholder ?? "", app.language)}
         />
       {/if}
       <div class="dlg-actions">
@@ -67,7 +68,7 @@
           type="button"
           onclick={ok}
         >
-          {app.dialog.okLabel}
+          {translateText(app.dialog.okLabel ?? "OK", app.language)}
         </button>
       </div>
     </div>

src/components/EditModal.svelte

@@ -37,7 +37,7 @@
   });
 
   const subjectOptions = $derived(
-    app.subjects.map((s) => ({ id: s.id, label: s.name }))
+    app.subjects.map((s) => ({ id: s.id, label: s.name, userContent: true }))
   );
 
   // Topic options are derived from the currently selected subject (not the
@@ -48,6 +48,7 @@
           ...(app.subjects.find((s) => s.id === selectedSubjectId)?.topics ?? []).map((tp) => ({
             id: tp.id,
             label: tp.name,
+            userContent: true,
           })),
           { id: "", label: "— no topic —" },
         ]

src/components/EventModal.svelte

@@ -164,7 +164,7 @@
 
   const subjectOptions = $derived([
     { id: "", label: "— no subject —" },
-    ...app.subjects.map((s) => ({ id: s.id, label: s.name })),
+    ...app.subjects.map((s) => ({ id: s.id, label: s.name, userContent: true })),
   ]);
 
   // Compose the final start/end epoch ms from date + time fields.

src/components/GeneratingCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { jobs, jobKindLabel, type Job } from "../lib/jobs.svelte";
   import { app } from "../lib/store.svelte";
+  import { translateText } from "../lib/i18n";
   import Icon from "./Icon.svelte";
 
   let { job }: { job: Job } = $props();
@@ -19,7 +20,7 @@
 {#if job.status === "running"}
   <div class="gen-card">
     <span class="is-spin"></span>
-    <span class="gen-card-label mono">Generating {jobKindLabel(job.kind)}…</span>
+    <span class="gen-card-label mono">{translateText(`Generating ${jobKindLabel(job.kind)}…`, app.language)}</span>
     {#if job.label}
       <span class="gen-card-sub mono">{job.label}</span>
     {/if}
@@ -38,8 +39,8 @@
   <div class="gen-card gen-card--err">
     <span class="gen-card-ico"><Icon name="bolt" size={14} color="var(--err)" /></span>
     <div class="gen-card-body">
-      <span class="gen-card-label mono">Couldn't generate {jobKindLabel(job.kind)}</span>
-      <span class="gen-card-sub mono">{job.error ?? "Unknown error"}</span>
+      <span class="gen-card-label mono">{translateText(`Couldn't generate ${jobKindLabel(job.kind)}`, app.language)}</span>
+      <span class="gen-card-sub mono">{translateText(job.error ?? "Unknown error", app.language)}</span>
     </div>
     <button
       class="gen-card-x"

src/components/LeaderPane.svelte

@@ -2,6 +2,7 @@
   import { app } from "../lib/store.svelte";
   import Icon from "./Icon.svelte";
   import { LEADER_ACTIONS, type LeaderAction } from "../lib/keybinds.svelte";
+  import { translateText } from "../lib/i18n";
 
   // Run handlers keyed by leader key. The key/label/detail spec lives in
   // lib/keybinds.svelte (shared with the help overlay); only the behavior is here.
@@ -63,9 +64,9 @@
         {#each actions as a}
           <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
           <div class="leader-item" onclick={() => runAction(a)}>
-            <span class="lk">{a.key}</span>{a.label}
+            <span class="lk">{a.key}</span>{translateText(a.label, app.language)}
             {#if a.detail}
-              <span class="ld">{a.detail}</span>
+              <span class="ld">{translateText(a.detail, app.language)}</span>
             {/if}
           </div>
         {/each}

src/components/Picker.svelte

@@ -11,7 +11,7 @@
   }: {
     value: string;
     onChange: (id: string) => void;
-    options: { id: string; label: string; glyph?: boolean }[];
+    options: { id: string; label: string; glyph?: boolean; userContent?: boolean }[];
     icon?: string;
     placeholder?: string;
   } = $props();
@@ -53,7 +53,10 @@
     {#if icon}
       <Icon name={icon} size={12} color="var(--fg-faint)" />
     {/if}
-    <span class={"picker-val" + (cur ? "" : " ph")}>
+    <span
+      class={"picker-val" + (cur ? "" : " ph")}
+      data-i18n-skip={cur?.userContent || undefined}
+    >
       {cur ? cur.label : (placeholder ?? "Select…")}
     </span>
     <Icon name="chevron" size={11} style="transform:rotate(90deg);color:var(--fg-faint)" />
@@ -70,7 +73,11 @@
           {#if o.glyph}
             <Icon name="diamond" size={11} color="var(--accent)" />
           {/if}
-          <span class="grow" style="text-align:left">{o.label}</span>
+          <span
+            class="grow"
+            style="text-align:left"
+            data-i18n-skip={o.userContent || undefined}
+          >{o.label}</span>
           {#if o.id === value}
             <Icon name="check" size={12} color="var(--accent)" />
           {/if}

src/components/StatusBar.svelte

@@ -28,7 +28,7 @@
   <div class="mode-block">
     {app.mode}
     {#if app.activeSubject}
-      <span class="mode-ctx">{app.activeSubject.code ?? app.activeSubject.name}</span>
+      <span class="mode-ctx" data-i18n-skip>{app.activeSubject.code ?? app.activeSubject.name}</span>
     {/if}
   </div>
 

src/components/SubjectPanel.svelte

@@ -71,7 +71,11 @@
       : []
   );
   const courseOptions = $derived(
-    mdData.courses.map((c) => ({ id: c.id, label: c.fullname || c.shortname || c.id }))
+    mdData.courses.map((c) => ({
+      id: c.id,
+      label: c.fullname || c.shortname || c.id,
+      userContent: true,
+    }))
   );
 
   async function linkCourse(courseId: string) {