Files

Michael Chihlas 89d343d49a chore: archive 11 completed plan documents

Move completed design/implementation docs from docs/plans/ to docs/archive/
to keep the plans folder focused on active and future work.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-10 10:51:21 -05:00

2.2 KiB

Raw Permalink Blame History

Scratchpad Floating Overlay Design

Date: 2026-02-04 Status: Approved

Problem

The scratchpad is a full-height sidebar that pushes main content left when open, reducing the available width for tree navigation. On smaller screens this is particularly disruptive. It should be a floating overlay that doesn't affect layout.

Design

Component: ScratchpadSidebar.tsx

Single component with two visual states, both using position: fixed.

Closed — floating button:

Fixed to viewport right edge, vertically centered
right: 0; top: 50%; transform: translateY(-50%); z-index: 40
Rounded left corners, flat right edge (rounded-l-md)
StickyNote icon
Amber dot (absolute positioned) when unsaved changes exist

Open — overlay panel:

Fixed to viewport right edge, vertically centered
right: 0; top: 50%; transform: translateY(-50%); z-index: 40
Width: 420px, height: 55vh
Rounded left corners, flat right edge (rounded-l-lg)
Shadow (shadow-xl) and left border for depth
Slide-in animation: translateX(100%) → translateX(0), 200ms ease-out
No backdrop — clicking outside does NOT close it

Panel contents (unchanged):

Header: title, preview toggle (Eye/Pencil), close button (X)
Body: textarea or markdown preview, scrollable
Footer: save status indicator

Keyboard Shortcut

Ctrl+/ toggles open/closed. Handled via useEffect keydown listener inside the component.

TreeNavigationPage.tsx

Outer wrapper no longer uses flex for sidebar layout
Main content takes full width
ScratchpadSidebar renders in same DOM position (fixed positioning makes it layout-independent)

Preserved Behavior

Auto-save with 1000ms debounce
Markdown preview toggle
Save status indicators (Saving.../Saved/Unsaved changes)
localStorage persistence for open/closed state (key: scratchpad-collapsed)
beforeunload warning for unsaved changes
Session ID reset on navigation

Files Changed

File	Change
`frontend/src/components/session/ScratchpadSidebar.tsx`	Refactor to fixed-position floating overlay
`frontend/src/pages/TreeNavigationPage.tsx`	Remove flex sidebar layout

2.2 KiB Raw Permalink Blame History