feat: add lazy-loaded i18n with multi language support#75
Open
SCPZ24 wants to merge 1 commit into
Open
Conversation
Introduce react-i18next with on-demand locale chunks, a language selector in Settings → Appearance, and CJK font fallbacks for Japanese and Chinese. Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat: add lazy-loaded i18n with English / Japanese / Chinese support
Summary
This PR introduces multi-language UI support to Clypra. Since the entire UI
is a single React app shared by the Tauri desktop shell and the Capacitor
iOS/Android shells (all loading the same
dist/bundle), the localization isimplemented purely in the React layer — no native Swift/Kotlin/Gradle changes
are required, and all three platforms get translations automatically.
Users can switch languages via Settings → Appearance → Language
(English / 日本語 / 简体中文). The selection is persisted and restored on
next launch.
Motivation
The UI strings were previously hardcoded in English, making the editor
inaccessible to non-English speakers. This adds a proper i18n foundation so
the community can grow translation coverage incrementally.
Implementation
react-i18next+i18next.(
src/i18n/locales/{en,ja,zh-CN}.json) and is pulled in via dynamicimport(), so Vite emits a separate chunk per language. Only the activelanguage plus the
enfallback are loaded at startup; other languages arefetched on demand the first time the user selects them, then cached.
languagefield added to the existing ZustandsettingsStore, mirroring the existing theme/font pattern.setLanguageupdates the UI state immediately, then awaits the chunk load before switching.
main.tsxawaitsinitI18n(persistedLanguage)before the firstrender (with first-run
navigator.languagedetection) to avoid a key-flash.(PingFang SC, Hiragino Sans, Microsoft YaHei, Noto Sans CJK SC) are appended
to
--font-sansto prevent missing glyphs.t()across theSettings modal, TopBar, all media tabs, the properties panel, the Launch
screen, and the Export dialog, with natural Japanese and Simplified Chinese
translations.
Scope / follow-ups
Intentionally left for a later pass: timeline components, preview/transport
controls, cache settings, effect/template cards, context menus, and
mobile/viewport chrome. These are mostly covered by tests asserting English
text; migrating them cleanly first requires the test setup to initialize i18n.
This is a non-breaking, additive change (default language remains English).
Testing
npm run buildpassestsctype-checking cleanly.dist/assets/contains separate lazy chunks foren,ja, andzh-CN.persists across reload, and CJK text renders without missing glyphs.
Manual testing checklist: