List sorting & display settings

[kommunarr]

List sorting & display settings

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

#4096, comment

Description

• Implements radio group support for ft-icon-button dropdown
• Implements ft-button option for ft-icon-button base button appearance
• Implements three buttons in Theme Settings for fitting three of our features with new capabilities:
  1. Settings Sections,
     • Use default sort (default), sort A to Z, sort Z to A
  2. Side Nav subscription bubbles, and
  3. the ft-profile-selector dropdown:
  • Sort A to Z, sort Z to A
  • Display type: list or grid view
    • (grid-specific): Number of items per grid row
    • (grid-specific): Show or hide titles

Video

This video demos everything listed in the Testing section:

simplescreenrecorder-2023-09-20_19.22.02-2023-10-25_03.41.56.mp4

Edit: After minor updates to settings placement and changing the settings section sort:

Testing

• Test radio group functionality of the ft-icon-button dropdown:
  • Working up/left/down/right arrow navigation
  • Tab / Shift + Tab brings you out of the radio group to the next / previous tabbable element
  • Spacebar checks the focused checkbox
• Check that the expanded side nav, settings section, and profile selector dropdown behave normally with settings.js defaults
• Check that side nav subscriptions look good with every combination of grid, itemsPerGridRow, and showTitles and respects the selected sorting order
• Check that the profile selector looks good with every combination of grid, itemsPerGridRow, and showTitles and respects the selected sorting order
• Check that the settings sections respect the selected sorting order

Desktop

• OS: OpenSUSE Tumbleweed
• OS Version: 2023xxxx
• FreeTube version: 0.19.1

Additional context

Remaining related discussions: #1739, #987, #800, parts of #4096, #2871

The new radio group support in the ft-icon-button dropdown was just created as a helpful tool for bringing about what I was envisioning, but I can see it coming in handy again for creating related settings in a space-compressed and low-cognitive-complexity way. See discussion under #2295.

Among other reasons, I also created this when pondering the design of this issue that I intend to work on: #1615.

Please let me know how you feel about the default grid values chosen in settings.js (in scope for this PR) or if we would consider changing any of the default display values / sorting methods (broader discussion out of scope for this PR). I'm personally going to be using the grid + 3 per grid row + show titles for subscriptions and grid + 4 per grid row + show titles for the profile selector during my personal use of FreeTube.

[absidue]

Not sure if you'll be doing any changes to this after the discussion on Matrix, but I thought I would do a code review on the pull request in it's current state anyway.

[kommunarr]

Implemented suggestions listed here and those discussed in the Element channel, including hiding these non-mobile-specific theme options on mobile, changing the settings section sort to be an ft-select, removing the Z to A sort option for the settings section.

Opening this back up for review.

[github-actions]

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

[github-actions]

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

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

User without context doesn't know that they have to click on the hamburger menu on the top left to see the grid. If user selects grid and its not expanded already nothing happens from an user perspective. Should we enable Expand Side Bar by Default when grid is selected?

Also labels are gone when hovering when show grid item titles is enabled which i understand but allot of the titles are cut of when u have a grid of 5 so we might want to add them back because it could be hard for the user to know what channel they're looking at

VirtualBoxVM_OAA099OjjB.mp4

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

• Profile name and titles are not centered when in grid view
• Hovering over profiles in list mode doesnt show labels
• Hovering over profiles in grid mode only shows labels when hide gride item titles is selected

[github-actions]

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

[kommunarr]

I remember this being a big discussion. I suppose it's not worth people's review time while we have so many bigger fish. In retrospect, I do wish I consulted with the team before working on this, as it seems to have stimulated some lively & silly debate, much of which was my own making. Things looking back at it in retrospect:

• I don't like that the buttons don't fit into the rest of the Theme Settings very well. I think we should have more icons associated with our ft-inputs and what not, but I don't know about the layout on this one.

I was trying to come up with a bigger list, but honestly, I still like the idea behind these. I don't think it's a big deal to add more stuff to Theme Settings, as that's the most optional place, and where customizability to your heart's extent is fine, as long as the interface is good. I think the main problem is more just functional in that we have so many more important items, that this is hard to justify reviewers' time on this compared to most other PRs.

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

Only thing i like to see removed is the setting section sort order as i think having better defaults in the sense that we have a logical order we display the settings in makes more sense than this imo

[kommunarr]

Only thing i like to see removed is the setting section sort order as i think having better defaults in the sense that we have a logical order we display the settings in makes more sense than this imo

I think having the option for alphabetical-based visual scanning is reasonable, because it's hard to have an "intuitive" ordering of those 14 sections