Tackle page headers and Apply/Done on bottom

[EnnuiL]

This attempts to tackle the following things:

• Headers for each page in the to-be-unified options list
• The moving of the Apply/Done buttons to the bottom

To do so, few tricks were done, such as Z offsets for tooltips in order to guarantee that anything underneath it is somewhat readable, as well as the adaptation of the layout in order to accommodate the moved buttons in case of a cramped screen size.

Here's it in action (I hope a video won't be much of a problem): Showcase

While there are other things to do, I'd rather cut progress into reviewable pieces than effectively doing an "Ennui's Sodium Config Screen" mod in form of a PR

[douira]

First of all, thanks for the contribution and the fact that you plan on doing more!

I like the design of the header and as you say it's a good first step on the way to a unified options list. Eventually the plan is to move the search bar to encompass the entire width of the UI with the donation button fluidly attached to the end of the search bar's width. There's logic to resize the donation button automatically based on the available space, which seems to be disabled here, but that's fine if the donation button is going to be integrated into the search bar eventually. I'm not sure whether we even want the donation button to resize if it's part of the search bar. I did create a little coffee cup icon for the small variant of the donation button, but maybe that'll end up getting integrated in some other way.

The actions buttons that stack vertically as necessary and possible is a nice idea, though I think they shouldn't be visible behind the tooltip because it reduces the readability of the text in the tooltip substantially. I'm not sure though if hiding them behind the tooltip would make the buttons harder to navigate to when the tooltip is open.

The code looks good to me and I'll merge it soon if there's no other concerns.

[EnnuiL]

I like the design of the header and as you say it's a good first step on the way to a unified options list. Eventually the plan is to move the search bar to encompass the entire width of the UI with the donation button fluidly attached to the end of the search bar's width. There's logic to resize the donation button automatically based on the available space, which seems to be disabled here, but that's fine if the donation button is going to be integrated into the search bar eventually. I'm not sure whether we even want the donation button to resize if it's part of the search bar. I did create a little coffee cup icon for the small variant of the donation button, but maybe that'll end up getting integrated in some other way.

Yes, the search bar on top (+ donation button shenanigans) is something I had in mind, but that I felt like would be better tackled separately; the Apply/Done buttons needed to be moved first imo. While I'm interested on a small version of the donation button (in order to avoid cramping), I believe if the search bar covers the whole top edge? You could fit the normal variant in the right anyway (and yeah, I have been thinking of shrinking the search bar until the button is closed)

The actions buttons that stack vertically as necessary and possible is a nice idea, though I think they shouldn't be visible behind the tooltip because it reduces the readability of the text in the tooltip substantially. I'm not sure though if hiding them behind the tooltip would make the buttons harder to navigate to when the tooltip is open.

I have thought about this, and I had the idea of ditching the vertical stack so only one button is obscured, but I found out it only made things more confusing, especially on a long scrollable page. I have to admit, this is very tricky to solve

The code looks good to me and I'll merge it soon if there's no other concerns.

I don't mind that!

[douira]

I felt like would be better tackled separately

This is fine, the PR to upstream isn't in a mergable state as it is anyway due to the listed concerns.

While I'm interested on a small version of the donation button (in order to avoid cramping), I believe if the search bar covers the whole top edge? You could fit the normal variant in the right anyway

Yeah it might not be necessary to have a small variant of the donation button if we have the search bar take up the entire horizontal width. I'm not attached to the compact donation button, but there's an asset available for it if necessary.

I have to admit, this is very tricky to solve

I agree, it's not easy to find a balance between using unpredictable available screen space while keeping the design nice and usable. The solution as you've presented it is good so far and we could look into refining the tooltip/button interaction later.

[douira]

I've merged your changes and am rebasing the config-api branch onto dev so be aware of the force push. I'll continue force-pushing this branch with rebases on top of dev as necessary.

[EnnuiL]

I've merged your changes and am rebasing the config-api branch onto dev so be aware of the force push. I'll continue force-pushing this branch with rebases on top of dev as necessary.

The rebase on dev is really appreciated