Merge pull request #395 from huy97/feature/add-vietnamese-locale

feat(i18n): add Vietnamese (vi) locale

AGENTS.md

@@ -11,7 +11,7 @@ donutbrowser/
 │   ├── app/                          # App router (page.tsx, layout.tsx)
 │   ├── components/                   # 50+ React components (dialogs, tables, UI)
 │   ├── hooks/                        # Event-driven React hooks
-│   ├── i18n/locales/                 # Translations (en, es, fr, ja, pt, ru, zh)
+│   ├── i18n/locales/                 # Translations (en, es, fr, ja, ko, pt, ru, vi, zh)
 │   ├── lib/                          # Utilities (themes, toast, browser-utils)
 │   └── types.ts                      # Shared TypeScript interfaces
 ├── src-tauri/                        # Rust backend (Tauri)
@@ -76,12 +76,12 @@ Linux/Windows swap `~/Library/Logs/com.donutbrowser/` for the platform-appropria
 
 - Never write user-facing strings as raw English literals in JSX, toast messages, dialog titles/descriptions, button labels, placeholders, table headers, tooltips, or empty-state text. Always go through `t("namespace.key")` from `useTranslation()`.
 - This applies to every component under `src/` — including new ones. If a component doesn't already import `useTranslation`, add it.
-- Adding a new string means adding the key to ALL seven locale files in `src/i18n/locales/` (en, es, fr, ja, pt, ru, zh) — not just `en.json`. The English version alone is incomplete work.
+- Adding a new string means adding the key to ALL nine locale files in `src/i18n/locales/` (en, es, fr, ja, ko, pt, ru, vi, zh) — not just `en.json`. The English version alone is incomplete work.
 - Reuse existing keys (`common.buttons.*`, `common.labels.*`, `createProfile.*`, etc.) before creating new namespaces. Check `en.json` first.
 - Strings excluded from this rule: `console.log/warn/error`, dev-only debug labels, internal IDs, CSS class names, type names. If unsure whether a string renders to the user, assume it does and translate it.
 - **Never use `t(key, "fallback")` with a default-value second argument.** The 2-arg form is forbidden — every key must exist in every locale file before the call site lands. Fallbacks mask missing translations: a key missing from `ru.json` will silently render the English fallback to Russian users, so the bug never surfaces in CI or review. Only call `t("namespace.key")`. If a translation is missing for any locale, that's a bug to fix at the JSON, not a hole to paper over at the call site.
 - Empty-string values in non-English locales are also forbidden — a locale either has the right translation or it has the same content as English; never `""`. If a particular language doesn't need a particular phrase (e.g. a suffix that doesn't grammatically apply), refactor the JSX to use a single interpolated key (`t("foo.bar", { name })` with `"...{{name}}..."` in each locale) instead of splitting prefix/suffix.
-- When adding or removing keys across all seven locales, use a one-shot Python script in `/tmp/` that loads each `*.json`, mutates it, and writes it back. Seven sequential `Edit` calls drift (typos, ordering differences) and burn tokens; a single script keeps the locales in lockstep and is easy to throw away.
+- When adding or removing keys across all nine locales, use a one-shot Python script in `/tmp/` that loads each `*.json`, mutates it, and writes it back. Nine sequential `Edit` calls drift (typos, ordering differences) and burn tokens; a single script keeps the locales in lockstep and is easy to throw away.
 
 ## Backend error codes (mandatory)
 
@@ -95,7 +95,7 @@ User-facing errors returned from a Tauri command MUST be JSON `{ "code": "FOO_BA
    ```
 2. Add `"FOO_BAR"` to the `BackendErrorCode` union in `src/lib/backend-errors.ts`.
 3. Add a `case "FOO_BAR":` in the switch that returns `t("backendErrors.fooBar", …)`.
-4. Add `backendErrors.fooBar` to all seven locale files.
+4. Add `backendErrors.fooBar` to all nine locale files.
 
 Raw error strings reach the user untranslated; that's the bug pattern this rule blocks.
 
@@ -148,7 +148,7 @@ Reference implementations: `proxy-management-dialog.tsx`, `extension-management-
 
 All app-wide shortcuts live in `src/lib/shortcuts.ts`:
 
-- `SHORTCUTS[]` — one entry per shortcut (id, label translation key, group, key, modifier flags). The label key must exist in all seven locales.
+- `SHORTCUTS[]` — one entry per shortcut (id, label translation key, group, key, modifier flags). The label key must exist in all nine locales.
 - `formatShortcut(s)` returns platform-correct token strings (`["⌘", "K"]` on mac, `["Ctrl", "K"]` elsewhere) — used by both the shortcuts page and the command palette.
 - `matchesShortcut(s, event)` matches a real `KeyboardEvent` and rejects the wrong-platform modifier so Ctrl+K on macOS never fires a `mod: true` shortcut.
 - `matchesGroupDigit(event)` returns 1–9 if Mod+digit was pressed — group switching is dynamic (driven by `orderedGroupTargets` in `page.tsx`) and isn't in the `SHORTCUTS` table.
@@ -158,7 +158,7 @@ Dispatch: the global `keydown` listener and the `runShortcut` callback both live
 1. Append to `SHORTCUTS` in `src/lib/shortcuts.ts`. Add the `ShortcutId` variant.
 2. Add a `case "yourId":` in `runShortcut` in `page.tsx`.
 3. Add the icon mapping in `src/components/command-palette.tsx::ICONS`.
-4. Add `shortcuts.yourId` (label) to all seven locale files.
+4. Add `shortcuts.yourId` (label) to all nine locale files.
 
 The command palette (Mod+K) is built on the shadcn `Command` primitive with a token-AND fuzzy filter — `fuzzyFilter` in `command-palette.tsx`. The `CommandDialog` wrapper now forwards `filter`/`shouldFilter` to the inner `Command` for callers that need custom matching.
 

CONTRIBUTING.md

@@ -73,7 +73,7 @@ codeql database analyze /tmp/codeql-rust --format=sarifv2.1.0 --output=/tmp/rust
 
 ## Key Rules
 
-- **Translations**: Any UI text changes must be reflected in all 7 locale files (`src/i18n/locales/`)
+- **Translations**: Any UI text changes must be reflected in all 9 locale files (`src/i18n/locales/`)
 - **Tauri commands**: If you modify Tauri commands, the `test_no_unused_tauri_commands` test will catch unused ones
 - **No hardcoded colors**: Use theme CSS variables (see `src/lib/themes.ts`), never Tailwind color classes like `text-red-500`
 - **No lock file changes**: Don't update `pnpm-lock.yaml` or `Cargo.lock` unless updating dependencies is the purpose of the PR

src/components/settings-dialog.tsx

@@ -483,7 +483,8 @@ export function SettingsDialog({
                 | "zh"
                 | "ja"
                 | "ko"
-                | "ru"),
+                | "ru"
+                | "vi"),
         );
         setOriginalLanguage(selectedLanguage);
       }

src/i18n/index.ts

@@ -8,6 +8,7 @@ import ja from "./locales/ja.json";
 import ko from "./locales/ko.json";
 import pt from "./locales/pt.json";
 import ru from "./locales/ru.json";
+import vi from "./locales/vi.json";
 import zh from "./locales/zh.json";
 
 export const SUPPORTED_LANGUAGES = [
@@ -19,6 +20,7 @@ export const SUPPORTED_LANGUAGES = [
   { code: "ja", name: "Japanese", nativeName: "日本語" },
   { code: "ko", name: "Korean", nativeName: "한국어" },
   { code: "ru", name: "Russian", nativeName: "Русский" },
+  { code: "vi", name: "Vietnamese", nativeName: "Tiếng Việt" },
 ] as const;
 
 export type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number]["code"];
@@ -36,6 +38,7 @@ export const LANGUAGE_FALLBACKS: Record<string, string[]> = {
   "es-ES": ["es", "en"],
   "fr-CA": ["fr", "en"],
   "fr-FR": ["fr", "en"],
+  "vi-VN": ["vi", "en"],
 };
 
 export function getLanguageWithFallback(systemLocale: string): string {
@@ -65,6 +68,7 @@ const resources = {
   ja: { translation: ja },
   ko: { translation: ko },
   ru: { translation: ru },
+  vi: { translation: vi },
 };
 
 i18n.use(initReactI18next).init({