diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-15 16:28:24 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-15 16:28:24 +0900 |
| commit | b3263b6fee31f43cf3db682fdcec010412f69038 (patch) | |
| tree | ec83966e3726db082ed00d7d925a31af4f38866e | |
| parent | fcf137d10985f4f7681dc917c3611e1623641ae5 (diff) | |
| download | kioku-b3263b6fee31f43cf3db682fdcec010412f69038.tar.gz kioku-b3263b6fee31f43cf3db682fdcec010412f69038.tar.zst kioku-b3263b6fee31f43cf3db682fdcec010412f69038.zip | |
feat(study): show state badge for all card states
Display Learning, Review, and Relearning badges in addition to New,
using consistent color scheme from DeckCardsPage.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
| -rw-r--r-- | src/client/pages/StudyPage.tsx | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/src/client/pages/StudyPage.tsx b/src/client/pages/StudyPage.tsx index 39aa269..247f782 100644 --- a/src/client/pages/StudyPage.tsx +++ b/src/client/pages/StudyPage.tsx @@ -40,6 +40,13 @@ const RatingStyles: Record<Rating, string> = { 4: "bg-easy hover:bg-easy/90 focus:ring-easy/30", }; +const CardStateBadge: Record<number, { label: string; className: string }> = { + 0: { label: "New", className: "bg-info/10 text-info" }, + 1: { label: "Learning", className: "bg-warning/10 text-warning" }, + 2: { label: "Review", className: "bg-success/10 text-success" }, + 3: { label: "Relearning", className: "bg-error/10 text-error" }, +}; + function StudySession({ deckId, onNavigate, @@ -441,13 +448,13 @@ function StudySession({ aria-hidden="true" /> </span> - {/* New card badge */} - {currentCard.state === 0 && ( + {/* Card state badge */} + {CardStateBadge[currentCard.state] && ( <span - data-testid="new-card-badge" - className="absolute top-3 left-3 bg-primary/10 text-primary text-xs font-medium px-2 py-0.5 rounded-full" + data-testid="card-state-badge" + className={`absolute top-3 left-3 text-xs font-medium px-2 py-0.5 rounded-full ${CardStateBadge[currentCard.state].className}`} > - New + {CardStateBadge[currentCard.state].label} </span> )} {!isFlipped ? ( |