Repository navigation
feat(app): smooth animated transitions for Work Column collapse/restore (#1434) #1610
Description
Important
Problem — The Chat panel collapse and restore is a hard jump (display: none / visible). It feels jarring and unfinished. Good split-pane UIs (VS Code sidebar, Figma layers panel, Linear) animate the width transition over ~200ms with an easing curve so the user can see what is happening.
Approach — Replace the !hidden (display: none) collapse with an animated width transition. When collapsing: animate Chat width from current → 0 over 200ms with ease-out, then set display: none after the transition completes (to avoid layout cost). When restoring: set display: flex, then animate width from 0 → target over 200ms with ease-out. The Work Column already has a transition-[width] class — extend it to cover the collapse/restore case.
Scope — In: CSS width transition for collapse/restore, transition-end cleanup. Out: drag-snap animation (separate issue), spring physics.
Acceptance Criteria
- Collapsing the Chat panel animates the width from current to 0 over ~200ms
- Restoring the Chat panel animates the width from 0 to the previous width over ~200ms
- The animation uses an easing curve (not linear) —
ease-outor the existingcubic-bezier(0.22,1,0.36,1) - No layout shift or flash during the transition
- The transition does not fire during manual drag (only on button click, keyboard shortcut, or double-click snap)
Reference
VS Code's sidebar collapse: animates width over ~150ms with ease-out. The sidebar content fades in on restore. Figma's layers panel: similar animated slide. Both avoid display: none during the animation.
Activity
aarontrowbridge commentedon Oct 29, 2026
Blocked on PR #1548 (Chat collapse and flexible split), which is deferred until after 0.4.0. This builds on it, so it's marked
hitlto keep the night runner off it until #1548 lands. (0.4.0 cleanup)