Make beatmap listing support searching by user tags in a way usable by humans

[bdach]

Currently searching in beatmap listing "works", for some definition of the word. The downsides are too numerous to even list:

• You have to know what the tags are. Currently the only available way to know what the tags are when interacting with the website is going to this wiki page. The fact that this wiki page exists is very stupid and the fact that it is outdated is even stupider.
• If you're not clicking on the tag from another beatmap page, you have to know what the special syntax for user tag search is. Including that you have to enclose any user tag with spaces in double double quotes.

We should have a proper UI that people can click on and look and see a list of user tags and it will do this filtering instead of the abomination that the current flow is.

[LiquidPL]

I've put together a mockup that reuses the current lazer tag editing UI:

Let me know if this is the direction you'd like to go with. I'm mostly concerned if this should also surface the categories in some easier to access way (like displaying them in a list on the side, where clicking one would scroll to the appropriate position on the tag list).

I was also experimenting with some form of autocomplete to the search box for people that already know the tag names:

This can be left for a different time, however.

[bdach]

Ideally my shit programmer design would not be used in web, and in fact the client one needs to probably go ASAP, but we're also currently a bit short on designers. See also: #12115 (comment).

[LiquidPL]

Yeah I can't help but feel that this sticks out particularly next to the website design, however I don't think I'd be able to come up with anything better.

[LiquidPL]

I worked a bit more on this and I've got the design to the point where I think it fits more with the overall osu-web layout and color system:

I'm mainly concerned about some UX and design stuff right now:

• I intend to filter the tag list by ruleset depending on the currently picked one in the beatmap search filter. What should be shown if Any is selected? Currently there's upwards of 130 tags in the database, and I imagine it's not going to be nice to scroll through all of them. I guess in this case it should default to the user's default profile ruleset? Still, I think there should be a way for the user to decide which ruleset's tags are displayed regardless of the filters.
• I'm currently using the highlight color to indicate a tag has been added to the search query, however I'm not sure if this is the right choice from the color system standpoint. Alternatively, maybe this shouldn't attempt to sync the selected tags with the search query and each click should just add the given tag to the searchbox regardless of what is in there? It would be easier to implement for sure but that is some crappy user experience.
• Maybe the tag groups should be collapsible? I dunno.

[bdach]

I intend to filter the tag list by ruleset depending on the currently picked one in the beatmap search filter. What should be shown if Any is selected?

Would probably show everything. I don't think the tag system is that specialised? This display is probably going to show many tags regardless.

Maybe the tag groups should be collapsible? I dunno.

Not sure this helps anyone really.

I was also experimenting with some form of autocomplete to the search box for people that already know the tag names:

Would it be possible to have the autocomplete engage after you type tag=", and have a hint that you can do that in the placeholder? I think this might be the best option here by far. Scrolling the display is going to suck and people will want to interact with it primarily via the secondary search box anyway, so putting it all immediately in the main search box would be a huge win IMO.

Just note that all of the above is mostly my opinion not anyone else's, and mine is probably one that counts the least out of anyone who might have a relevant opinion on this.

[LiquidPL]

I think there should be an up to date full list of the tags somewhere (if we're not treating the one on the wiki as such), even if the primary method of interacting with this would be some form of autocomplete in the main searchbox (as in, an autocomplete dropdown like this would be unsuitable for wanting to find out what tags do even exist).

Would be great to hear some other opinions here though.