Home

madison / open-git

public
Overview Code History Branches Pull requestsIssuesInsights Campfire Docs
main
HomeOverview Code PRsIssues

feat(web): shared rail chrome with morphing hover and cycling tooltip

2 months ago

108f57f
Authored
VC7/26/2026, 9:25:02 AM
Both 44px rails (repository activity, home global) now share one chrome module
so the left edge behaves identically whichever is mounted.

The tooltip is a single Base UI popup driven by one handle with per-trigger
payloads, rather than one Tooltip per item. Because the popup is reused it
slides between anchors and cycles its label through the viewport's clip
following data-activation-direction, instead of unmounting and remounting.

The hover highlight is one full-height element revealed through a clip-path
window. Its two edges are separate registered custom properties and the edge
leading the travel gets the shorter duration, so the window stretches toward
the next item and contracts as it lands. Measured mid-travel at 51.5px against
a 36px resting height. The selected pill is a separate layer and never moves.

Hover is delegated on the rail via pointerover rather than per-item
pointerenter, which does not bubble and was missed on fast traverses.

Repository tools also take `g` chords (g c/b/p/i/a/f/d/s), shown in the
tooltip. Cmd/Ctrl+digit is reserved by browsers for tab switching, so a
GitHub-style prefix is the only family that stays clear. Expiry is measured
when the second key lands rather than run off a timer, since background tabs
throttle timeouts and a stale prefix would navigate much later.

The rail also reveals through a clip when it switches type (home <-> repository)
and stays still between two repositories, which remount the same kind of rail.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Parent8adaa61

7 files changed
  • apps/web/app/(home)/home-notifications-bell.tsx+43−28
  • apps/web/app/workspace/rail-chrome.tsx+275−0
  • apps/web/app/workspace/repository-explorer.tsx+64−32
  • apps/web/app/workspace/repository-workbench-sidebar.tsx+194−110
  • packages/ui/src/components/kbd.tsx+12−1
  • packages/ui/src/components/tooltip.tsx+6−1
  • packages/ui/src/styles/globals.css+82−15