2.4: UX for adding passage tags is a bit clunky

[webbedspace]

Is your feature request related to a problem? Please describe.

Problems I've identified with the 2.4 tag button in the passage editor: • "New Tag" is the default, even though creating new tags is a less often-used feature than adding existing ones, so you are offered a "Tag Name" and "Tag Colour" UI that you usually won't use. And, you might mistakenly type the existing tag's name into the "Tag Name" box in order to add it, even though that doesn't work. • It takes 3 clicks to select an existing tag (once for the +Tag button, again for the Add Tag dropdown, again for the chosen tag) when IMHO it should take only 2. • Tag colours aren't in the menu, only their names, making it harder to distinguish them.

Describe the solution you'd like.

Here's my mockup idea: clicking +Tag drops down a list of existing tags. "New Tag" is at the bottom (or, alternatively, the top) and on clicking it, a second dropdown appears (replacing the current dropdown menu) with the Tag Name and Tag Colour options and buttons.

You might think that having more than 10+ tags would make this menu unwieldy… but that "problem" already exists with the current UI, where the Add Tag dropdown gets cluttered instead of this one. I assume React UI can let you selectively add scrollbars to this menu if needs be fit.

Additional context on this suggestion.

No response

Presubmission checklist

• [X] I am interested in working on code that would implement this feature request. (This is not required to submit a suggestion.)
• [X] I have done a search and believe that an issue does not already exist for this idea in the GitHub repository.
• [X] I have read and agree to abide by this project's Code of Conduct.

[greyelf]

As the list of Author pre-defined tags could become quite long, would a combo-box be a better UI option than a drop-down?

[klembot]

The difficult part with a native combobox control is (I believe) only text is allowed in the options. There are options like react-select that are more freeform, but at least react-select has accessibility problems in my experience, and is also fairly heavyweight.

I agree with the general sentiment here that adding tags is not as easy it should be, and that the more common use case is to apply a tag that already exists, and we should be optimizing for that.

[hituro]

As an addendum after using 2.4 for some days in production, the +Tag behaviour described here (where the default on a newly opened passage is always "New Tag" is quite irritating, as I almost always want to add an existing tag. Having the drop-down default to existing tags would be a lot better.