Merge remote-tracking branch 'origin/dev' into feat/indonesian-translation

client/src/i18n/TranslationContext.tsx

@@ -15,29 +15,21 @@ import ar from './translations/ar'
 import br from './translations/br'
 import cs from './translations/cs'
 import pl from './translations/pl'
+import { SUPPORTED_LANGUAGES, SupportedLanguageCode } from './supportedLanguages'
+
+export { SUPPORTED_LANGUAGES }
 
 type TranslationStrings = Record<string, string | { name: string; category: string }[]>
 
-export const SUPPORTED_LANGUAGES = [
-  { value: 'de', label: 'Deutsch' },
-  { value: 'en', label: 'English' },
-  { value: 'es', label: 'Español' },
-  { value: 'fr', label: 'Français' },
-  { value: 'hu', label: 'Magyar' },
-  { value: 'nl', label: 'Nederlands' },
-  { value: 'br', label: 'Português (Brasil)' },
-  { value: 'cs', label: 'Česky' },
-  { value: 'pl', label: 'Polski' },
-  { value: 'ru', label: 'Русский' },
-  { value: 'zh', label: '简体中文' },
-  { value: 'zh-TW', label: '繁體中文' },
-  { value: 'it', label: 'Italiano' },
-  { value: 'ar', label: 'العربية' },
-  { value: 'id', label: 'Bahasa Indonesia' },
-] as const
+// Keyed by SupportedLanguageCode so TypeScript enforces all languages have a translation.
+const translations: Record<SupportedLanguageCode, TranslationStrings> = {
+  de, en, es, fr, hu, it, ru, zh, 'zh-TW': zhTw, nl, id, ar, br, cs, pl,
+}
 
-const translations: Record<string, TranslationStrings> = { de, en, es, fr, hu, it, ru, zh, 'zh-TW': zhTw, nl, id, ar, br, cs, pl }
-const LOCALES: Record<string, string> = { de: 'de-DE', en: 'en-US', es: 'es-ES', fr: 'fr-FR', hu: 'hu-HU', it: 'it-IT', ru: 'ru-RU', zh: 'zh-CN', 'zh-TW': 'zh-TW', nl: 'nl-NL', id: 'id-ID', ar: 'ar-SA', br: 'pt-BR', cs: 'cs-CZ', pl: 'pl-PL' }
+// 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'])
 
 export function getLocaleForLanguage(language: string): string {
@@ -53,6 +45,34 @@ 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.
+export function detectBrowserLanguage(): string | null {
+  if (typeof navigator === 'undefined') return null
+  const browserLangs = navigator.languages?.length
+    ? navigator.languages
+    : navigator.language ? [navigator.language] : []
+  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.
+    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 prefixMatch = supported.find(s => s.toLowerCase() === prefix)
+    if (prefixMatch) return prefixMatch
+  }
+
+  return null
+}
+
 interface TranslationContextValue {
   t: (key: string, params?: Record<string, string | number>) => string
   language: string