feat: lightweight i18n for sidebar navigation (Part 2 of #382)#1169
feat: lightweight i18n for sidebar navigation (Part 2 of #382)#1169IgnazioDS wants to merge 3 commits into
Conversation
Add a minimal translation system for strategically translating key UI strings that browser translation extensions handle poorly. This is NOT a full i18n framework — it covers sidebar navigation labels and common actions, leaving 99% of the app for browser extensions to translate. Implementation: - Svelte store-based locale with localStorage persistence - Auto-detects browser language on first load - Falls back to English for missing translations - 8 languages: English, Spanish, Chinese, Japanese, Korean, French, German, Portuguese Files: - lib/i18n/translations.ts — translation strings and lookup function - lib/i18n/index.ts — reactive locale store and $t helper - routes/(app)/+layout.svelte — sidebar strings use $t() Addresses Part 2 of Kiln-AI#382
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughAdds a new i18n subsystem: translations and SupportedLocale type, a persisted Svelte Changes
Sequence Diagram(s)sequenceDiagram
participant Browser as Browser
participant Storage as localStorage
participant I18n as i18n module
participant Layout as +layout.svelte
Browser->>Storage: read "kiln_locale"
alt stored and valid
Storage-->>I18n: return persisted locale
else missing or invalid
Browser->>I18n: provide navigator.language
I18n-->>I18n: sanitizePersistedLocale -> choose supported or "en"
I18n->>Storage: clear invalid / write chosen locale
end
I18n-->>Browser: expose `locale` store and derived `t` (function)
Layout->>I18n: subscribe to `t`
I18n-->>Layout: emit translation function -> Layout renders localized labels
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a lightweight internationalization (i18n) system to enhance the user experience by translating critical UI elements, such as sidebar navigation labels and common actions. It focuses on strategic translation where browser-based solutions are insufficient, while intentionally leaving the majority of the application for browser extensions to handle. The system automatically detects the user's preferred language and persists this choice, ensuring a more localized interface for supported languages. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a new internationalization (i18n) system for the web UI. It includes a Svelte store for managing user locale, persisting it in local storage, and auto-detecting browser language. A translation utility is added with support for multiple languages (English, Spanish, Chinese, Japanese, Korean, French, German, Portuguese), and the main layout's navigation labels have been updated to use this new translation function. A review comment points out that the supported locales array is hardcoded, which duplicates information and could lead to inconsistencies, suggesting it should be derived from the localeNames object.
| } else { | ||
| // Auto-detect from browser language | ||
| const browserLang = navigator.language.split("-")[0] | ||
| const supported: SupportedLocale[] = ["en", "es", "zh", "ja", "ko", "fr", "de", "pt"] |
There was a problem hiding this comment.
The supported array is hardcoded here. This duplicates the list of supported locales already defined in translations.ts (as part of SupportedLocale type and localeNames object). Duplication can lead to inconsistencies if a new language is added or removed in one place but not the other. It's better to derive this list from a single source of truth.
| const supported: SupportedLocale[] = ["en", "es", "zh", "ja", "ko", "fr", "de", "pt"] | |
| const supported: SupportedLocale[] = Object.keys(localeNames) as SupportedLocale[] |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/web_ui/src/lib/i18n/index.ts`:
- Around line 14-23: The persisted locale read via
localStorage.getItem("kiln_locale") is parsed unguarded and cast to
SupportedLocale causing crashes if malformed or unsupported; wrap JSON.parse in
a try/catch, only accept the parsed value for assignment to initialLocale if it
is a string and included in the supported locales list (the same list used
later), otherwise ignore the stored value and proceed to the browserLang/default
fallback; ensure the code only asserts to SupportedLocale after this validation
and does not let a malformed value reach initialLocale or cause an exception.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 07a0c2b8-2228-43d2-92f6-d8ad0b6aa8e9
📒 Files selected for processing (3)
app/web_ui/src/lib/i18n/index.tsapp/web_ui/src/lib/i18n/translations.tsapp/web_ui/src/routes/(app)/+layout.svelte
- Wrap JSON.parse in try/catch to prevent crashes from malformed localStorage data - Derive supported locales from localeNames (single source of truth) instead of hardcoding the list - Add isSupportedLocale type guard for safe validation Addresses review feedback from gemini-code-assist and coderabbitai
|
Addressed both review comments:
Thanks for the feedback! |
|
Thank you for the update, IgnazioDS. Using |
|
Tip For best results, initiate chat on the files or code changes.
(´･ω･`) ∫ ∫ If you found this review helpful, would you consider giving us a shout-out on X? Thank you for using CodeRabbit! |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@app/web_ui/src/lib/i18n/index.ts`:
- Around line 16-43: The validation you added in createLocaleStore is bypassed
because localStorageStore re-reads the key itself and will return the raw
(possibly invalid) value or throw on malformed JSON; before calling
localStorageStore("kiln_locale", initialLocale) ensure the stored value is safe
by reading localStorage.getItem("kiln_locale") inside a try/catch, JSON.parse it
safely, and if it is malformed or not isSupportedLocale remove the key
(localStorage.removeItem("kiln_locale")) so localStorageStore will initialize
with the validated initialLocale; reference createLocaleStore,
localStorageStore, and the "kiln_locale" key when making this change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: cb43c102-7392-4faf-824b-e924a66b5252
📒 Files selected for processing (1)
app/web_ui/src/lib/i18n/index.ts
|
@scosman Hi! This addresses Part 2 of #382 with a lightweight approach — Svelte store + plain TS objects, no heavy i18n library. I've addressed all automated review feedback (guarded JSON.parse, single source of truth for supported locales). Ready for human review when you have a moment. Happy to adjust the approach if you'd prefer a different pattern! |
localStorageStore independently calls JSON.parse on the raw stored value, bypassing any validation done beforehand. Fix by sanitizing (and removing invalid entries) from localStorage before constructing the store, so localStorageStore always reads a valid locale or falls back to the provided default. Addresses CodeRabbit review feedback on Kiln-AI#1169
|
Pushed a fix addressing the critical CodeRabbit finding — The fix sanitizes (and removes invalid entries from) localStorage before constructing the store, so |
1 participant
Summary
Implements Part 2 of #382 — a lightweight translation system for key UI strings that browser translation extensions handle poorly.
This is intentionally minimal, per the issue requirements:
Languages Supported
English, Spanish (Español), Chinese (中文), Japanese (日本語), Korean (한국어), French (Français), German (Deutsch), Portuguese (Português)
How It Works
Adding new translations is simple — add a key to
translations.tsand use$t('key')in the template. Contributors can fix bad translations by adding/updating entries in the translations object.Files
lib/i18n/translations.tslib/i18n/index.tslocalestore + derived$thelperroutes/(app)/+layout.svelte$t()What's NOT Included (by design)
translate="no"from Part 1)Test Plan
kiln_localeto"zh"in localStorage → sidebar shows ChineseAddresses Part 2 of #382
Summary by CodeRabbit