Use case or problem:
- improving context awareness in hierarchically structured document - see higher levels when scrolling through long nested portion of tree structure.
- integrating outline into main pane to utilize small screen space
- faster navigation
- This can be applied to any tree-like structure
- note content with headings/chapters, indented lists
- backlinks and search results grouped by file
- folders in file Explorer
- nested tags
Display vertical context (parent blocks) for displayed portion of long hierarchically structured document.
It works for example in RemNote.
It will be best explained/illustrated if you play with the example:
- Open the link https://www.remnote.io/documentation
- If on large screen, resize browser window height to be low (at most half of document height).
- Start scrolling e.g. by dragging the scrollbar
- While scrolling, watch how top part of the window shows parent blocks (headers and less nested bullets) for displayed content.
In contrast with that implementation, I would like it to be smooth instead of sudden appearance / disappearance of blocks. And the content should always be displayed just once, not duplicitly as can be sometimes seen in RemNote.
It should be well integrated with folding.
Scrolling should stack appropriate parent blocks at the top just like horizontal scrolling in Andy mode stacks panes on the left.
Font-size of stacked headers can be reduced to avoid space inefficient stack of huge H1, H2, … H6 headers. When headers are short, they can be stacked inline like breadcrumb, rather than one under each other, to save even more screen space.
Clicking on stacked block should scroll to it like clicking on stacked bar does in Andy mode.
Automatic stacking also at the bottom (to avoid need for manual folding) for faster navigation within document to be considered later.
From long document …
▾ # title ▾ ## first heading some text ▾ ## second heading ▸ - root1 … ▾ - root2 ▾ - branch1 - b1a - b1b ▾ - branch2 ▾ - branch3 - leaf1 - leaf2 - leaf3 ▾ - branch4 - b4a ▾ - c ▾ - c1 - c1a - c1b ▾ - c2 - c2a
… when scrolling to “leaf2”, in small window we would see …
▾ # title … … ## second heading … … - root2 … ....… - branch3 … … - leaf2 - leaf3 ▾ - branch4 - a4a ▾ c
… instead of
- leaf2 - leaf3 ▾ - branch4 - b4a ▾ - c ▾ - c1 - c1a - c1b ▾ - c2
Related feature requests and references:
- complementary, to be compatible with:
- Filtering in file content:
- Andy mode
- vertical Andy mode
- Typewriter Scrolling:
- Hotkey "jump to previous caret position"
- Show hierarchical context (parent block/header) for each backlink (mention)
- Hotkeys for “Fold one more level” and “Unfold one more level”
- Document Spanning
- Ability to zoom in on bullets (clicking on stacked header would “zoom-in” / focus by scrolling to to it, although still showing adjacent items when there is available screen space.)
- https://getbootstrap.com/docs/5.0/components/accordion/ (a bit similar behavior. Maybe useful for during implementation.)
keywords: breadcrumb, expanding, folding, hierarchy, minimap, nesting, outliner, outlining, overview, scroll, slider, stacking, table of contents, TOC