Sidebar resizer 2: resize your sidebar by dragging

[BurningTreeC]

This PR is a follow-up to #8627
In comparison to the previous PR the resizer has moved a bit more versus the story river.
That's why here the eventcatcher divs are placed within the tc-story-river which in my opinion is the best way to do this.
Therefor I needed to make space between the story-river and the sidebar so that the sidebar doesn't hide the sidebar-resizer. I took 22px from the sidebar width (by also removing 22px from its padding-left - so you don't see this change).

Please test this PR 🙂

What's not handled at the moment is the story-right setting.
I'm not sure what it should do in this setting. But I have the options to integrate it.

Do you also think it's better doing it this way?

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

Confirmed: BurningTreeC has already signed the Contributor License Agreement (see contributing.md)

[BurningTreeC]

Ok, I've seen that this PR has some issues I forgot fixing 😁
I'll figure it out!

[BurningTreeC]

@Jermolene @pmario this is now ready to have a look at
From the performance side if you open many tiddlers for editing you see a drastic performance loss
That asks for something like a <$refresh-blocker> widget that can be used to block refresh of parts of the UI and stylesheets if the tiddler $:/state/sidebar/dimensions changes and the tiddler $:/state/sidebar/resizing exists
I've added such a refresh-blocker to the TiddlyFlex layout and could cut refresh times drastically

[kookma]

@BurningTreeC
Tested on Edge 128/Windows 11, I see a gap between the left border of sidebar and right border of tiddler. Is it intentional? Of course I do not expect to have two borders overlapping.

[BurningTreeC]

Testes on Edge 128/Windows 11, I see a gap between the left border of sidebar and right border of tiddler. Is it intentional? Of course I do not expect to have two borders overlapping.

Hi @kookma this is the grip to drag, it shows visually where we can drag something, it's fully intentional.
There's nothing overlapping here...
How would you design it?

[BurningTreeC]

Or, @kookma , do you mean the invisible gap between the story river and the sidebar? It's 22px wide ... I believe I can change that so that there's no gap but I'm not that sure

[kookma]

It's 22px wide ... I believe I can change that so that there's no gap but I'm not that sure

Okay, this is by design! I think it is fine now!