Skip to content

Block zoom / focus mode with breadcrumb #5

@avelino

Description

@avelino

Summary

Implement "zoom in" on a block to see only that block and its children, hiding everything else. This is one of Roam's most used navigation features for working with deep hierarchies.

Roam web behavior: Clicking a block's bullet zooms into it. The page shows only that block's subtree with a breadcrumb trail at the top. Click any breadcrumb segment to zoom out to that level.

TUI adaptation: Use a dedicated keybinding (e.g., z in normal mode for vim) to zoom into the selected block. Breadcrumb displayed in the header area. A "zoom out" / "back" key (e.g., Backspace or Z) returns to parent level. This replaces mouse-click-on-bullet interaction.

Implementation hints

State

  • src/app.rs:70-91 — add zoom context to AppState:
    pub zoom_path: Vec<ZoomLevel>, // stack of { block_uid, block_text_preview }
  • When zoom_path is non-empty, rendering should filter to only show the zoomed block's children
  • Empty zoom_path = normal full view

Block resolution

  • src/app.rs:158resolve_block_at_index() maps flat index to block info
  • When zoomed, the flatten logic in ui/main_area.rs should start from the zoomed block instead of root
  • src/ui/main_area.rs:277-295 — the flatten_blocks() function needs a "root block" parameter

Breadcrumb rendering

  • src/ui/header.rs — extend header to show breadcrumb when zoomed:
    Graph: my-graph > Daily Note > Parent Block > Current Block
  • Each segment is the first ~20 chars of the block text (truncated)
  • In the web UI this is clickable; in TUI we navigate with the zoom-out key

Navigation

  • Zoom in: sets zoom_path.push(current_block), re-renders from that subtree
  • Zoom out: zoom_path.pop(), returns to parent view
  • Multiple zoom levels stack (zoom into child of zoomed block)
  • Going "all the way out" clears zoom_path entirely

Keybindings

  • src/keys/preset.rs — add new actions: ZoomIn, ZoomOut
  • vim: z (zoom in), Z or Backspace (zoom out)
  • emacs: Ctrl+] / Ctrl+[
  • vscode: Enter (zoom in), Backspace (zoom out)

Acceptance criteria

  • Keybinding zooms into selected block showing only its subtree
  • Breadcrumb trail in header shows zoom path
  • Zoom out returns to parent level
  • Multiple zoom levels work (zoom into child of zoomed block)
  • Selection resets to first block when zooming in/out
  • Edit, create, delete, indent/dedent all work while zoomed

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: navigationPage/block navigation and traversalarea: renderingUI rendering, markdown, syntax highlightingenhancementNew feature or requestpriority: highCore feature, high user impactroam parityFeature that exists in Roam web, ported to TUI

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions