UI english versions - #104
Open
mlaszcz-cryptolab wants to merge 4 commits into
Open
Conversation
Move every user-visible Korean string into src/locales (ko.ts verbatim, en.ts translated). The locale is chosen once at page load (localStorage rc_lang override, else browser language) and exported as L; components read plain constants — no i18n library, no runtime lookup. ko.ts is typed against en.ts's shape so the two languages cannot drift apart silently. Parameterized strings are per-language functions so Korean counters and English word order each read naturally. A globe LanguageToggle (labeled with the language it switches to) sits in both navbars — signed-in and signed-out — and persists + reloads. Tests are pinned to Korean in setup.ts since the suite asserts the original copy; locales.test.ts covers the English side and structural parity. Dev-only fixtures (UITestPage, teamsDummyData) and code comments intentionally keep their Korean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Normalize brand 'Rune'/'rune' → 'RUNE' in the en/ko locale tables (account-required, invite status, update notice). Technical identifiers are unaffected (none present in the locale files).
Drive language state with plain i18next; L becomes a Proxy over the active locale table so all L.x.y call sites and the compile-time-typed tables are unchanged. A LocaleProvider subscribes to i18next's languageChanged and remounts its subtree, so switching re-renders in place instead of window.location.reload() — removing the switch flash. setLanguage calls changeLanguage (keeps localStorage persistence); LanguageToggle reads the live language via getLanguage(). Locale test compares L by structure since it is now a Proxy.
CI installs with --frozen-lockfile; add the i18next entry so the lockfile matches package.json.
Contributor
|
When toggling the language, things like table header text, team info change but the member status badge, button text,... don't updated. It changes after refreshing the window |
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
2 participants
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.
Summary
Makes the RUNE Console fully bilingual (Korean/English) with an in-navbar language toggle. Korean copy is unchanged; English is new. Three layers of work, in three commits.
Base branch: release/v1.0.6. ~47 frontend files, +1,398/−421. No backend/Go changes.
What's in it
Bilingual UI — static typed locale tables (85c50fa)
All user-facing Korean strings moved out of components into two static, compile-time-typed TypeScript tables (src/locales/en.ts / ko.ts), read through a single L accessor. ko.ts is typed as TLocale = typeof en, so a key added to one language and missing from the other is a build error — the two can't silently drift. Every component reads L.x.y; a globe LanguageToggle lives in the navbar. Tests are pinned to Korean in test/setup.ts (the suite asserts the original copy).
Brand casing standardization (dbd9141)
Normalized all brand mentions to all-caps RUNE in the locale tables (en.ts + ko.ts), per review. Technical identifiers are unaffected.
i18next live language switching — no reload flash (3e5771c)
Replaced reload-on-switch with in-place switching:
이중 언어(Bilingual) UI — 정적 타입 로케일 테이블 (85c50fa)
사용자에게 노출되는 모든 한국어 문자열을 컴포넌트에서 분리하여, 단일 L 접근자(accessor)를 통해 읽을 수 있는 두 개의 컴파일 타임 정적 타입 TypeScript 테이블(src/locales/en.ts 및 ko.ts)로 이동했습니다. ko.ts는 TLocale = typeof en으로 타입이 지정되어, 한 언어에만 키가 추가되고 다른 언어에 누락될 경우 빌드 에러가 발생합니다. 따라서 두 언어 파일 간의 싱크가 어긋나는 것을 원천적으로 방지합니다. 모든 컴포넌트는 L.x.y 형태로 문자열을 참조하며, 네비게이션 바에는 지구본 모양의 언어 전환 토글(LanguageToggle)을 추가했습니다. 테스트 환경(test/setup.ts)은 한국어로 고정하여 기존 테스트 코드들이 원본 텍스트를 정상적으로 검증할 수 있도록 했습니다.
브랜드명 대소문자 표기 표준화 (dbd9141)
코드 리뷰 피드백을 반영하여 로케일 테이블(en.ts 및 ko.ts) 내의 모든 브랜드 명칭을 대문자 'RUNE'으로 통일했습니다. 코드 내 기술적인 식별자(변수명 등)는 영향을 받지 않습니다.
i18next 실시간 언어 전환 — 새로고침 깜빡임 제거 (3e5771c)
언어 변경 시 페이지 전체가 새로고침되던 방식을 즉시 반영(in-place switching)되도록 개선했습니다:
기본 i18next가 언어 상태를 관리하도록 구성했습니다. L 객체는 현재 활성화된 언어 테이블을 감싸는 Proxy로 동작하므로, 기존의 모든 L.x.y 호출부와 타입 정의 테이블을 수정 없이 그대로 유지할 수 있었습니다 (i18next의 기본 JSON 카탈로그 방식을 사용했다면 컴파일 타임 타입 안정성을 잃었을 것입니다).
LocaleProvider가 i18next의 languageChanged 이벤트를 구독하여 하위 트리를 리마운트(remount)합니다. 이를 통해 window.location.reload() 없이 화면이 제자리에서 리렌더링되어 언어 전환 시 발생하던 화면 깜빡임 현상이 사라졌습니다.
setLanguage 함수는 내부적으로 changeLanguage를 호출하여 로컬 스토리지(localStorage) 저장 상태를 유지하며, LanguageToggle 컴포넌트는 getLanguage()를 통해 현재 적용된 언어를 실시간으로 읽어옵니다