From f9b81b92b5ec9130b41146214be1757002debf7d Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 5 Feb 2026 23:56:22 +0900
Subject: feat(study): display new card badge on study screen

Show a "New" badge in the top-right corner of cards when the card
state is 0 (new), helping users identify cards they haven't seen before.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/pages/StudyPage.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/client/pages/StudyPage.tsx')

diff --git a/src/client/pages/StudyPage.tsx b/src/client/pages/StudyPage.tsx
index 4fb7549..eccdb50 100644
--- a/src/client/pages/StudyPage.tsx
+++ b/src/client/pages/StudyPage.tsx
@@ -362,12 +362,21 @@ function StudySession({ deckId }: { deckId: string }) {
 							isFlipped ? "Card showing answer" : "Click to reveal answer"
 						}
 						disabled={isFlipped}
-						className={`flex-1 min-h-[280px] bg-white rounded-2xl border border-border/50 shadow-card p-8 flex flex-col items-center justify-center text-center transition-all duration-300 ${
+						className={`relative flex-1 min-h-[280px] bg-white rounded-2xl border border-border/50 shadow-card p-8 flex flex-col items-center justify-center text-center transition-all duration-300 ${
 							!isFlipped
 								? "cursor-pointer hover:shadow-lg hover:border-primary/30 active:scale-[0.99]"
 								: "bg-ivory/50"
 						}`}
 					>
+						{/* New card badge */}
+						{currentCard.state === 0 && (
+							<span
+								data-testid="new-card-badge"
+								className="absolute top-3 right-3 bg-primary/10 text-primary text-xs font-medium px-2 py-0.5 rounded-full"
+							>
+								New
+							</span>
+						)}
 						{!isFlipped ? (
 							<>
 								<p
-- 
cgit v1.3-1-g0d28

