Add 'Alle zur Unit' button + fix topic display
Two buttons on topic cards: - "Anzeigen": Shows words in search results (for review) - "Alle zur Unit": Adds all topic words to the unit builder directly Both buttons load from Kaikki and respect selected language. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -238,9 +238,9 @@ export default function VocabularyPage() {
|
|||||||
<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
|
<button
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
// Load all words from this topic via Kaikki
|
|
||||||
setIsSearching(true)
|
setIsSearching(true)
|
||||||
const topicWords: VocabWord[] = []
|
const topicWords: VocabWord[] = []
|
||||||
for (const w of topic.words) {
|
for (const w of topic.words) {
|
||||||
@@ -253,11 +253,33 @@ export default function VocabularyPage() {
|
|||||||
setResults(topicWords)
|
setResults(topicWords)
|
||||||
setIsSearching(false)
|
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'}`}
|
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 laden
|
Alle zur Unit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="flex flex-wrap gap-1">
|
<div className="flex flex-wrap gap-1">
|
||||||
{(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>
|
||||||
|
|||||||
Reference in New Issue
Block a user