practice: the learner's creation note — optional free-form input carried to partitioner + generators (owner, 2026-09-29)
- dialog: optional 'Anything else?' textarea (typing-only, 2000-char mirror) - API: body gains note? — trimmed, whitespace-only omitted, hard 400 over 2000 - pipeline: note persisted on the set and threaded to both agent stages - agents: THE LEARNER'S NOTE prompt block (present only when set) + the weighed-never-owed stance pinned in both doctrines - fix en route: doubled THE PARAMETERS heading in both prompts since slice 3 (renderParams owns the heading; the literal blocks removed)
This commit is contained in:
amosblomqvist
+333
-251
@@ -33,282 +33,364 @@ import type { GraphClusterGroup, PracticeParams } from "@/src/core";
|
||||
/** The creation defaults (owner, 2026-09-29): rung 2 Direct exercise,
|
||||
* cue 1 Adjacent context, Theory. */
|
||||
export const DEFAULT_PRACTICE_PARAMS: PracticeParams = {
|
||||
ladderRung: 2,
|
||||
cueDistance: 1,
|
||||
presentation: "theory",
|
||||
ladderRung: 2,
|
||||
cueDistance: 1,
|
||||
presentation: "theory",
|
||||
};
|
||||
|
||||
export interface PracticeFailure {
|
||||
status: number;
|
||||
error: string;
|
||||
code?: string;
|
||||
status: number;
|
||||
error: string;
|
||||
code?: string;
|
||||
}
|
||||
|
||||
/** The dialog's pure body — exported for SSR pins (the delete-session /
|
||||
* settings body pattern). The wrapper owns state + fetch + portal. */
|
||||
export function PracticeDialogBody({
|
||||
params,
|
||||
onParam,
|
||||
clusters,
|
||||
selectedKey,
|
||||
onSelect,
|
||||
busy,
|
||||
failure,
|
||||
onOpenSettings,
|
||||
onClose,
|
||||
onRun,
|
||||
params,
|
||||
onParam,
|
||||
note,
|
||||
onNote,
|
||||
clusters,
|
||||
selectedKey,
|
||||
onSelect,
|
||||
busy,
|
||||
failure,
|
||||
onOpenSettings,
|
||||
onClose,
|
||||
onRun,
|
||||
}: {
|
||||
params: PracticeParams;
|
||||
onParam: (patch: Partial<PracticeParams>) => void;
|
||||
clusters: GraphClusterGroup[];
|
||||
selectedKey: string | null;
|
||||
onSelect: (key: string) => void;
|
||||
busy: boolean;
|
||||
failure: PracticeFailure | null;
|
||||
onOpenSettings: () => void;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
params: PracticeParams;
|
||||
onParam: (patch: Partial<PracticeParams>) => void;
|
||||
/** The learner's free-form note (owner, 2026-09-29) — optional,
|
||||
* typing-only; carried to the partitioner + generators as additional
|
||||
* input they weigh but need not follow. */
|
||||
note: string;
|
||||
onNote: (note: string) => void;
|
||||
clusters: GraphClusterGroup[];
|
||||
selectedKey: string | null;
|
||||
onSelect: (key: string) => void;
|
||||
busy: boolean;
|
||||
failure: PracticeFailure | null;
|
||||
onOpenSettings: () => void;
|
||||
onClose: () => void;
|
||||
onRun: () => void;
|
||||
}) {
|
||||
const canRun = !busy && selectedKey !== null;
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="New problem set"
|
||||
data-testid="practice-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex max-h-[85vh] w-[32rem] max-w-[calc(100vw-2rem)] flex-col rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="font-title text-2xl tracking-tight">New problem set</h2>
|
||||
const canRun = !busy && selectedKey !== null;
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="New problem set"
|
||||
data-testid="practice-dialog"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex max-h-[85vh] w-[32rem] max-w-[calc(100vw-2rem)] flex-col rounded-xl border bg-card p-5 shadow-xl"
|
||||
>
|
||||
<h2 className="font-title text-2xl tracking-tight">New problem set</h2>
|
||||
|
||||
{/* The cluster: a birth-session group of the graph, resolved to
|
||||
{/* The cluster: a birth-session group of the graph, resolved to
|
||||
node ids on create (graph-domain, owner 2026-09-29). */}
|
||||
<div className="mt-4 flex flex-col gap-1">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Cluster</span>
|
||||
<div className="max-h-40 overflow-y-auto rounded-lg border" data-testid="practice-dialog-clusters">
|
||||
{clusters.map((cluster) => (
|
||||
<button
|
||||
type="button"
|
||||
key={cluster.key}
|
||||
data-testid={`practice-cluster-${cluster.key}`}
|
||||
onClick={() => onSelect(cluster.key)}
|
||||
className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors hover:bg-accent ${
|
||||
selectedKey === cluster.key ? "bg-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="min-w-0 truncate">
|
||||
{cluster.label ?? <span className="text-muted-foreground/60">unlabeled cluster</span>}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
|
||||
{cluster.kind === "notes" ? "notes · " : ""}
|
||||
{cluster.nodeCount} propositions
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{clusters.length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-muted-foreground">
|
||||
No clusters yet — a cluster appears once a session births its first proposition.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-col gap-1">
|
||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">
|
||||
Cluster
|
||||
</span>
|
||||
<div
|
||||
className="max-h-40 overflow-y-auto rounded-lg border"
|
||||
data-testid="practice-dialog-clusters"
|
||||
>
|
||||
{clusters.map((cluster) => (
|
||||
<button
|
||||
type="button"
|
||||
key={cluster.key}
|
||||
data-testid={`practice-cluster-${cluster.key}`}
|
||||
onClick={() => onSelect(cluster.key)}
|
||||
className={`flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm transition-colors hover:bg-accent ${
|
||||
selectedKey === cluster.key ? "bg-accent" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="min-w-0 truncate">
|
||||
{cluster.label ?? (
|
||||
<span className="text-muted-foreground/60">
|
||||
unlabeled cluster
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
|
||||
{cluster.kind === "notes" ? "notes · " : ""}
|
||||
{cluster.nodeCount} propositions
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{clusters.length === 0 && (
|
||||
<div className="px-3 py-2 text-sm text-muted-foreground">
|
||||
No clusters yet — a cluster appears once a session births its
|
||||
first proposition.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* The three parameters — named levels, never a number to
|
||||
{/* The three parameters — named levels, never a number to
|
||||
interpolate (owner, 2026-09-29). Stepped sliders snap to the
|
||||
detents; each shows the level's NAME + its one-line
|
||||
definition; presentation is a two-segment toggle. */}
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Ladder
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2 · 3 · 4</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={4}
|
||||
step={1}
|
||||
value={params.ladderRung}
|
||||
data-testid="param-ladder"
|
||||
onChange={(e) => onParam({ ladderRung: Number(e.target.value) as PracticeParams["ladderRung"] })}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-ladder-level" className="text-xs">
|
||||
<span className="font-medium">{LADDER_RUNGS[params.ladderRung].name}</span>
|
||||
<span className="text-muted-foreground"> — {LADDER_RUNGS[params.ladderRung].definition}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Cue distance
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={2}
|
||||
step={1}
|
||||
value={params.cueDistance}
|
||||
data-testid="param-cue"
|
||||
onChange={(e) => onParam({ cueDistance: Number(e.target.value) as PracticeParams["cueDistance"] })}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-cue-level" className="text-xs">
|
||||
<span className="font-medium">{CUE_LEVELS[params.cueDistance].name}</span>
|
||||
<span className="text-muted-foreground"> — {CUE_LEVELS[params.cueDistance].definition}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">Presentation</span>
|
||||
<div className="flex gap-1" data-testid="param-presentation">
|
||||
{(["theory", "application"] as const).map((pres) => (
|
||||
<button
|
||||
type="button"
|
||||
key={pres}
|
||||
data-testid={`param-presentation-${pres}`}
|
||||
onClick={() => onParam({ presentation: pres })}
|
||||
className={`flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
params.presentation === pres
|
||||
? "border-primary bg-primary/10 font-medium text-foreground"
|
||||
: "text-muted-foreground hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{PRESENTATIONS[pres].name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span data-testid="param-presentation-level" className="text-xs text-muted-foreground">
|
||||
{PRESENTATIONS[params.presentation].definition}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Ladder
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2 · 3 · 4</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={4}
|
||||
step={1}
|
||||
value={params.ladderRung}
|
||||
data-testid="param-ladder"
|
||||
onChange={(e) =>
|
||||
onParam({
|
||||
ladderRung: Number(
|
||||
e.target.value,
|
||||
) as PracticeParams["ladderRung"],
|
||||
})
|
||||
}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-ladder-level" className="text-xs">
|
||||
<span className="font-medium">
|
||||
{LADDER_RUNGS[params.ladderRung].name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {LADDER_RUNGS[params.ladderRung].definition}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="flex items-center justify-between text-[11px] text-muted-foreground">
|
||||
Cue distance
|
||||
<span className="text-muted-foreground/80">0 · 1 · 2</span>
|
||||
</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={2}
|
||||
step={1}
|
||||
value={params.cueDistance}
|
||||
data-testid="param-cue"
|
||||
onChange={(e) =>
|
||||
onParam({
|
||||
cueDistance: Number(
|
||||
e.target.value,
|
||||
) as PracticeParams["cueDistance"],
|
||||
})
|
||||
}
|
||||
className="h-1.5 w-full accent-primary"
|
||||
/>
|
||||
<span data-testid="param-cue-level" className="text-xs">
|
||||
<span className="font-medium">
|
||||
{CUE_LEVELS[params.cueDistance].name}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
{" "}
|
||||
— {CUE_LEVELS[params.cueDistance].definition}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Presentation
|
||||
</span>
|
||||
<div className="flex gap-1" data-testid="param-presentation">
|
||||
{(["theory", "application"] as const).map((pres) => (
|
||||
<button
|
||||
type="button"
|
||||
key={pres}
|
||||
data-testid={`param-presentation-${pres}`}
|
||||
onClick={() => onParam({ presentation: pres })}
|
||||
className={`flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
params.presentation === pres
|
||||
? "border-primary bg-primary/10 font-medium text-foreground"
|
||||
: "text-muted-foreground hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
{PRESENTATIONS[pres].name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<span
|
||||
data-testid="param-presentation-level"
|
||||
className="text-xs text-muted-foreground"
|
||||
>
|
||||
{PRESENTATIONS[params.presentation].definition}
|
||||
</span>
|
||||
</div>
|
||||
{/* The learner's free-form note — the last word before create:
|
||||
wishes for the problems, weighed by the agents, nothing owed. */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[11px] text-muted-foreground">
|
||||
Anything else? (optional)
|
||||
</span>
|
||||
<textarea
|
||||
value={note}
|
||||
data-testid="practice-note"
|
||||
onChange={(e) => onNote(e.target.value)}
|
||||
rows={3}
|
||||
maxLength={2000}
|
||||
placeholder="Anything you want the problems to lean toward — situations, emphasis, context about you. The agents weigh it; nothing is promised."
|
||||
className="w-full resize-y rounded-lg border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{failure && (
|
||||
<div data-testid="practice-dialog-error" className="mt-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||
{failure.code === "empty_selection" ? "Nothing practicable is left in that cluster — the graph changed." : failure.error}
|
||||
{failure.status === 503 && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-dialog-open-settings"
|
||||
onClick={onOpenSettings}
|
||||
className="ml-2 underline underline-offset-2"
|
||||
>
|
||||
Open settings
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{failure && (
|
||||
<div
|
||||
data-testid="practice-dialog-error"
|
||||
className="mt-3 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive"
|
||||
>
|
||||
{failure.code === "empty_selection"
|
||||
? "Nothing practicable is left in that cluster — the graph changed."
|
||||
: failure.error}
|
||||
{failure.status === 503 && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="practice-dialog-open-settings"
|
||||
onClick={onOpenSettings}
|
||||
className="ml-2 underline underline-offset-2"
|
||||
>
|
||||
Open settings
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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="practice-dialog-create"
|
||||
onClick={onRun}
|
||||
disabled={!canRun}
|
||||
className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Creating…" : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<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="practice-dialog-create"
|
||||
onClick={onRun}
|
||||
disabled={!canRun}
|
||||
className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-40"
|
||||
>
|
||||
{busy ? "Creating…" : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The stateful wrapper: fetches the cluster list, runs the create POST
|
||||
* (nodeIds + the cluster's label as title + params), navigates on 202. */
|
||||
export function PracticeDialog({ onClose }: { onClose: () => void }) {
|
||||
const router = useRouter();
|
||||
const { open: openSettings } = useSettingsDialog();
|
||||
const [params, setParams] = useState<PracticeParams>({ ...DEFAULT_PRACTICE_PARAMS });
|
||||
const [clusters, setClusters] = useState<GraphClusterGroup[] | null>(null);
|
||||
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [failure, setFailure] = useState<PracticeFailure | null>(null);
|
||||
const router = useRouter();
|
||||
const { open: openSettings } = useSettingsDialog();
|
||||
const [params, setParams] = useState<PracticeParams>({
|
||||
...DEFAULT_PRACTICE_PARAMS,
|
||||
});
|
||||
const [note, setNote] = useState("");
|
||||
const [clusters, setClusters] = useState<GraphClusterGroup[] | null>(null);
|
||||
const [selectedKey, setSelectedKey] = useState<string | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [failure, setFailure] = useState<PracticeFailure | null>(null);
|
||||
|
||||
// The picker's truth is the graph's clustering (fresh on open).
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
fetch("/api/graph/clusters", { cache: "no-store" })
|
||||
.then((res) => res.json() as Promise<{ clusters: GraphClusterGroup[] }>)
|
||||
.then((d) => {
|
||||
if (alive) setClusters(d.clusters);
|
||||
})
|
||||
.catch(() => {
|
||||
if (alive) setClusters([]);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
// The picker's truth is the graph's clustering (fresh on open).
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
fetch("/api/graph/clusters", { cache: "no-store" })
|
||||
.then((res) => res.json() as Promise<{ clusters: GraphClusterGroup[] }>)
|
||||
.then((d) => {
|
||||
if (alive) setClusters(d.clusters);
|
||||
})
|
||||
.catch(() => {
|
||||
if (alive) setClusters([]);
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Esc closes (claimed, the delete-session discipline).
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [onClose]);
|
||||
// Esc closes (claimed, the delete-session discipline).
|
||||
useEffect(() => {
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
return () => window.removeEventListener("keydown", onKeyDown);
|
||||
}, [onClose]);
|
||||
|
||||
const run = useCallback(async () => {
|
||||
const picked = (clusters ?? []).find((c) => c.key === selectedKey);
|
||||
if (!picked || busy) return;
|
||||
setBusy(true);
|
||||
setFailure(null);
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nodeIds: picked.nodeIds,
|
||||
params,
|
||||
title: picked.label ?? undefined,
|
||||
}),
|
||||
});
|
||||
const body = (await res.json()) as { id?: string; error?: string; code?: string };
|
||||
if (!res.ok || !body.id) {
|
||||
setFailure({ status: res.status, error: body.error ?? `Create failed (${res.status})`, code: body.code });
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
router.push(`/practice/${body.id}`);
|
||||
} catch {
|
||||
setFailure({ status: 0, error: "Create failed — network error. Try again." });
|
||||
setBusy(false);
|
||||
}
|
||||
}, [clusters, selectedKey, busy, params, router]);
|
||||
const run = useCallback(async () => {
|
||||
const picked = (clusters ?? []).find((c) => c.key === selectedKey);
|
||||
if (!picked || busy) return;
|
||||
setBusy(true);
|
||||
setFailure(null);
|
||||
try {
|
||||
const res = await fetch("/api/practice/sets", {
|
||||
method: "POST",
|
||||
headers: { "content-type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
nodeIds: picked.nodeIds,
|
||||
params,
|
||||
title: picked.label ?? undefined,
|
||||
note: note.trim() || undefined,
|
||||
}),
|
||||
});
|
||||
const body = (await res.json()) as {
|
||||
id?: string;
|
||||
error?: string;
|
||||
code?: string;
|
||||
};
|
||||
if (!res.ok || !body.id) {
|
||||
setFailure({
|
||||
status: res.status,
|
||||
error: body.error ?? `Create failed (${res.status})`,
|
||||
code: body.code,
|
||||
});
|
||||
setBusy(false);
|
||||
return;
|
||||
}
|
||||
router.push(`/practice/${body.id}`);
|
||||
} catch {
|
||||
setFailure({
|
||||
status: 0,
|
||||
error: "Create failed — network error. Try again.",
|
||||
});
|
||||
setBusy(false);
|
||||
}
|
||||
}, [clusters, selectedKey, busy, params, note, router]);
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!busy) onClose();
|
||||
}}
|
||||
>
|
||||
<PracticeDialogBody
|
||||
params={params}
|
||||
onParam={(patch) => setParams((prev) => ({ ...prev, ...patch }))}
|
||||
clusters={clusters ?? []}
|
||||
selectedKey={selectedKey}
|
||||
onSelect={setSelectedKey}
|
||||
busy={busy}
|
||||
failure={failure}
|
||||
onOpenSettings={() => openSettings()}
|
||||
onClose={onClose}
|
||||
onRun={() => void run()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-background/80"
|
||||
onClick={() => {
|
||||
if (!busy) onClose();
|
||||
}}
|
||||
>
|
||||
<PracticeDialogBody
|
||||
params={params}
|
||||
onParam={(patch) => setParams((prev) => ({ ...prev, ...patch }))}
|
||||
note={note}
|
||||
onNote={setNote}
|
||||
clusters={clusters ?? []}
|
||||
selectedKey={selectedKey}
|
||||
onSelect={setSelectedKey}
|
||||
busy={busy}
|
||||
failure={failure}
|
||||
onOpenSettings={() => openSettings()}
|
||||
onClose={onClose}
|
||||
onRun={() => void run()}
|
||||
/>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user