diff options
| author | Claude <noreply@anthropic.com> | 2026-01-12 08:57:51 +0000 |
|---|---|---|
| committer | Claude <noreply@anthropic.com> | 2026-01-12 08:57:51 +0000 |
| commit | 887630365ff0531a0556cb71a6b1be0956c41d06 (patch) | |
| tree | f0cebd927c2292a40f123a694c6aa561768ad7a3 /src/client/pages | |
| parent | f8e4be9b36a16969ac53bd9ce12ce8064be10196 (diff) | |
| download | kioku-887630365ff0531a0556cb71a6b1be0956c41d06.tar.gz kioku-887630365ff0531a0556cb71a6b1be0956c41d06.tar.zst kioku-887630365ff0531a0556cb71a6b1be0956c41d06.zip | |
feat(deck): show due card count on deck list page
Display a badge with the number of cards due for study today next to
each deck name on the home page. The count is fetched along with deck
data from the API to minimize additional network requests.
Diffstat (limited to 'src/client/pages')
| -rw-r--r-- | src/client/pages/DeckDetailPage.test.tsx | 1 | ||||
| -rw-r--r-- | src/client/pages/HomePage.test.tsx | 4 | ||||
| -rw-r--r-- | src/client/pages/HomePage.tsx | 23 |
3 files changed, 20 insertions, 8 deletions
diff --git a/src/client/pages/DeckDetailPage.test.tsx b/src/client/pages/DeckDetailPage.test.tsx index 402ecd4..b138a0b 100644 --- a/src/client/pages/DeckDetailPage.test.tsx +++ b/src/client/pages/DeckDetailPage.test.tsx @@ -70,6 +70,7 @@ const mockDeck = { name: "Japanese Vocabulary", description: "Common Japanese words", newCardsPerDay: 20, + dueCardCount: 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 4921e22..8946fcf 100644 --- a/src/client/pages/HomePage.test.tsx +++ b/src/client/pages/HomePage.test.tsx @@ -84,6 +84,7 @@ const mockDecks = [ name: "Japanese Vocabulary", description: "Common Japanese words", newCardsPerDay: 20, + dueCardCount: 5, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }, @@ -92,6 +93,7 @@ const mockDecks = [ name: "Spanish Verbs", description: null, newCardsPerDay: 10, + dueCardCount: 0, createdAt: "2024-01-02T00:00:00Z", updatedAt: "2024-01-02T00:00:00Z", }, @@ -239,6 +241,7 @@ describe("HomePage", () => { name: "No Description Deck", description: null, newCardsPerDay: 20, + dueCardCount: 0, createdAt: "2024-01-01T00:00:00Z", updatedAt: "2024-01-01T00:00:00Z", }; @@ -312,6 +315,7 @@ describe("HomePage", () => { name: "New Deck", description: "A new deck", newCardsPerDay: 20, + dueCardCount: 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 e0e9e9e..ad6ece4 100644 --- a/src/client/pages/HomePage.tsx +++ b/src/client/pages/HomePage.tsx @@ -57,14 +57,21 @@ function DeckList({ > <div className="flex items-start justify-between gap-4"> <div className="flex-1 min-w-0"> - <Link - href={`/decks/${deck.id}`} - className="block group-hover:text-primary transition-colors" - > - <h3 className="font-display text-lg font-medium text-slate truncate"> - {deck.name} - </h3> - </Link> + <div className="flex items-center gap-3"> + <Link + href={`/decks/${deck.id}`} + className="block group-hover:text-primary transition-colors flex-1 min-w-0" + > + <h3 className="font-display text-lg font-medium text-slate truncate"> + {deck.name} + </h3> + </Link> + {deck.dueCardCount > 0 && ( + <span className="shrink-0 inline-flex items-center justify-center min-w-[1.5rem] h-6 px-2 bg-primary text-white text-sm font-medium rounded-full"> + {deck.dueCardCount} + </span> + )} + </div> {deck.description && ( <p className="text-muted text-sm mt-1 line-clamp-2"> {deck.description} |