Wave-5 refinement round 1 (owner's five fixes)

- New session: literal '+' glyph removed — one lucide PlusIcon (the
  duplicated glyph was PlusIcon + text '+').
- Top bar: a small pointer-events-none gradient under the header eases
  the scroller into the bar exactly like the dock's bottom fade.
- Option subtext (opt.description): .lh-prose — Source Sans 3; 'I don't
  know' copy stays JetBrains Mono.
- 'I don't know': now layout-matched with a radio circle; dashed border
  preserved as the deliberate non-answer.
- Separator spacing: options group pb-1 → pb-2 so the gap before the
  divider equals the 8px inter-option gap.
This commit is contained in:
amosblomqvist
2026-09-13 00:46:31 +03:00
parent 445f537f15
commit a5d3c73e7a
3 changed files with 29 additions and 7 deletions
+7 -1
View File
@@ -464,10 +464,16 @@ export function Chat({
{/* h-10, not py-2: the toggle (a size-9 icon button) renders only {/* h-10, not py-2: the toggle (a size-9 icon button) renders only
while the sidebar is CLOSED — an auto-height row would collapse while the sidebar is CLOSED — an auto-height row would collapse
when it disappears and slide the title + chip up. */} when it disappears and slide the title + chip up. */}
<header className="flex h-10 items-center gap-3 px-3"> <header className="relative flex h-10 items-center gap-3 px-3">
<SidebarToggle /> <SidebarToggle />
<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div> <div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
<PhaseChip phase={phases.at(-1) ?? "probe"} /> <PhaseChip phase={phases.at(-1) ?? "probe"} />
{/* Soft top fade (owner): the scroller edge under the header eases
in exactly like the dock gradient at the bottom. */}
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 top-full z-10 h-5 bg-gradient-to-b from-background to-transparent"
/>
</header> </header>
<div className="relative flex min-h-0 flex-1"> <div className="relative flex min-h-0 flex-1">
+21 -5
View File
@@ -284,7 +284,7 @@ function QuestionDockForm({
)} )}
{qd.mode !== "text" && ( {qd.mode !== "text" && (
<div className="flex flex-col gap-2 pb-1" role={qd.mode === "multi-select" ? "group" : "radiogroup"}> <div className="flex flex-col gap-2 pb-2" role={qd.mode === "multi-select" ? "group" : "radiogroup"}>
{qd.options.map((opt, i) => { {qd.options.map((opt, i) => {
const isSel = sel.selected.has(i); const isSel = sel.selected.has(i);
return ( return (
@@ -314,7 +314,11 @@ function QuestionDockForm({
</span> </span>
<span> <span>
<MessageResponse>{opt.label}</MessageResponse> <MessageResponse>{opt.label}</MessageResponse>
{opt.description && <span className="block text-xs text-muted-foreground">{opt.description}</span>} {opt.description && (
// Option subtext renders in Source Sans 3 (owner's mockup);
// the "I don't know" copy stays JetBrains Mono.
<span className="lh-prose block text-xs text-muted-foreground">{opt.description}</span>
)}
</span> </span>
</button> </button>
); );
@@ -328,11 +332,23 @@ function QuestionDockForm({
} }
aria-pressed={sel.dontKnow} aria-pressed={sel.dontKnow}
className={cn( className={cn(
"rounded-lg border border-dashed px-3 py-2 text-left text-sm text-muted-foreground transition-colors", // Option-row layout + radio circle (owner); the dashed
sel.dontKnow && "border-primary text-foreground", // outline stays — this is the deliberate non-answer.
"flex items-start gap-3 rounded-lg border border-dashed px-3 py-2 text-left text-sm transition-colors",
sel.dontKnow ? "border-primary text-foreground" : "text-muted-foreground",
)} )}
> >
I don't know <span
className={cn(
"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border",
sel.dontKnow
? "border-primary bg-primary text-primary-foreground"
: "border-muted-foreground/40",
)}
>
{sel.dontKnow && <span className="size-1.5 rounded-full bg-current" />}
</span>
<span>I don't know</span>
</button> </button>
)} )}
+1 -1
View File
@@ -248,7 +248,7 @@ function SessionsSidebar() {
className="mx-3 mb-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground" className="mx-3 mb-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
> >
<PlusIcon className="size-3" /> <PlusIcon className="size-3" />
+ New session New session
<span className="sr-only">create a new session</span> <span className="sr-only">create a new session</span>
</button> </button>