Help Modal

src/i18n/index.ts

@@ -1,10 +1,25 @@
 import { ref } from 'vue'
-import { en, type Messages } from './messages'
+import { de, en } from './messages'
 
-export type Locale = 'en'
+export type Locale = 'en' | 'de'
 
-const activeLocale = ref<Locale>('en')
-const messagesByLocale: Record<Locale, Messages> = { en }
+const LOCALE_KEY = 'animatr:locale'
+const messagesByLocale: Record<Locale, unknown> = { en, de }
+
+function readInitialLocale(): Locale {
+  try {
+    const stored = localStorage.getItem(LOCALE_KEY)
+    if (stored === 'en' || stored === 'de') return stored
+  } catch {
+    /* noop */
+  }
+  if (typeof navigator !== 'undefined' && navigator.language.toLowerCase().startsWith('de')) {
+    return 'de'
+  }
+  return 'en'
+}
+
+const activeLocale = ref<Locale>(readInitialLocale())
 
 function resolveAt(obj: unknown, path: string): unknown {
   let cur = obj
@@ -28,11 +43,13 @@ function interpolate(template: string, params?: Record<string, string | number>)
 
 export function t(key: string, params?: Record<string, string | number>): string {
   const raw = resolveAt(messagesByLocale[activeLocale.value], key)
-  if (typeof raw !== 'string') {
+  if (typeof raw === 'string') return interpolate(raw, params)
+  const fallback = resolveAt(en, key)
+  if (typeof fallback !== 'string') {
     if (import.meta.env.DEV) console.warn(`[i18n] Missing key: ${key}`)
     return key
   }
-  return interpolate(raw, params)
+  return interpolate(fallback, params)
 }
 
 export function useI18n() {
@@ -41,4 +58,9 @@ export function useI18n() {
 
 export function setLocale(l: Locale): void {
   activeLocale.value = l
+  try {
+    localStorage.setItem(LOCALE_KEY, l)
+  } catch {
+    /* noop */
+  }
 }