dialogs: delete dialogs drop the serif display title for the abort-turn look
Titles become text-sm font-semibold in destructive red — JetBrains Mono via the UI default, matching the abort-turn/dismiss-question dialogs the owner named as the ideal look. Node and session names below the title drop the sized-up text-lg for normal text-sm, still white mono, no code-block chrome. Settings and Setup keep their serif titles by owner ruling; abort-turn already renders this way. 1610/1610 both configs; verified live on the running dev server.
This commit is contained in:
amosblomqvist
@@ -53,22 +53,25 @@ export function DeleteNodeBody({
|
||||
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">
|
||||
<h2 className="text-sm font-semibold text-destructive">
|
||||
{nodes.length === 1 ? "Delete node?" : `Delete ${nodes.length} nodes?`}
|
||||
</h2>
|
||||
{/* The node name(s) below the title in JetBrains Mono (owner,
|
||||
2026-09-24): the name is the payload — mono suits it, and
|
||||
NO code-block chrome (the font already says code), sized up
|
||||
to text-lg so it reads. Same shape as the session dialog.
|
||||
NO code-block chrome (the font already says code). Owner,
|
||||
2026-10-13 polish: title loses the serif display look for the
|
||||
abort-turn look (text-sm font-semibold mono, red kept), and
|
||||
the names drop the sized-up text-lg for normal text-sm —
|
||||
still white, still mono. Same shape as the session dialog.
|
||||
A multi-selection lists its names (capped at 8 + "and K
|
||||
more" — the count in the title carries the full number). */}
|
||||
<div className="mt-1.5">
|
||||
{nodes.length === 1 ? (
|
||||
<code data-testid="node-name-code" className="font-mono text-lg text-foreground">
|
||||
<code data-testid="node-name-code" className="font-mono text-sm text-foreground">
|
||||
{nodes[0]?.name}
|
||||
</code>
|
||||
) : (
|
||||
<code data-testid="node-names-code" className="font-mono text-lg text-foreground">
|
||||
<code data-testid="node-names-code" className="font-mono text-sm text-foreground">
|
||||
{nodes.slice(0, 8).map((n) => n.name).join(", ")}
|
||||
{nodes.length > 8 ? `, and ${nodes.length - 8} more` : ""}
|
||||
</code>
|
||||
|
||||
@@ -20,8 +20,11 @@ export const TRACES_COPY = {
|
||||
* destructive-confirmation surface, portaled z-50 like the setup dialog,
|
||||
* now in the node dialog's shape (the two must read as one design):
|
||||
*
|
||||
* - red serif title "Delete session?", the session name below it in
|
||||
* JetBrains Mono, sized up, no code-block chrome;
|
||||
* - red title "Delete session?" in the abort-turn look (owner, 2026-10-13
|
||||
* polish: text-sm font-semibold JetBrains Mono via the UI default —
|
||||
* the serif display title is gone), the session name below it in
|
||||
* JetBrains Mono at normal text-sm size (was sized-up text-lg), no
|
||||
* code-block chrome;
|
||||
* - ONE unchecked-by-default checkbox "Also remove its graph traces"
|
||||
* (unchecked = preserve-graph: the session record, its jobs, and its
|
||||
* extraction bookkeeping die; the graph keeps every contribution.
|
||||
@@ -159,12 +162,14 @@ export function DeleteSessionBody({
|
||||
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 session?</h2>
|
||||
<h2 className="text-sm font-semibold text-destructive">Delete session?</h2>
|
||||
{/* The session name below the title in JetBrains Mono (owner,
|
||||
2026-09-24): no code-block chrome — the font already says
|
||||
code — sized up to text-lg. Same shape as the node dialog. */}
|
||||
code. Owner, 2026-10-13 polish: normal text-sm size (was
|
||||
sized-up text-lg), still white. Same shape as the node
|
||||
dialog. */}
|
||||
<div className="mt-1.5">
|
||||
<code data-testid="session-name-code" className="font-mono text-lg text-foreground">
|
||||
<code data-testid="session-name-code" className="font-mono text-sm text-foreground">
|
||||
{chat.title}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
@@ -55,13 +55,17 @@ describe("DeleteNodeBody — the minimal screen (owner, 2026-09-30)", () => {
|
||||
it("single: 'Delete node?' title, the name alone in mono, the one permanence line", () => {
|
||||
const html = bodyAt([{ id: "kepler", name: "Kepler's three laws" }]);
|
||||
assert.match(html, /data-testid="delete-node-dialog"/);
|
||||
// (owner, 2026-09-24) the serif title in destructive red; the
|
||||
// NAME rides below in JetBrains Mono, text-lg, NO code-block
|
||||
// chrome — same shape as the session dialog.
|
||||
// (owner, 2026-10-13 polish) the title in the abort-turn look —
|
||||
// text-sm font-semibold (JetBrains Mono via the UI default), red
|
||||
// kept, NO font-title serif; the NAME rides below in JetBrains
|
||||
// Mono at normal text-sm size, NO code-block chrome — same shape
|
||||
// as the session dialog.
|
||||
assert.match(html, /Delete node\?/);
|
||||
assert.match(html, /text-destructive/);
|
||||
const title = html.match(/<h2[^>]*>/)?.[0] ?? "";
|
||||
assert.match(title, /text-sm font-semibold text-destructive/);
|
||||
assert.ok(!title.includes("font-title"), "no serif display title (owner, 2026-10-13)");
|
||||
const name = html.match(/data-testid="node-name-code"[^>]*>/)?.[0] ?? "";
|
||||
assert.match(name, /font-mono text-lg/);
|
||||
assert.match(name, /font-mono text-sm/);
|
||||
assert.ok(!name.includes("bg-muted"), "no code-block chrome — the font already says code");
|
||||
assert.match(html, /data-testid="node-name-code"[^>]*>Kepler's three laws</);
|
||||
assert.match(html, /data-testid="node-permanence-line"[^>]*>This permanently deletes the node — this cannot be undone\./);
|
||||
|
||||
@@ -59,7 +59,7 @@ describe("DeleteSessionDialog — the node-dialog shape (owner flow rework 2026-
|
||||
assert.equal(html, "");
|
||||
});
|
||||
|
||||
it("red serif title 'Delete session?', the session name below in mono, sized up, no code-block chrome", () => {
|
||||
it("red mono title 'Delete session?' (abort-turn look), the session name below in mono at normal size, no code-block chrome", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<DeleteSessionBody
|
||||
chat={{ id: "c1", title: "Orbital mechanics" }}
|
||||
@@ -72,10 +72,12 @@ describe("DeleteSessionDialog — the node-dialog shape (owner flow rework 2026-
|
||||
/>,
|
||||
);
|
||||
assert.match(html, /Delete session\?/);
|
||||
assert.match(html, /text-destructive[^"]*">Delete session\?</); // the red title
|
||||
// the name: mono, text-lg (sized up), NO bg-muted code-block chrome
|
||||
const title = html.match(/<h2[^>]*>/)?.[0] ?? "";
|
||||
assert.match(title, /text-sm font-semibold text-destructive/); // red, abort-turn look (owner, 2026-10-13)
|
||||
assert.ok(!title.includes("font-title"), "no serif display title");
|
||||
// the name: mono, normal text-sm size (owner, 2026-10-13), NO bg-muted code-block chrome
|
||||
const name = html.match(/data-testid="session-name-code"[^>]*>/)?.[0] ?? "";
|
||||
assert.match(name, /font-mono text-lg/);
|
||||
assert.match(name, /font-mono text-sm/);
|
||||
assert.ok(!name.includes("bg-muted"), "no code-block chrome");
|
||||
assert.match(html, /data-testid="session-name-code"[^>]*>Orbital mechanics</);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user