diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-15 17:36:13 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-15 17:36:13 +0900 |
| commit | 84be23571d0e52f28abe52371939ce551e998760 (patch) | |
| tree | 0122f749ebc87b9c02af985de3f69f7e6b9e4e39 /src/client | |
| parent | cbb45c8776444e90f26d27e53241cf5a9ba5ec4f (diff) | |
| download | kioku-84be23571d0e52f28abe52371939ce551e998760.tar.gz kioku-84be23571d0e52f28abe52371939ce551e998760.tar.zst kioku-84be23571d0e52f28abe52371939ce551e998760.zip | |
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>
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/atoms/decks.ts | 2 | ||||
| -rw-r--r-- | src/client/pages/DeckCardsPage.test.tsx | 2 | ||||
| -rw-r--r-- | src/client/pages/DeckDetailPage.test.tsx | 2 | ||||
| -rw-r--r-- | src/client/pages/HomePage.test.tsx | 8 | ||||
| -rw-r--r-- | src/client/pages/HomePage.tsx | 15 |
5 files changed, 29 insertions, 0 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 |