36336e6b0d
Livre US-FLASHCARDS avec decks, session de révision, stats et migration Prisma. Finalise le Web Clipper (i18n 15 langues) et corrige les erreurs ESLint bloquant la CI. Co-authored-by: Cursor <cursoragent@cursor.com>
576 lines
24 KiB
TypeScript
576 lines
24 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react'
|
|
import { motion, AnimatePresence } from 'motion/react'
|
|
import {
|
|
GraduationCap,
|
|
Layers,
|
|
ArrowLeft,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Calendar,
|
|
Plus,
|
|
BarChart3,
|
|
Loader2,
|
|
BookOpen,
|
|
} from 'lucide-react'
|
|
import { useSearchParams } from 'next/navigation'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { cn } from '@/lib/utils'
|
|
import { NoteChart } from '@/components/note-chart'
|
|
import { RevisionHeatmap } from './revision-heatmap'
|
|
import { toast } from 'sonner'
|
|
|
|
interface DeckSummary {
|
|
id: string
|
|
name: string
|
|
notebookId: string | null
|
|
totalCards: number
|
|
dueCount: number
|
|
masteredCount: number
|
|
lastReviewedAt: string | null
|
|
}
|
|
|
|
interface FlashcardItem {
|
|
id: string
|
|
front: string
|
|
back: string
|
|
type: string
|
|
due: boolean
|
|
mastered: boolean
|
|
}
|
|
|
|
interface StatsResponse {
|
|
heatmap: { date: string; count: number }[]
|
|
retentionRate: number
|
|
retentionByWeek: { week: string; rate: number }[]
|
|
difficultCards: { id: string; front: string; easinessFactor: number; deckName: string }[]
|
|
}
|
|
|
|
type PageTab = 'decks' | 'progress'
|
|
type SessionGrade = 1 | 2 | 3 | 4
|
|
|
|
export function RevisionView() {
|
|
const { t } = useLanguage()
|
|
const searchParams = useSearchParams()
|
|
const initialDeckId = searchParams.get('deckId')
|
|
|
|
const [tab, setTab] = useState<PageTab>('decks')
|
|
const [decks, setDecks] = useState<DeckSummary[]>([])
|
|
const [loadingDecks, setLoadingDecks] = useState(true)
|
|
const [stats, setStats] = useState<StatsResponse | null>(null)
|
|
const [loadingStats, setLoadingStats] = useState(false)
|
|
|
|
const [activeDeckId, setActiveDeckId] = useState<string | null>(null)
|
|
const [deckCards, setDeckCards] = useState<FlashcardItem[]>([])
|
|
const [deckStats, setDeckStats] = useState({ total: 0, due: 0, mastered: 0 })
|
|
const [loadingDeck, setLoadingDeck] = useState(false)
|
|
|
|
const [isSessionActive, setIsSessionActive] = useState(false)
|
|
const [isSessionFinished, setIsSessionFinished] = useState(false)
|
|
const [sessionCards, setSessionCards] = useState<FlashcardItem[]>([])
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
const [isFlipped, setIsFlipped] = useState(false)
|
|
const [sessionGrades, setSessionGrades] = useState<Record<string, SessionGrade>>({})
|
|
const [reviewing, setReviewing] = useState(false)
|
|
|
|
const [newDeckName, setNewDeckName] = useState('')
|
|
const [creatingDeck, setCreatingDeck] = useState(false)
|
|
|
|
const loadDecks = useCallback(async () => {
|
|
setLoadingDecks(true)
|
|
try {
|
|
const res = await fetch('/api/flashcards/decks')
|
|
const data = await res.json()
|
|
if (res.ok) setDecks(data.decks || [])
|
|
} finally {
|
|
setLoadingDecks(false)
|
|
}
|
|
}, [])
|
|
|
|
const loadStats = useCallback(async () => {
|
|
setLoadingStats(true)
|
|
try {
|
|
const res = await fetch('/api/flashcards/stats')
|
|
const data = await res.json()
|
|
if (res.ok) setStats(data)
|
|
} finally {
|
|
setLoadingStats(false)
|
|
}
|
|
}, [])
|
|
|
|
const loadDeck = useCallback(async (deckId: string) => {
|
|
setLoadingDeck(true)
|
|
try {
|
|
const res = await fetch(`/api/flashcards/decks/${deckId}`)
|
|
const data = await res.json()
|
|
if (!res.ok) {
|
|
toast.error(data.error || t('flashcards.loadDeckFailed'))
|
|
return
|
|
}
|
|
setActiveDeckId(deckId)
|
|
setDeckCards(data.deck.cards || [])
|
|
setDeckStats(data.stats)
|
|
} finally {
|
|
setLoadingDeck(false)
|
|
}
|
|
}, [t])
|
|
|
|
useEffect(() => {
|
|
loadDecks()
|
|
}, [loadDecks])
|
|
|
|
useEffect(() => {
|
|
if (tab === 'progress') loadStats()
|
|
}, [tab, loadStats])
|
|
|
|
useEffect(() => {
|
|
if (initialDeckId && !activeDeckId) {
|
|
loadDeck(initialDeckId)
|
|
}
|
|
}, [initialDeckId, activeDeckId, loadDeck])
|
|
|
|
const activeDeck = useMemo(
|
|
() => decks.find((d) => d.id === activeDeckId),
|
|
[decks, activeDeckId],
|
|
)
|
|
|
|
const sessionChartData = useMemo(() => {
|
|
const counts = { 1: 0, 2: 0, 3: 0, 4: 0 }
|
|
Object.values(sessionGrades).forEach((g) => { counts[g] += 1 })
|
|
return [
|
|
{ label: t('flashcards.grade.hard'), value: counts[1] },
|
|
{ label: t('flashcards.grade.difficult'), value: counts[2] },
|
|
{ label: t('flashcards.grade.good'), value: counts[3] },
|
|
{ label: t('flashcards.grade.easy'), value: counts[4] },
|
|
]
|
|
}, [sessionGrades, t])
|
|
|
|
const startSession = useCallback((deckId: string, cardsInput?: FlashcardItem[], dueOnly = true) => {
|
|
const cards = cardsInput ?? (activeDeckId === deckId ? deckCards : [])
|
|
if (cards.length === 0) {
|
|
void loadDeck(deckId)
|
|
return
|
|
}
|
|
let toReview = dueOnly ? cards.filter((c) => c.due) : cards
|
|
if (toReview.length === 0) toReview = cards
|
|
const shuffled = [...toReview].sort(() => Math.random() - 0.5)
|
|
setSessionCards(shuffled)
|
|
setCurrentIndex(0)
|
|
setIsFlipped(false)
|
|
setSessionGrades({})
|
|
setIsSessionActive(true)
|
|
setIsSessionFinished(false)
|
|
setActiveDeckId(deckId)
|
|
}, [activeDeckId, deckCards, loadDeck])
|
|
|
|
useEffect(() => {
|
|
if (!initialDeckId) return
|
|
let cancelled = false
|
|
;(async () => {
|
|
const res = await fetch(`/api/flashcards/decks/${initialDeckId}`)
|
|
const data = await res.json()
|
|
if (cancelled || !res.ok) return
|
|
const cards: FlashcardItem[] = data.deck?.cards || []
|
|
setActiveDeckId(initialDeckId)
|
|
setDeckCards(cards)
|
|
setDeckStats(data.stats || { total: 0, due: 0, mastered: 0 })
|
|
startSession(initialDeckId, cards)
|
|
})()
|
|
return () => { cancelled = true }
|
|
}, [initialDeckId, startSession])
|
|
|
|
const handleEvaluate = async (grade: SessionGrade) => {
|
|
const card = sessionCards[currentIndex]
|
|
if (!card || reviewing) return
|
|
|
|
setReviewing(true)
|
|
setSessionGrades((prev) => ({ ...prev, [card.id]: grade }))
|
|
|
|
try {
|
|
await fetch(`/api/flashcards/${card.id}/review`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ grade }),
|
|
})
|
|
} catch {
|
|
toast.error(t('flashcards.reviewFailed'))
|
|
} finally {
|
|
setReviewing(false)
|
|
}
|
|
|
|
if (currentIndex < sessionCards.length - 1) {
|
|
setTimeout(() => {
|
|
setCurrentIndex((i) => i + 1)
|
|
setIsFlipped(false)
|
|
}, 250)
|
|
} else {
|
|
setTimeout(() => setIsSessionFinished(true), 250)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!isSessionActive || isSessionFinished) return
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.code === 'Space') {
|
|
e.preventDefault()
|
|
setIsFlipped((f) => !f)
|
|
} else if (isFlipped) {
|
|
if (e.key === '1') handleEvaluate(1)
|
|
if (e.key === '2') handleEvaluate(2)
|
|
if (e.key === '3') handleEvaluate(3)
|
|
if (e.key === '4') handleEvaluate(4)
|
|
}
|
|
}
|
|
window.addEventListener('keydown', onKey)
|
|
return () => window.removeEventListener('keydown', onKey)
|
|
}, [isSessionActive, isSessionFinished, isFlipped, currentIndex, reviewing])
|
|
|
|
const exitSession = () => {
|
|
setIsSessionActive(false)
|
|
setIsSessionFinished(false)
|
|
if (activeDeckId) {
|
|
loadDeck(activeDeckId)
|
|
loadDecks()
|
|
}
|
|
}
|
|
|
|
const createDeck = async () => {
|
|
const name = newDeckName.trim()
|
|
if (!name) return
|
|
setCreatingDeck(true)
|
|
try {
|
|
const res = await fetch('/api/flashcards/decks', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name }),
|
|
})
|
|
const data = await res.json()
|
|
if (res.ok) {
|
|
setNewDeckName('')
|
|
await loadDecks()
|
|
toast.success(t('flashcards.deckCreated'))
|
|
if (data.deck?.id) setActiveDeckId(data.deck.id)
|
|
}
|
|
} finally {
|
|
setCreatingDeck(false)
|
|
}
|
|
}
|
|
|
|
const formatDue = (dueCount: number) => {
|
|
if (dueCount > 0) return t('flashcards.dueCount', { count: dueCount })
|
|
return t('flashcards.upToDate')
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex flex-col bg-memento-paper dark:bg-background overflow-y-auto">
|
|
<div className="px-6 sm:px-10 py-5 flex items-center justify-between sticky top-0 bg-memento-paper/95 dark:bg-background/95 backdrop-blur-sm z-40 border-b border-border/40">
|
|
<div className="flex items-center gap-3">
|
|
{isSessionActive ? (
|
|
<button
|
|
type="button"
|
|
onClick={exitSession}
|
|
className="flex items-center gap-2 text-concrete hover:text-foreground transition-colors"
|
|
>
|
|
<ArrowLeft size={16} />
|
|
<span className="text-xs font-bold uppercase tracking-widest">{t('flashcards.exitSession')}</span>
|
|
</button>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<GraduationCap className="text-brand-accent" size={20} />
|
|
<h1 className="text-sm font-black tracking-widest uppercase">{t('nav.revision')}</h1>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!isSessionActive && (
|
|
<div className="flex gap-1 p-1 rounded-lg bg-black/[0.04] dark:bg-white/[0.04]">
|
|
{(['decks', 'progress'] as const).map((id) => (
|
|
<button
|
|
key={id}
|
|
type="button"
|
|
onClick={() => setTab(id)}
|
|
className={cn(
|
|
'px-3 py-1.5 rounded-md text-[10px] font-bold uppercase tracking-wider transition-colors',
|
|
tab === id ? 'bg-white dark:bg-card shadow-sm text-brand-accent' : 'text-concrete',
|
|
)}
|
|
>
|
|
{id === 'decks' ? t('flashcards.tabDecks') : t('flashcards.tabProgress')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 max-w-5xl mx-auto w-full p-6 sm:p-10">
|
|
<AnimatePresence mode="wait">
|
|
{isSessionActive && !isSessionFinished && sessionCards[currentIndex] && (
|
|
<motion.div
|
|
key="session"
|
|
initial={{ opacity: 0, scale: 0.98 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="max-w-2xl mx-auto flex flex-col items-center gap-8"
|
|
>
|
|
<div className="w-full flex items-center justify-between text-xs text-concrete">
|
|
<button
|
|
type="button"
|
|
disabled={currentIndex === 0}
|
|
onClick={() => { setCurrentIndex((i) => i - 1); setIsFlipped(false) }}
|
|
className="flex items-center gap-1 disabled:opacity-30"
|
|
>
|
|
<ChevronLeft size={16} /> {t('flashcards.previous')}
|
|
</button>
|
|
<span className="font-mono font-bold px-3 py-1 rounded-full bg-black/[0.04] dark:bg-white/[0.06]">
|
|
{currentIndex + 1} / {sessionCards.length}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
disabled={currentIndex >= sessionCards.length - 1}
|
|
onClick={() => { setCurrentIndex((i) => i + 1); setIsFlipped(false) }}
|
|
className="flex items-center gap-1 disabled:opacity-30"
|
|
>
|
|
{t('flashcards.next')} <ChevronRight size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsFlipped((f) => !f)}
|
|
className="w-full max-w-md min-h-[240px] [perspective:1000px] cursor-pointer select-none"
|
|
>
|
|
<div
|
|
className={cn(
|
|
'relative w-full min-h-[240px] transition-transform duration-500 [transform-style:preserve-3d]',
|
|
isFlipped && '[transform:rotateY(180deg)]',
|
|
)}
|
|
>
|
|
<div className="absolute inset-0 [backface-visibility:hidden] rounded-2xl border border-border bg-card p-8 flex flex-col shadow-sm">
|
|
<span className="text-[10px] uppercase tracking-widest text-concrete mb-4">{t('flashcards.front')}</span>
|
|
<p className="flex-1 flex items-center justify-center text-center text-lg font-serif font-semibold">
|
|
{sessionCards[currentIndex].front}
|
|
</p>
|
|
<span className="text-[10px] text-concrete/60 text-center">{t('flashcards.tapToFlip')}</span>
|
|
</div>
|
|
<div className="absolute inset-0 [backface-visibility:hidden] [transform:rotateY(180deg)] rounded-2xl border border-brand-accent/30 bg-brand-accent/5 p-8 flex flex-col shadow-md">
|
|
<span className="text-[10px] uppercase tracking-widest text-brand-accent mb-4">{t('flashcards.back')}</span>
|
|
<p className="flex-1 flex items-center justify-center text-center text-sm leading-relaxed overflow-y-auto">
|
|
{sessionCards[currentIndex].back}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
{isFlipped && (
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 w-full max-w-md">
|
|
{([
|
|
[1, t('flashcards.grade.hard'), 'bg-red-500/10 text-red-600 border-red-500/20'],
|
|
[2, t('flashcards.grade.difficult'), 'bg-amber-500/10 text-amber-700 border-amber-500/20'],
|
|
[3, t('flashcards.grade.good'), 'bg-emerald-500/10 text-emerald-700 border-emerald-500/20'],
|
|
[4, t('flashcards.grade.easy'), 'bg-brand-accent/10 text-brand-accent border-brand-accent/30'],
|
|
] as const).map(([grade, label, cls]) => (
|
|
<button
|
|
key={grade}
|
|
type="button"
|
|
disabled={reviewing}
|
|
onClick={() => handleEvaluate(grade as SessionGrade)}
|
|
className={cn('py-2.5 px-2 rounded-xl border text-[10px] font-bold uppercase tracking-wide', cls)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{isSessionFinished && (
|
|
<motion.div
|
|
key="finished"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="max-w-lg mx-auto text-center space-y-6"
|
|
>
|
|
<GraduationCap size={40} className="mx-auto text-brand-accent" />
|
|
<h2 className="text-2xl font-serif font-bold">{t('flashcards.sessionComplete')}</h2>
|
|
<div className="h-48">
|
|
<NoteChart type="bar" data={sessionChartData} height={180} />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={exitSession}
|
|
className="px-6 py-2.5 rounded-xl bg-brand-accent text-white text-xs font-bold uppercase tracking-wider"
|
|
>
|
|
{t('flashcards.backToDecks')}
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
|
|
{!isSessionActive && tab === 'decks' && (
|
|
<motion.div key="decks" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-8">
|
|
{activeDeckId && deckCards.length > 0 && (
|
|
<div className="p-5 rounded-2xl border border-brand-accent/25 bg-brand-accent/5 space-y-3">
|
|
<h3 className="font-serif font-semibold text-lg">{activeDeck?.name || t('flashcards.activeDeck')}</h3>
|
|
<div className="flex flex-wrap gap-3 text-xs text-concrete">
|
|
<span>{t('flashcards.statTotal', { count: deckStats.total })}</span>
|
|
<span>{t('flashcards.statDue', { count: deckStats.due })}</span>
|
|
<span>{t('flashcards.statMastered', { count: deckStats.mastered })}</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => startSession(activeDeckId)}
|
|
disabled={loadingDeck}
|
|
className="px-4 py-2 rounded-lg bg-brand-accent text-white text-xs font-bold uppercase tracking-wider flex items-center gap-2"
|
|
>
|
|
{loadingDeck ? <Loader2 size={14} className="animate-spin" /> : <GraduationCap size={14} />}
|
|
{t('flashcards.startReview')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-wrap gap-2 items-center">
|
|
<input
|
|
value={newDeckName}
|
|
onChange={(e) => setNewDeckName(e.target.value)}
|
|
placeholder={t('flashcards.newDeckPlaceholder')}
|
|
className="flex-1 min-w-[180px] px-3 py-2 rounded-lg border border-border text-sm bg-transparent"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={createDeck}
|
|
disabled={creatingDeck || !newDeckName.trim()}
|
|
className="px-3 py-2 rounded-lg border border-border text-xs font-bold flex items-center gap-1 disabled:opacity-50"
|
|
>
|
|
{creatingDeck ? <Loader2 size={14} className="animate-spin" /> : <Plus size={14} />}
|
|
{t('flashcards.createDeck')}
|
|
</button>
|
|
</div>
|
|
|
|
{loadingDecks ? (
|
|
<div className="flex justify-center py-16"><Loader2 className="animate-spin text-concrete" /></div>
|
|
) : decks.length === 0 ? (
|
|
<div className="text-center py-16 border border-dashed border-border rounded-2xl space-y-3">
|
|
<GraduationCap size={32} className="mx-auto text-concrete/40" />
|
|
<p className="text-sm text-concrete">{t('flashcards.emptyDecks')}</p>
|
|
<p className="text-xs text-concrete/60 max-w-md mx-auto">{t('flashcards.emptyDecksHint')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{decks.map((deck) => (
|
|
<div
|
|
key={deck.id}
|
|
className="p-5 rounded-2xl border border-border/60 bg-card/50 hover:border-brand-accent/30 transition-colors flex flex-col gap-4"
|
|
>
|
|
<div>
|
|
<h3 className="font-serif font-semibold truncate">{deck.name}</h3>
|
|
<p className="text-xs text-concrete flex items-center gap-1 mt-1">
|
|
<Layers size={12} />
|
|
{t('flashcards.cardCountLabel', { count: deck.totalCards })}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2 text-[10px]">
|
|
{deck.dueCount > 0 ? (
|
|
<span className="px-2 py-1 rounded-full bg-red-500/10 text-red-600 font-bold border border-red-500/15">
|
|
{formatDue(deck.dueCount)}
|
|
</span>
|
|
) : (
|
|
<span className="px-2 py-1 rounded-full bg-emerald-500/10 text-emerald-700 font-bold border border-emerald-500/15">
|
|
{t('flashcards.upToDate')}
|
|
</span>
|
|
)}
|
|
<span className="px-2 py-1 rounded-full border border-border flex items-center gap-1 font-mono">
|
|
<Calendar size={10} />
|
|
{deck.masteredCount}/{deck.totalCards} {t('flashcards.masteredShort')}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2 pt-2 border-t border-border/40">
|
|
<button
|
|
type="button"
|
|
onClick={() => loadDeck(deck.id)}
|
|
className="flex-1 py-2 text-[10px] font-bold uppercase tracking-wider border border-border rounded-lg hover:bg-black/[0.03]"
|
|
>
|
|
{t('flashcards.viewDeck')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={async () => {
|
|
setLoadingDeck(true)
|
|
try {
|
|
const res = await fetch(`/api/flashcards/decks/${deck.id}`)
|
|
const data = await res.json()
|
|
if (res.ok) {
|
|
setActiveDeckId(deck.id)
|
|
setDeckCards(data.deck.cards || [])
|
|
setDeckStats(data.stats)
|
|
startSession(deck.id, data.deck.cards || [])
|
|
}
|
|
} finally {
|
|
setLoadingDeck(false)
|
|
}
|
|
}}
|
|
className="flex-1 py-2 text-[10px] font-bold uppercase tracking-wider bg-brand-accent text-white rounded-lg flex items-center justify-center gap-1"
|
|
>
|
|
<GraduationCap size={12} />
|
|
{t('flashcards.review')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{!isSessionActive && tab === 'progress' && (
|
|
<motion.div key="progress" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-8">
|
|
{loadingStats ? (
|
|
<div className="flex justify-center py-16"><Loader2 className="animate-spin text-concrete" /></div>
|
|
) : stats ? (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div className="p-4 rounded-xl border border-border bg-card/50">
|
|
<p className="text-[10px] uppercase tracking-widest text-concrete">{t('flashcards.retentionRate')}</p>
|
|
<p className="text-3xl font-serif font-bold mt-1">{stats.retentionRate}%</p>
|
|
</div>
|
|
<div className="p-4 rounded-xl border border-border bg-card/50 sm:col-span-2">
|
|
<p className="text-[10px] uppercase tracking-widest text-concrete mb-2 flex items-center gap-1">
|
|
<BarChart3 size={12} /> {t('flashcards.retentionCurve')}
|
|
</p>
|
|
<NoteChart
|
|
type="line"
|
|
data={stats.retentionByWeek.map((w) => ({
|
|
label: w.week.slice(5),
|
|
value: w.rate,
|
|
}))}
|
|
height={120}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<RevisionHeatmap data={stats.heatmap} />
|
|
|
|
{stats.difficultCards.length > 0 && (
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-bold uppercase tracking-widest text-concrete flex items-center gap-2">
|
|
<BookOpen size={14} /> {t('flashcards.difficultCards')}
|
|
</h3>
|
|
<ul className="space-y-2">
|
|
{stats.difficultCards.map((c) => (
|
|
<li key={c.id} className="p-3 rounded-xl border border-border/60 text-sm flex justify-between gap-4">
|
|
<span className="truncate">{c.front}</span>
|
|
<span className="text-[10px] font-mono text-concrete shrink-0">EF {c.easinessFactor.toFixed(2)}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : null}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|