Session deletion dialog matches the node deletion dialog: red title, mono name below, checkbox flow

Owner polish round (2026-09-24): the two destructive-confirmation
surfaces must read as ONE design. The node dialog was the good one —
the session dialog now wears its exact look and flow.

components/delete-session-dialog.tsx (full rework):
- Red serif "Delete session?" (was neutral "Delete "title"?") — the
  node dialog's destructive title, text-destructive on font-title 2xl.
- The session name below the title in JetBrains Mono at text-lg,
  NO code-block chrome — the font already says code. (The node
  dialog's name got the same treatment: text-xs bg-muted code block
  dies, mono text-lg line lives. Owner chose below-the-title over
  parens-in-the-title: long titles wrap safely below, never inside
  the 25px headline.)
- TWO OPTION BUTTONS -> CHECKBOX FLOW: the locked two-button design
  (preserve-graph / delete-nodes) collapses to ONE unchecked-by-default
  checkbox "Also remove its graph traces" (accent-primary, the settings
  panel's native-checkbox idiom) carrying the graph-touching option's
  consequence copy verbatim. Unchecked = preserve-graph; checked =
  delete-nodes. The unchecked promise ("everything it added to the
  graph stays unless you check below") lives in the intro line now.
- Bottom row = the node dialog's exact pair: quiet Cancel + destructive
  red Delete (border + text, fill on hover), "Deleting…" on the Delete
  button while busy. Try-again re-derives the mode from the checkbox
  (retry IS Delete pressed again; the checkbox is disabled while busy).
- DeleteSessionBody exported pure (the settings/node dialog body
  pattern) for SSR pins; TRACES_COPY exported for the copy pin.
  DELETE_OPTIONS dies with the two-button design.

Tests: session-context.test.tsx's two-option pins rewritten for the
node-dialog shape (red title, mono name no-chrome, unchecked checkbox
default, red Delete pair, old testids absent); delete-node-dialog
pins the chrome-less text-lg name. 905/905. Live-verified on :3001:
both dialogs render 25px red serif titles, 16px mono names, matching
red Delete buttons; Esc closes both, nothing deleted in verification.
This commit is contained in:
amosblomqvist
2026-09-24 20:06:22 +03:00
parent 73027f49bf
commit 6896c23cc2
4 changed files with 226 additions and 128 deletions
+6 -2
View File
@@ -73,10 +73,14 @@ describe("DeleteNodeDialog (thin SSR)", () => {
it("the body at loading: the frame + the pre-flight read pending (effects never fire in SSR — the wrapper's own state)", () => {
const html = bodyAt("loading");
assert.match(html, /data-testid="delete-node-dialog"/);
// (owner, polish round) the serif title is just "Delete node?" in
// destructive red; the NAME rides below in JetBrains Mono code.
// (owner, 2026-09-24) the serif title is just "Delete node?" in
// destructive red; the NAME rides below in JetBrains Mono, sized up
// (text-lg), NO code-block chrome — same shape as the session dialog.
assert.match(html, /Delete node\?/);
assert.match(html, /text-destructive/); // the red title
const name = html.match(/data-testid="node-name-code"[^>]*>/)?.[0] ?? "";
assert.match(name, /font-mono text-lg/); // bigger, mono
assert.ok(!name.includes("bg-muted"), "no code-block chrome — the font already says code")
assert.match(html, /data-testid="node-name-code"[^>]*>Kepler&#x27;s three laws</); // the name in mono
assert.match(html, /data-testid="node-impact-loading"/);
});