Skip to content

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

Closed
icarusz wants to merge 1 commit into
quarto-dev:mainfrom
icarusz:experiment/ui-pane-sizing
Closed

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

Conversation

@icarusz
Copy link
Copy Markdown
Member

@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>
@cscheid cscheid mentioned this pull request Feb 24, 2026
@cscheid
Copy link
Copy Markdown
Member

cscheid commented Feb 24, 2026

Closing in favor of #19 which I've merged with main.

@cscheid cscheid closed this Feb 24, 2026
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.

2 participants