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
while the sidebar is CLOSED — an auto-height row would collapse
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 />
<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
<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>
<div className="relative flex min-h-0 flex-1">
+21 -5
View File
@@ -284,7 +284,7 @@ function QuestionDockForm({
)}
{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) => {
const isSel = sel.selected.has(i);
return (
@@ -314,7 +314,11 @@ function QuestionDockForm({
</span>
<span>
<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>
</button>
);
@@ -328,11 +332,23 @@ function QuestionDockForm({
}
aria-pressed={sel.dontKnow}
className={cn(
"rounded-lg border border-dashed px-3 py-2 text-left text-sm text-muted-foreground transition-colors",
sel.dontKnow && "border-primary text-foreground",
// Option-row layout + radio circle (owner); the dashed
// 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>
)}
+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"
>
<PlusIcon className="size-3" />
+ New session
New session
<span className="sr-only">create a new session</span>
</button>