Instruction file imported from yoshino-s/sliver-ui (.cursor/rules/i18n.mdc). Copyright stays with the author.

Internationalization (i18n)

This app uses react-i18next. Config: frontend/src/i18n/index.ts. Locales: frontend/src/i18n/locales/en.json (source) and zh.json.

When adding or changing UI

1. Never hardcode user-visible copy in components (labels, buttons, titles, placeholders, tooltips, empty states, notifications shown to users).
2. Use useTranslation() and t("namespace.key") (or pass labelKey and call t(labelKey) in parents).
3. Always update both locale files in the same change — add/edit/remove the key in en.json and zh.json together. Keys and nesting must match.
4. Prefer nested keys by feature: nav.*, settings.*, connect.*, <pageName>.* (e.g. listeners.title).
5. Use English in en.json as the canonical wording; zh.json is Simplified Chinese.

Key conventions

// ✅ GOOD
const { t } = useTranslation();
<Button>{t("settings.validate")}</Button>
<Text>{t("loot.empty", { count: rows.length })}</Text>

// ❌ BAD
<Button>Validate</Button>

// en.json + zh.json — same structure, both files
{
  "listeners": {
    "title": "Listeners",
    "start": "Start listener"
  }
}

Modify / remove / rename

• Renaming or removing UI text → rename/remove the key in both en.json and zh.json, and update all t(...) call sites.
• Do not leave orphaned keys when removing a feature; do not leave t("missing.key") without entries in both files.

Do not translate

• RPC/protobuf field names, IDs, hostnames, raw API/JSON payloads
• Sample config templates (sampleConfig), dev-only technical tokens
• Third-party or server-returned error text unless explicitly product-owned

Checklist before finishing

• No new hardcoded user-facing strings in TSX
• New/changed keys exist in en.json and zh.json with identical paths
• pnpm run build passes (JSON must stay valid)