feat: responsive UI enhancements (v1.22.0)#53
Merged
Conversation
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 <noreply@anthropic.com>
…structure Install tauri-plugin-window-state for persisting window geometry across restarts. Set minimum window dimensions (900x600), enable hiddenTitle for cleaner title bar, and add CSS transition infrastructure for both sidebars including a .resizing class to disable transitions during drag. All new transitions respect prefers-reduced-motion. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add useResponsiveLayout hook with debounced resize listener that auto-collapses sidebars when the editor drops below 500px. Right sidebar collapses first, then left. Re-expands when window grows back, respecting user overrides to avoid fighting manual toggles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace inline right sidebar resize handler with the shared ResizeHandle component for consistent behavior, ARIA attributes, and double-click reset. Extract RIGHT_SIDEBAR_WIDTHS constants (min: 250, default: 320, max: 600) and use them for clamping and collapsed icon width. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add useGlobalZoom hook providing ⌘+/⌘- zoom (0.5x–2.0x range, 10% steps). Persists to localStorage, applies via root font-size scaling for rem-compatible zooming. Adds a zoom indicator in the editor header that appears when zoom ≠ 100% and resets on click. WCAG 1.4.4 compliant. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add touch event handlers (touchstart/touchmove/touchend) to ResizeHandle for trackpad and touch-screen resize. Add onDragStateChange callback so parent sidebars apply .resizing class during drag, disabling CSS transitions for instant feedback. Complete reduced-motion audit covering zoom indicator and all new transitions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Update SPEC to implemented status, add responsive layout system section to ARCHITECTURE.md with Mermaid data flow diagram, and document new hooks (useResponsiveLayout, useGlobalZoom) and ResizeHandle in COMPONENTS.md. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bump version (1.20.0 → 1.22.0) and test count (2,280 → 2,322) across 18 files. Add Responsive Layout section to features guide, Zoom shortcuts to shortcuts guide, v1.22.0 entry to reference changelog, and responsive UI status to CLAUDE.md. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix stale rightSidebarWidth in onResizeEnd via useRef (closure bug)
- Remove as any cast on expandSmartIcon (type was already correct)
- Delete ORCHESTRATE-responsive-ui.md (working artifact, not for dev)
- Fix package-lock.json version drift (1.21.0 → 1.22.0)
- Remove unused autoCollapsedLeft/Right from Zustand store (tracked in hook refs)
- Remove redundant aria-valuenow={undefined} from ResizeHandle
- Update docs to reflect hook-internal state tracking
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Data-Wise
pushed a commit
that referenced
this pull request
Feb 26, 2026
npm version only bumped package.json — tauri.conf.json and Cargo.toml were still at 1.21.0. Also resolves merge conflict in .STATUS from PR #53 merge and archives completed test-file-errors doc. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
tauri-plugin-window-stateuseResponsiveLayouthook)useGlobalZoomhook).resizingCSS class during drag, reduced-motion auditNew files
src/renderer/src/hooks/useResponsiveLayout.tssrc/renderer/src/hooks/useGlobalZoom.tsResponsiveFoundation,useResponsiveLayout,RightSidebarResize,useGlobalZoom,ResizeHandleTouch)Modified
App.tsx— integrated hooks, ResizeHandle, zoom indicatorResizeHandle.tsx— touch events,onDragStateChangecallback,useReffor stale closuresuseAppViewStore.ts—RIGHT_SIDEBAR_WIDTHSconstants,autoCollapsedLeft/Rightstateindex.css—.resizingclass,.zoom-indicator, reduced-motion rulestauri.conf.json—minWidth/minHeight,hiddenTitleCargo.toml/lib.rs—tauri-plugin-window-stateTest plan
🤖 Generated with Claude Code