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/pages/HomePage.tsx | |
| 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/pages/HomePage.tsx')
| -rw-r--r-- | src/client/pages/HomePage.tsx | 15 |
1 files changed, 15 insertions, 0 deletions
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 |