feat(web): set up i18n foundation with a language switcher#311
feat(web): set up i18n foundation with a language switcher#311cavidelizade wants to merge 1 commit into
Conversation
Introduce internationalization so the UI can be translated. Adds i18next + react-i18next, initialized once from a localStorage-backed language preference (default English), with English and Spanish resource bundles split into "common" and "auth" namespaces. As the first converted surface, the sign-in page now pulls its strings from translation keys, and a compact LanguageSwitcher (English / Español) lets you change the UI language; the choice persists across reloads. The rest of the app can be migrated to translation keys incrementally on top of this. Closes Devlaner#32 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThe web app adds English and Spanish i18n resources, persists language selection, introduces a language switcher, initializes i18n at startup, and localizes the login page. ChangesWeb internationalization
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant LanguageSwitcher
participant i18n
participant LoginPage
User->>LanguageSwitcher: select language
LanguageSwitcher->>i18n: setLanguage(code)
i18n-->>LoginPage: resolve translated strings
LoginPage-->>User: render localized login UI
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Tools execution failed with the following error: Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error) 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.
🧹 Nitpick comments (1)
apps/web/src/i18n/index.ts (1)
13-18: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider deriving language labels from a single source.
SUPPORTED_LANGUAGEShardcodes labels ('English','Español') that also exist incommon.jsonunderlanguageName. Adding a third language requires updating both places. IfSUPPORTED_LANGUAGESis primarily used for theLanguageCodetype derivation and the switcher uses thet('common:languageName.es')path, consider keeping onlycodein the array and sourcing labels from the translation bundles.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/web/src/i18n/index.ts` around lines 13 - 18, Update SUPPORTED_LANGUAGES to contain only language codes, removing the duplicated label values, while preserving LanguageCode derivation from the array. Ensure language-switcher display labels continue to come from the translation bundles via the existing common:languageName translation paths.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@apps/web/src/i18n/index.ts`:
- Around line 13-18: Update SUPPORTED_LANGUAGES to contain only language codes,
removing the duplicated label values, while preserving LanguageCode derivation
from the array. Ensure language-switcher display labels continue to come from
the translation bundles via the existing common:languageName translation paths.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 10318c32-57ba-49a2-8cf4-cfcde15977cb
⛔ Files ignored due to path filters (1)
apps/web/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (10)
apps/web/package.jsonapps/web/src/components/LanguageSwitcher.tsxapps/web/src/i18n/index.tsapps/web/src/i18n/locales/en/auth.jsonapps/web/src/i18n/locales/en/common.jsonapps/web/src/i18n/locales/es/auth.jsonapps/web/src/i18n/locales/es/common.jsonapps/web/src/main.tsxapps/web/src/pages/LoginPage.tsxapps/web/tsconfig.app.json
|
@martian56 this one's green with no CodeRabbit comments — the i18n foundation (react-i18next + language switcher, sign-in page translated en/es). Good to merge when you get a chance. |
|
@cavidelizade I added some description to the #32, closing this PR, feel free to open a new one |
2 participants
Feature summary
Sets up internationalization for the UI: a react-i18next foundation, English + Spanish bundles, and a language switcher, with the sign-in page converted as the first translated surface.
Linked issues / discussion
Closes #32
User-facing behavior
The sign-in page now renders from translation keys and shows a Language selector (English / Español). Choosing a language re-renders the page in that language immediately and persists the choice to
localStorage, so it survives reloads. The default is English.What changed
UI (
apps/web/)i18next+react-i18next.src/i18n/index.ts: single i18next init, resources forenandessplit intocommonandauthnamespaces, initial language read fromlocalStorage(devlane.language, defaulten), plussetLanguage()andSUPPORTED_LANGUAGES.src/i18n/locales/{en,es}/{common,auth}.json: the string bundles.main.tsx: imports./i18nto initialize before render.LoginPage.tsx: strings replaced witht('auth:…')keys.LanguageSwitcher.tsx: compact selector, mounted on the sign-in page.tsconfig.app.json:resolveJsonModulefor importing the JSON bundles.API / Database
Why this design
react-i18next is the de-facto standard for React i18n and integrates cleanly with hooks. A single initialized instance keeps
useTranslation()working app-wide without threading a provider. Namespaces (common,auth) keep bundles small and lazy-migratable. The sign-in page is a good first surface: it's public (verifiable without auth), self-contained, and exercises the whole path (keys, switcher, persistence). This is deliberately a foundation — the rest of the app can be migrated to keys incrementally without further plumbing.Test plan
npm run validate(typecheck + lint + prettier) greenlocalStorage=es)Out of scope (follow-ups)
AI assistance
Claude Code (Claude Opus 4.8)— and AI-assisted commits include aCo-Authored-By:trailerChecklist
Summary by CodeRabbit