From 4e39f04cfa4573b61eb56eb934c56a90fd7dad51 Mon Sep 17 00:00:00 2001 From: amosblomqvist Date: Sat, 19 Sep 2026 22:02:19 +0300 Subject: [PATCH] Header band: one row of controls, 36px, aligned with the sidebar toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Owner report: the controls folded onto two rows (search+coverage / import+gear) — the 2026-09-17 flex-wrap kicking in, plus a real bug: my previous wave moved max-w-[calc(100%-9rem)] onto the shrink-wrapped column wrapper, where the percentage reference broke and the wrap fired far too early. Owner wants the controls to read as header content. - The width cap moves to the absolute column itself (100% resolves against the full-bleed parent, as before): max-w-[calc(100%-5.5rem)]. - One row, NEVER wraps (owner rejected the two-row fold): search is the flexible element (w-56 + min-w-0, shrinks under the cap); the other controls are shrink-0. - All controls slimmed into the header band: top-2 (8px) matching the header's py-2, 36px tall matching the toggle's h-9 — size-9 buttons, h-7 import button, px-1 py-[3px] containers (border included = 36). - Cost number + pipeline pills stay below the band, unchanged. --- components/graph-coverage.tsx | 2 +- components/graph-view.tsx | 49 +++++++++++++++++++++-------------- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/components/graph-coverage.tsx b/components/graph-coverage.tsx index a21b5a9..e49e5b9 100644 --- a/components/graph-coverage.tsx +++ b/components/graph-coverage.tsx @@ -102,7 +102,7 @@ export function GraphCoverageControl({ refreshKey = 0 }: { refreshKey?: number } title="Extraction coverage — what the knowledge graph has covered" aria-expanded={open} onClick={() => setOpen((o) => !o)} - className={`flex size-11 items-center justify-center rounded-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ + className={`flex size-9 items-center justify-center rounded-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ open ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`} > diff --git a/components/graph-view.tsx b/components/graph-view.tsx index 2aa6609..e75faa1 100644 --- a/components/graph-view.tsx +++ b/components/graph-view.tsx @@ -361,7 +361,7 @@ function GraphSettingsControl({ title="Rendering settings" aria-expanded={open} onClick={() => setOpen((o) => !o)} - className={`flex size-11 items-center justify-center rounded-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ + className={`flex size-9 items-center justify-center rounded-xl border bg-card/85 shadow-lg backdrop-blur transition-colors hover:bg-accent ${ open ? "text-foreground" : "text-muted-foreground hover:text-foreground" }`} > @@ -1134,24 +1134,35 @@ export function GraphView() { coverage, import, gear — coverage sits between search and import; the gear keeps the corner. items-start (not center) so the search container's no-match note can grow downward - without shifting its siblings — every button is 44px tall, - top alignment pins the row. Coverage renders even when the - graph is EMPTY — an empty graph with unextracted sessions is - exactly when it matters (extract → the graph gains nodes). + without shifting its siblings — every control is 36px tall + (header band, 2026-09-20), top alignment pins the row. + Coverage renders even when the graph is EMPTY — an empty + graph with unextracted sessions is exactly when it matters + (extract → the graph gains nodes). lh-no-drag (2026-09-17): home.tsx's floating drag strip underlays this row — Electron's drag mask ignores z-index, so without an explicit carve-out the controls were - unclickable in the desktop app (owner report). max-w + flex-wrap - (narrow-window wave, 2026-09-17): below the sidebar auto-close - threshold the row wraps to a second line instead of overflowing - left over the header toggle cluster (92px gutter + 36px button); - 9rem keeps one clear column of air alongside it. */} -
-
+ unclickable in the desktop app (owner report). The old + flex-wrap (narrow-window wave, 2026-09-17) folded the row + onto two lines below the sidebar threshold — owner rejected + it (2026-09-20): one row always, the search shrinks (see + the header-band comment on the column below). */} + {/* Header band (owner, 2026-09-20): the controls sit IN the + header's visual row — top-2 aligns with the sidebar toggle's + band (header py-2, toggle h-9), every control slimmed to 36px. + The width cap lives HERE on the absolute element (100% resolves + against the full-bleed parent) — the row NEVER wraps (owner + rejected the two-row fold); in narrow windows the search is + the flexible element and shrinks instead. */} +
+
{!isEmpty && ( <> - {/* Search — its own container (icon + input + no-match note). */} -
+ {/* Search — its own container (icon + input + no-match note). + The header band's flexible element: w-56 normally, shrinks + (min-w-0) when the column's width cap binds in narrow + windows — the row's other controls are shrink-0. */} +
setQuery(e.target.value)} placeholder="Search nodes…" spellCheck={false} - className="h-8 w-full rounded-lg border bg-background pl-8 text-xs outline-none placeholder:text-muted-foreground focus:border-ring" + className="h-7 w-full rounded-lg border bg-background pl-8 text-xs outline-none placeholder:text-muted-foreground focus:border-ring" />
{snapshot !== null && visibleIds.size === 0 && query.trim() !== "" && ( @@ -1176,11 +1187,11 @@ export function GraphView() { with unextracted sessions is exactly when it matters (extract → the graph gains nodes). The panel re-reads when background runs settle (refreshTick). */} - +
{!isEmpty && ( <> - {/* Import notes — its own container. */} -
+ {/* Import notes — its own container (36px, header band). */} +
fileInputRef.current?.click()} - className="flex h-8 items-center gap-1.5 rounded-lg px-3 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50" + className="flex h-7 items-center gap-1.5 rounded-lg px-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent disabled:opacity-50" > {importing ? "Importing…" : "Import notes…"}