Task 2 of the collapsible sidebar plan (PAP-10638, plan §4/§5/§6).
Replace ResizableSidebarPane with a SidebarShell that renders two layers:
- an in-flow spacer reserving `reservedWidth` (rail when collapsed, expanded
width otherwise) so content to the right reflows only on pin, never on peek;
- an absolutely-positioned panel (`inset-y-0 left-0`) of `panelWidth` (rail at
rest, expanded while peeking) that overlays content with raised z-index +
shadow-lg + bg-background + 1px border when wider than the spacer.
Unified width function (one code path for every pinned state):
reservedWidth = collapsed ? SIDEBAR_RAIL_WIDTH : expandedWidth
panelWidth = (collapsed && !peeking) ? SIDEBAR_RAIL_WIDTH : expandedWidth
overlay when panelWidth > reservedWidth
SIDEBAR_RAIL_WIDTH=56 (ends just past the icon). The drag resize handle is
disabled while collapsed; only the expanded width is persisted. The existing
`transition-[width] duration-100 ease-out` is reused; `motion-reduce` drops it.
Wire Layout: the shell wraps the whole sidebar column (nav + account row) so
the entire sidebar peeks as one overlay. Peek triggers live in Layout —
onMouseEnter (50ms open), onMouseLeave (120ms debounce close), focus-within
(immediate open), close on route change and Escape; pointer is never trapped.
Context already gates effective `peeking` to desktop + collapsed + hover-capable
pointers. Mobile drawer path untouched.
Icon-alignment guarantee: item padding/gap/icon markup are unchanged; collapse
is a pure pane-width animation + overflow-hidden label clipping. Verified in a
headless browser that the first nav icon's offset is pixel-identical (24,16)
across expanded/collapsed/peek, that peek does not reflow content (spacer stays
56px) while the panel overlaps content with a shadow.
Tests cover width split, rail collapse, overlay-on-peek styling, handle hidden
when collapsed, and the reduced-motion path.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
