This repository has been archived on 2026-07-21. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
cloud-reader/docs/frontend/013-i18n-web.md
T
crisleo94 6b4c0c43f8 feat: uv config other feats
- add uv configuration for the backend
- update frontend to make auth work
- add new auth endpoints
- add bookmars feat
- add reader feat
2026-06-03 22:06:01 -05:00

1.8 KiB

013 — Frontend i18n (react-i18n-lite)

Status: Implemented
Created: 2026-06-04

Objective

Internationalize the web UI in English (en-US) and Spanish (es-ES) using react-i18n-lite.

Architecture

App.tsx
  └── I18nProvider (TranslationContainer)
        ├── resolveDefaultLanguage() — localStorage → navigator → en-US
        ├── LanguagePersistence — sync setLanguage ↔ localStorage, html[lang]
        └── AuthProvider → ToastProvider → routes

Components call useTranslation() and t('namespace.key', { interpolation }).

Locale files

File Purpose
frontend/src/locales/en-US.ts English dictionary
frontend/src/locales/es-ES.ts Spanish dictionary
frontend/src/locales/index.ts locales map, SupportedLanguage, helpers

Key namespaces: common, auth, library, contextMenu, toast, settings, reader, addBook, bookDetail, search, annotations.

Language selection

  • Settings page — UI Language dropdown (English / Español)
  • PersistencelocalStorage key cloud-reader.locale
  • Default — saved preference, else navigator.language (es*es-ES), else en-US

Scope

Translated: All user-facing chrome (library, auth, reader toolbar/settings/TOC, add book, book detail, annotations, context menu, toasts).

Not translated: EPUB body content, API error bodies, backend reading_status_display, Open Library metadata fields.

Dependencies

  • react-i18n-lite (^1.0.10)

Verification

  1. Open app — labels match browser or saved language
  2. Settings → switch to Español — library/auth update without reload
  3. Refresh — language persists
  4. Context menu and toasts show translated strings
  5. yarn build succeeds