From 84be23571d0e52f28abe52371939ce551e998760 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 15 Feb 2026 17:36:13 +0900
Subject: feat(deck): add progress bar showing review/total ratio on deck list

Add totalCardCount and reviewCardCount to deck API responses and
display a progress bar on the home page for each deck with cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/client/atoms/decks.ts                |  2 ++
 src/client/pages/DeckCardsPage.test.tsx  |  2 ++
 src/client/pages/DeckDetailPage.test.tsx |  2 ++
 src/client/pages/HomePage.test.tsx       |  8 ++++++
 src/client/pages/HomePage.tsx            | 15 +++++++++++
 src/server/repositories/card.test.ts     |  2 ++
 src/server/repositories/card.ts          | 22 ++++++++++++++++
 src/server/repositories/types.ts         |  2 ++
 src/server/routes/cards.test.ts          |  2 ++
 src/server/routes/decks.test.ts          |  2 ++
 src/server/routes/decks.ts               | 43 ++++++++++++++++++++++++--------
 src/server/routes/study.test.ts          |  2 ++
 12 files changed, 94 insertions(+), 10 deletions(-)

diff --git a/src/client/atoms/decks.ts b/src/client/atoms/decks.ts
index a0e569f..8c8397f 100644
--- a/src/client/atoms/decks.ts
+++ b/src/client/atoms/decks.ts
@@ -8,6 +8,8 @@ export interface Deck {
 	description: string | null;
 	dueCardCount: number;
 	newCardCount: number;
+	totalCardCount: number;
+	reviewCardCount: number;
 	createdAt: string;
 	updatedAt: string;
 }
diff --git a/src/client/pages/DeckCardsPage.test.tsx b/src/client/pages/DeckCardsPage.test.tsx
index 48cc0e3..16916df 100644
--- a/src/client/pages/DeckCardsPage.test.tsx
+++ b/src/client/pages/DeckCardsPage.test.tsx
@@ -75,6 +75,8 @@ const mockDeck = {
 	description: "Common Japanese words",
 	dueCardCount: 0,
 	newCardCount: 0,
+	totalCardCount: 0,
+	reviewCardCount: 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 b2fa7f0..bb9d80c 100644
--- a/src/client/pages/DeckDetailPage.test.tsx
+++ b/src/client/pages/DeckDetailPage.test.tsx
@@ -62,6 +62,8 @@ const mockDeck = {
 	description: "Common Japanese words",
 	dueCardCount: 0,
 	newCardCount: 0,
+	totalCardCount: 0,
+	reviewCardCount: 0,
 	createdAt: "2024-01-01T00:00:00Z",
 	updatedAt: "2024-01-01T00:00:00Z",
 };
diff --git a/src/client/pages/HomePage.test.tsx b/src/client/pages/HomePage.test.tsx
index 3d15777..de7a768 100644
--- a/src/client/pages/HomePage.test.tsx
+++ b/src/client/pages/HomePage.test.tsx
@@ -94,6 +94,8 @@ const mockDecks = [
 		description: "Common Japanese words",
 		dueCardCount: 5,
 		newCardCount: 0,
+		totalCardCount: 100,
+		reviewCardCount: 60,
 		createdAt: "2024-01-01T00:00:00Z",
 		updatedAt: "2024-01-01T00:00:00Z",
 	},
@@ -103,6 +105,8 @@ const mockDecks = [
 		description: null,
 		dueCardCount: 0,
 		newCardCount: 0,
+		totalCardCount: 0,
+		reviewCardCount: 0,
 		createdAt: "2024-01-02T00:00:00Z",
 		updatedAt: "2024-01-02T00:00:00Z",
 	},
@@ -256,6 +260,8 @@ describe("HomePage", () => {
 			description: null,
 			dueCardCount: 0,
 			newCardCount: 0,
+			totalCardCount: 0,
+			reviewCardCount: 0,
 			createdAt: "2024-01-01T00:00:00Z",
 			updatedAt: "2024-01-01T00:00:00Z",
 		};
@@ -336,6 +342,8 @@ describe("HomePage", () => {
 				description: "A new deck",
 				dueCardCount: 0,
 				newCardCount: 0,
+				totalCardCount: 0,
+				reviewCardCount: 0,
 				createdAt: "2024-01-03T00:00:00Z",
 				updatedAt: "2024-01-03T00:00:00Z",
 			};
diff --git a/src/client/pages/HomePage.tsx b/src/client/pages/HomePage.tsx
index b7102c7..e23e68e 100644
--- a/src/client/pages/HomePage.tsx
+++ b/src/client/pages/HomePage.tsx
@@ -78,6 +78,21 @@ function DeckList({
 									{deck.description}
 								</p>
 							)}
+							{deck.totalCardCount > 0 && (
+								<div className="flex items-center gap-2 mt-2">
+									<div className="flex-1 h-1.5 bg-ivory rounded-full overflow-hidden">
+										<div
+											className="h-full bg-primary rounded-full transition-all duration-300"
+											style={{
+												width: `${(deck.reviewCardCount / deck.totalCardCount) * 100}%`,
+											}}
+										/>
+									</div>
+									<span className="text-xs text-muted shrink-0">
+										{deck.reviewCardCount}/{deck.totalCardCount}
+									</span>
+								</div>
+							)}
 						</div>
 						<div className="flex items-center gap-2 shrink-0">
 							<button
diff --git a/src/server/repositories/card.test.ts b/src/server/repositories/card.test.ts
index b959709..8630e19 100644
--- a/src/server/repositories/card.test.ts
+++ b/src/server/repositories/card.test.ts
@@ -116,6 +116,8 @@ function createMockCardRepo(): CardRepository {
 		findDueCardsWithNoteData: vi.fn(),
 		findDueCardsForStudy: vi.fn(),
 		updateFSRSFields: vi.fn(),
+		countTotalCards: vi.fn(),
+		countReviewStateCards: vi.fn(),
 	};
 }
 
diff --git a/src/server/repositories/card.ts b/src/server/repositories/card.ts
index 223050a..a2b0972 100644
--- a/src/server/repositories/card.ts
+++ b/src/server/repositories/card.ts
@@ -230,6 +230,28 @@ export const cardRepository: CardRepository = {
 		return result[0]?.count ?? 0;
 	},
 
+	async countTotalCards(deckId: string): Promise<number> {
+		const result = await db
+			.select({ count: sql<number>`count(*)::int` })
+			.from(cards)
+			.where(and(eq(cards.deckId, deckId), isNull(cards.deletedAt)));
+		return result[0]?.count ?? 0;
+	},
+
+	async countReviewStateCards(deckId: string): Promise<number> {
+		const result = await db
+			.select({ count: sql<number>`count(*)::int` })
+			.from(cards)
+			.where(
+				and(
+					eq(cards.deckId, deckId),
+					isNull(cards.deletedAt),
+					eq(cards.state, CardState.Review),
+				),
+			);
+		return result[0]?.count ?? 0;
+	},
+
 	async findDueCardsWithNoteData(
 		deckId: string,
 		now: Date,
diff --git a/src/server/repositories/types.ts b/src/server/repositories/types.ts
index b70b247..7e0819a 100644
--- a/src/server/repositories/types.ts
+++ b/src/server/repositories/types.ts
@@ -146,6 +146,8 @@ export interface CardRepository {
 	findDueCards(deckId: string, now: Date): Promise<Card[]>;
 	countDueCards(deckId: string, now: Date): Promise<number>;
 	countNewCards(deckId: string): Promise<number>;
+	countTotalCards(deckId: string): Promise<number>;
+	countReviewStateCards(deckId: string): Promise<number>;
 	findDueCardsWithNoteData(
 		deckId: string,
 		now: Date,
diff --git a/src/server/routes/cards.test.ts b/src/server/routes/cards.test.ts
index cd0493c..57df729 100644
--- a/src/server/routes/cards.test.ts
+++ b/src/server/routes/cards.test.ts
@@ -30,6 +30,8 @@ function createMockCardRepo(): CardRepository {
 		findDueCardsWithNoteData: vi.fn(),
 		findDueCardsForStudy: vi.fn(),
 		updateFSRSFields: vi.fn(),
+		countTotalCards: vi.fn(),
+		countReviewStateCards: vi.fn(),
 	};
 }
 
diff --git a/src/server/routes/decks.test.ts b/src/server/routes/decks.test.ts
index a1412d2..009c8a5 100644
--- a/src/server/routes/decks.test.ts
+++ b/src/server/routes/decks.test.ts
@@ -32,6 +32,8 @@ function createMockCardRepo(): CardRepository {
 		findDueCards: vi.fn(),
 		countDueCards: vi.fn().mockResolvedValue(0),
 		countNewCards: vi.fn().mockResolvedValue(0),
+		countTotalCards: vi.fn().mockResolvedValue(0),
+		countReviewStateCards: vi.fn().mockResolvedValue(0),
 		findDueCardsWithNoteData: vi.fn(),
 		findDueCardsForStudy: vi.fn(),
 		updateFSRSFields: vi.fn(),
diff --git a/src/server/routes/decks.ts b/src/server/routes/decks.ts
index dcf758a..069b933 100644
--- a/src/server/routes/decks.ts
+++ b/src/server/routes/decks.ts
@@ -30,11 +30,20 @@ export function createDecksRouter(deps: DeckDependencies) {
 			const now = new Date();
 			const decksWithDueCount = await Promise.all(
 				decks.map(async (deck) => {
-					const [dueCardCount, newCardCount] = await Promise.all([
-						cardRepo.countDueCards(deck.id, now),
-						cardRepo.countNewCards(deck.id),
-					]);
-					return { ...deck, dueCardCount, newCardCount };
+					const [dueCardCount, newCardCount, totalCardCount, reviewCardCount] =
+						await Promise.all([
+							cardRepo.countDueCards(deck.id, now),
+							cardRepo.countNewCards(deck.id),
+							cardRepo.countTotalCards(deck.id),
+							cardRepo.countReviewStateCards(deck.id),
+						]);
+					return {
+						...deck,
+						dueCardCount,
+						newCardCount,
+						totalCardCount,
+						reviewCardCount,
+					};
 				}),
 			);
 			return c.json({ decks: decksWithDueCount }, 200);
@@ -61,12 +70,26 @@ export function createDecksRouter(deps: DeckDependencies) {
 			}
 
 			const now = new Date();
-			const [dueCardCount, newCardCount] = await Promise.all([
-				cardRepo.countDueCards(deck.id, now),
-				cardRepo.countNewCards(deck.id),
-			]);
+			const [dueCardCount, newCardCount, totalCardCount, reviewCardCount] =
+				await Promise.all([
+					cardRepo.countDueCards(deck.id, now),
+					cardRepo.countNewCards(deck.id),
+					cardRepo.countTotalCards(deck.id),
+					cardRepo.countReviewStateCards(deck.id),
+				]);
 
-			return c.json({ deck: { ...deck, dueCardCount, newCardCount } }, 200);
+			return c.json(
+				{
+					deck: {
+						...deck,
+						dueCardCount,
+						newCardCount,
+						totalCardCount,
+						reviewCardCount,
+					},
+				},
+				200,
+			);
 		})
 		.put(
 			"/:id",
diff --git a/src/server/routes/study.test.ts b/src/server/routes/study.test.ts
index 84bf3a7..0f2fbe7 100644
--- a/src/server/routes/study.test.ts
+++ b/src/server/routes/study.test.ts
@@ -30,6 +30,8 @@ function createMockCardRepo(): CardRepository {
 		findDueCardsWithNoteData: vi.fn(),
 		findDueCardsForStudy: vi.fn(),
 		updateFSRSFields: vi.fn(),
+		countTotalCards: vi.fn(),
+		countReviewStateCards: vi.fn(),
 	};
 }
 
-- 
cgit v1.3-1-g0d28