feat(web,ui,desktop): add /design component showcase and standardize tooltip style

Merged
AV
3mo ago
+2873-203

Summary

  • New /design page in apps/web — a living reference of every @superset/ui component (56 shadcn primitives, ai-elements, atoms, Superset originals) with live demos, variant enumerations, and click-to-copy import paths. Includes a registry of shared desktop-app components (with import-site counts) and in-product button patterns (OpenInButton split button, PickerTrigger). Auth-gated and restricted to @superset.sh accounts via a new internalRoutes list in the web proxy (same gate apps/admin uses).
  • Chip tooltip is now the TooltipContent default — the bordered bg-background style previously copy-pasted at 7 sites (presets bars, HotkeyTooltip, pane headers) plus showArrow={false} at ~55 sites is baked into @superset/ui/tooltip; all redundant overrides removed (net −90 lines). Arrow stays available via showArrow, now with a matching border.
  • Kbd visible in tooltips — dropped Kbd's tooltip-context override (text-background) that became invisible on the new tooltip surface.
  • Shortcut-first tooltips on chrome buttons — back/forward and the three sidebar toggles show keys only; the open-in buttons (v1/v2 top bar + standalone) show "Open in " + keycaps without the worktree path. All use the standard 1s delay.

Test plan

  • bun run lint exits 0
  • tsc clean for packages/ui, packages/panes, apps/web, apps/desktop (full desktop typecheck)
  • proxy-routes unit tests pass (34/34, including new isInternalRoute cases)
  • /design visually verified in headless Chrome (full-page screenshots; forced-open tooltips confirm chip style, Kbd visibility, and arrow border)
  • Hover-check nav/sidebar/open-in tooltips in the desktop app

https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV


Open in Stage

Summary by cubic

Adds gated component showcases at /design and /design/superset with live demos and click‑to‑copy imports. Standardizes chip tooltips across the app, refines hotkey/Kbd behavior, and mounts a settings gear in the v1 sidebar footer; fixes a layout issue so the gear doesn’t clip.

  • New Features

    • Two pages: /design (shadcn primitives) and /design/superset (originals, AI elements, shared desktop/pane component registry, in‑product button patterns) with header tabs and scrollspy nav.
    • Access control: both routes are restricted to company emails via an internalRoutes gate in the web proxy (COMPANY.EMAIL_DOMAIN), with tests for isInternalRoute.
    • Desktop: settings gear added to the v1 sidebar footer; uses a 1s delay and a keys‑only tooltip.
  • Refactors

    • @superset/ui/tooltip: default is now a bordered bg-background chip (sideOffset=4, no arrow by default; arrow is opt‑in and matches the border). Removed redundant showArrow={false}/classes across the app.
    • Hotkey UX: HotkeyLabel adds fallbackLabel for unassigned keys; back/forward and sidebar toggles show shortcut‑only chips with a 1s delay. Open‑in buttons show “Open in ” with keycaps (no worktree path, 1s delay). Kbd stays readable on the new tooltip surface.
    • Design polish: active design tab sets aria-current; SharedComponentList extracted; non‑copyable registry cards use copyable={false}; v1 sidebar footer’s add‑repository button now shrinks so the settings gear never clips.

Summary by CodeRabbit

  • New Features
    • Added a design-system showcase with section navigation and multiple interactive component galleries.
    • Added a Superset components showcase, including AI demo sections and a shared component listing.
    • Added internal route access protection with redirect for unauthorized sessions.
  • Improvements
    • Standardized tooltip behavior across the desktop app (arrow visibility, offsets, and simplified tooltip content).
    • Increased tooltip delays for key actions (generally to 1s).
    • Enhanced hotkey tooltips with optional fallback labels.
    • Updated the UI tooltip defaults/styling in the shared toolkit.