chore: move i18n to shared package (#1066)

* chore: move i18n to shared package

* chore: move server translations to shared package and apply linter and prettier on entire shared package

client/src/i18n/TranslationContext.tsx

@@ -1,56 +1,47 @@
-import React, { createContext, useContext, useEffect, useMemo, ReactNode } from 'react'
+import React, { createContext, useContext, useEffect, useMemo, useState, ReactNode } from 'react'
 import { useSettingsStore } from '../store/settingsStore'
-import de from './translations/de'
-import en from './translations/en'
-import es from './translations/es'
-import fr from './translations/fr'
-import hu from './translations/hu'
-import it from './translations/it'
-import tr from './translations/tr'
-import ru from './translations/ru'
-import zh from './translations/zh'
-import zhTw from './translations/zhTw'
-import nl from './translations/nl'
-import id from './translations/id'
-import ar from './translations/ar'
-import br from './translations/br'
-import cs from './translations/cs'
-import pl from './translations/pl'
-import ja from './translations/ja'
-import ko from './translations/ko'
-import uk from './translations/uk'
-import { SUPPORTED_LANGUAGES, SupportedLanguageCode } from './supportedLanguages'
+import en from '@trek/shared/i18n/en'
+import type { SupportedLanguageCode } from '@trek/shared'
+import {
+  SUPPORTED_LANGUAGES,
+  getLocaleForLanguage,
+  getIntlLanguage,
+  isRtlLanguage,
+} from '@trek/shared'
+import type { TranslationStrings } from '@trek/shared/i18n'
 
 export { SUPPORTED_LANGUAGES }
 
-type TranslationStrings = Record<string, string | { name: string; category: string }[]>
-
-// Keyed by SupportedLanguageCode so TypeScript enforces all languages have a translation.
-const translations: Record<SupportedLanguageCode, TranslationStrings> = {
-  de, en, es, fr, hu, it, tr, ru, zh, 'zh-TW': zhTw, nl, id, ar, br, cs, pl, ja, ko, uk,
+// One explicit dynamic import per locale — Vite code-splits a separate chunk per locale.
+// Only the active locale is fetched; en is always available synchronously as the fallback.
+const localeLoaders: Record<SupportedLanguageCode, () => Promise<{ default: TranslationStrings }>> = {
+  en:      () => Promise.resolve({ default: en }),
+  de:      () => import('@trek/shared/i18n/de'),
+  es:      () => import('@trek/shared/i18n/es'),
+  fr:      () => import('@trek/shared/i18n/fr'),
+  hu:      () => import('@trek/shared/i18n/hu'),
+  it:      () => import('@trek/shared/i18n/it'),
+  tr:      () => import('@trek/shared/i18n/tr'),
+  ru:      () => import('@trek/shared/i18n/ru'),
+  zh:      () => import('@trek/shared/i18n/zh'),
+  'zh-TW': () => import('@trek/shared/i18n/zh-TW'),
+  nl:      () => import('@trek/shared/i18n/nl'),
+  id:      () => import('@trek/shared/i18n/id'),
+  ar:      () => import('@trek/shared/i18n/ar'),
+  br:      () => import('@trek/shared/i18n/br'),
+  cs:      () => import('@trek/shared/i18n/cs'),
+  pl:      () => import('@trek/shared/i18n/pl'),
+  ja:      () => import('@trek/shared/i18n/ja'),
+  ko:      () => import('@trek/shared/i18n/ko'),
+  uk:      () => import('@trek/shared/i18n/uk'),
 }
 
-// Derived from SUPPORTED_LANGUAGES — add new languages there, not here.
-const LOCALES: Record<string, string> = Object.fromEntries(
-  SUPPORTED_LANGUAGES.map(l => [l.value, l.locale])
-)
-const RTL_LANGUAGES = new Set(['ar'])
+// Re-export pure helpers that live in shared so downstream consumers can import them
+// through this module without changing their import path.
+export { getLocaleForLanguage, getIntlLanguage, isRtlLanguage }
 
-export function getLocaleForLanguage(language: string): string {
-  return LOCALES[language] || LOCALES.en
-}
-
-export function getIntlLanguage(language: string): string {
-  if (language === 'br') return 'pt-BR'
-  return ['de', 'es', 'fr', 'hu', 'it', 'tr', 'ru', 'zh', 'zh-TW', 'nl', 'ar', 'cs', 'pl', 'id', 'ja', 'ko', 'uk'].includes(language) ? language : 'en'
-}
-
-export function isRtlLanguage(language: string): boolean {
-  return RTL_LANGUAGES.has(language)
-}
-
-// Detects the user's preferred language from the browser/OS settings and maps
-// it to one of the supported language codes. Returns null if no match is found.
+// Detects the user's preferred language from browser/OS settings.
+// Returns null if no supported language matches.
 export function detectBrowserLanguage(): string | null {
   if (typeof navigator === 'undefined') return null
   const browserLangs = navigator.languages?.length
@@ -59,17 +50,14 @@ export function detectBrowserLanguage(): string | null {
   const supported = SUPPORTED_LANGUAGES.map(l => l.value)
 
   for (const lang of browserLangs) {
-    // Exact match (e.g. 'de', 'zh-TW') — case-insensitive
     const exactMatch = supported.find(s => s.toLowerCase() === lang.toLowerCase())
     if (exactMatch) return exactMatch
 
-    // pt-BR has no exact match (our code is 'br', not 'pt-BR'), so map it explicitly.
-    // pt-PT and bare 'pt' are NOT mapped — they fall through to null and let the
-    // server default or 'en' fallback apply instead.
+    // pt-BR has no exact match (our code is 'br'), so map it explicitly.
+    // pt-PT and bare 'pt' are NOT mapped — they fall through to null.
     if (lang.toLowerCase() === 'pt-br') return 'br'
 
-    // Prefix match (e.g. 'de-AT' → 'de', 'zh-CN' → 'zh') — case-insensitive
-    const prefix = lang.split('-')[0].toLowerCase()
+    const prefix = lang.split('-')[0]?.toLowerCase()
     const prefixMatch = supported.find(s => s.toLowerCase() === prefix)
     if (prefixMatch) return prefixMatch
   }
@@ -91,18 +79,27 @@ interface TranslationProviderProps {
 
 export function TranslationProvider({ children }: TranslationProviderProps) {
   const language = useSettingsStore((s) => s.settings.language) || 'en'
+  const [strings, setStrings] = useState<TranslationStrings>(en)
 
   useEffect(() => {
     document.documentElement.lang = language
     document.documentElement.dir = isRtlLanguage(language) ? 'rtl' : 'ltr'
   }, [language])
 
-  const value = useMemo((): TranslationContextValue => {
-    const strings = translations[language] || translations.en
-    const fallback = translations.en
+  useEffect(() => {
+    const loader = localeLoaders[language as SupportedLanguageCode]
+    if (!loader) return
 
+    let cancelled = false
+    loader().then(mod => {
+      if (!cancelled) setStrings(mod.default)
+    })
+    return () => { cancelled = true }
+  }, [language])
+
+  const value = useMemo((): TranslationContextValue => {
     function t(key: string, params?: Record<string, string | number>): string {
-      let val: string = (strings[key] ?? fallback[key] ?? key) as string
+      let val: string = (strings[key] ?? en[key] ?? key) as string
       if (params) {
         Object.entries(params).forEach(([k, v]) => {
           val = val.replace(new RegExp(`\\{${k}\\}`, 'g'), String(v))
@@ -112,7 +109,7 @@ export function TranslationProvider({ children }: TranslationProviderProps) {
     }
 
     return { t, language, locale: getLocaleForLanguage(language) }
-  }, [language])
+  }, [strings, language])
 
   return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>
 }

client/src/i18n/supportedLanguages.ts

@@ -1,25 +1,4 @@
-export const SUPPORTED_LANGUAGES = [
-  { value: 'de',    label: 'Deutsch',             locale: 'de-DE' },
-  { value: 'en',    label: 'English',              locale: 'en-US' },
-  { value: 'es',    label: 'Español',              locale: 'es-ES' },
-  { value: 'fr',    label: 'Français',             locale: 'fr-FR' },
-  { value: 'hu',    label: 'Magyar',               locale: 'hu-HU' },
-  { value: 'nl',    label: 'Nederlands',           locale: 'nl-NL' },
-  { value: 'br',    label: 'Português (Brasil)',   locale: 'pt-BR' },
-  { value: 'cs',    label: 'Česky',                locale: 'cs-CZ' },
-  { value: 'pl',    label: 'Polski',               locale: 'pl-PL' },
-  { value: 'ru',    label: 'Русский',              locale: 'ru-RU' },
-  { value: 'zh',    label: '简体中文',              locale: 'zh-CN' },
-  { value: 'zh-TW', label: '繁體中文',              locale: 'zh-TW' },
-  { value: 'it',    label: 'Italiano',             locale: 'it-IT' },
-  { value: 'tr',    label: 'Türkçe',               locale: 'tr-TR' },
-  { value: 'ar',    label: 'العربية',              locale: 'ar-SA' },
-  { value: 'id',    label: 'Bahasa Indonesia',     locale: 'id-ID' },
-  { value: 'ja',    label: '日本語',                locale: 'ja-JP' },
-  { value: 'ko',    label: '한국어',                 locale: 'ko-KR' },
-  { value: 'uk',    label: 'Українська',           locale: 'uk-UA' },
-] as const
-
-export type SupportedLanguageCode = typeof SUPPORTED_LANGUAGES[number]['value']
-
-export const SUPPORTED_LANGUAGE_CODES: string[] = SUPPORTED_LANGUAGES.map(l => l.value)
+// Canonical language registry now lives in @trek/shared. Re-exported here so
+// existing imports of './supportedLanguages' continue to work unchanged.
+export { SUPPORTED_LANGUAGES, SUPPORTED_LANGUAGE_CODES } from '@trek/shared'
+export type { SupportedLanguageCode } from '@trek/shared'