Improve modals

[daniel-michel]

I have noticed some small issues with the picker and other modals that I fixed / still try to fix:

• [x] The MiniEditor in the Filter component does not fill the full width
• [x] No styles for the buttons in modals (Prompt and Confirm) including CSS variables and dark theme
• [x] Buttons in modals can not be activated using enter
• [x] In Firefox when the results in shown in the Filter component is long enough to show a scroll bar, it can be focused using tab. I found this documented in the Mozilla wiki
• [x] When a Prompt or Confirm modal is shown, it can be ignored and the page can be edited (this could be considered fixed, the current behavior with this PR is that clicking outside the modal does not do anything
• [x] When for example using the Search Space command and the focus is on the MiniEditor, tab has to be pressed repeatedly to change focus to the buttons
• [ ] When the focus is no longer on the MiniEditor key events are delegated to the main editor. While it is not possible to type into it, other things are possible (like moving the invisible cursor, indenting/outdenting, using formatting shortcuts, etc.) and tab cannot be used to move focus to the next button

Currently the modals also have a slightly darkened background, because that comes by default with the dialog element, but I can change that back if wanted.

Here is a comparison of how things look:	Before	After

I am open to changing things, if wanted. I also don't have any prior experience with react/preact.

[zefhemel]

I really appreciate this, thanks! Let me know when it's ready to go.

[daniel-michel]

I am almost done now.

I striked through one of the points in the original post because I think it would make more sense to take a look at it separately. The part with the delegation is no longer happening but keyboard shortcuts can still be used like Ctrl+b which is strange behavior, but some other shortcuts like Ctrl+Shift+t should maybe still work when, for example, the page picker is open to quickly switch to the template picker?

And for the last other point that is still open in my original post I am not sure how to proceed: The issue that focus sticks to the text field when pressing tab. I figured out that it is caused here however I am not sure why this was done. I could just get rid of it if there are no other situations where it is required? I also noticed that while the line I linked to is run in both, firefox and chrome, it only causes the focus to actually stick to the text field in chrome, in firefox it does not appear to have any effect. Edit: I think I know the reason, which is that the editor is not correctly focused in chrome and this is fixed by Fix reference to button and mini editor focus in chrome .

[daniel-michel]

I noticed that my previous commit Prevent key events from propagating outside of modals prevented navigating through the results with the arrow keys. I change the mini editor to add the events directly to the div although I am again not sure why it was this way. I hope this is good?

[zefhemel]

Thanks. I'll have a look at this over the next few days.

[zefhemel]

Overall this looks good, but I found one issue (so far): when you use PgDown a few times to go down in a longer filtered list, the selection moves beyond the viewport and you can't seem to get out of it. Previously this worked. Not sure you can see this screen recording (you can't see the keyboard shortcuts unfortunately):

https://github.com/silverbulletmd/silverbullet/assets/59073/dd450b3a-2488-4cf1-9455-90e1845c55d7

Tested this in Chrome on macOS

[daniel-michel]

I noticed that the index clamping when using page down was the wrong way around, but that seems to have been already wrong before. That fixed it for me using Chrome and Firefox on Linux.

I have no clue why the test action on GitHub failed, running deno task test locally does not give me any errors.

[zefhemel]

Tests failed because dependencies went out of date. I think this looks good, let me merge it and we'll fix any bugs from there. Thanks for this!