Design how the various search and filtering modes interact about client HOT 5 OPEN

Some relevant UI from other apps that provides some kind of "filter a list with multiple active filters" UI.

Slack:

If for example you check "Without external people" you see this at the top:

The subtle-ness of the message is good. The single-action "X" would not be usable for us as the user needs a way to re-enable focus filters (eg. switch between current user / all users, assignment chapter / whole book).

Google Drive:

In Google Drive if you do a search it clears the filters (type, person etc.). The user can however press the Back button to conveniently get back to the previous filtered view.

Apple Mail:

This uses the three-bars-in-a-circle icon with pressed and unpressed states to indicate whether a filter is active.

Clicking the filter toggles all filters on / off. You can long-press for more options:

from client.

Something I don't like about the current filter toggle UI is that the button can dramatically change length depending on whether the filter is active or not. This means that the text moves around in a distracting way when it is toggled, and also the hit target changes. So a fixed sized icon is a must in the replacement UI.

from client.

Here is a prototype that shows where I'm going with this:

In the above screenshot we have the following filters:

• A user filter, configured but inactive
• A page range filter, configured and active
• A search filter
• Annotation type filter: Annotations tab selected (note that the count in the above screenshot reflects the total number of annotations. It should probably show only the count that match the filters)

We could include the filters in the search description, so it would read "Showing 1 result for foo in pages 10-30", or "Showing 1 result for "foo" in pages 10-30 by Robert Knight" if you had both filters active. However this starts to get quite verbose.

from client.

Jared, Dan, Alejandro and myself discussed this on a call yesterday. We arrived at the designs discussed in https://hypothes-is.slack.com/archives/C07NXBDNW/p1704730651476379 (Figma: https://www.figma.com/file/sC8gPsiPLHOuaGKSCvQXUR/Hypothesis---Search-(Sidebar)?type=design&node-id=0-1&mode=design&t=94q4pMDVYxpeYYTi-0):

Some notes:

• The current single focus filter on/off toggle is replaced with individual buttons per focus state, as in #6070
• The focus toggle buttons are integrated into the filter panel. If there is not enough room to fit all the toggles, they wrap.
• Tabs are shown whether a search is active or not
• The label reporting the number of matches has been removed, since that number is displayed on the tabs (albeit divided into Annotations and Page Notes)
• When there are focus filters configured, the filter panel is always visible, but does not include the search bar if the search toggle is not pressed.
• The "X" action for the panel is removed. Instead an "X" is shown inside the search bar. The closest existing UI we have for this is the button to clear the transcript search in Via's video annotation UI.

from client.

Updated designs: https://hypothes-is.slack.com/archives/C07NXBDNW/p1704925791763109

from client.