Revamp "connections panel" with something entirely different

[srid]

This is a major UI change.

• Inverse tree view, positioned above zettels, as improvement over 'Up' links
• Drop connections panel
• Retain backlinks, but dimmed
• Lift container width, but only for the inverse tree view.
• Is the tree on top bothersome in regards to space (esp. for simple zettelkastens)?
  • [ ] Consider folding it with a linear breadcrumb as accordion?
  • [ ] Or use dual UI (tree vs linear breadcrumbs), picking one from neuron.dhall
  • Scroll past the tree on page load
• Use the folgezettel unicode branch icon (rendered next to zettel link) only in folgezettel links
  • This addresses the removal of 'Down' links
• Figure out if the z-index tree can be improved
• Refactor
• Docs and terminology

[srid]

Here's an example from my own Zettelkasten. Turns out that a "bird's eye" view of a branching backlink tree like this is actually more useful, in regards to quickly gathering the context of a zettel, than the current connections pane.

The challenge however is that for simple sites (like reddit.zettel.page or haskell.zettel.page) this may be an UI overkill. Their branching backlink tree would mostly be a linear path tree, which is basically breadcrumbs. I'm wondering how to consolidate these two requirements.

[srid]

I implemented an automatic scroll to option, that now scrolls past the uplink tree on page load. It seems like this would be sufficient to address the "overkill" case.

[Nadrieril]

I'm worried of the opposite: in a large zettelkasten, this would take a lot of space on top of what we're actually interested about which is the text. I'd rather it wasn't on top.
EDIT: ah, auto-scrolling kind of makes this less painful, but I'm still not a fan

[Nadrieril]

Why not display that tree on the left instead? On mobile it would be in a left panel that opens with a swipe from the edge. The tree would be rotated 90 degrees so that the root nodes are on the left instead of the top.

[srid]

Why not display that tree on the left instead? On mobile it would be in a left panel that opens with a swipe from the edge. The tree would be rotated 90 degrees so that the root nodes are on the left instead of the top.

Got any simple CSS/HTML prototype of it?

[Nadrieril]

Got any simple CSS/HTML prototype of it?

This is not a thing I know how to do, sadly

[srid]

The tree would be rotated 90 degrees so that the root nodes are on the left instead of the top.

I gave this a try, but with this approach the text would be rotated as well, which would make it hard to read with a normal head position.

[Nadrieril]

I imagined the text would stay horizontal; I meant to say that the layout of the tree is rotated. That said, I can imagine that would take a lot of space

[srid]

The following sites (among others) have been updated to use the new design:

• https://haskell.zettel.page/
• https://www.srid.ca/
• https://reddit.zettel.page/

[jaygray0919]

The Google AMP project has a sidebar library, used on many mobile sites.
see: https://amp.dev/documentation/components/amp-sidebar/
It is possible to build a fairly detailed tree to run in sidebar, with open/close selectors.
The code is open source, although it has dependencies that may make it difficult to reuse stand alone.
But we might find other libs with zero dependencies (no jQuery) that could do the work.
IOHO a show/hide sidebar is a better navigation method than 'hierachical breadcrumbs'