Add Simplified Chinese to the admin dashboard

README.md

@@ -38,7 +38,7 @@ The rest of the shortener:
 - **Labels from the page title.** A link created without a label gets the destination page's title fetched in the background, with private and internal hosts refused.
 - **QR codes** as SVG for any slug, from the admin UI, the API, the SDKs and MCP. Scans are tracked separately from link clicks.
 - **Edge redirects.** Slug lookups are cached in Workers KV in front of D1, and click recording runs after the redirect is sent.
-- **Admin dashboard** in English, Indonesian and Swedish, with three themes, per-link and per-bundle analytics, API key management and settings.
+- **Admin dashboard** in four languages (see [`src/i18n/`](src/i18n/) for the set), with three themes, per-link and per-bundle analytics, API key management and settings.
 - **Browser extension** for Chrome and Firefox that shortens the current tab against your own deployment. Source and store status in [browser-extensions/README.md](browser-extensions/README.md).
 - **One-click deploy** with automatic provisioning of the database and KV namespace, and migrations that the Worker applies on its first request.
 

src/__tests__/handler/admin-assets.test.ts

@@ -10,6 +10,7 @@ import { SELF } from "cloudflare:test";
 import { applyMigrations, resetData } from "../setup";
 import { adminStyles } from "../../styles";
 import id from "../../i18n/id";
+import zh from "../../i18n/zh";
 
 function req(path: string, headers: Record<string, string> = {}): Request {
   return new Request(`https://shrtnr.test${path}`, { headers });
@@ -22,7 +23,7 @@ async function pageHtml(path: string, headers?: Record<string, string>): Promise
 }
 
 const STYLESHEET = /<link rel="stylesheet" href="(\/_\/assets\/admin\.[0-9a-f]{8,}\.css)"\s*\/?>/;
-const SCRIPT = /<script src="(\/_\/assets\/client\.([a-z]{2})\.[0-9a-f]{8,}\.js)"><\/script>/;
+const SCRIPT = /<script src="(\/_\/assets\/client\.([A-Za-z-]+)\.[0-9a-f]{8,}\.js)"><\/script>/;
 
 beforeAll(applyMigrations);
 beforeEach(resetData);
@@ -83,9 +84,21 @@ describe("GET /_/assets/*", () => {
   });
 
   it("gives each language its own script URL", async () => {
-    const en = (await pageHtml("/_/admin/settings")).match(SCRIPT)![1];
-    const sv = (await pageHtml("/_/admin/settings", { Cookie: "lang=sv" })).match(SCRIPT)![1];
-    expect(en).not.toBe(sv);
+    const enUrl = (await pageHtml("/_/admin/settings")).match(SCRIPT)![1];
+    const svUrl = (await pageHtml("/_/admin/settings", { Cookie: "lang=sv" })).match(SCRIPT)![1];
+    const zhUrl = (await pageHtml("/_/admin/settings", { Cookie: "lang=zh" })).match(SCRIPT)![1];
+    expect(enUrl).not.toBe(svUrl);
+    expect(enUrl).not.toBe(zhUrl);
+    expect(svUrl).not.toBe(zhUrl);
+  });
+
+  it("serves the Simplified Chinese client script to a lang=zh viewer", async () => {
+    const html = await pageHtml("/_/admin/settings", { Cookie: "lang=zh" });
+    const m = html.match(SCRIPT);
+    expect(m![2]).toBe("zh");
+    const res = await SELF.fetch(req(m![1]));
+    expect(res.status).toBe(200);
+    expect(await res.text()).toContain(zh["client.themeUpdated"]);
   });
 
   it("serves this build's content for a hash from another build, uncached, so a deploy window never leaves a page unstyled", async () => {
@@ -107,7 +120,16 @@ describe("GET /_/assets/*", () => {
   });
 
   it("answers the branded 404 for a path that names no asset of this app", async () => {
-    for (const path of ["/_/assets/client.xx.0000000000000000.js", "/_/assets/vendor.js", "/_/assets/admin.css"]) {
+    // "zh-Hant" is language-shaped but not registered, so it has to be the
+    // supported-language check that refuses it, not the shape of the path.
+    // A locale that ever registers such a code gets the no-store fallback
+    // during a deploy window instead of this 404.
+    for (const path of [
+      "/_/assets/client.xx.0000000000000000.js",
+      "/_/assets/client.zh-Hant.0000000000000000.js",
+      "/_/assets/vendor.js",
+      "/_/assets/admin.css",
+    ]) {
       const res = await SELF.fetch(req(path));
       expect(res.status, path).toBe(404);
       expect(res.headers.get("Content-Type"), path).toContain("text/html");

src/__tests__/page/settings-page.test.ts

@@ -66,6 +66,19 @@ describe("Settings page analytics filter toggles", () => {
   });
 });
 
+describe("Settings page language picker", () => {
+  it("offers Simplified Chinese and names the other languages in the viewer's language", async () => {
+    const res = await SELF.fetch(
+      new Request("https://shrtnr.test/_/admin/settings", { headers: { Cookie: "lang=zh" } }),
+    );
+    const html = await res.text();
+    expect(html).toMatch(/<option value="zh"[^>]*selected[^>]*>简体中文/);
+    expect(html).toContain("English · 英语");
+    expect(html).toContain("Svenska · 瑞典语");
+    expect(html).toContain("Bahasa Indonesia · 印度尼西亚语");
+  });
+});
+
 describe("Settings page MCP OAuth status row", () => {
   it("renders the status as its own row with a decorative icon and the MCP OAuth label", async () => {
     // Before this row existed, "Not configured" reached the document only

src/__tests__/service/admin-service.test.ts

@@ -6,6 +6,7 @@ import {
   getAppSettings,
   updateAppSettings,
 } from "../../services/admin-management";
+import { SUPPORTED_LANGUAGES } from "../../i18n";
 
 const TEST_IDENTITY = "test@example.com";
 
@@ -223,7 +224,7 @@ describe("settings theme and language validation", () => {
   });
 
   it("accepts every supported language", async () => {
-    for (const lang of ["en", "id", "sv"]) {
+    for (const lang of SUPPORTED_LANGUAGES) {
       const result = await updateAppSettings(env as any, TEST_IDENTITY, { lang });
       expect(result.ok).toBe(true);
       const settings = await getAppSettings(env as any, TEST_IDENTITY);

src/__tests__/unit/big-chart.test.ts

@@ -134,4 +134,20 @@ describe("formatBucketLabel", () => {
     expect(out).toContain("2026");
     expect(out).toContain("09:00");
   });
+
+  it("formats a daily bucket with the Chinese month name", () => {
+    // "7月" only comes from zh ICU data. An English fallback would render
+    // "Jul", so this pins the locale reaching the formatter.
+    const out = formatBucketLabel("2026-07-16", "zh");
+    expect(out).toContain("7月");
+    expect(out).toContain("16");
+    expect(out).toContain("2026");
+  });
+
+  it("formats a monthly bucket with the Chinese month name and year only", () => {
+    const out = formatBucketLabel("2026-07", "zh");
+    expect(out).toContain("7月");
+    expect(out).toContain("2026");
+    expect(out).not.toBe(formatBucketLabel("2026-07-01", "zh"));
+  });
 });

src/__tests__/unit/country.test.ts

@@ -25,6 +25,13 @@ describe("countryName", () => {
     expect(result).toBe("Amerika Serikat");
   });
 
+  it("should resolve US to a localized name in Simplified Chinese", () => {
+    // A translated name, not the raw code and not the English fallback, which
+    // is what a runtime without zh ICU data would return.
+    const result = countryName("US", "zh");
+    expect(result).toBe("美国");
+  });
+
   it("should return something for unknown codes without throwing", () => {
     const result = countryName("ZZ", "en");
     expect(typeof result).toBe("string");

src/__tests__/unit/format.test.ts

@@ -20,6 +20,15 @@ describe("fmtNumber", () => {
     expect(out).toMatch(/1.234.567/); // any single separator character
   });
 
+  it("groups thousands for zh", () => {
+    // Chinese groups with commas like en, so the output alone cannot tell a
+    // resolved zh locale from the en-US fallback the runtime uses when it has
+    // no zh ICU data. Assert the locale the formatter actually resolved, then
+    // the digits it produced.
+    expect(new Intl.NumberFormat("zh").resolvedOptions().locale).toMatch(/^zh/);
+    expect(fmtNumber(1234567, "zh")).toBe("1,234,567");
+  });
+
   it("formats zero and negative values", () => {
     expect(fmtNumber(0, "en")).toBe("0");
     expect(fmtNumber(-12345, "en")).toBe("-12,345");

src/__tests__/unit/i18n.test.ts

@@ -7,8 +7,6 @@ import {
   SUPPORTED_LANGUAGES,
 } from "../../i18n";
 import en from "../../i18n/en";
-import id from "../../i18n/id";
-import sv from "../../i18n/sv";
 
 function flattenKeys(obj: unknown, prefix = ""): string[] {
   if (obj === null || typeof obj !== "object") return [prefix];
@@ -25,12 +23,21 @@ function placeholders(value: string): string[] {
   return [...(value.match(/\{[a-zA-Z0-9_]+\}/g) ?? [])].sort();
 }
 
+/**
+ * Every supported language except the fallback. Derived once here: the
+ * placeholder and key-parity suites both iterate it, so a change to the
+ * default language or to the exclusion rule lands in one place instead of
+ * two copies that drift apart.
+ */
+const translated = SUPPORTED_LANGUAGES.filter((lang) => lang !== DEFAULT_LANGUAGE);
+
 describe("i18n", () => {
   describe("isSupportedLanguage", () => {
     it("returns true for supported languages", () => {
       expect(isSupportedLanguage("en")).toBe(true);
       expect(isSupportedLanguage("id")).toBe(true);
       expect(isSupportedLanguage("sv")).toBe(true);
+      expect(isSupportedLanguage("zh")).toBe(true);
     });
 
     it("returns false for unsupported languages", () => {
@@ -56,6 +63,11 @@ describe("i18n", () => {
       expect(t["nav.dashboard"]).toBe("Översikt");
     });
 
+    it("returns Simplified Chinese translations for 'zh'", () => {
+      const t = getTranslations("zh");
+      expect(t["nav.dashboard"]).toBe("仪表盘");
+    });
+
     it("falls back to English for unsupported language", () => {
       const t = getTranslations("fr");
       expect(t["nav.dashboard"]).toBe("Dashboard");
@@ -65,10 +77,12 @@ describe("i18n", () => {
   describe("placeholder parity", () => {
     // Translations is typed off en, so a missing key fails the build. Nothing
     // types the placeholders inside a value, so a locale can keep the key and
-    // silently drop the interpolation the key exists for.
-    it.each([["id", id], ["sv", sv]] as const)("keeps every %s placeholder that en declares", (_name, locale) => {
+    // silently drop the interpolation the key exists for. Driven off
+    // SUPPORTED_LANGUAGES so a new locale is covered the day it is registered.
+    it.each(translated)("keeps every %s placeholder that en declares", (lang) => {
+      const locale = getTranslations(lang);
       for (const key of Object.keys(en) as (keyof typeof en)[]) {
-        expect(placeholders(locale[key])).toEqual(placeholders(en[key]));
+        expect(placeholders(locale[key]), `${lang} ${key}`).toEqual(placeholders(en[key]));
       }
     });
   });
@@ -140,20 +154,18 @@ describe("i18n", () => {
     });
 
     it("lists all supported languages", () => {
-      expect(SUPPORTED_LANGUAGES).toContain("en");
-      expect(SUPPORTED_LANGUAGES).toContain("id");
-      expect(SUPPORTED_LANGUAGES).toContain("sv");
+      // The exact set, not one containment per language: a locale dropped from
+      // the array used to leave this test green, because its sibling parity
+      // suites iterate the array itself and would simply run one case fewer.
+      expect([...SUPPORTED_LANGUAGES]).toEqual(["en", "id", "sv", "zh"]);
     });
   });
 
   describe("key parity across locales", () => {
     const enKeys = new Set(flattenKeys(en));
 
-    it.each([
-      ["id", id],
-      ["sv", sv],
-    ])("locale %s has the same key set as en", (_name, locale) => {
-      const localeKeys = new Set(flattenKeys(locale));
+    it.each(translated)("locale %s has the same key set as en", (lang) => {
+      const localeKeys = new Set(flattenKeys(getTranslations(lang)));
       const missing = [...enKeys].filter((k) => !localeKeys.has(k));
       const extra = [...localeKeys].filter((k) => !enKeys.has(k));
       expect({ missing, extra }).toEqual({ missing: [], extra: [] });
@@ -174,21 +186,30 @@ describe("i18n", () => {
         expect(translations["lang.en"]).toBe("English");
         expect(translations["lang.id"]).toBe("Bahasa Indonesia");
         expect(translations["lang.sv"]).toBe("Svenska");
+        expect(translations["lang.zh"]).toBe("简体中文");
       }
     });
 
     it("localized language names differ per locale", () => {
       const en = getTranslations("en");
       const id = getTranslations("id");
       const sv = getTranslations("sv");
+      const zh = getTranslations("zh");
 
       expect(en["langLocal.id"]).toBe("Indonesian");
       expect(id["langLocal.id"]).toBe("Indonesia");
       expect(sv["langLocal.id"]).toBe("Indonesiska");
+      expect(zh["langLocal.id"]).toBe("印度尼西亚语");
 
       expect(en["langLocal.sv"]).toBe("Swedish");
       expect(id["langLocal.sv"]).toBe("Swedia");
       expect(sv["langLocal.sv"]).toBe("Svenska");
+      expect(zh["langLocal.sv"]).toBe("瑞典语");
+
+      expect(en["langLocal.zh"]).toBe("Chinese (Simplified)");
+      expect(id["langLocal.zh"]).toBe("Tionghoa (Sederhana)");
+      expect(sv["langLocal.zh"]).toBe("Kinesiska (förenklad)");
+      expect(zh["langLocal.zh"]).toBe("简体中文");
     });
   });
 });

src/assets.ts

@@ -12,8 +12,11 @@
  *
  * The hash covers the whole body, so it moves with the app version (the
  * client script embeds it) and with the translations (one script per
- * language). The four assets are fixed for the life of the isolate, so they
- * are built once at module init and served from a map.
+ * language). The asset set is fixed for the life of the isolate, so each
+ * asset is built once at module init and served from a map: every language
+ * registered in SUPPORTED_LANGUAGES costs one script built here, whatever
+ * the code's shape (a two-letter code today, a subtagged one if a locale
+ * ever needs it).
  *
  * A deploy reaches colos one at a time, so for a short window a document
  * from the new build can request its assets from an isolate on the old one
@@ -89,7 +92,13 @@ export function adminClientScriptPath(lang: string): string {
 }
 
 const STYLESHEET_PATH = /^\/_\/assets\/admin\.[0-9a-f]+\.css$/;
-const SCRIPT_PATH = /^\/_\/assets\/client\.([a-z]{2})\.[0-9a-f]+\.js$/;
+// The language segment is matched loosely, as any language-shaped code: a
+// subtagged code such as "zh-Hant" or "pt-BR" is recognized here even though
+// no such locale exists yet, so a build that ever registers one serves the
+// no-store fallback during a deploy window instead of a 404.
+// isSupportedLanguage below is the gate that decides which codes this build
+// actually holds a script for.
+const SCRIPT_PATH = /^\/_\/assets\/client\.([A-Za-z-]+)\.[0-9a-f]+\.js$/;
 
 /** The asset another build of this app would have emitted at the path, if the path names one. */
 function sameAssetFromThisBuild(path: string): Asset | undefined {

src/i18n/en.ts

@@ -406,11 +406,13 @@ const en = {
   "lang.en": "English",
   "lang.id": "Bahasa Indonesia",
   "lang.sv": "Svenska",
+  "lang.zh": "简体中文",
 
   // Language names (translated into this locale)
   "langLocal.en": "English",
   "langLocal.id": "Indonesian",
   "langLocal.sv": "Swedish",
+  "langLocal.zh": "Chinese (Simplified)",
 };
 
 export default en;

src/i18n/id.ts

@@ -410,11 +410,13 @@ const id: Translations = {
   "lang.en": "English",
   "lang.id": "Bahasa Indonesia",
   "lang.sv": "Svenska",
+  "lang.zh": "简体中文",
 
   // Language names (translated into this locale)
   "langLocal.en": "Inggris",
   "langLocal.id": "Indonesia",
   "langLocal.sv": "Swedia",
+  "langLocal.zh": "Tionghoa (Sederhana)",
 };
 
 export default id;

src/i18n/index.ts

@@ -5,15 +5,20 @@ import type { TranslationKey, Translations } from "./types";
 import en from "./en";
 import id from "./id";
 import sv from "./sv";
+import zh from "./zh";
 
 export type { TranslationKey, Translations };
 export type TranslateFn = (key: TranslationKey, params?: Record<string, string | number>) => string;
 
 export const DEFAULT_LANGUAGE = "en";
-export const SUPPORTED_LANGUAGES = ["en", "id", "sv"] as const;
+export const SUPPORTED_LANGUAGES = ["en", "id", "sv", "zh"] as const;
 export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
 
-const translations: Record<string, Translations> = { en, id, sv };
+// Keyed by the union rather than by string: a language added to
+// SUPPORTED_LANGUAGES without a table here fails the typecheck instead of
+// serving `undefined` through getTranslations, which would put `var T =
+// undefined;` in that language's client script and throw on the first t().
+const translations: Record<SupportedLanguage, Translations> = { en, id, sv, zh };
 
 export function isSupportedLanguage(lang: string): lang is SupportedLanguage {
   return SUPPORTED_LANGUAGES.includes(lang as SupportedLanguage);

src/i18n/sv.ts

@@ -410,11 +410,13 @@ const sv: Translations = {
   "lang.en": "English",
   "lang.id": "Bahasa Indonesia",
   "lang.sv": "Svenska",
+  "lang.zh": "简体中文",
 
   // Language names (translated into this locale)
   "langLocal.en": "Engelska",
   "langLocal.id": "Indonesiska",
   "langLocal.sv": "Svenska",
+  "langLocal.zh": "Kinesiska (förenklad)",
 };
 
 export default sv;