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

Fix: Vocabulary search sends lang parameter + language dropdown

Browse Source 
Search now sends lang= to API (was always defaulting to EN).
Users can select any of the 24 languages in the search bar dropdown.
Placeholder text changes based on selected language.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-29 09:10:00 +02:00
parent 0d2e79da66
commit c2efb9934c
1 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
studio-v2/app/vocabulary/page.tsx
View File

@@ -37,6 +37,7 @@ export default function VocabularyPage() {
const [filters, setFilters] = useState<{ tags: string[]; parts_of_speech: string[]; total_words: number }>({ tags: [], parts_of_speech: [], total_words: 0 }) const [filters, setFilters] = useState<{ tags: string[]; parts_of_speech: string[]; total_words: number }>({ tags: [], parts_of_speech: [], total_words: 0 })
const [posFilter, setPosFilter] = useState('') const [posFilter, setPosFilter] = useState('')
const [diffFilter, setDiffFilter] = useState(0) const [diffFilter, setDiffFilter] = useState(0)
const [searchLang, setSearchLang] = useState('en')
// Unit builder // Unit builder
const [selectedWords, setSelectedWords] = useState<VocabWord[]>([]) const [selectedWords, setSelectedWords] = useState<VocabWord[]>([])
@@ -71,7 +72,7 @@ export default function VocabularyPage() {
try { try {
let url: string let url: string
if (query.trim()) { if (query.trim()) {
url = `${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(query)}&limit=30&source=kaikki` url = `${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(query)}&lang=${searchLang}&limit=30&source=kaikki`
} else { } else {
const params = new URLSearchParams({ limit: '30' }) const params = new URLSearchParams({ limit: '30' })
if (posFilter) params.set('pos', posFilter) if (posFilter) params.set('pos', posFilter)
@@ -91,7 +92,7 @@ export default function VocabularyPage() {
}, 300) }, 300)
return () => clearTimeout(timer) return () => clearTimeout(timer)
}, [query, posFilter, diffFilter]) }, [query, posFilter, diffFilter, searchLang])
const toggleWord = useCallback((word: VocabWord) => { const toggleWord = useCallback((word: VocabWord) => {
setSelectedWords(prev => { setSelectedWords(prev => {
@@ -158,11 +159,38 @@ export default function VocabularyPage() {
{/* Search Bar */} {/* Search Bar */}
<div className={`${glassCard} rounded-2xl p-4`}> <div className={`${glassCard} rounded-2xl p-4`}>
<div className="flex gap-3"> <div className="flex gap-3">
<select value={searchLang} onChange={e => setSearchLang(e.target.value)}
className={`px-3 py-2 rounded-xl border text-sm ${glassInput}`}>
<option value="en">EN</option>
<option value="de">DE</option>
<option value="fr">FR</option>
<option value="es">ES</option>
<option value="it">IT</option>
<option value="pt">PT</option>
<option value="nl">NL</option>
<option value="tr">TR</option>
<option value="ru">RU</option>
<option value="ar">AR</option>
<option value="uk">UK</option>
<option value="pl">PL</option>
<option value="sv">SV</option>
<option value="fi">FI</option>
<option value="da">DA</option>
<option value="ro">RO</option>
<option value="el">EL</option>
<option value="hu">HU</option>
<option value="cs">CS</option>
<option value="bg">BG</option>
<option value="lv">LV</option>
<option value="lt">LT</option>
<option value="sk">SK</option>
<option value="et">ET</option>
</select>
<input <input
type="text" type="text"
value={query} value={query}
onChange={e => setQuery(e.target.value)} onChange={e => setQuery(e.target.value)}
placeholder="Wort suchen (EN oder DE)..." placeholder={searchLang === 'de' ? 'Deutsches Wort suchen...' : searchLang === 'en' ? 'English word search...' : 'Wort suchen...'}
className={`flex-1 px-4 py-3 rounded-xl border outline-none text-lg ${glassInput}`} className={`flex-1 px-4 py-3 rounded-xl border outline-none text-lg ${glassInput}`}
autoFocus autoFocus
/> />