From cea7703ac440c38636ce2abd5baab35a23d05843 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 15 Feb 2026 16:45:35 +0900
Subject: 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>
---
 src/client/pages/DeckCardsPage.test.tsx  |  1 +
 src/client/pages/DeckDetailPage.test.tsx |  1 +
 src/client/pages/DeckDetailPage.tsx      | 14 ++++++++++++--
 src/client/pages/HomePage.test.tsx       |  4 ++++
 4 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'src/client/pages')

diff --git a/src/client/pages/DeckCardsPage.test.tsx b/src/client/pages/DeckCardsPage.test.tsx
index 7c3c184..91b0b28 100644
--- a/src/client/pages/DeckCardsPage.test.tsx
+++ b/src/client/pages/DeckCardsPage.test.tsx
@@ -73,6 +73,7 @@ const mockDeck = {
 	name: "Japanese Vocabulary",
 	description: "Common Japanese words",
 	dueCardCount: 0,
+	newCardCount: 0,
 	createdAt: "2024-01-01T00:00:00Z",
 	updatedAt: "2024-01-01T00:00:00Z",
 };
diff --git a/src/client/pages/DeckDetailPage.test.tsx b/src/client/pages/DeckDetailPage.test.tsx
index 9dcb152..0b9216b 100644
--- a/src/client/pages/DeckDetailPage.test.tsx
+++ b/src/client/pages/DeckDetailPage.test.tsx
@@ -60,6 +60,7 @@ const mockDeck = {
 	name: "Japanese Vocabulary",
 	description: "Common Japanese words",
 	dueCardCount: 0,
+	newCardCount: 0,
 	createdAt: "2024-01-01T00:00:00Z",
 	updatedAt: "2024-01-01T00:00:00Z",
 };
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,11 +33,17 @@ 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">
@@ -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" />
diff --git a/src/client/pages/HomePage.test.tsx b/src/client/pages/HomePage.test.tsx
index 179c649..3d15777 100644
--- a/src/client/pages/HomePage.test.tsx
+++ b/src/client/pages/HomePage.test.tsx
@@ -93,6 +93,7 @@ const mockDecks = [
 		name: "Japanese Vocabulary",
 		description: "Common Japanese words",
 		dueCardCount: 5,
+		newCardCount: 0,
 		createdAt: "2024-01-01T00:00:00Z",
 		updatedAt: "2024-01-01T00:00:00Z",
 	},
@@ -101,6 +102,7 @@ const mockDecks = [
 		name: "Spanish Verbs",
 		description: null,
 		dueCardCount: 0,
+		newCardCount: 0,
 		createdAt: "2024-01-02T00:00:00Z",
 		updatedAt: "2024-01-02T00:00:00Z",
 	},
@@ -253,6 +255,7 @@ describe("HomePage", () => {
 			name: "No Description Deck",
 			description: null,
 			dueCardCount: 0,
+			newCardCount: 0,
 			createdAt: "2024-01-01T00:00:00Z",
 			updatedAt: "2024-01-01T00:00:00Z",
 		};
@@ -332,6 +335,7 @@ describe("HomePage", () => {
 				name: "New Deck",
 				description: "A new deck",
 				dueCardCount: 0,
+				newCardCount: 0,
 				createdAt: "2024-01-03T00:00:00Z",
 				updatedAt: "2024-01-03T00:00:00Z",
 			};
-- 
cgit v1.3-1-g0d28