diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-15 16:45:35 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-15 16:45:35 +0900 |
| commit | cea7703ac440c38636ce2abd5baab35a23d05843 (patch) | |
| tree | 38de7bdf13a6b4b006319ee7800206eab9e35215 /src/client/pages/DeckDetailPage.tsx | |
| parent | 65fcf4111bc64267624b4e348bb704d006de5327 (diff) | |
| download | kioku-cea7703ac440c38636ce2abd5baab35a23d05843.tar.gz kioku-cea7703ac440c38636ce2abd5baab35a23d05843.tar.zst kioku-cea7703ac440c38636ce2abd5baab35a23d05843.zip | |
feat(deck): display new card count on deck detail page
Add newCardCount alongside Total and Due stats in the deck detail view,
queried from cards with state=New via a new countNewCards repository method.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Diffstat (limited to 'src/client/pages/DeckDetailPage.tsx')
| -rw-r--r-- | src/client/pages/DeckDetailPage.tsx | 14 |
1 files changed, 12 insertions, 2 deletions
diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx index bb8d42a..0a02051 100644 --- a/src/client/pages/DeckDetailPage.tsx +++ b/src/client/pages/DeckDetailPage.tsx @@ -33,12 +33,18 @@ function DeckStats({ deckId }: { deckId: string }) { return ( <div className="bg-white rounded-xl border border-border/50 p-6 mb-6"> - <div className="grid grid-cols-2 gap-4"> + <div className="grid grid-cols-3 gap-4"> <div> <p className="text-sm text-muted mb-1">Total</p> <p className="text-2xl font-semibold text-ink">{cards.length}</p> </div> <div> + <p className="text-sm text-muted mb-1">New</p> + <p className="text-2xl font-semibold text-info"> + {deck.newCardCount} + </p> + </div> + <div> <p className="text-sm text-muted mb-1">Due</p> <p className="text-2xl font-semibold text-primary"> {deck.dueCardCount} @@ -77,7 +83,11 @@ function DeckContent({ <Suspense fallback={ <div className="bg-white rounded-xl border border-border/50 p-6 mb-6"> - <div className="grid grid-cols-2 gap-4"> + <div className="grid grid-cols-3 gap-4"> + <div> + <div className="h-4 w-12 bg-muted/20 rounded animate-pulse mb-1" /> + <div className="h-8 w-10 bg-muted/20 rounded animate-pulse" /> + </div> <div> <div className="h-4 w-12 bg-muted/20 rounded animate-pulse mb-1" /> <div className="h-8 w-10 bg-muted/20 rounded animate-pulse" /> |