refactor(web-ui): migrate product shell UI onto @bitfun/ui primitives - #2608
Merged
Conversation
Replace the custom two-option diff type switcher (GitDiffView), the markdown editor view-mode button pairs, and the font size preset button group (FontPreferencePanel) with the design-system SegmentedControl. Retire the corresponding appearance parts and migrate persisted appearance packages that still reference them.
Replace the hand-rolled menu surface and menu item in MarketAccountControls with Menu/MenuItem, keep only positioning overrides in SCSS, retire the menu/menuItem appearance parts, and migrate persisted appearance packages.
Compose the image viewer header from Toolbar/ToolbarGroup/ToolbarSeparator with IconButton and Button controls, drop the bespoke toolbar button styles, retire the toolbar/controls/action appearance parts, and migrate persisted appearance packages.
…nu rows Destructive actions such as close/delete/reset need a semantic danger treatment inside Menu lists. Expose tone=neutral|danger on ActionItem (inherited by MenuItem), style it with the shared status danger tokens, and cover the contract in tests.
Replace the custom popover markup of the workspace item menus, the assistant session create menu, and the miniapp gallery import menu with Menu/MenuItem/MenuSeparator from @bitfun/ui, keeping only positioning overrides in SCSS. Retire the corresponding appearance parts, migrate persisted appearance packages, and teach the overlay-surface portal contract that design-system surface components own their chrome.
…ab preview Introduce @bitfun/ui Tooltip with TooltipProvider, placement flipping, follow-cursor and interactive persistence, backed by new overlay.tooltip dimension tokens. Register it in the component registry and expose placement previews in Design Lab.
Switch Tooltip imports from the legacy component library to @bitfun/ui outside flow_chat, mount TooltipProvider with the appearance overlay host, retarget custom tooltip width overrides to data-bf parts, and align test mocks. The legacy Tooltip stays for flow_chat and internal legacy components.
…log Icons Replace remaining product viewports, form groups, scene navigation, and 1:1 lucide glyphs with @bitfun/ui primitives while keeping flow_chat frozen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adopt the remaining high-value
@bitfun/uiprimitives in the Web UI product shell, add the missing Tooltip primitive, and keepflow_chatfrozen.SegmentedControl(Git diff type, Markdown editor view mode, font-size presets).Menu/MenuItem/MenuSection/MenuSeparator(market account, workspace item, assistant-session create, MiniApp gallery import, nav footer settings, MainNav workspace switcher, ShellNav workspace switcher).Toolbar/ToolbarGroup/ToolbarSeparator.ActionItemtone="danger"so destructive menu rows share the status-danger tokens.@bitfun/uiTooltip+TooltipProviderand switch product surfaces outsideflow_chatto it.ScrollArea,FieldGroup,NavigationPanel, and catalogIcons.NavigationPanelbodyRefso sticky scene headers can track the same scroll root.Retire the corresponding appearance parts and migrate persisted appearance packages.
Fixes #
Type and Areas
Type:
Feature / UI/UX / refactor
Areas:
web UI, design system (
@bitfun/ui,@bitfun/design-tokens, Design Lab), appearance migrationMotivation / Impact
The product shell still mixed design-system primitives with one-off buttons, popovers, scroll wrappers, scene navigation, and the legacy
@/component-libraryTooltip. That duplicated overlay surfaces, appearance parts, and icon/styling paths.After this change:
@bitfun/ui.@bitfun/uiIcons instead of raw lucide imports.levelGroup,modeToggle,footerMenu,workspaceMenu,sectionson git/settings/nav, image-viewer toolbar parts, and others) migrate automatically.No change to Agent Runtime, remote workspace, peer-device, or detached-dispatch behavior.
flow_chatis unchanged.Verification
Run
pnpm exec vitest runfromsrc/web-ui.Local-only product-shell UI. Not exercised in remote workspace, remote control, Peer Device Mode, or Detached Dispatch.
Manual checks in
desktop:dev:Reviewer Notes
@bitfun/uiMenu, Modal, or ConfirmDialog own their surface.overlay-surfaces.contract.test.tsaccepts that instead of requiringfloating-surfaceordialog-surfacemixins.TooltipProviderwithportalContainer={getAppearanceOverlayHost}inApp.tsx, matching Modal.[data-bf-part='content']and clearmax-inline-sizewhere the 280px cap would clip Agent capability / Create Agent copy.NavigationPanelbodyRefis a small design-system addition for product sticky headers. Do not treat it as a new visual variant.flow_chatand a few component-library internals still import it.Checklist