Add full emoji picker for reactions

[tulir]

Fixes element-hq/element-web#9483

I decided to make a new emoji picker with inspiration from emoji-mart instead of trying to fix emoji-mart itself. Mostly because emoji-mart uses a different outdated emoji dataset than matrix-react-sdk and the code didn't look very nice to work with.

TODO

• Recently used section
• Scroll to category when clicking in header bar
• Underline visible categories in header bar
• Close emoji picker after selecting
• Show if emoji is already selected
• If emoji is already selected, remove reaction when clicking again

Future improvements

• Skin color picker
• Add emoji to recently used when clicking on existing reaction too (outside of emoji picker)
• Use i18n'd emoji names when user is using a language supported by emojibase
• Improving search matching (e.g. ignoring punctuation and whitespace in search query altogether)

Some previews

[t3chguy]

looks awesome, the inline svg is a bit out of place for the codebase

[t3chguy]

Would be interesting to wire this up to the composer also :D

[tulir]

the inline svg is a bit out of place for the codebase

Yeah, that was copied from emoji-mart since I didn't know where else to get those icons. I could probably split them into their own files

Would be interesting to wire this up to the composer also :D

That probably requires some design input to figure out where to put it and what to do with the sticker picker

[tulir]

@nadonomy There are some details the design wasn't clear on:

• Should all skin colors be listed at the same time or should there be some picker where you can change the skin color to use? I think emoji-mart had a picker by default, but the design didn't include space for one. (currently there's no skin tone options at all)
• Should the scroll area include the search bar, i.e. should scrolling down hide the search bar? (currently it doesn't)
• Should the underlining in the header only include the top-most visible category, or all visible categories? (current impl is the latter)
• How many rows of frequently used emojis should be shown at most? (current is 3)
• How should already emojis that have already been used as reactions be shown? (currently implemented with a green border and slightly transparent emoji)
• Should the section headers be sticky? (currently they're not)

Also, currently I just approximated the sizes/margins/etc from the images, but if you have pixel precision designs, I can change the implementation to match it.

[nadonomy]

Hey @tulir— apologies I've been 99% afk for the last week or so, but adding this to my list to deep dive into. Do you have this deployed somewhere where I can easily play around with this?

If not, just let me know and I'll set up my dev environment again on this machine.

[tulir]

I should set up some gitlab pipelines to autodeploy riots, but for now I put it on https://riot.mau.dev/emoji-picker

(I've also been using this on my main riot instance at https://matrix.maunium.net, but that has a bunch of other stuff and custom server selector disabled)

[MayeulC]

Does this allow reacting with arbitrary text? It could be useful for polls (though I guess you could use an emoji-based index as well ^^" )

[tulir]

No, but I was planning to add that for myself. If @nadonomy makes a good UI for it, I can integrate it here. Maybe somehow hidden in the search box?

[MurzNN]

In test instance widget looks very good, thanks! Will be good to have same widget in edit area for insert emoji to message text via same way! Does it hard to integrate current widget into message composer as separate "second smiley" button at first?

[MayeulC]

Thanks for considering this, I'll try this version out!
I'd have put it in a "text" section at the bottom, under symbols: create a reaction pill with the word typed in the searchbox, that would provide easy feedback regarding the look, and make it obvious that clicking it makes it a reaction. That might not be the best UI though, I don't know?

[ara4n]

Functionally speaking (i haven't looked at the code), this is feeling really good - thank you for contributing it. @nadonomy unless you have particularly strong concerns, i'd recommend we just merge it asap and the iterate on it in place. for the record, Nad's official proposed design is:

...so it looks like we're pretty much there already.

The only nastiness I can see from a quick play is that there's a ~1 pixel dead zone between the emoji options (at least on hidpi), so that if you scan the mouse over the available options you get a nasty flicker where it shows the quick selector whenever you jump from one to the next.

[ara4n]

this lgtm now, from a fairly high level pass through the code - i think we should merge it asap to see how it feels and then iterate on it further in place. i suggest someone (@jryans, @dbkr, @bwindels) does a retrospective line by line review, but would rather we get this in the hands of users asap.

thanks again @tulir!

[MurzNN]

Some emoji have extra width and shows not in grid, here is example:

And here problem too:

[tulir]

@MurzNN That means your emojis are outdated, but not sure how that would happen. Riot should have the up to date (emoji 12 / 2019) twemoji font. I even specifically checked that those new wheelchair emojis worked. Chromium 69 sounds really outdated, maybe update? Anyway, this PR is done, issues should go in riot-web issues, not here.