Support adding an arbitrary reaction

[gnprice]

Currently we offer the ability to add a thumbs-up from the message action sheet, and to tap on an existing reaction to join in or to remove it. This issue is to add the ability to choose an arbitrary reaction to add.

This feature will appear in the message action sheet. The six "popular" emoji, including 👍, will appear there directly, with an option to go to a full-screen bottom sheet with the list of all emoji. Here's the Figma design from @terpimost:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2854-27692&m=dev

Key screenshots here (but see Figma for details):

Two points of difference from that version of the design:

• The details of the rest of the message action sheet aren't all reflected there; the source for those details is at Bottom sheet redesign #90.
• The list of six emoji available directly from the message action sheet will be different from there; it'll be the six "popular" emoji.
  • Currently that means a fixed list of six emoji. We'll use that list in order to keep behavior consistent across all Zulip clients. At some point in the future Zulip may offer a more personalized list there; when we do, we'll do so across all clients. The issue for that is Add a "Frequently used" emoji to emoji selector zulip#21841.

Prerequisite issues

• Support adding/removing a reaction #125
• Track all valid Zulip emoji #669
• Bottom sheet redesign #90

Previous discussion of design

The zulip-mobile RN app has this functionality but the UI is kind of clumsy. With Flutter we have a lot more control to make the UI work however we like. So this is an opportunity to reimagine this UI to be much nicer. /cc @alya @terpimost

Some previous threads with ideas for improving this UI in the context of the zulip-mobile RN app:

• Some recent or most used emojis in ActionSheet for quick reaction to messages. zulip-mobile#4565 (and chat thread)
• Denser layout for emoji-reaction picker zulip-mobile#4567
• Show "add reaction" button when there are already reactions on a message zulip-mobile#4578

I think all three of those are good ideas, all together or in any combination, or we can go in another direction if we think it'd be good. For the third one (a button next to existing reactions) we can borrow the design from web, but the other two don't correspond to anything in web and so we'd need fresh designs for them.

[chrisbobbe]

A user reports in CZO that zulip-mobile's choice of putting :heart:, :love:, and :love_you: at the top of the emoji picker doesn't make sense for a work context: "I’m always a bit scared I’ll tap by mistake on the love-you emoji […]" Which makes sense; I've had a similar feeling myself! 😅

[chrisbobbe]

We've had another report by email, of wanting a less clumsy add-reaction UI than we currently have in zulip-mobile. They mention (if I understand correctly) having some frequently-used emoji directly in the message-long-press sheet, as discussed here.

They also had another interesting idea:

If I can configure a swipe left action to be a certain emoji I would love that I think

[alainjr10]

Hey. I started doing some prelimary contributions to this issue, however, i can't seem to be able to pull all the available emojis. According to #669 , there's still an open issue about tracking all supported emojis. However, on Zulip web client, we can access a list of all emojis. so i was wondering how i can access those emojis to use on mobile.

[gnprice]

Yeah, as the issue description says, #669 is a prerequisite for this issue. So is #90. Both of those are in progress, but this issue won't be ripe to work on until those are done.

To see more about how one can access the emoji on mobile, take a look at #669 and the PRs linked from it — those are the code we wrote as the answer to that question 🙂