Proposed changes to search UI

Currently on each dashboard:

• An “all tags” section is visible, i.e. “Tags matching: /.*/”
• Tag sections are collapsed
• Entering a search causes the “all tags” section to drill down
• Clearing the search box causes the “all tags” section to disappear

We’ve received feedback from multiple individuals that the first thing they do in their workflows is collapse the first section and open the other ones.

It might be better to change the UI to the following:

1. Remove “all tags” section
2. Expand all sections by default (should be possible, thanks to pagination)
3. Make search bar invisible by default (free up vertical whitespace: content is king)
4. Add magnifying glass icon (left to refresh button) that toggles visibility of search bar
5. When initially clicked, search bar initializes to empty (defined as .*) and “all tags” section appears
6. Typing search term causes the “Tags matching” section to update in real time, as it does now
7. Maybe put “x” button to right of search bar that does same thing as clicking search button in top right corner a second time (de-toggling)
8. Ensure that all these search states persist to the fragment section of the URL bar

Thoughts @wchargin @chihuahua @dandelionmane?

[gtoderici]

With regards to making “." the default: it’s counter-intuitive to default to something that most casual users won’t know how to interpret. In order to know that ".” is “match everything” the user would know that this is a regular expression, which means that a large number of users will be confused by it. Defaulting to “” (nothing) and having that display all tags would be a less confusing solution.

Other than this, having all sections expanded by default would be good.

The search bar being placed on the side bar with a clear button for “searching tags” will also be an improvement since it will free up space.

[jart]

This could be solved by the following:

• Use placeholder="regex" on search box. (Magnifying glass communicates it is for search.)
• Say “All tags” in section header when search box is empty.
• Say “Tags matching: /FOO/” when search box is non-empty.

That way it’ll make sense even if the user doesn’t know what regex is. He’ll also have a hint about what to google.