Fix: make 'Alle zur Unit' button visible — full-width layout below word tags
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 43s
CI / test-go-edu-search (push) Successful in 30s
CI / test-python-klausur (push) Failing after 2m37s
CI / test-python-agent-core (push) Successful in 19s
CI / test-nodejs-website (push) Successful in 26s

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-04-29 13:47:28 +02:00
parent c09fc6c7bc
commit 855cc4caf4

View File

@@ -234,53 +234,12 @@ export default function VocabularyPage() {
<div className="space-y-2"> <div className="space-y-2">
{topics.map(topic => ( {topics.map(topic => (
<div key={topic.topic} className={`${glassCard} rounded-xl p-3`}> <div key={topic.topic} className={`${glassCard} rounded-xl p-3`}>
<div className="flex items-center justify-between mb-2"> <div className="mb-2">
<span className={`text-sm font-semibold ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}> <span className={`text-sm font-semibold ${isDark ? 'text-cyan-300' : 'text-cyan-700'}`}>
💡 {topic.topic} ({topic.word_count}) 💡 {topic.topic} ({topic.word_count})
</span> </span>
<div className="flex gap-2">
<button
onClick={async () => {
setIsSearching(true)
const topicWords: VocabWord[] = []
for (const w of topic.words) {
const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
if (r.ok) {
const d = await r.json()
if (d.words?.[0]) topicWords.push(d.words[0])
}
}
setResults(topicWords)
setIsSearching(false)
}}
className={`text-xs px-3 py-1 rounded-lg ${isDark ? 'bg-white/10 text-white/60 hover:bg-white/20' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
>
Anzeigen
</button>
<button
onClick={async () => {
setIsSearching(true)
const topicWords: VocabWord[] = []
for (const w of topic.words) {
const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
if (r.ok) {
const d = await r.json()
if (d.words?.[0] && !selectedWords.find(s => s.id === d.words[0].id)) {
topicWords.push(d.words[0])
}
}
}
setSelectedWords(prev => [...prev, ...topicWords])
setResults(topicWords)
setIsSearching(false)
}}
className={`text-xs px-3 py-1 rounded-lg ${isDark ? 'bg-cyan-500/20 text-cyan-300 hover:bg-cyan-500/30' : 'bg-cyan-100 text-cyan-700 hover:bg-cyan-200'}`}
>
Alle zur Unit
</button>
</div>
</div> </div>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1 mb-3">
{(topic.display_words || topic.words).slice(0, 15).map((w: string, i: number) => ( {(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> <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>
))} ))}
@@ -288,6 +247,47 @@ export default function VocabularyPage() {
<span className={`text-xs px-2 py-0.5 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>+{topic.words.length - 15}</span> <span className={`text-xs px-2 py-0.5 ${isDark ? 'text-white/30' : 'text-slate-400'}`}>+{topic.words.length - 15}</span>
)} )}
</div> </div>
<div className="flex gap-2">
<button
onClick={async () => {
setIsSearching(true)
const topicWords: VocabWord[] = []
for (const w of topic.words) {
const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
if (r.ok) {
const d = await r.json()
if (d.words?.[0]) topicWords.push(d.words[0])
}
}
setResults(topicWords)
setIsSearching(false)
}}
className={`flex-1 text-xs px-3 py-2 rounded-lg ${isDark ? 'bg-white/10 text-white/60 hover:bg-white/20' : 'bg-slate-100 text-slate-600 hover:bg-slate-200'}`}
>
Anzeigen
</button>
<button
onClick={async () => {
setIsSearching(true)
const topicWords: VocabWord[] = []
for (const w of topic.words) {
const r = await fetch(`${getApiBase()}/api/vocabulary/search?q=${encodeURIComponent(w)}&lang=en&limit=1&source=kaikki`)
if (r.ok) {
const d = await r.json()
if (d.words?.[0] && !selectedWords.find(s => s.id === d.words[0].id)) {
topicWords.push(d.words[0])
}
}
}
setSelectedWords(prev => [...prev, ...topicWords])
setResults(topicWords)
setIsSearching(false)
}}
className={`flex-1 text-xs px-3 py-2 rounded-lg font-semibold ${isDark ? 'bg-cyan-500/30 text-cyan-200 hover:bg-cyan-500/40 border border-cyan-400/30' : 'bg-cyan-100 text-cyan-700 hover:bg-cyan-200 border border-cyan-300'}`}
>
Alle zur Unit
</button>
</div>
</div> </div>
))} ))}
</div> </div>