From b3263b6fee31f43cf3db682fdcec010412f69038 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 15 Feb 2026 16:28:24 +0900
Subject: 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>
---
 src/client/pages/StudyPage.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'src')

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 ? (
-- 
cgit v1.3-1-g0d28