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:
+7
-1
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user