mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-26 18:31:34 +01:00
DottaandClaude Opus 4.8
47bebe8bb8
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>
@paperclipai/ui
Published static assets for the Paperclip board UI.
What gets published
The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.
Storybook
Storybook config, stories, and fixtures live under ui/storybook/.
pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook
Typical use
Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.