Skip to content

feat(i18n): add complete German (de) frontend locale support - #4254

Closed
Babo96 wants to merge 4 commits into
QuantumNous:mainfrom
Babo96:feat/add-german-locale
Closed

feat(i18n): add complete German (de) frontend locale support#4254
Babo96 wants to merge 4 commits into
QuantumNous:mainfrom
Babo96:feat/add-german-locale

Conversation

@Babo96

@Babo96 Babo96 commented Apr 14, 2026

Copy link
Copy Markdown

中文:
本次 PR 为 new-api 前端添加了完整的德语(German/de)国际化支持。
做了什么:

  1. 创建了 web/src/i18n/locales/de.json - 包含 3,516 行的完整德语翻译文件,涵盖所有现有中文/英文界面的对应翻译
  2. 更新了语言选择器组件 (LanguageSelector.jsx) - 添加德语选项
  3. 更新了偏好设置组件 (PreferencesSettings.jsx) - 支持德语显示
  4. 更新了 i18n 配置文件 (i18n.js) - 注册德语资源
  5. 更新了语言常量 (language.js) - 添加德语常量定义
  6. 更新了应用入口 (index.jsx) - 导入德语 locale 配置
    为什么这样改能生效:
  • 项目使用 i18next 作为国际化库,通过添加新的翻译文件并在配置中注册即可支持新语言
  • 遵循了项目已有的 i18n 架构模式(参考现有的 en、fr、ru、ja、vi 语言实现)
  • 翻译文件格式与现有语言文件保持一致(扁平 JSON 结构,以中文为 key)
  • 所有语言相关的组件都已通过 useTranslation hook 动态加载对应语言的翻译

English:
This PR adds complete German (de) internationalization support to the new-api frontend.
What was done:

  1. Created web/src/i18n/locales/de.json - a complete German translation file with 3,516 lines, covering translations for all existing Chinese/English interface elements
  2. Updated language selector component (LanguageSelector.jsx) - added German option
  3. Updated preferences component (PreferencesSettings.jsx) - added German display support
  4. Updated i18n configuration file (i18n.js) - registered German resources
  5. Updated language constants (language.js) - added German constant definitions
  6. Updated app entry point (index.jsx) - imported German locale configuration
    Why this works:
  • The project uses i18next as the internationalization library; adding new translation files and registering them in the configuration enables support for new languages
  • Follows the project's existing i18n architecture pattern (referencing the implementation of existing languages: en, fr, ru, ja, vi)
  • Translation file format is consistent with existing language files (flat JSON structure, with Chinese as keys)
  • All language-related components dynamically load corresponding translations via the useTranslation hook

🚀 变更类型 / Type of change

  • 🐛 Bug 修复 (Bug fix) / Bug fix
  • ✨ 新功能 (New feature) / New feature
  • ⚡ 性能优化 / 重构 (Refactor) / Refactor
  • 📝 文档更新 (Documentation) / Documentation

🔗 关联任务 / Related Issue

  • Closes # (如有 / if applicable)

✅ 提交前检查项 / Checklist

  • 人工确认 / Manual confirmation: 我已亲自整理并撰写此描述,没有直接粘贴未经处理的 AI 输出 / I have personally organized and written this description without directly pasting unprocessed AI output. (Note: As I don't speak Chinese, the Chinese portions were AI-translated from my English text.)
  • 非重复提交 / Not a duplicate: 我已搜索现有的 IssuesPRs,确认不是重复提交 / I have searched existing Issues and PRs to confirm this is not a duplicate submission.
  • Bug fix 说明 / Bug fix note: 若此 PR 标记为 Bug fix,我已提交或关联对应 Issue,且不会将设计取舍、预期不一致或理解偏差直接归类为 bug / If this PR is marked as Bug fix, I have submitted or linked the corresponding Issue and will not classify design trade-offs, mismatched expectations, or misunderstandings as bugs.
  • 变更理解 / Change understanding: 我已理解这些更改的工作原理及可能影响 / I understand how these changes work and their potential impact.
  • 范围聚焦 / Scope focus: 本 PR 未包含任何与当前任务无关的代码改动 / This PR does not contain any code changes unrelated to the current task.
  • 本地验证 / Local verification: 已在本地运行并通过测试或手动验证,维护者可以据此复核结果 / Has been run and tested locally or manually verified; maintainers can review the results.
  • 安全合规 / Security compliance: 代码中无敏感凭据,且符合项目代码规范 / No sensitive credentials in code, and follows project code standards.

📸 运行证明 / Proof of Work

文件变更概览 / File changes overview:

  • 新增 1 个文件 / 1 new file: web/src/i18n/locales/de.json (3,516 行德语翻译 / 3,516 lines of German translations)
  • 修改 5 个文件 / 5 modified files: 语言选择器 / language selector, 偏好设置 / preferences, i18n 配置 / i18n config, 语言常量 / language constants, 应用入口 / app entry
  • 总计 / Total: 6 个文件 / 6 files, +3,532 行 / +3,532 lines, -1 行 / -1 line
    本地验证步骤 / Local verification steps:
  1. 运行 bun install 安装依赖 / Run bun install to install dependencies
  2. 运行 bun run dev 启动开发服务器 / Run bun run dev to start the development server
  3. 访问应用,点击右上角语言选择器 / Visit the app and click the language selector in the top right corner
  4. 选择 "Deutsch" (德语) / Select "Deutsch" (German)
  5. 验证界面所有文本已正确切换为德语显示 / Verify that all interface text correctly switches to German display

截图 / Screenshots:
Screenshot_20260414_204142
Screenshot_20260414_204316
Screenshot_20260414_204337
Screenshot_20260414_204356

Summary by CodeRabbit

  • New Features
    • German (Deutsch) language added across the app: selectable from the header language dropdown and in Preferences.
    • UI now delivers German translations and uses German locale mappings so menus, dialogs, settings, and localized content appear in Deutsch when selected.

Babo96 added 3 commits April 13, 2026 21:48
Add German language support for frontend UI:
- Create de.json with 3,514 German translations
- Register German in language.js supportedLanguages array
- Add German variant normalization (de-DE, de-AT, etc.)
- Import and register de.json in i18n.js resources
- Add German option to LanguageSelector.jsx dropdown
- Add German option to PreferencesSettings.jsx language selector
- Import and map German Semi UI locale in index.jsx

All 3,514 translation keys have been translated to German.
Backend continues to return English for German users as intended.
Add German language support for frontend UI:
- Create de.json with 3,512 German translations
- All translations processed through 36 isolated batch files
- Each batch translated by separate agents to ensure quality
- Merged all batches back into final de.json
- Register German in language.js supportedLanguages array
- Add German variant normalization (de-DE, de-AT, etc.)
- Import and register de.json in i18n.js resources
- Add German option to LanguageSelector.jsx dropdown
- Add German option to PreferencesSettings.jsx language selector
- Import and map German Semi UI locale in index.jsx

Backend continues to return English for German users as intended.
Add German language support for frontend UI:
- Create de.json with 3,512 German translations
- Split into 30 sequential batches for thorough translation
- Processed batches 29-00 sequentially with translation agents
- Fixed JSON escaping issues in batches 17 and 26
- Merged all 30 batches back into final de.json
- Register German in language.js supportedLanguages array
- Add German variant normalization (de-DE, de-AT, etc.)
- Import and register de.json in i18n.js resources
- Add German option to LanguageSelector.jsx dropdown
- Add German option to PreferencesSettings.jsx language selector
- Import and map German Semi UI locale in index.jsx

Backend continues to return English for German users as intended.
@coderabbitai

coderabbitai Bot commented Apr 14, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8692f395-48ee-4758-95c5-c0fe653c2bd1

📥 Commits

Reviewing files that changed from the base of the PR and between a37a353 and 9809793.

📒 Files selected for processing (1)
  • web/src/i18n/language.js
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/src/i18n/language.js

Walkthrough

Adds German ("de") language support: UI dropdown options, i18n resource registration, supported language list and normalization, and Semi-UI locale mapping.

Changes

Cohort / File(s) Summary
Language Selector UI
web/src/components/layout/headerbar/LanguageSelector.jsx, web/src/components/settings/personal/cards/PreferencesSettings.jsx
Added German (de / "Deutsch") option to language dropdowns and Select options; selection/active styling mirrors existing language entries.
i18n Configuration
web/src/i18n/i18n.js, web/src/i18n/language.js
Imported de.json, registered de in i18next resources, added 'de' to supportedLanguages, and updated normalizeLanguage to immediately handle de/de-* codes.
Locale Integration
web/src/index.jsx
Imported German locale from @douyinfe/semi-ui and added de to the SemiLocaleWrapper mapping so Semi-UI resolves German locale.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Suggested reviewers

  • Calcium-Ion
  • seefs001

Poem

🐰
Deutsch hops in, a bright new tune,
Dropdowns shimmer under the moon,
Configs align, translations sing,
Little rabbit cheers — willkommen, spring! 🥕

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and specifically summarizes the main change: adding complete German (de) internationalization support to the frontend.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
web/src/i18n/language.js (1)

57-59: Tighten German variant matching to avoid over-broad normalization.

startsWith('de') also matches unrelated prefixes. Prefer matching de or de-* explicitly.

♻️ Proposed refinement
-  if (lower.startsWith('de')) {
+  if (lower === 'de' || lower.startsWith('de-')) {
     return 'de';
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@web/src/i18n/language.js` around lines 57 - 59, The German locale detection
using lower.startsWith('de') is too broad; update the check around the `lower`
variable (the German branch that currently returns 'de') to only match exactly
'de' or variants starting with 'de-' (e.g., use a conditional like lower ===
'de' || lower.startsWith('de-') or an equivalent regex) so unrelated prefixes
are not normalized to 'de'.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@web/src/i18n/language.js`:
- Around line 57-59: The German locale detection using lower.startsWith('de') is
too broad; update the check around the `lower` variable (the German branch that
currently returns 'de') to only match exactly 'de' or variants starting with
'de-' (e.g., use a conditional like lower === 'de' || lower.startsWith('de-') or
an equivalent regex) so unrelated prefixes are not normalized to 'de'.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dcd49651-11d1-471d-8531-8ef6e4fa1f9c

📥 Commits

Reviewing files that changed from the base of the PR and between 8c8661d and a37a353.

📒 Files selected for processing (6)
  • web/src/components/layout/headerbar/LanguageSelector.jsx
  • web/src/components/settings/personal/cards/PreferencesSettings.jsx
  • web/src/i18n/i18n.js
  • web/src/i18n/language.js
  • web/src/i18n/locales/de.json
  • web/src/index.jsx

@Babo96 Babo96 closed this Jun 11, 2026
@Babo96
Babo96 deleted the feat/add-german-locale branch June 11, 2026 19:11
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.

1 participant