Skip to content

Comments

Add view mode toggle for pane sizing in hub-client#17

Open
icarusz wants to merge 1 commit intoquarto-dev:mainfrom
icarusz:experiment/ui-pane-sizing
Open

Add view mode toggle for pane sizing in hub-client#17
icarusz wants to merge 1 commit intoquarto-dev:mainfrom
icarusz:experiment/ui-pane-sizing

Conversation

@icarusz
Copy link

@icarusz icarusz commented Feb 23, 2026

Summary

  • Adds a toggle control (◀ | ▶) in the divider between editor and preview panes
  • Three view modes: Both (50/50 split), Markup (full editor + minimap), Preview (markdown summary + full preview)
  • Arrows follow "divider movement" mental model (◀ moves divider left, ▶ moves divider right)
  • View mode preference persists in localStorage
  • Injected CSS hides TOC in preview to fix narrow container overflow issues

Test plan

  • Toggle between view modes using ◀ | ▶ buttons
  • Verify active button is highlighted
  • Verify preference persists after page reload
  • Check markup mode shows scaled preview minimap on right
  • Check preview mode shows markdown summary on left
  • Verify no dead space/scrollbar issues in preview mode

🤖 Generated with Claude Code

Adds a toggle control (◀ | ▶) in the divider between editor and preview
panes that allows users to switch between three view modes:

- **Both**: 50/50 split (default)
- **Markup**: Full editor + scaled-down preview minimap
- **Preview**: Markdown summary strip + full preview

The arrows follow the "divider movement" mental model:
- ◀ moves divider left → expands preview
- ▶ moves divider right → expands editor
- | returns to equal split

Implementation details:
- ViewModeContext: React context for view mode state with localStorage persistence
- ViewToggleControl: Toggle button component with active state highlighting
- MarkdownSummary: Zoomed-out text view for preview mode minimap
- CSS flexbox layouts for responsive pane sizing
- Injected CSS in preview iframe to hide TOC (which doesn't adapt to narrow containers)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant