Media page sorting/filtering UX improvement

[samglt]

I think the way media is filtered and sorted is awkward to use and confusing at first.

Here are some issues I see and how I would suggest fixing them:

• Sheets
  • Each button opens full-sized sheets which hide the effects of the filters/sorting. These could be half-height, which would also make them more reachable
  • The button positions don't fit the HIG for sheets where the dismiss button should be on the trailing side and the cancel (Reset) button should be on the leading side
  • The sheet dismiss button being filled and tinted IMO makes it too prominent like you need to press it to view the effect of the filter, or like it will clear out your selection. Using xmark may also add to this
  • When you hit the reset button, your selections in the sheet stay visually selected
• Media Page
  • The sorting and ordering buttons are mixed in with the filter buttons
  • The sorting and ordering buttons don't show what you're currently sorting by until you tap them
  • Sorting and ordering buttons are tinted when they are set to non-default values even though IMO it doesn't necessarily make sense to have a default way of sorting stuff.

A quick mockup:

I'm not a UI guy so I'm putting this here in discussions to see what people think

[JPKribs]

I like the halfway modal! I think the reason the ❎ is on the left side currently is because that's where we have it for the rest of the app. Changing it up in this location can result in some annoying muscle memory. That being said, if we are using this kind of halfway modal, I think it's less of an issue since it's more of a standalone object.

I think this type of change would require us to complete this first though: #1034 since the current sheet is currently using our coordinator and I don't believe it supports these types of newer interactions. It looks like we would be able to do this without a coordinator, but I'd be hesitant to start mixing and matching these types of transitions and coordinators more than we already have.

I think there's a few other filter items we could knock out first as well. Top of my mind is hiding filters that are empty. An easy way to re-create this is to click on an actor so it's a paging library view filtered by that actor. You will find that several of the filter options are empty because you can't simultaneous filter on an actor and that item at the same time. Same applies to filtered by studio.

Additionally, we have about a dozen new sort-by options that are disabled but are now available in 10.10 that we want to get enabled based on the item type.

Not saying that those are required to come first or even recommending that's something you personally knock out. I'm more just thinking out loud because I think filter changes need a second look but there's a lot of other items that add more immediate benefit. And, the grander #1034 changes might need to take center stage before we rework anything.

But! I'm also not the primary dev. So, what I say is definitely not gospel haha

[LePips]

Thank you for asking about the design of these views. The immediate design was more inspired by the GitHub's iOS app for filtering your notifications because it's unobtrusive but informative for what filters are active from their default values. The toolbar/pill selection is also seen throughout many other apps.

To just respond to each point:

Sheets

• Presenting as a sheet is beneficial because some filter values have to be retrieved from the server, most notably genres and tags. There can also be many values where it no longer becomes appropriate to use a Menu, especially for multi-selectable filters. Presenting as a sheet is also somewhat beneficial because we have to debounce the filter selection appropriately and by the time you close the sheet the values are already loading. I'm somewhat open to multiple detents when we can use the appropriate API.
• I can't remember why I had the close button on the leading side. I know personally that Apple wasn't consistent for the longest time on the close button. I'm actually quite open to swap it to the trailing side but that will require a design audit to ensure we haven't caused other issues elsewhere.
• I'm not entirely convinced by this point itself and blame the "feeling" of the debouncing.
• I believe this is just an ongoing bug.

Media Page

• I'm open to moving the default location of this, but fwiw I would eventually like to somehow combine these filters together

  • Swiftfin/Swiftfin/Views/FilterView.swift

    Line 13 in 0f748f2

    // - for sort order and sort by combined

• There really isn't anything else we can do here without a new design that is special for these filters.
• We need to have some sort of default values in order to retrieve items correctly which in our case is ascending by name. I understand that in some contexts the "default" filters might be different, like Favorites, but it isn't that convincing to make our filter system even more complex just to eliminate some tinted buttons when the current system is straightforwardly explainable: the default values are statically defined and if they differ, they will be indicated as such.

[samglt]

Thanks for responding, I don't have an issue with the overall design of this stuff and my post kind of ballooned into a big list of suggestions and complaints of varying importance.

I didn't mean to replace any of the filters with Menus and I agree with you on the reason. I should have said that I was thinking of using a Menu specifically for sorting because it's a short static list of options and to further differentiate it from the filters, but now that I write that down I don't really feel strongly about that and it was more personal taste.

I'll defer to you on Apple's button position inconsistency cause I've only used iOS since 13 and I don't really remember either way; it just felt wrong.

I can understand now that adding custom default value logic just for sorting and ordering would be too much. I got lazy and didn't really look at the source.

I'd say 95% of my issue here was just that the Sort and Order buttons are in the middle of the filters and that sheets take up the whole screen. However, if the sheets used a medium detent I could see users getting annoyed by the debounce delay that would become be visible. So basically this post has distilled into "Put the sort and order buttons at the start".

I'll leave this for now and take a look at more important stuff in the Help Wanted discussion