From 291b69cc276356bbfe190819b2b29c71417098c6 Mon Sep 17 00:00:00 2001 From: Test User Date: Wed, 25 Feb 2026 14:50:24 -0700 Subject: [PATCH 01/14] docs: add orchestration plan and spec for responsive UI enhancements 5-increment plan covering window resize behavior, auto-collapse sidebars, global zoom, right sidebar resize handle, and macOS window arrangement. Co-Authored-By: Claude Opus 4.6 --- ORCHESTRATE-responsive-ui.md | 291 ++++++++++++++++++++ docs/specs/SPEC-responsive-ui-2026-02-25.md | 221 +++++++++++++++ 2 files changed, 512 insertions(+) create mode 100644 ORCHESTRATE-responsive-ui.md create mode 100644 docs/specs/SPEC-responsive-ui-2026-02-25.md diff --git a/ORCHESTRATE-responsive-ui.md b/ORCHESTRATE-responsive-ui.md new file mode 100644 index 00000000..ecd2b892 --- /dev/null +++ b/ORCHESTRATE-responsive-ui.md @@ -0,0 +1,291 @@ +# ORCHESTRATE: Responsive UI Enhancements + +> **Feature branch:** `feature/responsive-ui` +> **Base:** `dev` (v1.21.0) +> **Target version:** v1.22.0 +> **Estimated effort:** 22-32 hours across 5 increments + +--- + +## Overview + +Make Scribe's UI responsive to window resizing: auto-collapse sidebars, minimum window size, global zoom (⌘+/⌘-), window position memory, right sidebar resize handle, smooth animations, and full macOS window arrangement support (Stage Manager, split-screen, Sequoia snap zones). + +--- + +## Increment 1: Foundation — Window Config + Memory + Transitions (~4-6h) + +### Tasks + +1. **Minimum window size** — `src-tauri/tauri.conf.json` + - Add `"minWidth": 900, "minHeight": 600` + - Add `"hiddenTitle": true` (removes redundant title text, we have breadcrumb) + - Keep `"visible": true` initially (change to `false` after plugin works) + +2. **Window state plugin** — Install `tauri-plugin-window-state` + ```bash + cd src-tauri && cargo add tauri-plugin-window-state + npm install @tauri-apps/plugin-window-state + ``` + - Register in `src-tauri/src/lib.rs`: + ```rust + .plugin(tauri_plugin_window_state::Builder::default().build()) + ``` + - Add permissions in `src-tauri/capabilities/default.json`: + ```json + "window-state:default" + ``` + - After verified working, set `"visible": false` in tauri.conf.json to prevent flash + +3. **CSS transition infrastructure** — `src/renderer/src/index.css` + - Add to `.mission-sidebar`: + ```css + transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); + ``` + - Add `.resizing` class that sets `transition: none` + - Extend `@media (prefers-reduced-motion: reduce)` to cover new transitions + - Add right sidebar width transition (match pattern) + +4. **macOS verification** — Manual testing + - Stage Manager: drag window into stage groups + - Split-screen: hold green traffic light, select tile position + - Sequoia snap zones: drag to screen edges + - ⌃⌘← / ⌃⌘→ keyboard tiling + +### Files to Modify +- `src-tauri/tauri.conf.json` — minWidth, minHeight, hiddenTitle, visible +- `src-tauri/Cargo.toml` — add window-state plugin +- `src-tauri/src/lib.rs` — register plugin +- `src-tauri/capabilities/default.json` — add plugin permissions +- `package.json` — add @tauri-apps/plugin-window-state +- `src/renderer/src/index.css` — transitions + +### Tests (~8 new) +- Config snapshot test for minWidth/minHeight +- CSS transition class assertions +- Window state plugin registration (mock) +- Reduced-motion class verification + +### Commit: `feat(window): add minimum size, position memory, and transition infrastructure` + +--- + +## Increment 2: Responsive Breakpoints — Auto-Collapse Sidebars (~6-8h) + +### Tasks + +1. **Create `useResponsiveLayout` hook** — New file: `src/renderer/src/hooks/useResponsiveLayout.ts` + ```typescript + const MIN_EDITOR_WIDTH = 500 + const ICON_WIDTH = 48 + + // Debounced window resize listener (150ms) + // Calculate: available = windowWidth - leftWidth - rightWidth + // Collapse priority: right sidebar first, then left + // Track userOverride to not fight manual re-expansion + // Re-expand when window grows back + ``` + +2. **Add auto-collapse state** — `src/renderer/src/store/useAppViewStore.ts` + ```typescript + autoCollapsedLeft: boolean // true when collapsed by resize, not user + autoCollapsedRight: boolean + setAutoCollapsedLeft: (v: boolean) => void + setAutoCollapsedRight: (v: boolean) => void + ``` + +3. **Wire into App.tsx** — `src/renderer/src/App.tsx` + - Call `useResponsiveLayout({ leftWidth, rightWidth, onCollapseLeft, onCollapseRight, onExpandLeft, onExpandRight })` + - Keep separate from existing auto-collapse-on-typing (focus-based) + - On collapse: set `autoCollapsed*` flag + - On user manual expand: clear `autoCollapsed*` flag, set `userOverride` + +### Collapse Priority Algorithm +``` +When window resizes smaller: + 1. If editor < 500px and right sidebar expanded → collapse right to 48px icons + 2. If still < 500px and left sidebar expanded → collapse left to 48px icons + 3. If still < 500px and right sidebar at 48px → hide right completely (0px) + +When window resizes larger: + 1. If autoCollapsedLeft and room for left sidebar → re-expand left + 2. If autoCollapsedRight and room for right sidebar → re-expand right + 3. Never re-expand if user manually collapsed (userOverride check) +``` + +### Files to Modify +- New: `src/renderer/src/hooks/useResponsiveLayout.ts` +- `src/renderer/src/store/useAppViewStore.ts` — auto-collapse flags +- `src/renderer/src/App.tsx` — hook integration + +### Tests (~10-12 new) +- Hook triggers collapse at correct threshold +- Right collapses before left (priority) +- User override prevents re-collapse +- Window grow re-expands auto-collapsed +- Both sidebars collapsed = editor fills space +- Edge case: start at narrow width + +### Commit: `feat(layout): auto-collapse sidebars on window resize` + +--- + +## Increment 3: Right Sidebar Parity — Resize Handle + Width Constants (~5-7h) + +### Tasks + +1. **Add right sidebar width constants** — `src/renderer/src/store/useAppViewStore.ts` + ```typescript + export const RIGHT_SIDEBAR_WIDTHS = { + icon: 48, + expanded: { default: 320, min: 250, max: 600 } + } + ``` + +2. **Replace inline resize handler with ResizeHandle** — `src/renderer/src/App.tsx` + - Remove `isResizingRight` state and the `useEffect` mousedown/mousemove/mouseup handler (~lines 635-654) + - Add `` component before right sidebar `