Skip to content

Design system polish: prompt, sidebar, settings, and activity UI#325

Merged
brsbl merged 75 commits into
mainfrom
bb/design-system-polish
Jun 25, 2026
Merged

Design system polish: prompt, sidebar, settings, and activity UI#325
brsbl merged 75 commits into
mainfrom
bb/design-system-polish

Conversation

@brsbl

@brsbl brsbl commented Jun 23, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

This PR collects the design-system polish split from the larger folders work and rebases it onto current main.

Summary

  • Prompt box and banner stack polish: queued drawer geometry, prompt-card radius/spacing, context banner actions, background commands, goal/todo/workflow/prompt-mode headers, and shared prompt banner action styling.
  • Sidebar polish: scoped hover targets for non-clickable headers, active project route styling, project/header action behavior, thread search result hierarchy, and searched-message scrolling support.
  • Settings polish: added full-page and focused Settings Ladle stories, and toned down row/provider label weights so section hierarchy reads more clearly.
  • Picker and dialog polish: wrapped picker rows/content, tighter option menu sizing, thread rename sizing, menu/dialog shadow hierarchy, and shared white button/combo-button hover treatment.
  • Timeline and activity polish: workflow/todo hierarchy, shared in-progress shimmer patterns, context-window popover timing/style, thread action affordances, Mermaid sizing, and related Ladle stories.
  • Thread search plumbing: matched search term and metadata support across contract, DB query tests, sidebar rendering, and stories.

Review-loop fixes

  • Removed false pointer affordance from non-clickable sidebar worktree headers while keeping chevron/actions interactive.
  • Restored folder metadata in sidebar search result rows when folder organization mode is active.
  • Fixed sidebar search navigation to expand and scroll to nested timeline rows, including same-thread repeated searches and manually collapsed ancestors.

Rebase notes

  • Rebased onto origin/main.
  • Resolved the composer-bootstrap conflict by keeping main's deletion. Main now uses thread-detail bootstrap and decoupled data queries, so the older composer-bootstrap cache tweak no longer applies.

Key stories

Validation

  • git diff --check
  • pnpm exec turbo run typecheck --filter=@bb/app
  • pnpm exec turbo run test --filter=@bb/app -- ThreadTimelineRows.actions ProjectRow.interactions SidebarThreadSearchPanel QueuedMessagesList
  • pnpm exec turbo run typecheck --filter=@bb/app --filter=@bb/db --filter=@bb/server-contract
  • pnpm exec turbo run test --filter=@bb/app --filter=@bb/db --filter=@bb/server-contract
  • Review-loop re-review verdicts: correct after fixes.

brsbl added a commit that referenced this pull request Jun 23, 2026
@brsbl @claude
Move cross-cutting design polish to its own PR (#325)
e0340b2 
Reverts the radius/shadow hierarchy, prompt-box, context-window, picker, and
composer-cache changes from this branch so they ship in the independent design
PR. This branch keeps the nested-folders feature plus the search deep-link and
the sidebar interaction polish that are intertwined with the folder UI.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
brsbl added a commit that referenced this pull request Jun 24, 2026
@brsbl @claude
Drop the dropdown-menu / context-menu replica stories
24e030a 
These hand-reconstructed app menus (sidebar display, folder/project actions) in
a ui/* primitive story added no value over the real menu stories and risked
drifting from — or misrepresenting — what the app actually renders. The only
#325 change to these primitives is the shadow-lg->md chrome, which is reviewable
in real menus (ThreadActionsMenu, OptionPicker, PermissionModePicker, the
context-window usage menu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
brsbl added a commit that referenced this pull request Jun 24, 2026
@brsbl @claude
Drop the dropdown-menu / context-menu replica stories
b0fd170 
These hand-reconstructed app menus (sidebar display, folder/project actions) in
a ui/* primitive story added no value over the real menu stories and risked
drifting from — or misrepresenting — what the app actually renders. The only
#325 change to these primitives is the shadow-lg->md chrome, which is reviewable
in real menus (ThreadActionsMenu, OptionPicker, PermissionModePicker, the
context-window usage menu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl brsbl force-pushed the bb/design-system-polish branch from 128f95b to ee57d11 Compare June 24, 2026 12:53
brsbl added a commit that referenced this pull request Jun 24, 2026
@brsbl @claude
Drop the dropdown-menu / context-menu replica stories
f634f1f 
These hand-reconstructed app menus (sidebar display, folder/project actions) in
a ui/* primitive story added no value over the real menu stories and risked
drifting from — or misrepresenting — what the app actually renders. The only
#325 change to these primitives is the shadow-lg->md chrome, which is reviewable
in real menus (ThreadActionsMenu, OptionPicker, PermissionModePicker, the
context-window usage menu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl brsbl force-pushed the bb/design-system-polish branch from ee57d11 to b178a2b Compare June 24, 2026 12:58
@brsbl brsbl changed the title Design system polish: consistent radius & shadow hierarchy Design system polish: prompt, sidebar, and activity UI refinements Jun 24, 2026
brsbl added a commit that referenced this pull request Jun 24, 2026
@brsbl @claude
Drop the dropdown-menu / context-menu replica stories
dc1ec1a 
These hand-reconstructed app menus (sidebar display, folder/project actions) in
a ui/* primitive story added no value over the real menu stories and risked
drifting from — or misrepresenting — what the app actually renders. The only
#325 change to these primitives is the shadow-lg->md chrome, which is reviewable
in real menus (ThreadActionsMenu, OptionPicker, PermissionModePicker, the
context-window usage menu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl brsbl force-pushed the bb/design-system-polish branch from 3133643 to 9bed1ac Compare June 24, 2026 20:52
@brsbl brsbl changed the title Design system polish: prompt, sidebar, and activity UI refinements Design system polish: prompt, sidebar, settings, and activity UI Jun 24, 2026
@brsbl brsbl force-pushed the bb/design-system-polish branch from b046481 to ad9a5f7 Compare June 24, 2026 22:45
brsbl added a commit that referenced this pull request Jun 24, 2026
@brsbl @claude
Drop the dropdown-menu / context-menu replica stories
9cb0d5b 
These hand-reconstructed app menus (sidebar display, folder/project actions) in
a ui/* primitive story added no value over the real menu stories and risked
drifting from — or misrepresenting — what the app actually renders. The only
#325 change to these primitives is the shadow-lg->md chrome, which is reviewable
in real menus (ThreadActionsMenu, OptionPicker, PermissionModePicker, the
context-window usage menu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
brsbl and others added 18 commits June 24, 2026 16:16
@brsbl @claude
Design system polish: consistent radius & shadow hierarchy
88c9e1f 
Cross-cutting visual polish, independent of the nested-folders feature.

Radius hierarchy (token scale sm=4 md=6 lg=8 xl=12):
- Prompt box -> rounded-xl (uniform); banner chrome -> rounded-lg.
- Normalize outliers: arbitrary rounded-[3px] -> rounded-sm, icon tiles xl -> lg.

Shadow hierarchy (bias minimal):
- Cards/banners -> shadow-sm; menus (dropdown/context) standardized to shadow-md;
  dialogs shadow-xl -> shadow-lg. No shadow-xl anywhere.

Component polish:
- Prompt box banner cards: full-width clickable headers, caret flush right.
- Context-window indicator: menu-surface popover with a tone-colored usage bar,
  right-aligned token line; story added (with a story-only defaultOpen hatch).
- Model/permission pickers: restore hover/open backgrounds.
- Lighter user-message bubble border.
- Composer-bootstrap cache retained 5min (was 30s) so the queued drawer renders
  from cache on rapid thread switches instead of reloading.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Move non-folder polish + search deep-link from #258 into the design PR
073b94f 
These are the non-folder changes split out of the nested-folders PR (#258),
placed here so #258 is folder-only and nothing is dropped. Adapted to main's
reworked sidebar (chevron/worktree-menu ProjectRow, ProjectActionsMenu).

Search deep-link / scroll-to-message:
- Expose ThreadSearchMatch.sourceSeq (db) + threadSearchMatchSchema.sourceSeq
  (contract); server already passes matches through.
- useScrollToSearchedMessage + ThreadTimelineRows scroll hook, AppSidebar nav
  state (searchMessageSeq), SidebarThreadSearchPanel/sidebarThreadSearch
  messageSeq, app.css bb-search-flash, thread-search tests.
- ThreadSearchResultRow redesign (+ story).

Sidebar/menu interaction polish:
- Row cursor/state-class affordances (sidebarRowClasses cursor-pointer +
  selected /70, ThreadRow grab cursor + dropped title tooltips, ProjectList +
  ProjectRow row classes), adapted to main's chevron (SidebarChildToggleChevron
  drops title props; callers updated).
- Menu icons + label tweaks (ThreadActionsMenu Mail/Pin icons, "Mark read",
  separators) + rename payload refactor (ThreadActionsProvider/ThreadRenameDialog),
  PinnedThreadTree/ProjectListProjects/SidebarHistoryNavigationControls/
  sortableMotion/ui sidebar tooltip + story-harness TooltipProvider.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Design review polish: lighter shadows, small fixes, menu/mermaid stories
3224127 
- Remove shadow from banner stack cards (PromptStackCard)
- Reduce modal shadow lg→md (base dialog, git-action, mermaid viewer)
- Compact git-action submit button (size sm)
- Center split-button chevron (equal padding; fixes all split buttons)
- Wrap context-window usage-menu stories in StoryCard/StoryRow (match approval template)
- Add dropdown-menu, context-menu, and mermaid stories

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Fix StoryCard columns overflow (button story lg/icon overlap)
1384178 
The columns grid used minmax(0, 1fr), so wide buttons (lg = px-8) overflowed
their equal-fraction cell into the next column. Use minmax(max-content, 1fr) so
each column fits its content. button.stories is the only columns consumer.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Mirror real sidebar menus in the dropdown-menu story
335fdce 
Replace the generic placeholder menu with the menus we actually ship: the
sidebar display menu (Group by / Sort by — single-select with checks; the old
Sort options were invented), the folder row actions (View archive / Rename /
Remove), and the Threads section actions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Mirror the real project-row right-click menu in the context-menu story
bbbe39d 
Replace the generic placeholder with the actual project-row context menu
(Project settings / Archived threads / Rename / Add local path / Remove) on a
project-row-like target — the same items as the project ··· dropdown. Context
menus are used on project rows (ProjectActionsMenu) and thread rows
(ThreadActionsMenu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Fix invalid Icon name in dropdown-menu story (Layers -> AlignLeft)
3c8f448 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Stop queued-list scroll fades from doubling the recessed tint
9921034 
--surface-recessed is translucent (ink 6% over transparent) so the scroll-fade
gradients (from-surface-recessed) painted a SECOND 6% layer over the already-
recessed card, darkening it into a gray band — the weird bg that showed on
overflowing / short queues and lingered after collapse/expand. Add an opaque
twin --surface-recessed-solid (ink 6% over the page canvas) and fade from it, so
the fade matches the card exactly instead of stacking.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Fix banner card header hover bleeding past the card corners
e18694a 
The full-bleed collapsible header buttons (Goal / Todo / Workflow / Prompt-mode
/ Background commands) carried their own rounded (4px) inside a rounded-lg (8px)
overflow-hidden card, so the hover fill's corners sat inside the card's corners
— leaving the recessed card peeking through. Drop the button radius and let the
card's overflow-hidden clip the hover fill to its corners.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Make queued-list header hover flush to the card top and sides
be67a86 
The Queued header button sat inside a px-1.5/pt-2.5 wrapper and carried its own
rounded-md, so its hover highlight was inset from the card edges. Make it
full-bleed (px-3, no radius) and fold the top padding into the button, so the
hover fill reaches the card's top + sides, clipped flush by the card's
overflow-hidden rounded corners.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Collapse context-window indicator stories into one Overview
5459bed 
Fold the separate UsageMenu / UsageMenuCritical / UsageMenuEstimated stories
into Overview: a rings card (hover any ring to open its menu) plus an open-menus
card showing the usage menu rendered open at each tone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Search result: folder-aware metadata + plain folder icon
489ecd3 
- Swap the worktree-style FolderGit icon for a plain Folder icon, matching the
  sidebar's project/folder iconography (avoids the worktree confusion).
- Add an optional folderLabel prop: when the sidebar is organized by folder the
  caller passes the thread's folder path, shown in place of the project. Story
  adds an 'organized by folder' variant demonstrating title + folder.

The live wiring (caller deriving folderLabel from Organize-by + thread.folderPath)
lands when #258's folderPath merges in — that data is not on this branch.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Drop the dropdown-menu / context-menu replica stories
c682ca2 
These hand-reconstructed app menus (sidebar display, folder/project actions) in
a ui/* primitive story added no value over the real menu stories and risked
drifting from — or misrepresenting — what the app actually renders. The only
#325 change to these primitives is the shadow-lg->md chrome, which is reviewable
in real menus (ThreadActionsMenu, OptionPicker, PermissionModePicker, the
context-window usage menu).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Fix banner card hover peek: header button fills the row height
97ddad4 
Real cause (my earlier corner change missed it): the cards set minHeight:32 on
the card but the header button was shorter (~28px), leaving a strip of the
card's recessed bg uncovered below the button. Since the hover tint is
translucent, that uncovered strip reads as a lighter sliver peeking out under
the highlight. Give the header button min-h-8 so its hover fill covers the full
collapsed row.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl @claude
Remove the 1px hairline below collapsed banner card headers
9cd5d7a 
The collapsible body <section> kept border-t (transparent, 1px) even when
collapsed (grid-rows-[0fr]), leaving a 1px strip of recessed bg below the header
that the translucent hover couldn't cover. Drop the border in the collapsed
state (the expanded divider stays) so the section is 0px when closed — with the
earlier min-h-8 the header hover now fills the card fully flush.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@brsbl
Polish prompt stack and picker UI states
9103b7c
@brsbl
Restore pointer cursors on message actions
e68b4fa
@brsbl
Lighten background command header hover
384a8f2
@brsbl brsbl force-pushed the bb/design-system-polish branch from dbc99be to 1e48449 Compare June 24, 2026 23:17
@brsbl brsbl merged commit f3011ef into main Jun 25, 2026
6 checks passed
@brsbl brsbl deleted the bb/design-system-polish branch June 25, 2026 01:08
@lnittman lnittman mentioned this pull request Jun 25, 2026
Closed
@brsbl brsbl mentioned this pull request Jun 26, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@brsbl