graph: import + cost ride the chains home's TOP BAR (release polish 2.1)

Owner refinement on the chains home: the floating top-right chrome row
sat ON TOP of the propositions table — covering content reads badly.
The two survivors (Import notes — always, the entry-point law; the
cost pill when any run exists) now ride the shared TopBar's right
cluster, left of the search input, carved out of the drag band with
lh-no-drag — consistent with the graph view, where they already live in
the top band.

ChainTableBody gains topBarExtra?: React.ReactNode (absent on the
overlay — nothing changes there); ChainsHome's floating chrome row is
deleted; the empty state keeps its own centered import button.

Parked for the next design pass (owner, this round): (1) the pick flow
reads messy — checkboxes show by default, so the pill's select mode is
near-invisible and after Done the Clear/Delete bar + the practice pill
coexist with two Clear buttons; the original vision was checkboxes
appear ONLY when picking. (2) the composer's clearance band has no
outline — the docked area needs a visual edge.

1415 tests (new pin: topBarExtra renders in the bar with the drag
carve; overlay variant injects nothing); tsc, lint, build green.
This commit is contained in:
amosblomqvist
2026-10-06 08:58:43 +03:00
parent 962d3086c0
commit 83103062f5
3 changed files with 51 additions and 28 deletions
+13 -2
View File
@@ -114,6 +114,7 @@ export function ChainTableBody({
onClear,
onDelete,
onClose,
topBarExtra,
selectMode,
onSelect,
}: {
@@ -140,6 +141,11 @@ export function ChainTableBody({
* (graph rendering off, owner 2026-10-06): the table is the page,
* there is nothing to close, and the X does not render. */
onClose?: () => void;
/** HOME VARIANT (owner, 2026-10-06 polish): extra controls injected
* into the shared TopBar, right cluster, LEFT of the search input —
* the chains home's Import-notes + cost pill live here instead of
* floating over the list (covering table content read badly). */
topBarExtra?: React.ReactNode;
/** PRACTICE SELECT (2026-10-04): the floating bar's confirm becomes
* "Practice these" — no delete fence; the caller owns what the
* selection becomes. */
@@ -245,12 +251,17 @@ export function ChainTableBody({
chat surface. NO TITLE (owner round 11, 2026-10-05): the serif
title register is RESERVED — it always names a session; the
chain table names nothing, so its bar carries counts + search +
close only. Search + close carve out with lh-no-drag (the mask
law: later in the DOM). */}
close only — plus, in the home variant, the injected
topBarExtra (import + cost, owner 2026-10-06). Search, close,
and the extra carve out with lh-no-drag (the mask law: later
in the DOM). */}
<TopBar>
<span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
{chains.length} {chains.length === 1 ? "chain" : "chains"} · {nodes.length} {nodes.length === 1 ? "node" : "nodes"}
</span>
{topBarExtra && (
<div className="lh-no-drag flex shrink-0 items-center gap-2">{topBarExtra}</div>
)}
<div className="relative shrink-0">
<SearchIcon className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
<input