feat: complete English, French and Russian translation and add i18n configuration - #1991
Conversation
WalkthroughAdds i18n CLI tooling and config, introduces Russian locale and updates runtime resource shape, internationalizes several UI strings, extends glossaries with security and billing sections, and updates the language selector to include Russian. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant App
participant i18next as i18next
participant Resources as Locales (zh/en/fr/ru)
participant UI as SettingGlobalModel.jsx
User->>App: Open settings page / choose language
App->>i18next: init({ resources: { lang: payload }, lng })
i18next->>Resources: Load language payload
i18next-->>App: ready
App->>UI: Render component
UI->>i18next: t('key_for_extraText/banner')
i18next-->>UI: localized string
UI-->>User: Render localized UI
sequenceDiagram
autonumber
actor Dev
participant CLI as bunx i18next-cli
participant Config as web/i18next.config.js
participant Src as src/**/*.js,ts,jsx,tsx
participant Locales as src/i18n/locales/{{language}}.json
Dev->>CLI: run extract/status/sync/lint
CLI->>Config: load defineConfig
CLI->>Src: scan files (ignore src/i18n/**, skip ignoredAttributes)
CLI->>Locales: write/update locale JSON (sorted, mergeNamespaces)
CLI-->>Dev: report results
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
web/package.json (1)
20-57: Movei18next-clito devDependencies.
i18next-cliis only used via tooling scripts (bunx i18next-cli …) and isn’t required at runtime, so keeping it underdependenciesbloats the production install surface. Shift it todevDependenciesalongside the rest of the build tooling.Apply this diff:
- "i18next-browser-languagedetector": "^7.2.0", - "i18next-cli": "^1.10.3", + "i18next-browser-languagedetector": "^7.2.0",and add it under
devDependencies:"eslint-plugin-react-hooks": "^5.2.0", "postcss": "^8.5.3", "prettier": "^3.0.0", "tailwindcss": "^3", "typescript": "4.4.2", - "vite": "^5.2.0" + "vite": "^5.2.0", + "i18next-cli": "^1.10.3"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/translation-glossary.md(1 hunks)web/i18next.config.ts(1 hunks)web/package.json(2 hunks)web/src/i18n/i18n.js(1 hunks)web/src/pages/Setting/Model/SettingGlobalModel.jsx(3 hunks)
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
web/i18next.config.js(1 hunks)
🔇 Additional comments (4)
web/i18next.config.js (4)
24-28: LGTM!The locale configuration correctly specifies the three supported languages and aligns with the PR objectives.
29-36: LGTM!The extraction configuration is well-structured:
- Input pattern correctly targets all React source files
- Ignoring
src/i18n/**/*prevents circular extraction- Output template follows standard conventions
- Flat key structure (disabled separators) is appropriate for the chosen approach
Also applies to: 89-94
91-91: Keep removeUnusedKeys: true enabled
Search found no dynamic translation key constructions; unused-keys removal won’t delete runtime-generated keys.
20-22: i18next-cli version valid The devDependency ^1.10.3 exists in the npm registry and matches the installed version.
Add comprehensive i18next configuration for internationalization support with Chinese, English, and French locales. Configure extraction settings and ignore patterns for React components. Expand translation glossary with security and billing terminology including Two-Factor Authentication, 2FA, and pricing multiplier terms.
Relocated i18next-cli from dependencies to devDependencies as it's only needed for development tasks like translation management, not for runtime functionality.
Converted i18next.config.ts to i18next.config.js and added AGPL license header. The change simplifies the build process by removing TypeScript compilation for this configuration file while maintaining the same functionality.
Reordered the ignoredAttributes array in i18next.config.js alphabetically and added several new attributes to prevent unnecessary translation extraction. This improves the localization process by excluding more non-translatable properties like accept, align, autoComplete, clipRule, crossOrigin, and others.
Enable i18next pluralization by setting disablePlurals to false and update multiple translation keys to use _one/_other suffixes for proper singular/plural handling. This improves localization accuracy for count-dependent strings like "X keys", "X models", and "X times".
- Add pluralization rules for French locale using _one, _many, _other suffixes - Complete missing French translations for web search, file search, and key count strings - Add translations for import/export configuration functionality - Fill in missing translations for UI elements like ID, IP, expand, and various status messages - Improve French localization coverage for better user experience
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
web/i18next.config.js (3)
89-89: Exercise caution with automatic key removal.While
removeUnusedKeys: truekeeps translations clean, it can inadvertently delete keys that extraction misses, such as:
- Dynamically constructed keys (e.g.,
t(`errors.${code}`))- Keys in lazy-loaded or feature-flagged components
- Keys used in conditional rendering paths not traversed during extraction
Ensure your test coverage and extraction patterns are comprehensive before relying on automatic cleanup, or consider running extraction with this option disabled initially to verify which keys would be removed.
23-28: Consider adding a fallback locale configuration.With French translations at 82% completion and no fallback defined, missing keys will display as raw key strings (e.g., "settings.profile.title"). Adding a fallback locale would provide a better user experience.
Consider adding a
fallbackLngconfiguration to the root of your i18next runtime configuration (not in this extraction config, but in your main i18n setup file):// In your i18n initialization file (e.g., src/i18n/i18n.js) i18next.init({ fallbackLng: { 'fr': ['en'], // French falls back to English 'default': ['en'] // Other locales fall back to English }, // ... other config });
20-94: Optional: Consider type generation for TypeScript type safety.Based on learnings, i18next-cli v1.10.3 supports generating TypeScript types for translation keys, which can provide autocomplete and type safety. This is particularly valuable for large translation files (2041 keys per PR summary).
If not already configured in your package.json scripts, consider adding type generation:
// In package.json scripts section { "i18n:gen-types": "i18next-cli gen-types --src 'src/i18n/locales' --out 'src/i18n/types.ts'" }Then import and use the types in your i18n setup for autocomplete and compile-time validation of translation keys.
Based on learnings
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/translation-glossary.md(1 hunks)web/i18next.config.js(1 hunks)web/package.json(2 hunks)web/src/i18n/i18n.js(1 hunks)web/src/pages/Setting/Model/SettingGlobalModel.jsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- web/package.json
- web/src/pages/Setting/Model/SettingGlobalModel.jsx
- web/src/i18n/i18n.js
- docs/translation-glossary.md
🔇 Additional comments (1)
web/i18next.config.js (1)
20-94: Configuration looks solid. Past issues successfully resolved.The i18next configuration is well-structured with proper locale definitions, comprehensive ignoredAttributes, and correct plural handling for French. The fixes from previous reviews (removing duplicate attributes and enabling plurals) are confirmed in place.
Add comprehensive French translation glossary document to standardize key project terminology. The glossary includes translations for core concepts, model-related terms, user management, recharge & redemption, channel management, and security terms. This ensures consistency and accuracy in French translations across the project, with specific guidance on technical terms and contextual usage.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/translation-glossary.fr.md (1)
1-106: Well-structured French glossary with comprehensive terminology.The French glossary is well-organized, providing clear translations and context for key project terminology. The bilingual approach (French/English descriptions) aids contributors from both language backgrounds.
The static analysis tool flags lines 73, 79, and 85 for using emphasis (bold) instead of formal headings. However, this styling choice is acceptable here—it provides visual separation for subsections within the Translation Guidelines without adding excessive heading hierarchy. This is a common documentation pattern.
If you prefer strict Markdown compliance, you could convert the bold text to level 4 headings:
-**Invite/Entrée (Prompt/Input)** +#### Invite/Entrée (Prompt/Input)-**Jeton (Token)** +#### Jeton (Token)-**Quota (Quota)** +#### Quota (Quota)docs/translation-glossary.ru.md (1)
1-107: Comprehensive Russian glossary with appropriate language-specific guidance.The Russian glossary maintains consistency with the French version while appropriately addressing Russian-specific linguistic features (e.g., four plural forms: _one, _few, _many, _other). The bilingual descriptions ensure accessibility for contributors.
The static analysis flags at lines 73, 79, and 85 are the same stylistic choice as the French glossary—using bold text for subsection separation. This is acceptable for readability.
If strict Markdown compliance is preferred:
-**Промпт/Ввод (Prompt/Input)** +#### Промпт/Ввод (Prompt/Input)-**Token** +#### Token-**Квота (Quota)** +#### Квота (Quota)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/translation-glossary.fr.md(1 hunks)docs/translation-glossary.ru.md(1 hunks)web/i18next.config.js(1 hunks)web/src/components/layout/headerbar/LanguageSelector.jsx(2 hunks)web/src/i18n/i18n.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/i18n/i18n.js
🧰 Additional context used
🧬 Code graph analysis (1)
web/src/components/layout/headerbar/LanguageSelector.jsx (1)
web/src/hooks/common/useHeaderBar.js (1)
currentLang(39-39)
🪛 markdownlint-cli2 (0.18.1)
docs/translation-glossary.ru.md
73-73: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
79-79: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
85-85: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
docs/translation-glossary.fr.md
73-73: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
79-79: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
85-85: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🔇 Additional comments (3)
web/src/components/layout/headerbar/LanguageSelector.jsx (2)
23-23: LGTM! Consistent import pattern.The RU flag import follows the established pattern for other language flags.
52-58: LGTM! Russian language option properly integrated.The Russian language option is correctly implemented:
- Consistent structure with existing language items (zh, en, fr)
- Proper onClick handler:
onLanguageChange('ru')- Active state styling via
currentLang === 'ru'- Accessible with title and label
web/i18next.config.js (1)
1-95: i18next configuration validated – extraction ran cleanlyExtraction completed without warnings or errors, and the config is correctly structured for all target locales.
|
@Calcium-Ion please do a review. Otherwise I'll need to resolve merge conflicts every day. :) |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/translation-glossary.fr.md (1)
73-85: Use proper markdown headings for subsection titles.Lines 73, 79, and 85 use bold text (
**text**) instead of proper markdown headings for subsection titles. This reduces document structure, makes navigation harder, and impacts accessibility.Apply this diff to use proper headings:
-**Invite/Entrée (Prompt/Input)** +#### Invite/Entrée (Prompt/Input) -**Jeton (Token)** +#### Jeton (Token) -**Quota (Quota)** +#### Quota (Quota)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
docs/translation-glossary.fr.md(1 hunks)docs/translation-glossary.ru.md(1 hunks)web/i18next.config.js(1 hunks)web/src/components/layout/headerbar/LanguageSelector.jsx(2 hunks)web/src/i18n/i18n.js(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/translation-glossary.ru.md
🚧 Files skipped from review as they are similar to previous changes (1)
- web/src/i18n/i18n.js
🧰 Additional context used
🧬 Code graph analysis (1)
web/src/components/layout/headerbar/LanguageSelector.jsx (1)
web/src/hooks/common/useHeaderBar.js (1)
currentLang(39-39)
🪛 markdownlint-cli2 (0.18.1)
docs/translation-glossary.fr.md
73-73: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
79-79: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
85-85: Emphasis used instead of a heading
(MD036, no-emphasis-as-heading)
🔇 Additional comments (2)
web/src/components/layout/headerbar/LanguageSelector.jsx (1)
23-23: LGTM! Russian language support added correctly.The Russian locale integration is implemented consistently with existing language options, using the same patterns for imports, event handling, styling, and visual structure.
Also applies to: 52-58
web/i18next.config.js (1)
20-95: LGTM! i18n configuration is well-structured.The i18next configuration correctly:
- Adds Russian (
ru) to the supported locales alongsidezh,en, andfr- Enables plural support (
disablePlurals: false) for proper French grammar- Configures comprehensive attribute ignoring to avoid extracting non-translatable content
- Uses appropriate settings for key management and namespace merging
Previous issues with duplicate attributes and plural handling have been addressed.
|
|
||
| - **Complétion (Completion)** : Contenu de sortie du modèle | ||
| - **Ratio (Ratio)** : Multiplicateur pour le calcul des prix | ||
| - **Code d'échange (Redemption Code)** : Utilisé au lieu de "Code d'échange" pour plus de précision |
There was a problem hiding this comment.
Fix redundant terminology note.
The note states that "Code d'échange" is used "au lieu de 'Code d'échange'" (instead of itself), which appears to be a copy-paste error.
Please clarify which alternative term should NOT be used. For example, if the intent was to avoid "Jeton d'échange" or "Code de rachat", specify that alternative term in the note.
🤖 Prompt for AI Agents
In docs/translation-glossary.fr.md around line 100, the glossary entry currently
reads "**Code d'échange (Redemption Code)** : Utilisé au lieu de "Code
d'échange"" which is a duplicate/copy-paste error; update the parenthetical note
to specify the actual term that should NOT be used (for example replace the
second "Code d'échange" with the intended alternative like "Code de rachat" or
"Jeton d'échange"), so the line clearly states which alternative term is
discouraged.
feat: complete English, French and Russian translation and add i18n configuration
2 participants
Complete English translation for the application and add comprehensive i18next configuration for internationalization support. Configure extraction settings and ignore patterns for React components. Expand translation glossary with security and billing terminology including Two-Factor Authentication, 2FA, and pricing multiplier terms.
Main Changes:
Summary by CodeRabbit
New Features
Documentation
Chores