feat(sidebar): hover-peek collapsed nav with drag-to-close

[adamleithp]

Problems

• Lost collapse nav button, shortcut-only (cmd b)

Changes

• Hover-peek: when the nav is collapsed, hovering an invisible gutter on the window's left edge (or the title-bar toggle) slides the nav out as a floating overlay over the content with a subtle dimming scrim; mouse off and it slides back. The floating panel is resizable too.
• Drag-to-close: dragging the resize handle clamps at min width, but pulling past half the min width collapses the sidebar; keep holding and drag back out and it pops open again (16px hysteresis so the boundary can't jitter). Works on both the docked and floating panel. The pre-drag width is restored on close so reopening comes back at your chosen size.
• Synced animation: the container width (incl. min/max-width, which otherwise clamp and jump-cut), the panel translateX, and the title bar all animate on one shared 200ms curve so the content edge and nav edge track each other frame-for-frame in both directions.
• The title-bar button now toggles collapse (was history-back, duplicating the button next to it), with the icon reflecting state.
• Resize polish: the handle's primary line stays lit while grabbing, a full-screen shield keeps the col-resize cursor during drags, and the handle disarms briefly during slides so it can't pick up a stale :hover.
• Collapsed content pane drops its top-left border radius (flush with the window edge).
• Unmount mid-drag resets body cursor/user-select and the isResizing flag.

How did you test this?

• pnpm --filter @posthog/ui typecheck and biome clean.
• Manual in the dev app: peek in/out via gutter and button, drag-to-close/reopen from docked and floating states, resize while floating, scrim fade, animation sync when toggling open/closed (verified scrim styles via CDP against the running app — the radix Tailwind preset has no bg-black/*, hence the bg-blackA-* scale).
• Verified the other ResizableSidebar consumers (right-side panels: skills, marketplace, canvas, new-task context) are unaffected: all sit inside overflow-hidden ancestors and none use peek.

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

🤖 Generated with Claude Code

[trunk-io]

😎 Merged directly without going through the merge queue, as the queue was empty and the PR was up to date with the target branch - details.

[github-actions]

React Doctor found 6 issues in 1 file · 6 warnings.

6 warnings

src/primitives/ResizableSidebar.tsx

• ⚠️ src/primitives/ResizableSidebar.tsx:80 Event logic handled in an effect no-event-handler
• ⚠️ src/primitives/ResizableSidebar.tsx:80 Event logic handled in an effect no-event-handler
• ⚠️ src/primitives/ResizableSidebar.tsx:175 Effect re-subscribes on a changing callback prefer-use-effect-event
• ⚠️ src/primitives/ResizableSidebar.tsx:176 Effect re-subscribes on a changing callback prefer-use-effect-event
• ⚠️ src/primitives/ResizableSidebar.tsx:177 Effect re-subscribes on a changing callback prefer-use-effect-event
• ⚠️ src/primitives/ResizableSidebar.tsx:192 State only used in handlers rerender-state-only-in-handlers

_{Reviewed by React Doctor for commit 192c8ac.}

[greptile-apps]

_{Reviews (1): Last reviewed commit: "feat(sidebar): hover-peek collapsed nav ..." | Re-trigger Greptile}

[stamphog]

Complex feature with zero reviews that changes a shared primitive (ResizableSidebar) in ways that affect ~8 existing consumers beyond the intended ChannelsSidebar — specifically removing overflow:hidden and changing the closed state from an in-flow clipped element to an off-screen absolutely-positioned z-50 layer. Get a team review to verify no layout regressions in the other sidebar consumers before merging.