feat: implement dynamic i18n language loading with Korean translation #18
Conversation
## Summary - Implement dynamic language loading system that fetches available languages from backend API - Add Korean translation file with complete UI translations - Fix critical i18n initialization bug that caused React Hook order issues ## Key Features 1. **Backend API Integration** - Fetch available languages from `/api/languages` endpoint - Display language labels provided by backend (no frontend mapping needed) - Fallback to default languages (en, zh) if API fails 2. **Dynamic Language Loading** - Base languages (en, zh) loaded synchronously to prevent Hook errors - Additional languages loaded dynamically when user selects them - Uses Vite glob import pattern for compatibility 3. **Korean Translation** - Added complete Korean translation file (ko/translation.json) - 139 translation keys covering all UI elements - Natural Korean expressions suitable for UI context ## Bug Fix - Fixed React Hook order error caused by asynchronous i18n initialization - Changed from async initialization to sync initialization with dynamic loading - Prevents "useTranslation: You will need to pass in an i18next instance" error ## Technical Details - Uses i18n.addResourceBundle() for dynamic language loading - Implements useEffect cleanup to prevent memory leaks - Type-safe with TypeScript interfaces (LanguageInfo, LanguageApiResponse) ## Files Changed - Modified: i18n.ts, general.tsx - Added: languageApi.ts, languageNames.ts, language.ts - Added: locales/ko/translation.json - Docs: FRONTEND_INTEGRATION_PLAN.md ## Testing - Language dropdown displays en, zh, ko from backend - Language switching works correctly - UI updates to Korean when selected - No React Hook errors in console Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Summary of ChangesHello @taniar88, 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! 이 PR은 애플리케이션의 국제화(i18n) 기능을 대폭 개선하여 언어 관리를 더욱 유연하고 확장 가능하게 만듭니다. 백엔드 API와 연동하여 사용 가능한 언어 목록을 동적으로 가져오고, 번역 파일을 필요할 때만 로드함으로써 프론트엔드 코드 변경 없이 새로운 언어를 쉽게 추가할 수 있도록 합니다. 또한, 한국어 지원을 추가하고, 기존의 React Hook 순서 버그를 해결하여 전반적인 안정성과 사용자 경험을 향상시킵니다. 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. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. 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 dynamic language loading system, which is a great enhancement for internationalization. The implementation correctly uses Vite's glob imports for on-demand loading and adds Korean translations. The code is well-structured, especially the use of cleanup functions in useEffect to prevent memory leaks.
I've identified a few areas for improvement:
- There's a potential bug in
general.tsxwhere component state is updated directly during the render phase. This should be moved to auseEffecthook. - The implementation plan in
FRONTEND_INTEGRATION_PLAN.mdseems to be out of sync with the actual code, which could be confusing for future maintenance. - For better maintainability, I've suggested replacing a hardcoded URL with a constant and translating some Korean code comments into English.
Overall, this is a solid contribution. Addressing these points will improve the code's correctness and maintainability.
Applied all fixes from PR #18 code review: HIGH PRIORITY: - Fixed render-phase state update in general.tsx - Moved language sync logic from render to useEffect - Prevents React purity rule violations - Avoids potential infinite render loops MEDIUM PRIORITY: - Extracted hardcoded URL to DEFAULT_BASE_URL constant - Created DEFAULT_BASE_URL in languageApi.ts - Updated all references in languageApi.ts and general.tsx - Improves maintainability and consistency - Translated Korean comments to English - Updated comments in languageApi.ts - Updated comments in languageNames.ts - Updated comments in language.ts - Updated comments in general.tsx - Improves accessibility for international contributors - Updated FRONTEND_INTEGRATION_PLAN.md - Reflected actual implementation details - Added critical bug fix documentation - Added new warning about render-phase state updates - Updated implementation status (all tasks complete) - Translated key sections to English Files modified: - src/renderer/src/components/sidebar/setting/general.tsx - src/renderer/src/utils/languageApi.ts - src/renderer/src/utils/languageNames.ts - src/renderer/src/types/language.ts - FRONTEND_INTEGRATION_PLAN.md Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 participant
Summary
Implements dynamic internationalization (i18n) language loading system that fetches available languages from backend
API and loads translation files on-demand.
Related PRs
Key Features
/api/languagesendpointCritical Bug Fix
Fixed React Hook order bug caused by asynchronous i18n initialization:
Files Changed
FRONTEND_INTEGRATION_PLAN.md- Implementation plan and warningssrc/renderer/src/utils/languageApi.ts- Backend API integrationsrc/renderer/src/utils/languageNames.ts- Fallback language mappingsrc/renderer/src/types/language.ts- TypeScript type definitionssrc/renderer/src/i18n.ts- Core i18n with dynamic loadingsrc/renderer/src/components/sidebar/setting/general.tsx- Language selector UIsrc/renderer/src/locales/ko/translation.json- Korean translationTesting
anytypes usedHow to Test
Notes