📌 Description
src/shared/i18n/I18nProvider.tsx and useTranslation provide localized strings, but there is no mechanism to choose or persist a locale — the provider mounts a fixed locale above the router in App.tsx. Add locale state (persisted to localStorage and synced to <html lang>) exposed via the i18n context, plus a minimal programmatic API (setLocale) so a future switcher and SSR/lang-attribute correctness work. This is the data/state-management side of i18n (the UI control belongs to the other lane).
💡 Why it matters: A fixed locale with no persistence blocks real multi-language support and leaves <html lang> wrong for screen readers.
🧩 Requirements and context
- Add
locale + setLocale to the i18n context with a typed locale union.
- Persist the selection to localStorage and restore on mount.
- Sync
document.documentElement.lang whenever locale changes.
- Fall back to a default locale when the stored value is unknown.
- Keep
messages.ts keyed by locale; default English remains the fallback.
Non-functional requirements
- Must be secure, tested, and documented.
- Should be efficient and easy to review.
🛠️ Suggested execution
1. Fork the repo and create a branch
git checkout -b feat/locale-persistence
2. Implement changes
- Write/modify the relevant source:
src/shared/i18n/I18nProvider.tsx, messages.ts, index.ts
- Write comprehensive tests:
src/shared/i18n/i18n.test.tsx
- Add documentation: TSDoc + README i18n note
- Include TSDoc doc comments
- Validate security assumptions: stored locale validated against the allowed union
3. Test and commit
- Cover edge cases: unknown stored locale, missing storage, lang attribute sync
- Include test output and security notes in the PR description.
Example commit message
feat(i18n): persist locale and expose setLocale via provider
✅ Acceptance criteria
🔒 Security notes
Validate the persisted locale against the allowed union to avoid using attacker-set storage values as message keys.
📋 Guidelines
- Minimum 95% test coverage
- Clear documentation
- Timeframe: 96 hours
📌 Description
src/shared/i18n/I18nProvider.tsxanduseTranslationprovide localized strings, but there is no mechanism to choose or persist a locale — the provider mounts a fixed locale above the router inApp.tsx. Add locale state (persisted to localStorage and synced to<html lang>) exposed via the i18n context, plus a minimal programmatic API (setLocale) so a future switcher and SSR/lang-attribute correctness work. This is the data/state-management side of i18n (the UI control belongs to the other lane).🧩 Requirements and context
locale+setLocaleto the i18n context with a typed locale union.document.documentElement.langwhenever locale changes.messages.tskeyed by locale; default English remains the fallback.Non-functional requirements
🛠️ Suggested execution
1. Fork the repo and create a branch
2. Implement changes
src/shared/i18n/I18nProvider.tsx,messages.ts,index.tssrc/shared/i18n/i18n.test.tsx3. Test and commit
npm test -- i18nExample commit message
✅ Acceptance criteria
locale/setLocaleon the i18n context<html lang>synced on change🔒 Security notes
Validate the persisted locale against the allowed union to avoid using attacker-set storage values as message keys.
📋 Guidelines