Emoji Picker & Comment improvements

[Nitwel]

[benhaynes]

Thanks, @Nitwel!! Here are a few things:

• When we open the emoji chooser, let's give the search box focus so they can filter immediately
• Let's give the search bar a white background (--background-input)
• Can we align the emoji picker with the comment textarea so it's not so far left?
• When I focus on the search box, the comment box loses its focus/cursor location... and the emoji is always added to the beginning of the comment instead of my previous cursor position.
• The Skin color dropdown is overlapping the icons below (let's give it a background to avoid this)
• Is there a way to show all emoji in one long scroll instead of by category (similar to Discord)? If not, then we should make the categories gray to differentiate them.
• We need to more clearly separate the category and recently used from the scrolling list
• My comments aren't saving properly... they save, but are empty.
• Let's add a cancel button to the Comment form (left of the Submit button)

[Nitwel]

When I focus on the search box, the comment box loses its focus/cursor location... and the emoji is always added to the beginning of the comment instead of my previous cursor position.

What browser are you using as it worked in Firefox?

My comments aren't saving properly... they save, but are empty.

You have to make sure that DB_CHARSET="utf8mb4_unicode_ci" or something similar is set as the DB sometimes doesn't know what the emojis are by default.

Let's add a cancel button to the Comment form (left of the Submit button)

We have that when editing a comment but what should it do when writing new comments?
Clear the current text?

[benhaynes]

Browser: Chrome (latest)

We have that when editing a comment but what should it do when writing new comments?

Yeah, clear the text and collapse the input back down. I see that you removed that collapse, but I think it's nice, so let's add that back in. Before the user has taken action, the comment input should be short (one line) and have the placeholder: Comment.... Then focusing on it would expand the height and show the other buttons. It would collapse on blur, unless there is text in the input.

Also, when an emoji is at the end of a line, it's getting overflow cut off:

[rijkvanzanten]

@benhaynes What exact version of chrome? Latest can mean 98, 99, or 100 depending on exact OS and other variables 🙇🏻‍♂️

[benhaynes]

Nils and I are discussing on Chat-A, going to switch to a more popular (powerful) Emoji library that solves all these issues

[rijkvanzanten]

For future changes, lets do the refactor to script setup in a separate PR. It's very difficult to see what you changed vs what was already there before

[koksikus]

I do not know why but for me there are only ??? without icon.

[rijkvanzanten]

@koksikus Sounds like MySQL w/ a collation that doesn't support emojis. See #12287 for a longer thread on the same thing 👍🏻