From c2efb9934c05d13455c37490c6baab95791d1c1e Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Wed, 29 Apr 2026 09:10:00 +0200
Subject: [PATCH] Fix: Vocabulary search sends lang parameter + language
 dropdown

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>
---
 studio-v2/app/vocabulary/page.tsx | 34 ++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/studio-v2/app/vocabulary/page.tsx b/studio-v2/app/vocabulary/page.tsx
index c12d684..dd0600f 100644
--- a/studio-v2/app/vocabulary/page.tsx
+++ b/studio-v2/app/vocabulary/page.tsx
@@ -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 [posFilter, setPosFilter] = useState('')
   const [diffFilter, setDiffFilter] = useState(0)
+  const [searchLang, setSearchLang] = useState('en')
 
   // Unit builder
   const [selectedWords, setSelectedWords] = useState<VocabWord[]>([])
@@ -71,7 +72,7 @@ export default function VocabularyPage() {
       try {
         let url: string
         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 {
           const params = new URLSearchParams({ limit: '30' })
           if (posFilter) params.set('pos', posFilter)
@@ -91,7 +92,7 @@ export default function VocabularyPage() {
     }, 300)
 
     return () => clearTimeout(timer)
-  }, [query, posFilter, diffFilter])
+  }, [query, posFilter, diffFilter, searchLang])
 
   const toggleWord = useCallback((word: VocabWord) => {
     setSelectedWords(prev => {
@@ -158,11 +159,38 @@ export default function VocabularyPage() {
             {/* Search Bar */}
             <div className={`${glassCard} rounded-2xl p-4`}>
               <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
                   type="text"
                   value={query}
                   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}`}
                   autoFocus
                 />