Skip to content

feat(app): restyle revert dock for v2#35560

Draft
usrnk1 wants to merge 4 commits into
devfrom
revert-dock-v2-tweaks
Draft

feat(app): restyle revert dock for v2#35560
usrnk1 wants to merge 4 commits into
devfrom
revert-dock-v2-tweaks

Conversation

@usrnk1

@usrnk1 usrnk1 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Issue for this PR

Closes #

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Restyles the composer "rolled back messages" dock (SessionRevertDock) to the v2 design so it matches the v2 release.

  • Swaps the legacy DockTray / Button / IconButton for ButtonV2 / IconV2 / IconButtonV2 and moves colors, spacing, radius and typography onto the --v2-* tokens from Figma (layer-01 surface, base border, muted icon/text, 42px header, 16px insets, v2 neutral restore button).
  • Adds an outline-reset icon to the v2 icon sprite and shows it before the "N rolled back messages" heading, to visually separate the summary row from the message list.
  • Keeps a v1/v2 split (same pattern as the timeline work): the v2 markup renders when settings.general.newLayoutDesigns() is on, and the original DockTray rendering stays as the fallback, so prod (v1 layout) is unchanged.

The tricky part is the layout: the composer input overlaps the dock's bottom by 18px (session-composer-region-controller.ts lift()). The first pass clipped the header (collapsed) and the last restore row (expanded). The fix keeps a dedicated 18px "sacrificial" spacer that is the only thing the composer overlaps, and puts it outside the scroll viewport so scrolling rows can never hide behind the composer.

How did you verify your code works?

  • Per-package bun typecheck while iterating, plus the full turbo typecheck that runs on push (all 30 packages pass).
  • Added a Storybook story (Composer/Revert Dock) that renders the real dock above a mock composer card reproducing the 18px overlap, with a Layout toggle to preview both the v2 and v1 fallback. onRestore only mutates local story state, so the collapsed/expanded/scroll cutoff behavior can be checked in isolation.
  • Verified collapsed, expanded, and the 6-item scrolling case against the Figma frames.

Screenshots / recordings

Storybook: Composer/Revert Dock (1 rolled back, 3 rolled back, 6 rolled back (scrolls)). Figma reference: Desktop Q3 2026, node 22-2835.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant