Repository navigation
feat(web,ui,desktop): add /design component showcase and standardize tooltip style - #5952
Conversation
Living reference of every packages/ui export — shadcn primitives, ai-elements, atoms, and Superset originals — with copyable import paths, grouped into ten sections with scrollspy navigation. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
… and button demos Adds a Shared app components registry (desktop renderer + pane system, with import-site counts), a dedicated Tooltip card including the HotkeyTooltip shortcut-chip style, and in-product button patterns mirroring OpenInButton and PickerTrigger. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
The preset-bar / HotkeyTooltip chip (bg-background, border, rounded-sm,
muted text, no arrow, sideOffset 4) was copy-pasted at 7 sites and
showArrow={false} at ~55 — it is the de-facto product tooltip. Bake it
into @superset/ui/tooltip as the default and strip the now-redundant
showArrow/sideOffset/className overrides across desktop, panes, and the
/design showcase. Arrow remains available via showArrow; apps/mobile has
its own tooltip and is untouched.
Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
…e tooltips Kbd had a tooltip-context override (text-background) built for the old inverted tooltip; on the new bg-background chip it rendered invisible. Drop the override so Kbd keeps its default muted styling in tooltips. Make HotkeyLabel's label optional and show only the shortcut keys on the back/forward buttons and the three sidebar toggles. The /design hotkey-chip demo now renders real Kbd keys inside a tooltip. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
… delay
Matches the delayDuration={1000} convention used by HotkeyTooltip, the
presets bars, and pane-header tooltips.
Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
Renders HotkeyLabel keycaps when shortcuts are enabled; falls back to the "Open in <app>" text only when showShortcuts is off or the hotkey is unassigned. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
The arrow was a plain bg-background diamond that looked detached from the bordered tooltip; border-r/border-b on the rotated square lands on the outward edges for every side. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
Adds an internalRoutes list to the web proxy: signed-in users whose email doesn't end in COMPANY.EMAIL_DOMAIN are redirected home, matching the gate apps/admin already uses. Covered by proxy-routes tests. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
… v2) Shows just the OPEN_IN_APP shortcut keycaps (e.g. ⌘O for Open in Finder) instead of the label and worktree path; keeps the select-an-editor hint when no app is chosen. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
…o worktree path
Restores the "Open in <app>" text next to the keycaps on all three
open-in buttons, keeps the v2 tooltip's worktree-path line removed, and
applies the standard delayDuration={1000}.
Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughTooltip defaults and usages were standardized across desktop and pane interfaces. The web app gained component showcase pages, reusable navigation and showcase primitives, AI/Superset examples, and email-domain access control for internal design routes. ChangesTooltip standardization
Design showcase and route access
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Ready to review this PR? Stage has broken it down into 8 individual chapters for you: Chapters generated by Stage for commit 512a22f on Jul 25, 2026 7:12pm UTC. |
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/desktop/src/renderer/hotkeys/components/HotkeyLabel/HotkeyLabel.tsx`:
- Around line 5-9: Ensure unassigned shortcuts always provide non-empty tooltip
text. Update HotkeyLabel to preserve or expose a fallback label, and retain
explicit fallback labels at NavigationControls lines 47-49 and 63, SidebarToggle
line 40, RightSidebarToggle line 46, and SidebarControl lines 32-33 in the
specified files so each unconditional TooltipContent receives usable text.
In
`@apps/web/src/app/design/components/SharedComponentsSection/SharedComponentsSection.tsx`:
- Around line 98-122: Move SharedComponentList into a colocated
SharedComponentList/SharedComponentList.tsx module with an index.ts re-export,
preserving its current rendering and props. Remove the local definition from
SharedComponentsSection.tsx and import SharedComponentList from the new
component module.
- Around line 132-136: Update the “Desktop renderer” ComponentCard importPath
value to a valid package or alias-based import path that users can paste into
imports; do not pass the filesystem glob apps/desktop/src/renderer/components/*.
Preserve ComponentCard’s existing import-path copy behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: d9093bbd-8e52-4b2d-8d40-99136169398c
📒 Files selected for processing (82)
apps/desktop/src/renderer/components/Chat/ChatInterface/components/ModelPicker/components/ModelProviderGroup/components/AnthropicProviderHeading/AnthropicProviderHeading.tsxapps/desktop/src/renderer/components/Chat/ChatInterface/components/ModelPicker/components/ModelProviderGroup/components/OpenAIProviderHeading/OpenAIProviderHeading.tsxapps/desktop/src/renderer/components/OpenInButton/OpenInButton.tsxapps/desktop/src/renderer/components/UpdatesPill/UpdatesPill.tsxapps/desktop/src/renderer/hotkeys/components/HotkeyLabel/HotkeyLabel.tsxapps/desktop/src/renderer/hotkeys/components/HotkeyTooltip/HotkeyTooltip.tsxapps/desktop/src/renderer/lib/clickPolicy/components/ClickHint/ClickHint.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarPortsList/DashboardSidebarPortsList.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarPortsList/components/DashboardSidebarPortBadge/DashboardSidebarPortBadge.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarPortsList/components/DashboardSidebarPortGroup/DashboardSidebarPortGroup.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarProjectSection/components/DashboardSidebarProjectRow/DashboardSidebarProjectRow.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/DashboardSidebar/components/DashboardSidebarWorkspaceItem/components/DashboardSidebarExpandedWorkspaceRow/DashboardSidebarExpandedWorkspaceRow.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/NavigationControls/NavigationControls.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/SidebarToggle/SidebarToggle.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/OpenInMenuButton/OpenInMenuButton.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/ResourceConsumption.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/ResourceConsumption/components/MetricBadge/MetricBadge.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/RightSidebarToggle/RightSidebarToggle.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/components/TopBar/components/V2OpenInMenuButton/V2OpenInMenuButton.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/V2PresetsBar/V2PresetsBar.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/components/SidebarHeader/SidebarHeader.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/BrowserPane/BrowserPane.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatPane/components/WorkspaceChatInterface/components/ModelPicker/components/ModelProviderGroup/components/AnthropicProviderHeading/AnthropicProviderHeading.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/ChatPane/components/WorkspaceChatInterface/components/ModelPicker/components/ModelProviderGroup/components/OpenAIProviderHeading/OpenAIProviderHeading.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/components/CommentPaneHeaderExtras/CommentPaneHeaderExtras.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/DiffPane/components/DiffHeaderMetadata/DiffHeaderMetadata.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/DiffPane/components/DiffPaneHeaderExtras/DiffPaneHeaderExtras.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/FilePane/components/FilePaneHeaderExtras/FilePaneHeaderExtras.tsxapps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/TerminalPane/components/TerminalPaneHeaderExtras/TerminalPaneHeaderExtras.tsxapps/desktop/src/renderer/screens/main/components/SidebarControl/SidebarControl.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/PortsList.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/components/MergedPortBadge/MergedPortBadge.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/components/WorkspacePortGroup/WorkspacePortGroup.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectHeader.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/FileDiffSection/components/FileDiffHeader/FileDiffHeader.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ChangesContent/components/InfiniteScrollView/components/DiffToolbar/DiffToolbar.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupItem.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/components/FileViewerToolbar/FileViewerToolbar.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/components/PaneToolbarActions/PaneToolbarActions.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/components/PresetsBar/PresetsBar.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ChangesHeader/ChangesHeader.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ViewModeToggle/ViewModeToggle.tsxapps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/index.tsxapps/desktop/src/renderer/screens/main/components/WorkspacesListView/WorkspaceRow/WorkspaceRow.tsxapps/web/src/app/design/components/ActionsSection/ActionsSection.tsxapps/web/src/app/design/components/ActionsSection/index.tsapps/web/src/app/design/components/AiElementsSection/AiElementsSection.tsxapps/web/src/app/design/components/AiElementsSection/index.tsapps/web/src/app/design/components/ComponentCard/ComponentCard.tsxapps/web/src/app/design/components/ComponentCard/index.tsapps/web/src/app/design/components/DataSection/DataSection.tsxapps/web/src/app/design/components/DataSection/index.tsapps/web/src/app/design/components/FeedbackSection/FeedbackSection.tsxapps/web/src/app/design/components/FeedbackSection/index.tsapps/web/src/app/design/components/InputsSection/InputsSection.tsxapps/web/src/app/design/components/InputsSection/index.tsapps/web/src/app/design/components/LayoutSection/LayoutSection.tsxapps/web/src/app/design/components/LayoutSection/index.tsapps/web/src/app/design/components/MenusSection/MenusSection.tsxapps/web/src/app/design/components/MenusSection/index.tsapps/web/src/app/design/components/NavigationSection/NavigationSection.tsxapps/web/src/app/design/components/NavigationSection/index.tsapps/web/src/app/design/components/OverlaysSection/OverlaysSection.tsxapps/web/src/app/design/components/OverlaysSection/index.tsapps/web/src/app/design/components/SharedComponentsSection/SharedComponentsSection.tsxapps/web/src/app/design/components/SharedComponentsSection/index.tsapps/web/src/app/design/components/ShowcaseNav/ShowcaseNav.tsxapps/web/src/app/design/components/ShowcaseNav/index.tsapps/web/src/app/design/components/ShowcaseSection/ShowcaseSection.tsxapps/web/src/app/design/components/ShowcaseSection/index.tsapps/web/src/app/design/components/SupersetSection/SupersetSection.tsxapps/web/src/app/design/components/SupersetSection/index.tsapps/web/src/app/design/page.tsxapps/web/src/proxy-routes.test.tsapps/web/src/proxy-routes.tsapps/web/src/proxy.tspackages/panes/src/react/components/PaneHeaderActions/PaneHeaderActions.tsxpackages/panes/src/react/components/Workspace/components/TabBar/components/TabItem/TabItem.tsxpackages/ui/src/components/ui/kbd.tsxpackages/ui/src/components/ui/tooltip.tsx
💤 Files with no reviewable changes (1)
- packages/ui/src/components/ui/kbd.tsx
/design keeps the stock shadcn primitives; new /design/superset page hosts everything custom — Superset originals, expanded live ai-elements demos (conversation/messages, reasoning, suggestions, chain of thought, task, plan, code block, sources, inline citation, context, checkpoint, artifact), and the shared app-component registry. Shared header with page tabs; the superset page inherits the /design internal-route gate. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/app/design/components/DesignPageHeader/DesignPageHeader.tsx`:
- Around line 32-45: Add aria-current="page" to the selected Link rendered by
the PAGES map in DesignPageHeader, while leaving it unset for inactive links.
Use the existing active === page.key condition so the current design page is
exposed to assistive technology.
In
`@apps/web/src/app/design/superset/components/AiContentSection/AiContentSection.tsx`:
- Around line 201-204: The ComponentCard entry for “Not demoed here” uses an
invalid wildcard importPath that users cannot paste into a static import. Update
this entry to list valid module paths individually, or replace importPath with a
non-copyable source-path label while preserving the existing description.
- Around line 110-112: Make the showcase interactions functional in
AiContentSection: update the three Source entries at
apps/web/src/app/design/superset/components/AiContentSection/AiContentSection.tsx
lines 110-112 with real destinations, or explicitly mark them as noninteractive
mock sources; at lines 188-190, add a Download button handler that performs the
advertised download, or render it as a disabled/noninteractive example.
In
`@apps/web/src/app/design/superset/components/AiStatusSection/AiStatusSection.tsx`:
- Around line 19-41: Split the Loader/BrailleSpinner and Shimmer/ShimmerLabel
examples into separate ComponentCard instances, giving each card exactly one
importPath for its showcased component. Preserve the existing examples and
descriptions while ensuring BrailleSpinner and ShimmerLabel each have their own
copyable import path.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: c8c88151-b211-412f-9648-e4278e03801e
📒 Files selected for processing (16)
apps/web/src/app/design/components/DesignPageHeader/DesignPageHeader.tsxapps/web/src/app/design/components/DesignPageHeader/index.tsapps/web/src/app/design/page.tsxapps/web/src/app/design/superset/components/AiAgentSection/AiAgentSection.tsxapps/web/src/app/design/superset/components/AiAgentSection/index.tsapps/web/src/app/design/superset/components/AiChatSection/AiChatSection.tsxapps/web/src/app/design/superset/components/AiChatSection/index.tsapps/web/src/app/design/superset/components/AiContentSection/AiContentSection.tsxapps/web/src/app/design/superset/components/AiContentSection/index.tsapps/web/src/app/design/superset/components/AiStatusSection/AiStatusSection.tsxapps/web/src/app/design/superset/components/AiStatusSection/index.tsapps/web/src/app/design/superset/components/SharedComponentsSection/SharedComponentsSection.tsxapps/web/src/app/design/superset/components/SharedComponentsSection/index.tsapps/web/src/app/design/superset/components/SupersetSection/SupersetSection.tsxapps/web/src/app/design/superset/components/SupersetSection/index.tsapps/web/src/app/design/superset/page.tsx
- HotkeyLabel gains fallbackLabel so keys-only tooltips fall back to
text instead of an empty chip when a hotkey is unbound
- aria-current="page" on the active design tab
- SharedComponentList extracted to its own component folder
- ComponentCard copyable={false} for glob/source-path registry cards
Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
Code reviewNo issues found. Checked for bugs and CLAUDE.md compliance. Five independent review passes (guideline compliance, shallow bug scan, git-history context, prior-PR feedback, in-file comment contracts) plus confidence-scoring of every flagged candidate. All candidates scored below threshold: the v2 open-in tooltip's worktree-path removal is an intentional product decision (and matches v1), and the NavigationControls unconditional-hotkey gap predates this PR on unmodified lines. 🤖 Generated with Claude Code - If this code review was useful, please react with 👍. Otherwise, react with 👎. |
Matches the v2 TOGGLE_SIDEBAR toggles switched to fallbackLabel earlier in this branch. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
Wires the previously-orphaned SettingsButton next to the add-repository button in WorkspaceSidebarFooter (both collapsed and expanded states), updated to footer icon conventions and the keys-only tooltip pattern. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
… gear isn't clipped Button's base shrink-0 + w-full made the trigger consume the full footer row and push the gear past the sidebar's overflow-hidden edge. min-w-0 flex-1 shrink lets it flex; label truncates when narrow. Verified via CDP in the running dev app. Claude-Session: https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
Summary
/designpage in apps/web — a living reference of every@superset/uicomponent (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.shaccounts via a newinternalRouteslist in the web proxy (same gate apps/admin uses).TooltipContentdefault — the borderedbg-backgroundstyle previously copy-pasted at 7 sites (presets bars, HotkeyTooltip, pane headers) plusshowArrow={false}at ~55 sites is baked into@superset/ui/tooltip; all redundant overrides removed (net −90 lines). Arrow stays available viashowArrow, now with a matching border.text-background) that became invisible on the new tooltip surface.Test plan
bun run lintexits 0https://claude.ai/code/session_01VedKcjooUzNUGeDPTmdanV
Summary by cubic
Adds gated component showcases at
/designand/design/supersetwith 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
/design(shadcn primitives) and/design/superset(originals, AI elements, shared desktop/pane component registry, in‑product button patterns) with header tabs and scrollspy nav.internalRoutesgate in the web proxy (COMPANY.EMAIL_DOMAIN), with tests forisInternalRoute.Refactors
@superset/ui/tooltip: default is now a borderedbg-backgroundchip (sideOffset=4, no arrow by default; arrow is opt‑in and matches the border). Removed redundantshowArrow={false}/classes across the app.HotkeyLabeladdsfallbackLabelfor 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).Kbdstays readable on the new tooltip surface.aria-current;SharedComponentListextracted; non‑copyable registry cards usecopyable={false}; v1 sidebar footer’s add‑repository button now shrinks so the settings gear never clips.Written for commit 512a22f. Summary will update on new commits.
Summary by CodeRabbit