From f9b81b92b5ec9130b41146214be1757002debf7d Mon Sep 17 00:00:00 2001 From: nsfisis 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 --- src/client/pages/StudyPage.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'src') 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 && ( + + New + + )} {!isFlipped ? ( <>