Fix: Topic word labels translate to selected language

Topics API now accepts lang= parameter. When lang=de, the word
labels are translated from English via Kaikki translations:
"eye, pupil, iris" → "Auge, Pupille, Iris"

Frontend sends searchLang to /topics endpoint and displays
display_words (translated) instead of words (English).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-29 12:38:35 +02:00
parent 6f43224fda
commit 387219682d
2 changed files with 40 additions and 9 deletions

View File

@@ -38,7 +38,7 @@ export default function VocabularyPage() {
const [posFilter, setPosFilter] = useState('')
const [diffFilter, setDiffFilter] = useState(0)
const [searchLang, setSearchLang] = useState('en')
const [topics, setTopics] = useState<{ topic: string; words: string[]; word_count: number }[]>([])
const [topics, setTopics] = useState<{ topic: string; words: string[]; display_words?: string[]; word_count: number }[]>([])
const [showTopics, setShowTopics] = useState(false)
// Unit builder
@@ -89,7 +89,7 @@ export default function VocabularyPage() {
// Also search for matching topics
if (query.trim()) {
const topicResp = await fetch(`${getApiBase()}/api/vocabulary/topics?q=${encodeURIComponent(query)}`)
const topicResp = await fetch(`${getApiBase()}/api/vocabulary/topics?q=${encodeURIComponent(query)}&lang=${searchLang}`)
if (topicResp.ok) {
const topicData = await topicResp.json()
setTopics(topicData.topics || [])
@@ -259,8 +259,8 @@ export default function VocabularyPage() {
</button>
</div>
<div className="flex flex-wrap gap-1">
{topic.words.slice(0, 15).map(w => (
<span key={w} className={`text-xs px-2 py-0.5 rounded-full ${isDark ? 'bg-white/5 text-white/50' : 'bg-slate-100 text-slate-500'}`}>{w}</span>
{(topic.display_words || topic.words).slice(0, 15).map((w: string, i: number) => (
<span key={i} className={`text-xs px-2 py-0.5 rounded-full ${isDark ? 'bg-white/5 text-white/50' : 'bg-slate-100 text-slate-500'}`}>{w}</span>
))}
{topic.words.length > 15 && (
<span className={`text-xs px-2 py-0.5 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>+{topic.words.length - 15}</span>