chore: merge PR 592 changes into branch

client/src/i18n/TranslationContext.tsx

@@ -14,28 +14,22 @@ 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: 'العربية' },
-] 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, ar, br, cs, 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 translations: Record<string, TranslationStrings> = { de, en, es, fr, hu, it, ru, zh, 'zh-TW': zhTw, nl, 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', ar: 'ar-SA', br: 'pt-BR', cs: 'cs-CZ', pl: 'pl-PL' }
 const RTL_LANGUAGES = new Set(['ar'])
 
 export function getLocaleForLanguage(language: string): string {
@@ -51,6 +45,32 @@ 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
+
+    // Portuguese variants → our code is 'br' (pt-BR)
+    if (lang.toLowerCase().startsWith('pt')) 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

client/src/i18n/index.ts

@@ -4,5 +4,6 @@ export {
   getLocaleForLanguage,
   getIntlLanguage,
   isRtlLanguage,
+  detectBrowserLanguage,
   SUPPORTED_LANGUAGES,
 } from './TranslationContext'

client/src/i18n/supportedLanguages.ts

@@ -0,0 +1,20 @@
+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: 'ar',    label: 'العربية',              locale: 'ar-SA' },
+] as const
+
+export type SupportedLanguageCode = typeof SUPPORTED_LANGUAGES[number]['value']
+
+export const SUPPORTED_LANGUAGE_CODES: string[] = SUPPORTED_LANGUAGES.map(l => l.value)