Settings menu & UX improvements

[kommunarr]

Settings menu

Pull Request Type

• Feature Implementation

Related issue

closes #4387

Description

• Implements a menu in settings for more easily navigating the sections
• Currently scrolled-to section is marked as active
• Mobile and tablet version of settings uses "fake pagination" implementation
• CHANGE: Removes "Settings expanded by default" setting and <details> / <summary> tags (now inapplicable to current design)
• CHANGE: General Settings is now always the top setting, regardless of sorting preference (read comment on e9c527a)
• CHANGE: Other settings sections style changes, including rounded corners, external section titles, and removal of <hr> tags (for a sleeker aesthetic)
• CHANGE: Removes experimental removing of underlines on links pre-hover with the Hot Pink theme (breaks menu link styling, and was not ever noticeably beneficial)
• CHANGE: moves settings sections from data to computed because it's needed for short title to long title fallback logic

Screenshots

Suggested Design
Live Design

Testing

• Confirm that Settings Menu works intuitively
• Confirm that General Settings is always at the top of the settings, even after sorting
• Confirm that "long" version of settings label is displayed in the Settings Menu if no "short" label exists (i.e., as of now, with any non-EN-US locale)
• Test tablet & mobile views

Desktop

• OS: OpenSUSE
• OS Version: TW

Additional context

Remaining action items

• Use SponsorBlock icon instead of generic shield icon for SponsorBlock Settings (this icon is not supported by font-awesome-icon)

Aspects open for discussion
When a top banner is present on desktop view, the General Settings menu item is too low to be active, so no tab is shown as currently active if you scroll to the top. This is a very minor visual nitpick, but I just figured I would get it out of the way and say that having no active items until you scroll down a bit more in this exceptional case is fine and makes sense.

[PikachuEXE]

1. Not a breaking issue but why rounded corners
   FT has square "back plates" in other places

2. (I am not a mobile user so I am guessing here)
   The old UI is faster for user to get to lower sections (find section, open, do stuff)
   The new one requires plenty of scan time due to all expanded settings

[kommunarr]

Not a breaking issue but why rounded corners

Short explanation: This was admittedly a subjective design choice that I think makes for a sleeker look here.

Longer explanation: In design, you want to maximize the alignment of elements, such that if you were to draw a straight horizontal or vertical line from the start of each page element, you would have page elements line up as much as possible such that there are the fewest amount of lines present. This makes visual scanning easier. And so if we have straight edges, we would be inclined to align each settings section title along the edge exactly. But having the headings non-indented also makes their importance in the visual hierarchy less clear. So rounded edges here hit a sweet spot where there's an indentation for the titles still, and also alignment with the top edge.

The old UI is faster for user to get to lower sections (find section, open, do stuff)
The new one requires plenty of scan time due to all expanded settings

Are you referring to the removal of the "Settings expanded by default" setting? That's a fair note. If Emma and/or other mobile-savvy folks think mobile navigation will be harder without that setting and without having some form of accessing the new menu, I can try to get a mobile version of the Settings menu included in this PR rather than in a later one.

[PikachuEXE]

I am fine with rounded edges due to your explanation

General better for desktop (me) but ya mobile side might be well...

[efb4f5ff-1298-471a-8973-3d47447115dc]

Looks very nice IMO.

When i click on a header, it kind of centers the settings section but because of this i see a part of the settings section before this one (see video 1-4 sec). What i expected it too look like when i click on a header, see video 5-7 sec

VirtualBoxVM_UhXwZnOEqJ.mp4

[kommunarr]

@efb4f5ff-1298-471a-8973-3d47447115dc This was something that took a lot of work to hit a sweet spot for. The main problems we want to solve are 1) that the active Menu section appears to be the current section you're on, 2) that clicking on a section makes it actually show as the active section, and 3) that clicking on a section actually takes you to that section. The problem with choosing the top of the viewport below the top nav is that it it doesn't work for 1, as the last section that's just peaking through the top of the screen often appears as the active one, seeming pretty odd / not useful. I tried with other solutions like the exact midpoint of the viewport being the "current section line", which has the problem of either 2 or 3. I decided on using the top 1/4th of the viewport height as the "section line", which ends up being a decent compromise for all 3. Let me know if you have any better solution in mind, but this is the best I could find.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This PR is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions]

Conflicts have been resolved. A maintainer will review the pull request shortly.

Forgot to test tabbing and found something that is undesired

[efb4f5ff-1298-471a-8973-3d47447115dc]

i tabbed to the page i wanted and selected it. Tabbing further through the list will make me eventually go up to the first element in the General Settings which is undesired as I wanted to be in the Player settings

VirtualBoxVM_Bt5De3w5jW.mp4