305 lines
9.4 KiB
TypeScript
305 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* The problem-set list (practice slice 5): rows of sets — title, date,
|
|
* status, problem/graded counts — click through to the exam page; a
|
|
* delete affordance in the delete-session dialog's shape; "New problem
|
|
* set" opens the creation dialog. Refetches /api/practice/sets when a
|
|
* practice phase moves (events channel, S7), so statuses live-update;
|
|
* a settled list goes quiet.
|
|
*/
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { useServerEvent, useServerResync } from "@/components/server-events";
|
|
import { useRouter } from "next/navigation";
|
|
import { createPortal } from "react-dom";
|
|
import { PlusIcon, TrashIcon } from "lucide-react";
|
|
import { TopBar } from "@/components/top-bar";
|
|
import type { ProblemSet } from "@/src/core";
|
|
import { PracticeDialog } from "@/components/practice-dialog";
|
|
|
|
/** A set's status word — plain and honest, no invented progress. */
|
|
export function setStatusWord(set: Pick<ProblemSet, "status">): string {
|
|
return set.status === "partitioning"
|
|
? "partitioning"
|
|
: set.status === "generating"
|
|
? "generating"
|
|
: set.status;
|
|
}
|
|
|
|
/** The list's pure body — exported for SSR pins. Rows are buttons
|
|
* (click-through); the delete affordance is a nested icon button. */
|
|
export function PracticeListBody({
|
|
sets,
|
|
onOpen,
|
|
onDelete,
|
|
onNew,
|
|
}: {
|
|
sets: ProblemSet[];
|
|
onOpen: (id: string) => void;
|
|
onDelete: (set: ProblemSet) => void;
|
|
onNew: () => void;
|
|
}) {
|
|
return (
|
|
<div className="flex h-dvh">
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
{/* The top bar (owner, UI round 2026-09-29): the new-session
|
|
pattern — h-15, lh-drag (the Electron window-drag surface),
|
|
the sidebar reopen toggle first, "Practice" beside it, the
|
|
page's one action at the right edge (lh-no-drag — it must
|
|
stay clickable inside the drag band). */}
|
|
<TopBar>
|
|
<div className="min-w-0 flex-1 truncate font-title text-3xl tracking-tight">
|
|
Practice
|
|
</div>
|
|
<button
|
|
type="button"
|
|
data-testid="practice-new"
|
|
onClick={onNew}
|
|
className="lh-no-drag flex shrink-0 items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm transition-colors hover:bg-accent"
|
|
>
|
|
<PlusIcon className="size-3.5" />
|
|
New problem set
|
|
</button>
|
|
</TopBar>
|
|
<div className="relative flex min-h-0 flex-1">
|
|
<div
|
|
className="h-full min-w-0 flex-1 overflow-y-auto"
|
|
data-testid="practice-list-scroll"
|
|
>
|
|
<div
|
|
className="mx-auto flex w-full max-w-3xl flex-col gap-3 p-6"
|
|
data-testid="practice-list"
|
|
>
|
|
{sets.length === 0 && (
|
|
<div
|
|
className="rounded-xl border bg-card p-6 text-sm text-muted-foreground"
|
|
data-testid="practice-empty"
|
|
>
|
|
No problem sets yet — create one from a session.
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{sets.map((set) => {
|
|
const ready = set.problems.filter(
|
|
(p) => p.status === "ready",
|
|
).length;
|
|
const graded = set.problems.filter((p) => p.grade).length;
|
|
return (
|
|
<div key={set.id} className="flex items-stretch gap-1">
|
|
<button
|
|
type="button"
|
|
data-testid={`practice-row-${set.id}`}
|
|
onClick={() => onOpen(set.id)}
|
|
className="flex flex-1 items-center justify-between gap-4 rounded-xl border bg-card px-4 py-3 text-left transition-colors hover:bg-accent/50"
|
|
>
|
|
<span className="min-w-0">
|
|
<span className="block truncate font-medium">
|
|
{set.title}
|
|
</span>
|
|
<span className="block text-xs text-muted-foreground">
|
|
{set.createdAt.slice(0, 10)} ·{" "}
|
|
{set.problems.length > 0
|
|
? `${ready}/${set.problems.length} problems`
|
|
: "no problems yet"}
|
|
{graded > 0 ? ` · ${graded} graded` : ""}
|
|
</span>
|
|
</span>
|
|
<span
|
|
data-testid={`practice-status-${set.id}`}
|
|
className={`shrink-0 text-xs uppercase tracking-wide ${
|
|
set.status === "error"
|
|
? "text-destructive"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
>
|
|
{setStatusWord(set)}
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid={`practice-delete-${set.id}`}
|
|
aria-label={`Delete ${set.title}`}
|
|
onClick={() => onDelete(set)}
|
|
className="flex items-center rounded-xl border px-3 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
|
|
>
|
|
<TrashIcon className="size-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** The delete confirm — the delete-session dialog's shape (no mode
|
|
* checkbox: a set has no preserve-graph question). Pure body + portal
|
|
* wrapper. */
|
|
export function DeleteSetBody({
|
|
title,
|
|
busy,
|
|
failure,
|
|
onClose,
|
|
onRun,
|
|
}: {
|
|
title: string;
|
|
busy: boolean;
|
|
failure: string | null;
|
|
onClose: () => void;
|
|
onRun: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Delete problem set"
|
|
data-testid="delete-set-dialog"
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="w-[32rem] max-w-[calc(100vw-2rem)] rounded-xl border bg-card p-5 shadow-xl"
|
|
>
|
|
<h2 className="font-title text-2xl tracking-tight text-destructive">
|
|
Delete problem set?
|
|
</h2>
|
|
<p className="mt-2 font-mono text-sm">{title}</p>
|
|
<p className="mt-3 text-sm text-muted-foreground">
|
|
The set and its problems are removed. Nothing in the graph or your
|
|
sessions changes.
|
|
</p>
|
|
{failure && (
|
|
<p
|
|
data-testid="delete-set-error"
|
|
className="mt-3 text-sm text-destructive"
|
|
>
|
|
{failure}
|
|
</p>
|
|
)}
|
|
<div className="mt-5 flex justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={busy}
|
|
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid="delete-set-run"
|
|
onClick={onRun}
|
|
disabled={busy}
|
|
className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 disabled:opacity-40"
|
|
>
|
|
{busy ? "Deleting…" : "Delete"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PracticeListPage({
|
|
initialSets,
|
|
}: {
|
|
initialSets: ProblemSet[];
|
|
}) {
|
|
const router = useRouter();
|
|
const [sets, setSets] = useState<ProblemSet[]>(initialSets);
|
|
const [creating, setCreating] = useState(false);
|
|
const [deleting, setDeleting] = useState<ProblemSet | null>(null);
|
|
const [deleteBusy, setDeleteBusy] = useState(false);
|
|
const [deleteFailure, setDeleteFailure] = useState<string | null>(null);
|
|
|
|
const refresh = useCallback(async () => {
|
|
try {
|
|
const res = await fetch("/api/practice/sets", { cache: "no-store" });
|
|
if (!res.ok) return;
|
|
const d = (await res.json()) as { sets: ProblemSet[] };
|
|
setSets(d.sets);
|
|
} catch {
|
|
// a transient failure keeps the last snapshot
|
|
}
|
|
}, []);
|
|
|
|
// PUSH (S7, 2026-10-02): the bounded 2s reveal poll is RETIRED — the
|
|
// practice registry announces every phase transition (register,
|
|
// generating, grading, finish) as activity-changed, so the list
|
|
// refetches exactly when a set's status moved. Debounced (the S4
|
|
// law); resync heals a reconnect; the mount read catches drift since
|
|
// the server-rendered snapshot.
|
|
const refreshRef = useRef(refresh);
|
|
refreshRef.current = refresh;
|
|
const listDebounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
|
useEffect(() => {
|
|
void refreshRef.current();
|
|
return () => {
|
|
if (listDebounceRef.current) clearTimeout(listDebounceRef.current);
|
|
};
|
|
}, []);
|
|
useServerEvent("activity-changed", () => {
|
|
if (listDebounceRef.current) clearTimeout(listDebounceRef.current);
|
|
listDebounceRef.current = setTimeout(() => {
|
|
listDebounceRef.current = undefined;
|
|
void refreshRef.current();
|
|
}, 250);
|
|
});
|
|
useServerResync(() => void refreshRef.current());
|
|
|
|
const runDelete = useCallback(async () => {
|
|
if (!deleting || deleteBusy) return;
|
|
setDeleteBusy(true);
|
|
setDeleteFailure(null);
|
|
try {
|
|
const res = await fetch(`/api/practice/sets/${deleting.id}`, {
|
|
method: "DELETE",
|
|
});
|
|
if (!res.ok) {
|
|
const body = (await res.json().catch(() => ({}))) as { error?: string };
|
|
setDeleteFailure(body.error ?? `Delete failed (${res.status})`);
|
|
setDeleteBusy(false);
|
|
return;
|
|
}
|
|
setDeleting(null);
|
|
setDeleteBusy(false);
|
|
await refresh();
|
|
} catch {
|
|
setDeleteFailure("Delete failed — network error. Try again.");
|
|
setDeleteBusy(false);
|
|
}
|
|
}, [deleting, deleteBusy, refresh]);
|
|
|
|
return (
|
|
<>
|
|
<PracticeListBody
|
|
sets={sets}
|
|
onOpen={(id) => router.push(`/practice/${id}`)}
|
|
onDelete={(set) => setDeleting(set)}
|
|
onNew={() => setCreating(true)}
|
|
/>
|
|
{creating && <PracticeDialog onClose={() => setCreating(false)} />}
|
|
{deleting &&
|
|
createPortal(
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
|
onClick={() => {
|
|
if (!deleteBusy) setDeleting(null);
|
|
}}
|
|
>
|
|
<DeleteSetBody
|
|
title={deleting.title}
|
|
busy={deleteBusy}
|
|
failure={deleteFailure}
|
|
onClose={() => setDeleting(null)}
|
|
onRun={() => void runDelete()}
|
|
/>
|
|
</div>,
|
|
document.body,
|
|
)}
|
|
</>
|
|
);
|
|
}
|