From bde0d57b5a16db3c7828814ab2ce88463eaadafa Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Wed, 29 Apr 2026 17:49:58 +0200
Subject: [PATCH] Add Schulsprache (school language) as second language setting

- LanguageContext: new schoolLanguage + setSchoolLanguage
- LanguageDropdown: two tabs (Muttersprache / Schulsprache) with flag selection
- UnitBuilder: defaults target language to schoolLanguage
- Stored in bp_school_language localStorage (default: de)
- Shows school flag badge next to main language when different

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../app/vocabulary/components/UnitBuilder.tsx |  7 +-
 studio-v2/app/vocabulary/page.tsx             |  3 +
 studio-v2/components/LanguageDropdown.tsx     | 89 ++++++++++++-------
 studio-v2/lib/LanguageContext.tsx             | 22 +++--
 studio-v2/lib/i18n.ts                         | 16 +++-
 5 files changed, 97 insertions(+), 40 deletions(-)

diff --git a/studio-v2/app/vocabulary/components/UnitBuilder.tsx b/studio-v2/app/vocabulary/components/UnitBuilder.tsx
index 379340c..cfaf581 100644
--- a/studio-v2/app/vocabulary/components/UnitBuilder.tsx
+++ b/studio-v2/app/vocabulary/components/UnitBuilder.tsx
@@ -43,16 +43,19 @@ interface Props {
   isCreating: boolean
   noSearchResults?: boolean
   searchQuery?: string
+  defaultSourceLang?: string
+  defaultTargetLang?: string
 }
 
 export default function UnitBuilder({
   isDark, glassCard, glassInput,
   selectedWords, onWordsChange, onCreateUnit, isCreating,
   noSearchResults, searchQuery,
+  defaultSourceLang = 'en', defaultTargetLang = 'de',
 }: Props) {
   const [unitTitle, setUnitTitle] = useState('')
-  const [sourceLang, setSourceLang] = useState('de')
-  const [targetLang, setTargetLang] = useState('en')
+  const [sourceLang, setSourceLang] = useState(defaultSourceLang)
+  const [targetLang, setTargetLang] = useState(defaultTargetLang)
   const [showManualEntry, setShowManualEntry] = useState(false)
   const [manualSource, setManualSource] = useState('')
   const [manualTarget, setManualTarget] = useState('')
diff --git a/studio-v2/app/vocabulary/page.tsx b/studio-v2/app/vocabulary/page.tsx
index b8de604..ae3eb8b 100644
--- a/studio-v2/app/vocabulary/page.tsx
+++ b/studio-v2/app/vocabulary/page.tsx
@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTheme } from '@/lib/ThemeContext'
+import { useLanguage } from '@/lib/LanguageContext'
 import { Sidebar } from '@/components/Sidebar'
 import { AudioButton } from '@/components/learn/AudioButton'
 import UnitBuilder, { type UnitWord } from './components/UnitBuilder'
@@ -39,6 +40,7 @@ function vocabToUnit(w: VocabWord, searchLang: string): UnitWord {
 
 export default function VocabularyPage() {
   const { isDark } = useTheme()
+  const { schoolLanguage } = useLanguage()
   const router = useRouter()
 
   const [query, setQuery] = useState('')
@@ -340,6 +342,7 @@ export default function VocabularyPage() {
             isCreating={isCreating}
             noSearchResults={noSearchResults}
             searchQuery={query}
+            defaultTargetLang={schoolLanguage}
           />
         </div>
       </div>
diff --git a/studio-v2/components/LanguageDropdown.tsx b/studio-v2/components/LanguageDropdown.tsx
index 44481b2..a5f777f 100644
--- a/studio-v2/components/LanguageDropdown.tsx
+++ b/studio-v2/components/LanguageDropdown.tsx
@@ -10,12 +10,12 @@ interface LanguageDropdownProps {
 }
 
 export function LanguageDropdown({ className = '' }: LanguageDropdownProps) {
-  const { language, setLanguage, availableLanguages } = useLanguage()
+  const { language, setLanguage, schoolLanguage, setSchoolLanguage, availableLanguages } = useLanguage()
   const { isDark } = useTheme()
   const [isOpen, setIsOpen] = useState(false)
+  const [mode, setMode] = useState<'native' | 'school'>('native')
   const dropdownRef = useRef<HTMLDivElement>(null)
 
-  // Schliessen bei Klick ausserhalb
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
@@ -26,7 +26,6 @@ export function LanguageDropdown({ className = '' }: LanguageDropdownProps) {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
-  // Schliessen bei Escape
   useEffect(() => {
     function handleEscape(event: KeyboardEvent) {
       if (event.key === 'Escape') setIsOpen(false)
@@ -35,11 +34,22 @@ export function LanguageDropdown({ className = '' }: LanguageDropdownProps) {
     return () => document.removeEventListener('keydown', handleEscape)
   }, [])
 
-  const currentLang = availableLanguages[language]
+  const nativeLang = availableLanguages[language]
+  const schoolLang = availableLanguages[schoolLanguage]
+  const activeLang = mode === 'native' ? language : schoolLanguage
+
+  const handleSelect = (lang: Language) => {
+    if (mode === 'native') {
+      setLanguage(lang)
+    } else {
+      setSchoolLanguage(lang)
+    }
+    setIsOpen(false)
+  }
 
   return (
     <div ref={dropdownRef} className={`relative ${className}`}>
-      {/* Trigger Button */}
+      {/* Trigger: shows both native + school language */}
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={`flex items-center gap-2 px-4 py-2.5 backdrop-blur-xl border rounded-2xl transition-all ${
@@ -50,46 +60,63 @@ export function LanguageDropdown({ className = '' }: LanguageDropdownProps) {
         aria-haspopup="listbox"
         aria-expanded={isOpen}
       >
-        <span className="text-lg">{currentLang.flag}</span>
-        <span className="text-sm font-medium hidden sm:inline">{currentLang.name}</span>
+        <span className="text-lg">{nativeLang?.flag}</span>
+        <span className="text-sm font-medium hidden sm:inline">{nativeLang?.name}</span>
+        {schoolLanguage !== language && (
+          <span className={`text-xs px-1.5 py-0.5 rounded ${isDark ? 'bg-white/10 text-white/50' : 'bg-slate-200 text-slate-500'}`}>
+            🏫 {schoolLang?.flag}
+          </span>
+        )}
         <svg
-          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''} ${
-            isDark ? 'text-white/60' : 'text-slate-500'
-          }`}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
+          className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''} ${isDark ? 'text-white/60' : 'text-slate-500'}`}
+          fill="none" stroke="currentColor" viewBox="0 0 24 24"
         >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>
 
-      {/* Dropdown Menu */}
+      {/* Dropdown */}
       {isOpen && (
-        <div className={`absolute right-0 mt-2 w-48 backdrop-blur-2xl border rounded-2xl shadow-xl overflow-hidden z-50 ${
-          isDark
-            ? 'bg-slate-900/90 border-white/20'
-            : 'bg-white/95 border-black/10'
+        <div className={`absolute right-0 mt-2 w-56 backdrop-blur-2xl border rounded-2xl shadow-xl overflow-hidden z-50 ${
+          isDark ? 'bg-slate-900/90 border-white/20' : 'bg-white/95 border-black/10'
         }`}>
-          <ul role="listbox" className="py-1">
+          {/* Tab switcher: Muttersprache / Schulsprache */}
+          <div className={`flex border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
+            <button
+              onClick={() => setMode('native')}
+              className={`flex-1 py-2.5 text-xs font-medium transition-all ${
+                mode === 'native'
+                  ? isDark ? 'bg-white/10 text-white' : 'bg-blue-50 text-blue-700'
+                  : isDark ? 'text-white/50 hover:text-white/70' : 'text-slate-400 hover:text-slate-600'
+              }`}
+            >
+              🌍 Muttersprache
+            </button>
+            <button
+              onClick={() => setMode('school')}
+              className={`flex-1 py-2.5 text-xs font-medium transition-all ${
+                mode === 'school'
+                  ? isDark ? 'bg-white/10 text-white' : 'bg-blue-50 text-blue-700'
+                  : isDark ? 'text-white/50 hover:text-white/70' : 'text-slate-400 hover:text-slate-600'
+              }`}
+            >
+              🏫 Schulsprache
+            </button>
+          </div>
+
+          {/* Language list */}
+          <ul role="listbox" className="py-1 max-h-72 overflow-y-auto">
             {(Object.keys(availableLanguages) as Language[]).map((lang) => {
               const langInfo = availableLanguages[lang]
-              const isSelected = lang === language
+              const isSelected = lang === activeLang
               return (
                 <li key={lang}>
                   <button
-                    onClick={() => {
-                      setLanguage(lang)
-                      setIsOpen(false)
-                    }}
-                    className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-all ${
+                    onClick={() => handleSelect(lang)}
+                    className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-all ${
                       isSelected
-                        ? isDark
-                          ? 'bg-white/20 text-white'
-                          : 'bg-indigo-100 text-slate-900'
-                        : isDark
-                          ? 'text-white/80 hover:bg-white/10 hover:text-white'
-                          : 'text-slate-700 hover:bg-slate-100 hover:text-slate-900'
+                        ? isDark ? 'bg-white/20 text-white' : 'bg-indigo-100 text-slate-900'
+                        : isDark ? 'text-white/80 hover:bg-white/10' : 'text-slate-700 hover:bg-slate-100'
                     }`}
                     role="option"
                     aria-selected={isSelected}
diff --git a/studio-v2/lib/LanguageContext.tsx b/studio-v2/lib/LanguageContext.tsx
index 1754d7a..39fe202 100644
--- a/studio-v2/lib/LanguageContext.tsx
+++ b/studio-v2/lib/LanguageContext.tsx
@@ -6,6 +6,8 @@ import {
   defaultLanguage,
   getStoredLanguage,
   setStoredLanguage,
+  getStoredSchoolLanguage,
+  setStoredSchoolLanguage,
   translations,
   availableLanguages,
   isRTL,
@@ -14,6 +16,8 @@ import {
 interface LanguageContextType {
   language: Language
   setLanguage: (lang: Language) => void
+  schoolLanguage: Language
+  setSchoolLanguage: (lang: Language) => void
   t: (key: string) => string
   isRTL: boolean
   availableLanguages: typeof availableLanguages
@@ -23,38 +27,42 @@ const LanguageContext = createContext<LanguageContextType | null>(null)
 
 export function LanguageProvider({ children }: { children: ReactNode }) {
   const [language, setLanguageState] = useState<Language>(defaultLanguage)
+  const [schoolLanguage, setSchoolLangState] = useState<Language>(defaultLanguage)
   const [mounted, setMounted] = useState(false)
 
-  // Nach dem ersten Render: Sprache aus localStorage laden
   useEffect(() => {
-    const stored = getStoredLanguage()
-    setLanguageState(stored)
+    setLanguageState(getStoredLanguage())
+    setSchoolLangState(getStoredSchoolLanguage())
     setMounted(true)
   }, [])
 
-  // Sprache setzen und speichern
   const setLanguage = (lang: Language) => {
     setLanguageState(lang)
     setStoredLanguage(lang)
-    // Optional: document.dir fuer RTL setzen
     if (typeof document !== 'undefined') {
       document.documentElement.dir = isRTL(lang) ? 'rtl' : 'ltr'
       document.documentElement.lang = lang
     }
   }
 
+  const setSchoolLanguage = (lang: Language) => {
+    setSchoolLangState(lang)
+    setStoredSchoolLanguage(lang)
+  }
+
   // Uebersetzungsfunktion (Fallback: en → de → key)
   const t = (key: string): string => {
     return translations[language]?.[key] || translations['en']?.[key] || translations['de']?.[key] || key
   }
 
-  // Waehrend SSR: Default anzeigen
   if (!mounted) {
     return (
       <LanguageContext.Provider
         value={{
           language: defaultLanguage,
           setLanguage: () => {},
+          schoolLanguage: defaultLanguage,
+          setSchoolLanguage: () => {},
           t: (key) => translations[defaultLanguage]?.[key] || key,
           isRTL: false,
           availableLanguages,
@@ -70,6 +78,8 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
       value={{
         language,
         setLanguage,
+        schoolLanguage,
+        setSchoolLanguage,
         t,
         isRTL: isRTL(language),
         availableLanguages,
diff --git a/studio-v2/lib/i18n.ts b/studio-v2/lib/i18n.ts
index 3c1d2dc..618e441 100644
--- a/studio-v2/lib/i18n.ts
+++ b/studio-v2/lib/i18n.ts
@@ -388,8 +388,9 @@ export const translations: Record<string, Record<string, string>> = {
   },
 }
 
-// LocalStorage Key
+// LocalStorage Keys
 const STORAGE_KEY = 'bp_language'
+const SCHOOL_LANG_KEY = 'bp_school_language'
 
 // Aktuelle Sprache aus localStorage oder default
 export function getStoredLanguage(): Language {
@@ -413,6 +414,19 @@ export function setStoredLanguage(lang: Language): void {
   localStorage.setItem(STORAGE_KEY, lang)
 }
 
+// Schulsprache aus localStorage (default: 'de')
+export function getStoredSchoolLanguage(): Language {
+  if (typeof window === 'undefined') return defaultLanguage
+  const stored = localStorage.getItem(SCHOOL_LANG_KEY)
+  if (stored && stored in availableLanguages) return stored
+  return defaultLanguage
+}
+
+export function setStoredSchoolLanguage(lang: Language): void {
+  if (typeof window === 'undefined') return
+  localStorage.setItem(SCHOOL_LANG_KEY, lang)
+}
+
 // Uebersetzung abrufen (Fallback: en → de → key)
 export function t(key: string, lang: Language): string {
   return translations[lang]?.[key] || translations['en']?.[key] || translations['de']?.[key] || key