Add persistent language switcher across all learn/parent pages

useNativeLanguage: Now has setNativeLang() that persists to localStorage.
Language selection carries across all pages automatically.

LanguageSwitcher: Compact dropdown component added to learn/layout.tsx
and parent/layout.tsx — visible on every sub-page (top-right).

Parent portal: Language dropdown syncs both UI language and native
language. Parents can switch language mid-session (e.g. when both
parents speak different languages).

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

studio-v2/app/parent/page.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useTheme } from '@/lib/ThemeContext'
 import { useLanguage } from '@/lib/LanguageContext'
 import type { Language } from '@/lib/i18n'
+import { useNativeLanguage } from '@/lib/useNativeLanguage'
 
 interface LearningUnit {
   id: string
@@ -28,10 +29,19 @@ const parentT: Record<string, Record<string, string>> = {
 export default function ParentPage() {
   const { isDark } = useTheme()
   const { language, setLanguage } = useLanguage()
+  const { nativeLang, setNativeLang } = useNativeLanguage()
   const [units, setUnits] = useState<LearningUnit[]>([])
   const [isLoading, setIsLoading] = useState(true)
 
-  const t = (key: string) => parentT[key]?.[language] || parentT[key]?.['de'] || key
+  // Use nativeLang for translations (synced with localStorage)
+  const activeLang = nativeLang || language
+  const t = (key: string) => parentT[key]?.[activeLang] || parentT[key]?.['de'] || key
+
+  /** Switch both UI language and native language together */
+  const switchLang = (lang: string) => {
+    setLanguage(lang as Language)
+    setNativeLang(lang)
+  }
 
   const glassCard = isDark
     ? 'bg-white/10 backdrop-blur-xl border border-white/10'
@@ -59,19 +69,9 @@ export default function ParentPage() {
                 {t('greeting')}
               </p>
             </div>
-            <select
-              value={language}
-              onChange={(e) => setLanguage(e.target.value as Language)}
-              className={`text-sm px-2 py-1.5 rounded-lg border-0 ${isDark ? 'bg-white/10 text-white/60' : 'bg-slate-100 text-slate-500'}`}
-            >
-              <option value="de">DE</option>
-              <option value="tr">TR</option>
-              <option value="ar">AR</option>
-              <option value="uk">UK</option>
-              <option value="ru">RU</option>
-              <option value="pl">PL</option>
-              <option value="en">EN</option>
-            </select>
+            <span className={`text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+              {activeLang.toUpperCase()}
+            </span>
           </div>
         </div>
       </div>