1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
import {
faChevronLeft,
faCirclePlay,
faLayerGroup,
faPlus,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAtomValue } from "jotai";
import { Suspense, useState } from "react";
import { Link, useParams } from "wouter";
import { cardsByDeckAtomFamily, type Deck, deckByIdAtomFamily } from "../atoms";
import { CreateNoteModal } from "../components/CreateNoteModal";
import { ErrorBoundary } from "../components/ErrorBoundary";
import { LoadingSpinner } from "../components/LoadingSpinner";
import { queryClient } from "../queryClient";
function DeckHeader({ deckId }: { deckId: string }) {
const { data: deck } = useAtomValue(deckByIdAtomFamily(deckId));
return (
<div className="mb-8">
<h1 className="font-display text-3xl font-semibold text-ink mb-2">
{deck.name}
</h1>
{deck.description && <p className="text-muted">{deck.description}</p>}
</div>
);
}
function DeckStats({ deckId }: { deckId: string }) {
const { data: deck } = useAtomValue(deckByIdAtomFamily(deckId));
const { data: cards } = useAtomValue(cardsByDeckAtomFamily(deckId));
return (
<div className="bg-white rounded-xl border border-border/50 p-6 mb-6">
<div className="grid grid-cols-3 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">
{deck.newCardCount}
</p>
</div>
<div>
<p className="text-sm text-muted mb-1">Due</p>
<p className="text-2xl font-semibold text-primary">
{deck.dueCardCount}
</p>
</div>
</div>
</div>
);
}
function DeckContent({
deckId,
onCreateNote,
}: {
deckId: string;
onCreateNote: () => void;
}) {
return (
<div className="animate-fade-in">
{/* Deck Header */}
<ErrorBoundary>
<Suspense
fallback={
<div className="mb-8">
<div className="h-9 w-48 bg-muted/20 rounded animate-pulse mb-2" />
<div className="h-5 w-64 bg-muted/20 rounded animate-pulse" />
</div>
}
>
<DeckHeader deckId={deckId} />
</Suspense>
</ErrorBoundary>
{/* Deck Stats */}
<ErrorBoundary>
<Suspense
fallback={
<div className="bg-white rounded-xl border border-border/50 p-6 mb-6">
<div className="grid grid-cols-3 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" />
</div>
<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" />
</div>
<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" />
</div>
</div>
</div>
}
>
<DeckStats deckId={deckId} />
</Suspense>
</ErrorBoundary>
{/* Action Buttons */}
<div className="space-y-4">
{/* Study Button */}
<Link
href={`/decks/${deckId}/study`}
className="flex items-center justify-center gap-3 w-full bg-success hover:bg-success/90 text-white font-medium py-4 px-6 rounded-xl transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-md"
>
<FontAwesomeIcon
icon={faCirclePlay}
className="w-6 h-6"
aria-hidden="true"
/>
<span className="text-lg">Study Now</span>
</Link>
{/* Add Note Button */}
<button
type="button"
onClick={onCreateNote}
className="flex items-center justify-center gap-3 w-full bg-primary hover:bg-primary/90 text-white font-medium py-4 px-6 rounded-xl transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-md"
>
<FontAwesomeIcon
icon={faPlus}
className="w-5 h-5"
aria-hidden="true"
/>
<span className="text-lg">Add Note</span>
</button>
{/* View Cards Link */}
<Link
href={`/decks/${deckId}/cards`}
className="flex items-center justify-center gap-3 w-full border border-border hover:bg-ivory text-slate font-medium py-4 px-6 rounded-xl transition-all duration-200 active:scale-[0.98]"
>
<FontAwesomeIcon
icon={faLayerGroup}
className="w-5 h-5"
aria-hidden="true"
/>
<span className="text-lg">View Cards</span>
</Link>
</div>
</div>
);
}
export function DeckDetailPage() {
const { deckId } = useParams<{ deckId: string }>();
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
if (!deckId) {
return (
<div className="min-h-screen bg-cream flex items-center justify-center">
<div className="text-center">
<p className="text-muted mb-4">Invalid deck ID</p>
<Link
href="/"
className="text-primary hover:text-primary-dark font-medium"
>
Back to decks
</Link>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-cream">
{/* Header */}
<header className="bg-white border-b border-border/50">
<div className="max-w-4xl mx-auto px-4 py-4">
<Link
href="/"
className="inline-flex items-center gap-2 text-muted hover:text-slate transition-colors text-sm"
>
<FontAwesomeIcon
icon={faChevronLeft}
className="w-4 h-4"
aria-hidden="true"
/>
Back to Decks
</Link>
</div>
</header>
{/* Main Content */}
<main className="max-w-4xl mx-auto px-4 py-8">
<ErrorBoundary>
<Suspense fallback={<LoadingSpinner />}>
<DeckContent
deckId={deckId}
onCreateNote={() => setIsCreateModalOpen(true)}
/>
</Suspense>
</ErrorBoundary>
</main>
<CreateNoteModal
isOpen={isCreateModalOpen}
deckId={deckId}
defaultNoteTypeId={
queryClient.getQueryData<Deck>(["decks", deckId])?.defaultNoteTypeId
}
onClose={() => setIsCreateModalOpen(false)}
onNoteCreated={() => {
queryClient.invalidateQueries({
queryKey: ["decks", deckId, "cards"],
});
}}
/>
</div>
);
}
|
