Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Numeroud bug fixes, UI improvements, small animations
Some checks failed
Automated Container Build / build-and-push (push) Failing after 3s
Details

Browse source
This commit is contained in:
Elijah 2026-06-27 19:50:10 -07:00
parent b7ce314f01
commit d76ec4a69f
10 changed files with 249 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/app/(protected)/[classSlug]/flashcards/page.tsx
View file

@ -18,11 +18,13 @@ interface DeckItem {
}>;
}
const cache: Record<string, DeckItem[]> = {};
export default function FlashcardsPage() {
const params = useParams();
const classSlug = params.classSlug as string;
const [decks, setDecks] = useState<DeckItem[]>([]);
const [loading, setLoading] = useState(true);
const [decks, setDecks] = useState<DeckItem[]>(cache[classSlug] || []);
const [loading, setLoading] = useState(!cache[classSlug]);
const [showImport, setShowImport] = useState(false);
const [classId, setClassId] = useState<string>("");
const [editingId, setEditingId] = useState<string | null>(null);
@ -33,7 +35,9 @@ export default function FlashcardsPage() {
const res = await fetch(`/api/decks/list?classId=${cId}`);
if (res.ok) {
const data = await res.json();
setDecks(Array.isArray(data) ? data : []);
const arr = Array.isArray(data) ? data : [];
setDecks(arr);
cache[classSlug] = arr;
}
} catch {
setDecks([]);
@ -124,7 +128,7 @@ export default function FlashcardsPage() {
{/* Empty state */}
{!loading && decks.length === 0 && (
<div className="text-center py-16">
<div className="text-center py-16 animate-fade-in">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
<svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
@ -143,16 +147,16 @@ export default function FlashcardsPage() {
{/* Deck grid */}
{!loading && decks.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-fade-in">
{decks.map((deck) => {
const progressLabel = getProgressLabel(deck);
return (
<div
key={deck.id}
className="group bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300"
className="group flex flex-col bg-bg-surface rounded-xl border border-border-light shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-card-hover)] hover:border-primary/20 transition-all duration-300 h-full"
>
<div className="p-6">
<div className="p-6 flex flex-col flex-1 h-full">
{/* Name (editable) */}
{editingId === deck.id ? (
<div className="flex gap-2 mb-3">
@ -188,7 +192,7 @@ export default function FlashcardsPage() {
)}
{/* Stats */}
<div className="flex items-center gap-3">
<div className="flex items-center gap-3 mt-auto mb-4">
<span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-badge-bg text-badge-text text-xs font-medium">
{deck._count.cards} {deck._count.cards === 1 ? "card" : "cards"}
</span>
@ -198,13 +202,40 @@ export default function FlashcardsPage() {
</div>
{/* Actions */}
<div className="flex items-center gap-2 mt-4 pt-4 border-t border-border-light">
<Link
href={`/${classSlug}/flashcards/${deck.id}`}
className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
>
{deck.progress?.length ? "Continue" : "Study"}
</Link>
<div className="flex items-center gap-2 pt-4 border-t border-border-light">
{deck.progress?.length ? (
<>
<Link
href={`/${classSlug}/flashcards/${deck.id}`}
className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
>
Continue
</Link>
<button
onClick={async () => {
if (!confirm("Start over from the beginning? This will clear your current progress for this deck.")) return;
await Promise.all([
fetch("/api/progress", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SEQUENTIAL" }) }).catch(() => {}),
fetch("/api/progress", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contentType: "DECK", contentId: deck.id, mode: "SHUFFLED" }) }).catch(() => {})
]);
window.location.href = `/${classSlug}/flashcards/${deck.id}`;
}}
className="p-2 rounded-lg text-text-muted border border-border-light hover:bg-bg-surface-alt hover:text-text-heading transition-all duration-200 cursor-pointer"
title="Start New"
>
<svg className="w-5 h-5 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</>
) : (
<Link
href={`/${classSlug}/flashcards/${deck.id}`}
className="flex-1 text-center py-2 px-4 rounded-lg bg-primary text-white text-sm font-medium hover:bg-primary-hover transition-all duration-200"
>
Study
</Link>
)}
<button
onClick={() => {
setEditingId(deck.id);

32
src/app/(protected)/[classSlug]/quizzes/[quizId]/page.tsx
View file

@ -56,6 +56,24 @@ export default function QuizStudyPage() {
const [loading, setLoading] = useState(true);
const [view, setView] = useState<"history" | "take">("take");
const [retakeIds, setRetakeIds] = useState<string[] | null>(null);
const [restartKey, setRestartKey] = useState(0);
async function handleRestart() {
if (!quiz) return;
// Clear progress in database
await fetch("/api/progress", {
method: "DELETE",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ contentType: "QUIZ", contentId: quiz.id, mode: "SEQUENTIAL" })
}).catch(() => {});
// Clear locally and force remount
setQuiz({ ...quiz, progress: [] });
setRetakeIds(null);
setRestartKey(prev => prev + 1);
setView("take");
}
const fetchQuizAndAttempts = useCallback(async () => {
try {
@ -121,7 +139,18 @@ export default function QuizStudyPage() {
</div>
{/* View toggle & Share */}
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 md:gap-4">
{view === "take" && (
<button
onClick={handleRestart}
className="p-1.5 rounded-lg text-text-muted hover:text-text-heading hover:bg-bg-surface-alt transition-all duration-200 cursor-pointer"
title="Restart Quiz"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
)}
<ShareMenu targetType="QUIZ" contentId={quiz.id} classSlug={classSlug} />
{attempts.length > 0 && (
@ -163,6 +192,7 @@ export default function QuizStudyPage() {
/>
) : (
<QuizViewer
key={restartKey}
quiz={quiz}
retakeIds={retakeIds}
onFinished={() => {

14
src/app/(protected)/[classSlug]/quizzes/page.tsx
View file

@ -12,11 +12,13 @@ interface QuizItem {
_count: { questions: number; attempts: number };
}
const cache: Record<string, QuizItem[]> = {};
export default function QuizzesPage() {
const params = useParams();
const classSlug = params.classSlug as string;
const [quizzes, setQuizzes] = useState<QuizItem[]>([]);
const [loading, setLoading] = useState(true);
const [quizzes, setQuizzes] = useState<QuizItem[]>(cache[classSlug] || []);
const [loading, setLoading] = useState(!cache[classSlug]);
const [showImport, setShowImport] = useState(false);
const [classId, setClassId] = useState<string>("");
@ -25,7 +27,9 @@ export default function QuizzesPage() {
const res = await fetch(`/api/quizzes/list?classId=${cId}`);
if (res.ok) {
const data = await res.json();
setQuizzes(Array.isArray(data) ? data : []);
const arr = Array.isArray(data) ? data : [];
setQuizzes(arr);
cache[classSlug] = arr;
}
} catch {
setQuizzes([]);
@ -89,7 +93,7 @@ export default function QuizzesPage() {
{/* Empty state */}
{!loading && quizzes.length === 0 && (
<div className="text-center py-16">
<div className="text-center py-16 animate-fade-in">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-bg-callout mb-4">
<svg className="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
@ -108,7 +112,7 @@ export default function QuizzesPage() {
{/* Quiz grid */}
{!loading && quizzes.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-fade-in">
{quizzes.map((quiz) => (
<div
key={quiz.id}