Benjamin_Boenisch/breakpilot-lehrer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Schulsprache (school language) as second language setting
CI / go-lint (push) Has been skipped
Details
CI / python-lint (push) Has been skipped
Details
CI / nodejs-lint (push) Has been skipped
Details
CI / test-go-school (push) Successful in 27s
Details
CI / test-go-edu-search (push) Successful in 28s
Details
CI / test-python-klausur (push) Failing after 2m21s
Details
CI / test-python-agent-core (push) Successful in 18s
Details
CI / test-nodejs-website (push) Successful in 22s
Details

Browse Source 
- 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>
This commit is contained in:
Benjamin Admin
2026-04-29 17:49:58 +02:00
parent fc49d87928
commit bde0d57b5a
5 changed files with 97 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
studio-v2/components/LanguageDropdown.tsx
+58 -31
View File
@@ -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}