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/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 +++++++++++++++
 4 files changed, 27 insertions(+)

(limited to 'src/client/pages')

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
-- 
cgit v1.3-1-g0d28