# 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 |