Files

Jean-Luc Makiola d08a49e8ab docs(34-04): complete language picker and i18n sync plan summary

- Language picker in settings using pill-toggle pattern (English/Deutsch)
- i18n sync with DB setting on load via useEffect in RootLayout
- Both tasks verified complete at commit 46715cc

2026-04-18 14:06:48 +02:00

4.4 KiB

Raw Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed

phase

plan

subsystem

tags

requires

provides

affects

tech-stack

key-files

key-decisions

patterns-established

requirements-completed

duration

completed

34-i18n-foundation

react

i18n

react-i18next

settings

language-picker

phase	provides
34-i18n-foundation plan 01	i18n infrastructure (i18next setup, locale files, settings.json keys)

phase	provides
34-i18n-foundation plan 03	useLanguage hook returning persisted language preference from DB

Language picker UI in settings page using pill-toggle pattern

i18n language sync with persisted DB setting on app load

Browser auto-detection on first visit via i18next LanguageDetector

34-i18n-foundation

any future localization work

added

patterns

Language picker uses same pill-toggle pattern as weight unit and currency pickers

i18n sync via useEffect in RootLayout watching useLanguage() value

Language labels use native names (English, Deutsch) for cross-language identification

created

modified

src/client/routes/settings.tsx

src/client/routes/__root.tsx

Language labels use native names (English, Deutsch) so users can identify their language even when UI is in another language

DB is source of truth for language — useEffect in RootLayout syncs i18n to DB value if they differ

Settings page calls both updateSetting.mutate and i18n.changeLanguage on click for immediate UI update plus persistence

Language picker: pill-toggle pattern matching weight unit and currency pickers

i18n sync: useEffect([language, i18n]) in RootLayout as safety net for DB/i18n drift

D-09

D-10

D-11

D-12

5min

2026-04-18

Phase 34 Plan 04: Language Picker & i18n Sync Summary

Language picker in settings using pill-toggle pattern, with i18n synced to DB setting on load and immediate UI update on change

Performance

Duration: ~5 min (implementation was pre-existing at commit 46715cc)
Started: 2026-04-18T00:00:00Z
Completed: 2026-04-18T00:05:00Z
Tasks: 2
Files modified: 2

Accomplishments

Language picker (English/Deutsch) added to settings page above weight unit, using same pill-toggle pattern as weight unit and currency pickers
Language change persists via updateSetting.mutate({ key: "language", value }) and triggers immediate UI update via i18n.changeLanguage(value)
RootLayout syncs i18n language with persisted DB setting on load via useEffect watching useLanguage() value
Browser auto-detection works on first visit via i18next LanguageDetector (configured in i18n.ts from plan 01)
Unknown browser locales fall back to English

Task Commits

Each task was committed atomically:

Task 1: Add language picker to settings page - 46715cc (feat)
Task 2: Sync i18n language with settings on app load - 46715cc (feat)

Plan metadata: (docs commit follows)

Note: Both tasks were committed together in a single pre-existing commit 46715cc feat(i18n): add language picker to settings and sync i18n with persisted preference

Files Created/Modified

src/client/routes/settings.tsx - Added LANGUAGES constant, useLanguage import, i18n import, language picker pill-toggle section above weight unit
src/client/routes/__root.tsx - Added useLanguage import, useEffect to sync i18n.changeLanguage with persisted language setting

Decisions Made

Language labels use native names ("English", "Deutsch") — not translated — so users can always identify their language regardless of current UI language
DB setting is source of truth: useEffect in RootLayout syncs i18n to DB value if they differ on load
Immediate feedback: settings page calls i18n.changeLanguage() directly in onClick alongside updateSetting.mutate() so language switches instantly without waiting for query invalidation

Deviations from Plan

None - plan executed exactly as written.

Issues Encountered

None. The implementation was already present at the correct commit.

User Setup Required

None - no external service configuration required.

Next Phase Readiness

Language picker is live and functional in settings
i18n syncs correctly between DB and runtime on load and change
Ready for remaining i18n foundation work (translation content, German locale, etc.)

Phase: 34-i18n-foundation Completed: 2026-04-18

4.4 KiB Raw Blame History