[RFC/WIP] Overhaul of top-level scenes/images/galleries pages

[WithoutPants]

The ItemList control has needed unsnarling for a long time, and this is an attempt at refactoring the concept while also overhauling the general flow of the top-level list pages.

This restructures the scenes/images/galleries pages to use a collapsible filter sidebar and a list header.

The sidebar includes the search field, the saved filters list (with an explicit Save filter button), a customisable list of criteria, a list of the filters current criteria (excluding criteria shown in the sidebar), and an Edit Filter button which opens the existing edit filter dialog.

The page now has a header bar which stays visible when scrolling. This design was inspired by the Plex interface. It holds the page size selector, a compact pagination control, buttons to view the first or random scene, the sort, zoom and display mode selectors (the latter of which has been made more compact as well).

When items are selected, the header bar is replaced with operations related to the selected items.

It shows the number of items selected, a select all button, and the operation buttons, as well as a button to deselect all.

The Edit Filter dialog has been changed to allow reordering of criteria and the select which criteria are shown in the sidebar.

I'm seeking feedback on the usability of this change.

Caveats and known issues:

• this is still in the prototype stage and will likely have bugs and missing functionality
• the current iteration of the pagination control is regressive imo and I'm still exploring ideas - ideas welcomed!
• keep in mind that criteria order/sidebar visibility is not currently persisted
• the modifier selectors need to be condensed when in the sidebar
• this design has been based around higher resolution viewports and hasn't yet been optimised for compact viewports

[WithoutPants]

The selected items header should now be less broken.

For now I've added a scroll to top button which only appears on mobile devices. I'm not completely happy with the selected items header in general, particularly on mobile devices, but it is at least functional currently.

There remains an issue with text-based criteria in the sidebar. This might need some further work on the criterion editor controls.

[cj12312021]

There remains an issue with text-based criteria in the sidebar

Could you clarify what the issue here is? The issue is not immediately clear to me.

[cj12312021]

Now that the search box for the list items is no longer in the sidebar. I think we could add the search bar for filters to the sidebar, similar to filter dialog menu. That would be useful for users who pin most or all the filters to the sidebar.

[WithoutPants]

Could you clarify what the issue here is? The issue is not immediately clear to me.

Typing in data is slow because the criterion is being updated on every key press. Additionally, if you clear the text field, the old value is left in the filter. The workflow for manual inputs needs to be improved in general here. There should either be a confirm button on the control, or it should update on blur.

Now that the search box for the list items is no longer in the sidebar. I think we could add the search bar for filters to the sidebar, similar to filter dialog menu. That would be useful for users who pin most or all the filters to the sidebar.

I disagree. The sidebar is intended as a quick way to filter with the most frequently used criteria, with less often used criteria relegated to the filter dialog. Pinning all or most criteria to the sidebar isn't a practice I want to encourage, and I certainly don't want to dedicate screen space to accommodating such a practice. I suppose we could add the filter control and hide it by default.

[cj12312021]

Typing in data is slow because the criterion is being updated on every key press. Additionally, if you clear the text field, the old value is left in the filter. The workflow for manual inputs needs to be improved in general here. There should either be a confirm button on the control, or it should update on blur.

Oh, okay, I see what you mean. Placing the query button to the right of the text field should be intuitive.

I disagree. The sidebar is intended as a quick way to filter with the most frequently used criteria, with less often used criteria relegated to the filter dialog. Pinning all or most criteria to the sidebar isn't a practice I want to encourage, and I certainly don't want to dedicate screen space to accommodating such a practice. I suppose we could add the filter control and hide it by default.

As I think about it, a search bar there likely won't be visually appealing either since it would be too close to the list search bar.

[WithoutPants]

Text input issue has been improved, though there's still some weird flashing going on occasionally that I need to investigate.

Other pending issues:

• pinning/unpinning while filtering the criteria in the edit filter dialog looks like it's wiping the pinned state
• overflow button shows an empty menu when there are no results on the scenes page

[WithoutPants]

I've been running this on my production system to test out. Here's some self-feedback from the mobile experience:

• (existing bug) opening the filter dialog focuses the search filter and brings up the on-screen keyboard - this should be disabled on touch devices
• (existing bug) grid card check boxes should be visible always on touch devices - they should probably be larger too
• pin/unpin buttons should be visible always in the edit filter dialog on touch devices
• there's no next/previous page buttons on mobile
• the selected toolbar should be sticky on mobile - having to scroll up to access the operations or de-select is onerous
• similarly at least the pagination control should be stuck to the top on mobile. Access to the filter (sidebar and dialog) should probably be available too.

[WithoutPants]

Going back to the query page is not restoring the scroll position.

[WithoutPants]

Overflow menu is under the list view header.