Logseq UI: Right Sidebar Width Presets & Keyboard Shortcuts to work in conjunction with T R

FlorianF · October 10, 2023, 7:06am

Hi guys, I have previously filled a feature request for a Toggle Right Wide (TRW) option because I am absolutely fed up with using my mouse to modify the width of the right sidebar to comfortably accommodate some blocks (when I have a larger width block I’d like to be able to use the half-half screen split). ATM, like said above, I manually adjust the width of the sidebar whenever need arise.
But I am still searching for a way to have presets between the three panes (left, center, right), with splits like this:

111 = left sidebar visible, center (always visible), right visible;
010 = left toggled off, center visible, right toggled off;
011 = left toggled off, center visible, right toggled on (visible);
110 = keft toggled on (visible), center and right toggled off (hidden);
NOTE: all above already exist and can be worked with TL, TR;
I would like to have the following added via some CSS/js wizardry, if possible:
012 = left pane hidden, center visible and right sidebar Wide (which would result in a half-half split between the center and the right sidebar) → this would result in a 0%-50%,50% effective spit;
013 = left pane hidden, center visible, right sidebar super wide, in essence a 0%-30%-70% split.

I am mainly interested in the 0-50-50 split and a way to trigger it somehow (I suggested the T R W shortcut).
I have recently heard about “saving UI State” to achieve this.

Does anybody have knowledge of such thing?

I have noticed that CSS is applied live when custom.css is modified and, Logseq being an electron app, I thought that maybe a CSS change that can be triggered by a javascript function? can achieve this…

NOTE: this is related to a Feature Request I opened some time ago: UX Improvement: Toggle Right Wide?

mentaloid · October 10, 2023, 8:11am

You are asking for many things, but each one of them is relatively simple. You may use custom.js to enter code like this one:

document.addEventListener('keyup', (e)=>{    
    if (e.altKey) {
        const rightbar = document.getElementById("right-sidebar")
        if (e.key === "5") {
            rightbar.style.width = "50%"
        }
    }
})

It should be almost self-descriptive that this code registers the shortcut Alt + 5 to set the right sidebar’s width to 50%.

FlorianF · October 10, 2023, 8:46am

Just as it is it’s super helpful, thanks @mentaloid.

I tried my hand with AI helper to no avail :). How woud it go if I want it to be a toggle instead of 1-time thing? I would imagine: 1) record right-sidebar state; 2) if not already 50/50 make it so; 3) if 50/50 then set it to the previous value;

Ultimately I’d like to use Alt+t to sequence between states: depending on where it currently is, make it to the next milestone in a circular loop of states (first state: right-sidebar OFF, second state: right-sidebar at 20%, third state: right-sidebar 50%).

If it’s not too much trouble, of course. Otherwise I am happy with it.

Edit: ok, this is quite acceptable for me:

const rightbar = document.getElementById('right-sidebar');
document.addEventListener('keyup', (e) => {
  if (e.altKey && e.key === 'w') {
    rightbar.style.width = rightbar.style.width === '50%' ? '25%' : '50%';
  }
});

It only toggles between 25% and 50% the right sidebar, but 0% would anyway interfere with toggling the right sidebar off.

mentaloid · October 10, 2023, 9:27am

Multiple values are just one step away, e.g.:

    const old = rightbar.style.width
    if (old === '33%') rightbar.style.width = '50%'
    else if (old === '50%') rightbar.style.width = '67%'
    else if (old === '67%') rightbar.style.width = '33%'
    else rightbar.style.width = '50%'

FlorianF · October 10, 2023, 9:47am

I wouldn’t know how/where to insert the code above and, if I wanted to complicate it, i would aim for a workflow that has a direction (so I know if I am going up or down) and goes from the actual value ( const old = rightbar.style.width), in the mentioned direction, in the following manner:

if old between 0-25% old=25%, if old between 25-50% old =50% etc;
if direction is “up” it goes from old → next larger value; old=next → is old 50%? → direction = ‘down’ so I end up with an sinusoidal pattern (not circular, like I mentioned before): 0-25-50-25-0

But my brain hyrts just thinking of this code…

mentaloid · October 10, 2023, 10:37am

Try this:

const rightbar = document.getElementById('right-sidebar');
document.addEventListener('keyup', (e) => {
  if (e.altKey && e.key === 'w') {
    const val = Number(rightbar.style.width.slice(0, -1)) + (logseq.rbstep ||= 25);
    if (val <= 0) {
      rightbar.style.width = "0%";
      logseq.rbstep = 25;
    }
    else if (val >= 50) {
      rightbar.style.width = "50%";
      logseq.rbstep = -25;
    }
    else {
      rightbar.style.width = val + "%";
    }
  }
});

FlorianF · October 10, 2023, 11:49am

Works wonderfully, if only the 25% → 0% would mean the same thing as Toggle Right (TR) (=Toggle Off) and T R again wold mean 25% again.
With this code, if I don’t see the sidebar, I can assume I hit T R to toggle it off and, if I Toggle it again with T R, it shows nothing, as it’s 0% …

Is it maybe possible to have these: 50 - 25 -TR - TR - 25 - 50? And, instead of going to 0% the Alt+w to simulate T R keys or call the same code that T R is calling?

Edit: even if I can completely replace T R with the code above, T R still allows going quickly from 50% to Right Sidebar hidden and back … that’s why maybe having the 25% and 50% might be more useful to have separately from the Toggling the Sidebar on and off…

Edit2: If I think again hitting ALT+w+w to go 0% and again to 50% is totally acceptable, in which case I can completely disable the T R (or disregard, for that matter);

mentaloid · October 10, 2023, 2:29pm

Try this:

const rightbar = document.getElementById('right-sidebar');
document.addEventListener('keyup', (e) => {
  if (e.altKey && e.key === 'w') {
    if (rightbar.classList.contains("closed")) {
      logseq.api.set_right_sidebar_visible(true);
      return;
    }

    const val = Number(rightbar.style.width.slice(0, -1)) + (logseq.rbstep ||= 25);
    if (val <= 0) {
      logseq.api.set_right_sidebar_visible(false);
      logseq.rbstep = 25;
    } else if (val >= 50) {
      rightbar.style.width = "50%";
      logseq.rbstep = -25;
    } else {
      rightbar.style.width = val + "%";
    }
  }
});

FlorianF · October 10, 2023, 7:51pm

the problem is that, if I hide the right sidebar with T R, it is not brought up when I do an Alt+w. I have to bring the sidebar back on screen with Toggle Right (T R) before I can use the Alt+w. They are completely separate workflows.

I appreciate your time and effort but, unless we can simulate the Toggle Right OFF when going from 25% downwards (which I suppose the code should do but I can’t tell why it’s not doing it for me…) and to simulate Toggle Right ON when going from Toggled OFF to 25%, these workflows will remain separate.

Or, I can completely disable the T R and forget about it.

mentaloid · October 10, 2023, 8:02pm

It works to me. Are you sure that you tried the latest code? It doesn’t simulate, it uses directly Logseq’s API.

FlorianF · October 10, 2023, 8:51pm

Hmm, I reloaded Logseq again and it works. I maybe missed to reload Logseq, although I thought I have done so

I am impressed.

Also I found a “thing”: if I resize manually the Right Sidebar, the code substracts 25 from that value and it can end up a too narrow of a sidebar. Next iteration it will be 25, 50, etc, but manually altering its wifth will mess up a bit the next hop.

The “-25” can mess up things at times because it’s not a “hard-coded” value. I would check the actual size (if resized manually) and substract only the value that gets me to the 25 mark … sort of…

Edit: ok, I did many iterations playing with manual modifications of the right sidebar width while still doing Alt+w and the only time when it messes up is when the direction is downwards, it’s at 25% and you resize it manually to be a bit wider than 25%. The next Alt+w it will go from, say, 35%, to 35-25=10%, which is unusable by all standards. It then goes to toggled off and, when triggered again, it goes to 10% before jumping to 25% and doing a correct cycle this time.

mentaloid · October 10, 2023, 9:53pm

Try this:

const rightbar = document.getElementById('right-sidebar');
document.addEventListener('keyup', (e) => {
  if (e.altKey && e.key === 'w') {
    if (rightbar.classList.contains("closed")) {
      logseq.api.set_right_sidebar_visible(true);
      rightbar.style.width = "25%";
      logseq.rbstep = 25;
      return;
    }

    const val = Math.round(Number(rightbar.style.width.slice(0, -1)) / 25) * 25 + (logseq.rbstep ||= 25);
    if (val <= 0) {
      logseq.api.set_right_sidebar_visible(false);
      logseq.rbstep = 25;
    } else if (val >= 50) {
      rightbar.style.width = "50%";
      logseq.rbstep = -25;
    } else {
      rightbar.style.width = val + "%";
    }
  }
});

FlorianF · October 11, 2023, 8:08am

Take the following scenario:

you go from 50% to 25% then to Hidden via TR;
you use alt+w to show the right sidebar and it goes to 25%;
you alt+w again to widen it to 50%;
it just goes back to hidden;

This is maybe because, even if you have set the logseq.rbstep = -25; in the else branch, hiding it via T R will reset the logseq.rbstep = 25;.

mentaloid · October 11, 2023, 8:19am

I’m afraid that the answer is like earlier: It works to me, try resaving custom.js and reloading Logseq.

Maybe you refer to a variation, where the 2nd step is again with t r. In this case the 3rd step Alt + w will hide it again, which I think is the expected behavior, i.e. the two consecutive t rs to negate each-other.

FlorianF · October 11, 2023, 8:42am

Ok, I failed to update on the code I use:

const rightbar = document.getElementById('right-sidebar');
document.addEventListener('keyup', (e) => {
  if (e.altKey && e.key === 'w') {
    if (rightbar.classList.contains("closed")) {
      logseq.api.set_right_sidebar_visible(true);
      // rightbar.style.width = "25%";
      // logseq.rbstep = 25;
      logseq.rbstep ??= 25;
      return;
    }
    const val = Math.round(Number(rightbar.style.width.slice(0, -1)) / 25) * 25 + (logseq.rbstep ||= 25);
    if (val <= 0) {
      logseq.api.set_right_sidebar_visible(false);
      logseq.rbstep = 25;
    } else if (val >= 50) {
      rightbar.style.width = "50%";
      logseq.rbstep = -25;
    } else {
      rightbar.style.width = val + "%";
    }
  }
});

I basically removed the rightbar.style.width = "25%"; from the first IF because I want to get back to the same right sidebar width - with Alt+w - after I toggled it off with T R just as you would have it with using T R again.
I have also used logseq.rbstep ??= 25; instead of logseq.rbstep = 25; so that if logseq.rbstep already has a value in it, don’t change to 25, keep it that value…

mentaloid · October 11, 2023, 9:07am

Each version of the code makes some assumptions. Every time you change the requirements, it’s not enough to adjust some code, should also revisit those assumptions. You can keep experimenting with the code, but every change should be checked for compliance to those assumptions, otherwise the behavior becomes unpredictable. The user’s intentions are invisible to the machine. Likewise, the code for t r is unaware of rbstep.

Given the above, I would follow your earlier suggestion to separate the workflows.

Siferiax · October 11, 2023, 4:18pm

Neat! I must wonder which version I’d like to use, but plenty of variations and ideas here. Thank you for your efforts!

FlorianF · October 12, 2023, 6:39am

Unfortunately for me I am no software programmer, nor I know anything about javascript. I have some experience with scripts but the actual programming writing code skills fail me.

I have come to the following version, which works in 95% of combinations between alt+w and T R:

const rightbar = document.getElementById('right-sidebar');
dir ="+"; logseq.rbstep = 0; rightbar.style.width = "25%"; logseq.api.set_right_sidebar_visible(false);

document.addEventListener('keyup', (e) => {	
  if (e.altKey && e.key === 'w') {
    if (rightbar.classList.contains("closed")) {
      logseq.api.set_right_sidebar_visible(true);
      //logseq.rbstep ??= 25;
	  dir = rightbar.style.width === "50%" ? "-" : "+";
      return;
    }
	logseq.rbstep = dir === "" || dir === "+" ? 25 : -25;
    val = Math.round(Number(rightbar.style.width.slice(0, -1)) / 25) * 25 + (logseq.rbstep ||= 25);
    
	if (val <= 0) {
      logseq.api.set_right_sidebar_visible(false);
      dir = "+";
    } else if (val > 0 && val <= 25) {
      rightbar.style.width = "25%";
    } else if (val >= 25) {
      rightbar.style.width = "50%";
      dir = "-";
    } else {
      rightbar.style.width = val + "%";
    }
  }
});

There might be redundant or unneeded or simply not elegand code in there, I don’t know. But it works even in conjunction of T R (meaning: ig you are half-half split and you hit T R if ges not visible and, instead of using again T R to have the right sidebar in the same position as it was when you hit T R, you canstill use Alt+w to get the width before, instead of having the right sidebar start again from 25%).

For this I added a “direction” variable. I used it to add another width. the 75%, as Logseq apparently lets the right sidebar go a bit beyond 50-50, somewhere at ~70%, which is hard coded I believe but I have ultimately considered it unnecessary for most situations so I removed the code.

There is a single situation where this function doesn’t know the direction the user intends, and that is when the following sequence is performed (starting downwards on the “-” direction, from 50-50 split):
50width (alt+w, direction "-") -> 25width (T R, direction "-") -> Closed (T R, direction is still "-") -> Visible/25% (Alt+w, direction is still "-") -> Closed again (because the direction is still "-");

So when the user hits T R (from 25% width), the right sidebar is toggled off and, coming from 50->25->0 the direction is -correctly- “-”, but, when the user uses T R again to toggle it on, the new intention is to go again on the “+” direction via 25->50 while the program doesn’t know this because for this function "T R"s are invisible.

I see one solution there but it will take me days to get right with no JS skills, namely to have a variable that knows/records if this function changed the width and to compare it to the actual width and, if they differ, it means T R was used and, for that particular situation it would change dir from “-” to “+”.

I’ll post here anything else if I am able to achieve that.