Skip to content

feat(ui): split / side-by-side page view #426

Description

@amelia751

Summary

Add the ability to view two pages (or two versions of the same page) side by side. This is essential for comparing related content, reviewing changes, and referencing one page while editing another. Standard in VS Code, Notion, and Obsidian (via community plugin).

Proposed behavior

  1. Open in split view — right-click a wiki-link or tree item → "Open in Split View". Or use keyboard shortcut Cmd+\ / Ctrl+\.
  2. The screen splits into two panes, each independently scrollable and navigable.
  3. Each pane has its own breadcrumb, ToC toggle, and edit button.
  4. Panes can be resized by dragging the divider.
  5. Close split view via an × on the secondary pane or Cmd+\ again.
  6. Version compare mode — from the history view, "Compare with current" opens the old version in a split pane alongside the current version.

Implementation notes

  • Prioritize shadcn components. Use shadcn ResizablePanelGroup / ResizablePanel / ResizableHandle — install via npx shadcn@latest add resizable. This wraps react-resizable-panels and provides accessible, draggable split panes out of the box.
  • State: store split-view state in a React context (SplitViewProvider) with {leftPath, rightPath, sizes}.
  • The existing KiwiPage component should work unmodified in each pane — it already accepts a path prop.
  • Persist the split state in sessionStorage so it survives page refreshes.
  • Mobile: disable split view on small screens (< 768px). Show a "Not available on mobile" message if triggered.
  • Consider starting with a simple left/right split. Top/bottom and multi-pane can come later.

Acceptance criteria

  • Right-click → "Open in Split View" works
  • Keyboard shortcut to toggle split view
  • Both panes independently navigable
  • Resizable divider between panes
  • Close button on secondary pane
  • Version compare mode from history view
  • Disabled on mobile viewports

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions