89d343d49a
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>
64 lines
2.2 KiB
Markdown
64 lines
2.2 KiB
Markdown
# 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 |
|