fix(sidebar): restore shared collapse animation

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -160,9 +160,9 @@ function isFullscreenPath(pathname: string | null): boolean {
  * zero width, revealing the route content. Because this component lives in the
  * layout it persists across navigations, so the rail never re-mounts.
  *
- * Nothing here animates: collapse, expand, and the fullscreen swap all apply in
- * one frame. The rail and the pane meet on a single hairline divider with no
- * gutter, radius, or shift between states.
+ * The docked rail and content pane share one width transition. Drag-resizing,
+ * hydration, and reduced motion bypass it; the floating peek retains its own
+ * enter/exit animation.
  *
  * Because the chrome observes every pathname transition, it records the page a
  * fullscreen route was launched from into {@link useFullscreenOriginStore}. The
@@ -331,6 +331,9 @@ export function WorkspaceChrome({
         ref={cardRef}
         className={cn(
           'sidebar-shell-outer shrink-0 overflow-hidden',
+          hasHydrated &&
+            !isPeekActive &&
+            'transition-[width] duration-175 ease-[cubic-bezier(0.25,0.1,0.25,1)] data-[resizing]:transition-none motion-reduce:transition-none',
           isPeekActive
             ? isPeekOpen
               ? PEEK_CARD_ENTER
@@ -345,7 +348,12 @@ export function WorkspaceChrome({
         aria-hidden={isFullscreen || (isPeekActive && !isPeekOpen) || undefined}
         suppressHydrationWarning
       >
-        <div className='sidebar-shell-inner h-full w-[var(--sidebar-width)] shrink-0'>
+        <div
+          className={cn(
+            'sidebar-shell-inner h-full shrink-0 [&_.sidebar-container]:w-full!',
+            isPeekActive ? 'w-[var(--sidebar-width)]' : 'w-full'
+          )}
+        >
           <SidebarChromeProvider isCollapsed={isCollapsed} isPeeking={isPeekActive}>
             {sidebar}
           </SidebarChromeProvider>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.test.tsx

@@ -0,0 +1,73 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useSidebarResize } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize'
+import { useSidebarStore } from '@/stores/sidebar/store'
+
+let container: HTMLDivElement
+let root: Root
+
+function ResizeHandle() {
+  const { handlePointerDown } = useSidebarResize()
+  return <div role='separator' onPointerDown={handlePointerDown} />
+}
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  useSidebarStore.setState({ isCollapsed: false, sidebarWidth: 256 })
+  container = document.createElement('div')
+  container.className = 'sidebar-shell-outer'
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root.render(<ResizeHandle />))
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.useRealTimers()
+})
+
+function startResize() {
+  const handle = container.querySelector('[role="separator"]')!
+  act(() => handle.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true })))
+  expect(container.hasAttribute('data-resizing')).toBe(true)
+}
+
+describe('sidebar resize lifecycle', () => {
+  it.each(['pointerup', 'pointercancel', 'blur', 'unmount'])(
+    'restores animation and persists the final width after %s',
+    (event) => {
+      startResize()
+      act(() => {
+        document.dispatchEvent(new MouseEvent('pointermove', { clientX: 280 }))
+        vi.advanceTimersByTime(20)
+      })
+      expect(container.style.getPropertyValue('--sidebar-width')).toBe('280px')
+      expect(useSidebarStore.getState().sidebarWidth).toBe(256)
+
+      act(() => {
+        if (event === 'unmount') root.render(null)
+        else if (event === 'blur') window.dispatchEvent(new Event(event))
+        else document.dispatchEvent(new Event(event))
+      })
+
+      expect(container.hasAttribute('data-resizing')).toBe(false)
+      expect(container.style.getPropertyValue('--sidebar-width')).toBe('')
+      expect(useSidebarStore.getState().sidebarWidth).toBe(280)
+      expect(document.body.style.cursor).toBe('')
+      expect(document.body.style.userSelect).toBe('')
+    }
+  )
+
+  it('restores animation when released without moving', () => {
+    startResize()
+    act(() => document.dispatchEvent(new Event('pointerup')))
+    expect(container.hasAttribute('data-resizing')).toBe(false)
+    expect(useSidebarStore.getState().sidebarWidth).toBe(256)
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts

@@ -40,6 +40,7 @@ export function useSidebarResize() {
       const pointerId = e.pointerId
       const shell = document.querySelector<HTMLElement>('.sidebar-shell-outer')
       const target = shell ?? document.documentElement
+      target.setAttribute('data-resizing', '')
       document.body.style.cursor = 'ew-resize'
       document.body.style.userSelect = 'none'
       handle.setPointerCapture?.(pointerId)
@@ -79,6 +80,7 @@ export function useSidebarResize() {
           setSidebarWidth(lastWidth)
           if (target !== document.documentElement) target.style.removeProperty('--sidebar-width')
         }
+        target.removeAttribute('data-resizing')
       }
 
       teardownRef.current = endDrag