Unify language system: one setting for all modules

- Merge two separate language systems (bp_language + bp_native_language) into one
- NativeLanguageContext now reads from LanguageContext (same localStorage key)
- Extend i18n.ts to 26 languages with flags (UI falls back to EN/DE)
- Replace LanguageSwitcher with LanguageDropdown (flags) in learn + parent layouts
- Migration: old bp_native_language value auto-migrates to bp_language
- Onboarding page writes to bp_language (unified key)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

studio-v2/lib/LanguageContext.tsx

@@ -43,9 +43,9 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
     }
   }
 
-  // Uebersetzungsfunktion
+  // Uebersetzungsfunktion (Fallback: en → de → key)
   const t = (key: string): string => {
-    return translations[language][key] || translations[defaultLanguage][key] || key
+    return translations[language]?.[key] || translations['en']?.[key] || translations['de']?.[key] || key
   }
 
   // Waehrend SSR: Default anzeigen
@@ -55,7 +55,7 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
         value={{
           language: defaultLanguage,
           setLanguage: () => {},
-          t: (key) => translations[defaultLanguage][key] || key,
+          t: (key) => translations[defaultLanguage]?.[key] || key,
           isRTL: false,
           availableLanguages,
         }}

studio-v2/lib/NativeLanguageContext.tsx

@@ -1,9 +1,15 @@
 'use client'
 
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
+import React, { createContext, useContext, useCallback } from 'react'
 import { exerciseT, type ExerciseKey } from './exerciseTranslations'
+import { useLanguage } from './LanguageContext'
 
-const STORAGE_KEY = 'bp_native_language'
+/**
+ * NativeLanguageContext — unified with LanguageContext.
+ *
+ * Reads/writes the SAME language as the central LanguageContext (bp_language).
+ * No separate localStorage key — one language setting for the entire app.
+ */
 
 interface NativeLanguageState {
   nativeLang: string
@@ -22,17 +28,14 @@ const NativeLanguageContext = createContext<NativeLanguageState>({
 })
 
 export function NativeLanguageProvider({ children }: { children: React.ReactNode }) {
-  const [nativeLang, setNativeLangState] = useState('de')
+  const { language, setLanguage } = useLanguage()
 
-  useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) setNativeLangState(stored)
-  }, [])
+  // Sync: nativeLang = the central language setting
+  const nativeLang = language
 
   const setNativeLang = useCallback((lang: string) => {
-    setNativeLangState(lang)
-    localStorage.setItem(STORAGE_KEY, lang)
-  }, [])
+    setLanguage(lang)
+  }, [setLanguage])
 
   const isThirdLanguage = nativeLang !== 'de' && nativeLang !== 'en'
 

studio-v2/lib/i18n.ts

@@ -6,9 +6,9 @@
  * RTL-Support fuer Arabisch
  */
 
-export type Language = 'de' | 'en' | 'tr' | 'ar' | 'ru' | 'uk' | 'pl'
+export type Language = string
 
-export const availableLanguages: Record<Language, { name: string; flag: string; rtl?: boolean }> = {
+export const availableLanguages: Record<string, { name: string; flag: string; rtl?: boolean }> = {
   de: { name: 'Deutsch', flag: '🇩🇪' },
   en: { name: 'English', flag: '🇬🇧' },
   tr: { name: 'Türkçe', flag: '🇹🇷' },
@@ -16,12 +16,31 @@ export const availableLanguages: Record<Language, { name: string; flag: string;
   ru: { name: 'Русский', flag: '🇷🇺' },
   uk: { name: 'Українська', flag: '🇺🇦' },
   pl: { name: 'Polski', flag: '🇵🇱' },
+  fr: { name: 'Français', flag: '🇫🇷' },
+  es: { name: 'Español', flag: '🇪🇸' },
+  it: { name: 'Italiano', flag: '🇮🇹' },
+  pt: { name: 'Português', flag: '🇵🇹' },
+  nl: { name: 'Nederlands', flag: '🇳🇱' },
+  ro: { name: 'Română', flag: '🇷🇴' },
+  el: { name: 'Ελληνικά', flag: '🇬🇷' },
+  bg: { name: 'Български', flag: '🇧🇬' },
+  hr: { name: 'Hrvatski', flag: '🇭🇷' },
+  cs: { name: 'Čeština', flag: '🇨🇿' },
+  hu: { name: 'Magyar', flag: '🇭🇺' },
+  sv: { name: 'Svenska', flag: '🇸🇪' },
+  da: { name: 'Dansk', flag: '🇩🇰' },
+  fi: { name: 'Suomi', flag: '🇫🇮' },
+  sk: { name: 'Slovenčina', flag: '🇸🇰' },
+  sl: { name: 'Slovenščina', flag: '🇸🇮' },
+  lt: { name: 'Lietuvių', flag: '🇱🇹' },
+  lv: { name: 'Latviešu', flag: '🇱🇻' },
+  et: { name: 'Eesti', flag: '🇪🇪' },
 }
 
 export const defaultLanguage: Language = 'de'
 
-// Uebersetzungen fuer Studio v2 UI
-export const translations: Record<Language, Record<string, string>> = {
+// Uebersetzungen fuer Studio v2 UI (7 Sprachen voll, Rest faellt auf EN/DE zurueck)
+export const translations: Record<string, Record<string, string>> = {
   de: {
     // Kopfleiste
     dashboard: 'Dashboard',
@@ -377,7 +396,13 @@ export function getStoredLanguage(): Language {
   if (typeof window === 'undefined') return defaultLanguage
   const stored = localStorage.getItem(STORAGE_KEY)
   if (stored && stored in availableLanguages) {
-    return stored as Language
+    return stored
+  }
+  // Migration: bp_native_language → bp_language
+  const native = localStorage.getItem('bp_native_language')
+  if (native && native in availableLanguages) {
+    localStorage.setItem(STORAGE_KEY, native)
+    return native
   }
   return defaultLanguage
 }
@@ -388,9 +413,9 @@ export function setStoredLanguage(lang: Language): void {
   localStorage.setItem(STORAGE_KEY, lang)
 }
 
-// Uebersetzung abrufen
+// Uebersetzung abrufen (Fallback: en → de → key)
 export function t(key: string, lang: Language): string {
-  return translations[lang][key] || translations[defaultLanguage][key] || key
+  return translations[lang]?.[key] || translations['en']?.[key] || translations['de']?.[key] || key
 }
 
 // Ist die Sprache RTL?