diff options
Diffstat (limited to 'src/client/pages/DeckDetailPage.tsx')
| -rw-r--r-- | src/client/pages/DeckDetailPage.tsx | 52 |
1 files changed, 6 insertions, 46 deletions
diff --git a/src/client/pages/DeckDetailPage.tsx b/src/client/pages/DeckDetailPage.tsx index 6bc89ba..d717d60 100644 --- a/src/client/pages/DeckDetailPage.tsx +++ b/src/client/pages/DeckDetailPage.tsx @@ -7,7 +7,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useAtomValue } from "jotai"; import { Suspense } from "react"; import { Link, useParams } from "wouter"; -import { getEndOfStudyDayBoundary } from "../../shared/date"; import { cardsByDeckAtomFamily, deckByIdAtomFamily } from "../atoms"; import { ErrorBoundary } from "../components/ErrorBoundary"; import { LoadingSpinner } from "../components/LoadingSpinner"; @@ -25,52 +24,21 @@ function DeckHeader({ deckId }: { deckId: string }) { ); } -// CardState values from FSRS -const CardState = { - New: 0, - Learning: 1, - Review: 2, - Relearning: 3, -} as const; - function DeckStats({ deckId }: { deckId: string }) { + const { data: deck } = useAtomValue(deckByIdAtomFamily(deckId)); const { data: cards } = useAtomValue(cardsByDeckAtomFamily(deckId)); - // Count cards due today (study day boundary is 3:00 AM) - const boundary = getEndOfStudyDayBoundary(); - const dueCards = cards.filter((card) => new Date(card.due) < boundary); - - // Count by card state - const newCards = dueCards.filter((card) => card.state === CardState.New); - const learningCards = dueCards.filter( - (card) => - card.state === CardState.Learning || card.state === CardState.Relearning, - ); - const reviewCards = dueCards.filter( - (card) => card.state === CardState.Review, - ); - return ( <div className="bg-white rounded-xl border border-border/50 p-6 mb-6"> - <div className="grid grid-cols-4 gap-4"> + <div className="grid grid-cols-2 gap-4"> <div> <p className="text-sm text-muted mb-1">Total</p> <p className="text-2xl font-semibold text-ink">{cards.length}</p> </div> <div> - <p className="text-sm text-muted mb-1">New</p> - <p className="text-2xl font-semibold text-info">{newCards.length}</p> - </div> - <div> - <p className="text-sm text-muted mb-1">Learning</p> - <p className="text-2xl font-semibold text-warning"> - {learningCards.length} - </p> - </div> - <div> - <p className="text-sm text-muted mb-1">Review</p> - <p className="text-2xl font-semibold text-success"> - {reviewCards.length} + <p className="text-sm text-muted mb-1">Due</p> + <p className="text-2xl font-semibold text-primary"> + {deck.dueCardCount} </p> </div> </div> @@ -100,7 +68,7 @@ function DeckContent({ deckId }: { deckId: string }) { <Suspense fallback={ <div className="bg-white rounded-xl border border-border/50 p-6 mb-6"> - <div className="grid grid-cols-4 gap-4"> + <div className="grid grid-cols-2 gap-4"> <div> <div className="h-4 w-12 bg-muted/20 rounded animate-pulse mb-1" /> <div className="h-8 w-10 bg-muted/20 rounded animate-pulse" /> @@ -109,14 +77,6 @@ function DeckContent({ deckId }: { deckId: string }) { <div className="h-4 w-12 bg-muted/20 rounded animate-pulse mb-1" /> <div className="h-8 w-10 bg-muted/20 rounded animate-pulse" /> </div> - <div> - <div className="h-4 w-16 bg-muted/20 rounded animate-pulse mb-1" /> - <div className="h-8 w-10 bg-muted/20 rounded animate-pulse" /> - </div> - <div> - <div className="h-4 w-14 bg-muted/20 rounded animate-pulse mb-1" /> - <div className="h-8 w-10 bg-muted/20 rounded animate-pulse" /> - </div> </div> </div> } |