Skip to content

[codex] add react-i18next app localization - #5

Merged
denysdovhan merged 1 commit into
mainfrom
codex/react-i18next-i18n
Apr 7, 2026
Merged

denysdovhan merged 1 commit into
mainfrom
codex/react-i18next-i18n

Conversation

@denysdovhan

Copy link
Copy Markdown
Owner

Summary

This change adds app-wide localization using react-i18next, with English and Ukrainian locale catalogs stored as JSON resources and loaded through a shared i18n bootstrap. The app now detects the initial locale from localStorage first and the browser language second, persists the resolved language choice, and exposes a shared language picker so the interface can be switched without reloading.

From a user perspective, the homepage, import flow, progress states, viewer controls, sidebar copy, and axis labels now all update when the language changes. The homepage and viewer sidebar also gained a compact, shared language selector so the chosen locale is visible and adjustable in both entry points.

Problem

Before this change, all interface copy was hard-coded in English across the import screen, loading flow, and viewer UI. That made the app harder to use for non-English speakers and forced text updates to be done directly in components and worker progress code.

The app also had no concept of a persisted locale, so even a minimal language toggle would have required threading state manually through the app and reconstructing many strings in place.

Root Cause

The codebase had no centralized translation layer, no locale resource files, and no app-wide mechanism for resolving or persisting the current language. Strings were embedded directly in components, progress helpers, and import/worker flow code, which made localization a cross-cutting change rather than a contained configuration problem.

Fix

The fix introduces an i18n bootstrap under src/i18n/ backed by i18next and react-i18next, plus locale catalogs in src/i18n/locales/en.json and src/i18n/locales/uk.json. The app root now initializes i18n once, resolves the starting locale from persisted storage or browser language, and writes language changes back to localStorage.

The UI was updated to consume translated strings throughout the import page, folder picker, import status component, viewer page, 3D viewport controls, axis viewport labels, and sidebar panels. Import progress now uses translation keys and interpolation values instead of raw English text, and the homepage disclaimer/support copy was moved into locale resources.

A shared LanguageSelect component was added and integrated into the homepage and viewer sidebar. The control uses the compact layout by default, shows native language names, and keeps the viewer sidebar layout scrollable while leaving the navigation buttons pinned at the bottom.

Validation

I verified the change with:

  • npm run format:check
  • npm run lint
  • npm run build

The build still reports the existing Vite chunk-size warning for the Three.js bundle, but no new validation failures were introduced.

@denysdovhan
denysdovhan marked this pull request as ready for review April 7, 2026 20:35
@denysdovhan
denysdovhan merged commit 3984f55 into main Apr 7, 2026
2 checks passed
@denysdovhan
denysdovhan deleted the codex/react-i18next-i18n branch April 7, 2026 20:43
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