amosblomqvist
6b83d3248b
Owner round 2026-09-25, over 09c0f6e. The wave's tooltips read as distracting; this round makes them quiet: - Delay: TOOLTIP_DELAY_MS = 500 in the primitive — tooltips appear when you pause on a control, never in passing (Radix focus-opens stay instant by design; keyboard users don't wait). - Vanish on leave: disableHoverableContent — the chip is un-hoverable, so the instant the cursor leaves the trigger it's gone, even mid-move onto the chip's own pixels. - Look: bg-accent (#2a2a2a, the hover-chip tone) instead of the white bg-foreground slab; 11px; px-2 py-1; arrow culled (nothing purely decorative); text-foreground/85. - Suffix: parentheses, not em-dash — "Dictate (⌘D)"; the registry source unchanged (still override-aware). - Drops (owner-selected): send square, start square, stats summary — the icons/numbers describe themselves. - Home logo kept but to the RIGHT with its real shortcut "Home (⌘G)" (jump-graph routes to /, the same destination). - Trims: "Model selector (⌘K)", "Thinking level", "Graph costs — click for details", "How much of this session isn't mapped yet". - Added: Import Notes gets "Import notes into the graph" — the one button whose destination wasn't obvious. Pins: TOOLTIP_DELAY_MS=500; hintText parens expectations updated. Live-verified on :3001 — 508ms hover delay measured, close within 10ms of pointerout, chip styles probed (rgb(42,42,42), 11px, 4px/8px), arrow gone, all new labels + sides confirmed, drops carry no tooltip and no aria-describedby.
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip"
|
|
import { bindingForAction, formatBinding, type KeyAction } from "@/src/core"
|
|
|
|
/**
|
|
* The tooltip composition for icon and pill controls (tooltip wave, owner
|
|
* 2026-09-25; subtlety round same day). The styled Radix tooltip carries
|
|
* the label, with the control's shortcut appended in parentheses when
|
|
* it has one ("Dictate (⌘D)") — the owner call: the em-dash suffix read
|
|
* as too much air.
|
|
*
|
|
* The binding is override-aware: pass `action` for registry shortcuts (a
|
|
* user rebind in Settings → Keyboard changes the suffix live), or
|
|
* `binding` for surface-owned keys with no registry entry ("escape" for a
|
|
* dialog close, "enter" for a form submit).
|
|
*
|
|
* children must be a single element able to take a ref (TooltipTrigger
|
|
* asChild merges onto it — no wrapper DOM, no layout shift).
|
|
*/
|
|
|
|
interface HintProps {
|
|
label: string
|
|
/** Registry action whose LIVE binding is shown (override-aware). */
|
|
action?: KeyAction
|
|
/** Surface-owned binding ("escape", "enter") — keys the registry
|
|
* deliberately doesn't dispatch (Esc closes the dialog itself; Enter
|
|
* submits the form the button belongs to). */
|
|
binding?: string
|
|
side?: "top" | "bottom" | "left" | "right"
|
|
children: React.ReactElement
|
|
}
|
|
|
|
/** The composition itself, pure — "Dictate" + ⌘D → "Dictate (⌘D)". Exported
|
|
* for the mechanism pins (tests/tooltip-mechanism.test.tsx). */
|
|
export function hintText(label: string, action?: KeyAction, binding?: string): string {
|
|
const live = action
|
|
? formatBinding(bindingForAction(action))
|
|
: binding
|
|
? formatBinding(binding)
|
|
: ""
|
|
return live ? `${label} (${live})` : label
|
|
}
|
|
|
|
export function Hint({ label, action, binding, side = "top", children }: HintProps) {
|
|
return (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>{children}</TooltipTrigger>
|
|
<TooltipContent side={side}>{hintText(label, action, binding)}</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
)
|
|
} |