Idea for a configurable side-panel

[zeus-web]

One of the small things on my wishlist for Silverbullet is some kind of configurable side-panel.
Just like the very nice and useful treeview plug, however I want to show configurable items and / or buttons and links or tag-lists in such panel.
So from my point of view, it would be ideal to have a normal page to be displayed in something just like the treeview panel.

In short, what I would want:

• configure one (or even multiple) panes just like treeview
• functions to show/hide these panels
• attach / configure a “normal” page to (each of) the panel(s)
• would be nice to have a place option (left, right, modal) just like treeview

I already tried to understand how treeview creates such a panel, in order to copy the code and alter it to my needs.
But to be honest, I had to give up - I have no idea due to lack of background knowledge

So maybe someone with more knowledge can try to implement that - or try to help me how to understand and how to begin with that… I have only beginner knowledge in programming, CSS and JS, though…

Thanks a lot!

[Maarrk (Marek Ł.)]

I’m glad that you’re interested in that as well. There is an issue with some attempts at it and a lot of relevant information after my attempts some time ago: Plug idea: Side page · Issue #245 · silverbulletmd/silverbullet · GitHub

I can’t really take this on at the moment, but maybe this can help you

[justyns]

I’m also interested in something like this, and made a similar attempt here:

Scratch buffer using space script

I used to be a heavy emacs/org-mode user, and something I miss from time to time is an easy way to open a scratch buffer for temporary notes. Silverbullet doesn’t support multiple panes/split windows/etc, but does have “panels” that I was curious if I could abuse. Originally I was going to make a side panel that just has a simple text box, but then I realized I could make that side panel have an iframe to silverbullet itself. Since silverbullet is pretty minimal , we just have to hide the too…

It’s not exactly what you want, but it can be used to open another “pane” with any note, not just one named scratch like what I used.

[zeus-web]

Thanks a lot for this hint!
At least that comes pretty near what I`m trying to get. Not as nice as the treeview pane (e.g. size not as changeable) but seems to be a pretty simple point to start own experiments.
As your code is so short, there’s a little chance, that I understand what it is doing (in opposite to the treeview plug…)

[zeus-web]

Just a small status:
I got Justyns “Scratch buffer” solution to work. In fact, it does pretty much what I want.

Some small caveats:

• On first open of the scratchpage it opens with treeview included, but treeview is closable
• For me the scratch panel is too big, it takes half of the windows space. I’d prefer to have it 1/4 maximum. I fiddled a bit with some CSS values, but could not find the correct one…
• As justyns mentioned, the scratchpage is in fact a whole silverbullet, but I can live with that
• nice to have: making the new page write protected within the new pane to prevent changing the links by accident

Anyone knows how / where to set the size of the panels?
I want e.g. from left to right:

• 1/4 treeview (already about the preferred size)
• 1/2 editor
• 1/4 scratchpanel (or “my” linkpage)

[zeus-web]

Aargh another (big) caveat:
I want to have a tag list in my side-panel. So far so good -
but if I click on a tag-link in the sidepane, the new page opens in the side-panel instead of the main panel…
That renders this solution nearly useless for my purpose

Does anybody has an idea how to tell the script to open links in the main-panel?

Thanks

[SH3LLco (SH3LL)]

maybe you could make it open in a new tab instead? no clue, im not a dev lol

[dklawren (David Lawrence)]

One thing I am doing that might be another option is that I use Sidebar extension in Firefox.

Open in Sidebar – Get this Extension for 🦊 Firefox (en-US)

Then I load a specific page in the sidebar panel which has all my recent pages, and other shortcuts. And then by control-clicking links there which opens up a new tab next to the panel. Like other options it is loading multiple copies of Silverbullet.

[janssen-io (Stan)]

The panels are relatively sized according to the flex grow property (first number of the flex shorthand property).

The main panel is 2 by default. So if you set the left hand side to 1 and the right hand side to 1 then they are both 1/4 of the width but only when they are both open. If you close one, the other automatically ‘grows’ to 1/3.

Not much to do about this, unless you hook into the opening and closing of the panels and dynamically change the CSS property.

I’m using editor.showPanel to open a page on the right hand side: silverbullet-libraries/Library/OpenPageInSidebar/commands.md at b9ca06032d5c7044eda0ea190a8b81a0c63704f0 · janssen-io/silverbullet-libraries · GitHub

The second parameter (1) in this case is set as the flex-grow property of the pane.

Still need to figure out how to keep the treeview closed and make it readonly. I was hoping to be inspired by the ‘ForceROMode’/‘Force Read Only Mode’ button that appears on mobile, but that seems to be embedded in the app instead of sending a command.