Skip to content

feat: add i18n support with Simplified Chinese (zh-CN) translation#443

Open
yiliqi78 wants to merge 1 commit intowinfunc:mainfrom
yiliqi78:feat/i18n-zh-CN
Open

feat: add i18n support with Simplified Chinese (zh-CN) translation#443
yiliqi78 wants to merge 1 commit intowinfunc:mainfrom
yiliqi78:feat/i18n-zh-CN

Conversation

@yiliqi78
Copy link

Summary

  • Add internationalization (i18n) infrastructure using react-i18next with browser language auto-detection
  • Include complete Simplified Chinese (zh-CN) translation covering ~271 keys across 17 modules
  • Add LanguageSwitcher component (globe icon in titlebar) for easy language switching
  • Convert 4 key components as working examples: CustomTitlebar, ProjectList, Topbar, Settings

Motivation

As noted in the README's contributing section, internationalization is listed as an area for contribution. This PR establishes the i18n foundation and provides a complete Chinese translation, making opcode accessible to Chinese-speaking developers.

What's included

Infrastructure

  • src/i18n/index.ts — i18next config with LanguageDetector (auto-detects browser locale, persists choice to localStorage)
  • src/i18n/locales/en.json — English translation keys extracted from source
  • src/i18n/locales/zh-CN.json — Simplified Chinese translations
  • src/components/LanguageSwitcher.tsx — Dropdown component for switching languages

Converted components (as examples)

Component Scope
CustomTitlebar.tsx Tooltip labels, dropdown menu items
ProjectList.tsx All user-facing strings (title, buttons, empty state)
Topbar.tsx Status indicator, version display, install prompts
Settings.tsx Header, 8 tab labels, all form labels/descriptions, toast messages, permission rules

Translation conventions

English Chinese Rationale
Agent 智能体 Standard AI term in Chinese (not 代理)
Checkpoint 检查点
Token Token Industry standard, kept as-is
Claude Code / opcode Claude Code / opcode Brand names, kept as-is
Hook 钩子
MCP MCP (模型上下文协议) Abbreviation + full name

How to convert remaining components

The pattern is straightforward — each component just needs:

import { useTranslation } from "react-i18next";

// Inside the component:
const { t } = useTranslation();

// Replace hardcoded text:
// Before: <h1>Projects</h1>
// After:  <h1>{t("projects.title")}</h1>

// With interpolation:
// Before: <span>View all ({count})</span>
// After:  <span>{t("projects.viewAll", { count })}</span>

The remaining ~50 components can be converted incrementally in follow-up PRs.

Dependencies added

  • i18next — Core i18n framework
  • react-i18next — React bindings
  • i18next-browser-languagedetector — Auto-detect user's browser language

Test plan

  • App starts without errors with default English locale
  • Switching to zh-CN via globe icon in titlebar changes all converted component text to Chinese
  • Language preference persists across app restarts (stored in localStorage)
  • Settings page tab labels, form labels, and toast messages display correctly in both languages
  • ProjectList empty state, headers, and buttons display correctly in both languages
  • Topbar version status and install prompts display correctly in both languages
  • TypeScript compilation passes (tsc --noEmit)

…tion

- Set up react-i18next with browser language detection
- Add English (en) and Simplified Chinese (zh-CN) locale files
  covering ~271 translation keys across 17 modules
- Create LanguageSwitcher component (globe icon dropdown in titlebar)
- Convert 4 key components as examples:
  - CustomTitlebar: tooltip labels, dropdown menu items
  - ProjectList: all user-facing strings
  - Topbar: status indicator, version display, install prompts
  - Settings: header, tab labels, all form labels/descriptions,
    toast messages, permission rules section
- Remaining components can be converted incrementally using
  the same useTranslation() + t("key") pattern

Translation conventions:
- Agent → 智能体 (not 代理)
- Checkpoint → 检查点
- Token → kept as-is (industry standard)
- Claude Code / opcode → kept as-is (brand names)
- Chinese punctuation used throughout
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments