I’ve been trying to get a filter sidebar into the stash UI for what feels like forever. The last serious take on it was part of a larger giant overhaul of the query pages.
For this attempt, I’m trying to scope it a little smaller. The necessity of a larger refactoring is still present, but the sidebar work doesn’t require it.
Here’s the current state:
It replaces the Saved Filter dropdown button with a sidebar toggle button. Currently, the sidebar pane sits along side the results section - not the query toolbar. The toolbar will probably be the next thing to refactor, and the sidebar should probably be alongside it, but that’s a problem for a separate PR.
I’ve elected not to isolate the sidebar for scrolling - this means that currently the sidebar scrolls with the content. I wasn’t satisfied with the isolated scrollbar, since the sidebar contains components that have scrollbars. It didn’t feel very good.
The Save Filter and Set as Default actions are now at the top of the Saved Filters section in the sidebar. Selecting a saved filter will bold it until the filter is changed again. Currently this includes changing the page, which is not ideal but not a pressing issue.
Below that, we currently have filters for Studios, Performers and Tags. More filters will be added to this. My vision for the sidebar is for quick filtering and browsing, with the edit filter dialog used for more specific filtering. With that said, I’m planning to include the following quick filters:
- rating - unset, any, and a star rating control allowing to set for x+ ratings. Star rating control will be shown regardless of the rating system. It’s meant as a quick filter, so a text input isn’t suitable
- organised: true/false
In future, other suitable options will be added, and a mechanism will be added to order options in the sidebar, and to hide options behind a collapse control at the bottom of the list.
Let me know if there’s any options you think belong in the initial list.
Eventually, I want to filter the studios/performers/tags and possibly other options based on the current filter. For example, the Performers section would only Performers that have scenes in the result set. I’d love to have a count in the list as well, but both these functions require some potentially gnarly server-side changes.
Next steps are going to be adding the two criteria mentioned above, but I want to create a common component to bring common styling to the sidebar elements. I also need to test smaller viewports.
I’ve pushed the branch if you feel like checking it out. I’m planning to install it on my production instance; this functionality feels almost required for me, and I missed it sorely when I abandoned the last attempt.
Let me know if you have any questions! 