diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-05 23:56:22 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-05 23:56:22 +0900 |
| commit | f9b81b92b5ec9130b41146214be1757002debf7d (patch) | |
| tree | 2804122bc31ff3bb9eb8e35723a6ab65f9b902fc | |
| parent | 24da9e91b9d5284a104cc207e59a619f3c48bb7f (diff) | |
| download | kioku-f9b81b92b5ec9130b41146214be1757002debf7d.tar.gz kioku-f9b81b92b5ec9130b41146214be1757002debf7d.tar.zst kioku-f9b81b92b5ec9130b41146214be1757002debf7d.zip | |
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>
| -rw-r--r-- | src/client/pages/StudyPage.tsx | 11 |
1 files changed, 10 insertions, 1 deletions
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 |