add description to translations

client/ui/frontend/CLAUDE.md

@@ -151,7 +151,7 @@ if (result !== confirmLabel) return;
 
 Compare against the variable, never against an English literal.
 
-**Bundle files.** Keys live in `client/ui/i18n/locales/<code>/common.json` as a flat key→string map (`"settings.tabs.general": "General"`). Placeholders use single braces: `"Install version {version}"`. Adding a key: add to `en/common.json` first (the fallback), then every other locale. Missing keys fall back to English; if even that misses, i18next returns the key itself so the gap is visible in the UI rather than blank.
+**Bundle files.** Keys live in `client/ui/i18n/locales/<code>/common.json` in Chrome-extension JSON shape: each key maps to `{ "message": "General", "description": "..." }` (not a bare string). `description` is translator context for Crowdin (read natively from the source file, ignored at runtime); only `en/common.json` carries descriptions, target bundles carry just `message`. `lib/i18n.ts` strips each entry down to its `message` when building the i18next `resources`, so `t()` lookups are unchanged. Placeholders use single braces: `"Install version {version}"`. Adding a key: add `{ "message": "…", "description": "…" }` to `en/common.json` first (the fallback), then `{ "message": "…" }` to every other locale. Missing keys fall back to English; if even that misses, i18next returns the key itself so the gap is visible in the UI rather than blank.
 
 **Adding a language.** Drop `client/ui/i18n/locales/<code>/common.json` and append the row to `client/ui/i18n/locales/_index.json`. Also drop the matching `<code>.svg` into `src/assets/flags/1x1/` — source those from the NetBird dashboard repo's same-name folder so the icon set stays consistent: https://github.com/netbirdio/dashboard/tree/main/public/assets/flags/1x1 . **Only check in flags for languages we actually ship** — `LanguagePicker.tsx` eager-globs that directory at build time, so every SVG in it gets bundled into the Wails app whether referenced or not. `src/lib/i18n.ts` discovers bundles via `import.meta.glob('../../../i18n/locales/*/common.json', { eager: true })` (the locales tree lives outside `frontend/`, so `vite.config.ts` whitelists the parent dir under `server.fs.allow`), so no code change is needed to wire the new locale in. Vite still inlines each bundle at build time, same chunk shape as static imports. The Go side reads the same tree (embedded via `client/ui/main.go`'s `embed.FS`), so the tray menu localises automatically off the same files.
 

client/ui/frontend/src/lib/i18n.ts

@@ -15,7 +15,13 @@ import { LanguageCode } from "@bindings/i18n/models.js";
 // empty match in some Vite dev-mode setups. `server.fs.allow` in
 // `vite.config.ts` whitelists the parent directory so the dev server
 // serves the JSON.
-const bundleModules = import.meta.glob<Record<string, string>>(
+//
+// Each bundle is Chrome-extension JSON: every key maps to
+// `{ message, description? }`. `description` exists only so Crowdin can
+// show translator context — it's stripped here and i18next sees a flat
+// key->message map exactly as before.
+type BundleEntry = { message: string; description?: string };
+const bundleModules = import.meta.glob<Record<string, BundleEntry>>(
     "../../../i18n/locales/*/common.json",
     { eager: true, import: "default" },
 );
@@ -24,7 +30,12 @@ const resources: Record<string, { common: Record<string, string> }> = {};
 for (const path in bundleModules) {
     const match = path.match(/locales\/([^/]+)\/common\.json$/);
     if (match) {
-        resources[match[1]] = { common: bundleModules[path] };
+        const entries = bundleModules[path];
+        const messages: Record<string, string> = {};
+        for (const key in entries) {
+            messages[key] = entries[key].message;
+        }
+        resources[match[1]] = { common: messages };
     }
 }