Quick Reblog: Reimplement tag suggestion UI

[marcustyphoon]

Description

This manually implements a component similar to the HTML datalist element that we're currently using to show the user tag suggestions. This should result in:

• Support for Firefox for Android. Resolves #1611.
• Consistent UI between browsers that we can customize; see the previously linked issue for a buggy example in Kiwi Browser, and note that desktop Firefox and Chrome have noticeably different UI designs (neither of which, imo, look great).
• Suggestions containing only the suggested tag instead of everything in the tags input box. Usable suggestions when there is more than a small amount of content in the tags input box.
• A suggestion box that opens consistently, with a single click, in all browsers. Resolves #1102.
• A suggestion box that doesn't disappear and require typing a comma to reopen when a suggestion is clicked (configurable).

Does not use the new <dialog> element or new popover global attribute; I briefly played with both but neither seemed usable for this and the latter lacks browser support. Might be useful for other things, though.

At time of writing, the DOM structure and CSS I created are... uh, let's just say "probably improvable." This feels like one of those PRs that could use the "April fixes everything" special.

Testing steps

Confirm that:

• Nothing happens if the preference is toggled off
• The suggestion element appears when the tag input box gains focus
• The suggestion element looks correct in mobile/desktop widths and in the blog view modal
• The suggestion element disappears when the user types, unless/until the input box text ends in a comma (and any number of spaces)
• The suggestion element disappears when the user presses escape, until the user types again with a comma ending the input box text
• The suggestion element disappears when the user deselects the tag input box
• Clicking a suggestion adds it to the input box and removes it from the suggestions
• The correct tag suggestions appear, excluding tags already in the box
• The suggestion element disappears when there are no valid suggestions
• Opening the Quick Reblog interface on a different post results in a suggestion element with the correct tag suggestions for that post

~~Needs further testing for modal logic edge cases. Needs further testing for overflow (e.g. with long suggested tags/many suggested tags).~~ Needs testing on ~~Firefox and~~ real mobile device; smoke tested on Chrome and Chrome responsive design mode.

[marcustyphoon]

I suppose this could be generic and in a util, come to think of it.

[marcustyphoon]

Hiding the element when the parent doesn't match:focus-within doesn't work for two reasons:

• in Safari, when clicking the new tag suggestions element, focus is lost before the click action is processed, and everything breaks
• clicking the new tag suggestions element outside of one of the actual action buttons drops focus and hides the tag suggestions element

Thus:

• [ ] remove that and hide the element on click if the click is outside of the element