Use interactive icon buttons to display and send (toggle) reactions

[kevinaboos]

Currently, reactions are displayed as plaintext in a single label, which is a lazy hack just to enable the set of reactions to easily wrap to the next line.

Instead, each type of reaction (each key in the reactions map) should be represented by its own icon button, in which the icon is the text of the reaction key. Typically a reaction key is a single emoji, but technically it can be any arbitrary string, so that works well with an existing button (Robrix has an IconButton type for this purpose).

Then, when clicking one of the IconButtons, Robrix would toggle that reaction's annotation by using the Timeline::toggle_reaction(). Using this higher-level reaction API will make things a lot easier to deal with. The Annotation's key field should be set to the same key string value used for the reaction's IconButton (its text content).

Note that in the structure that represents the Reaction icon button, the key string should be stored separately from the count value such that key can be easily retrieved independently from the count, and such that the count can be incremented/decremented easily.
In addition, that structure should store whether the current user has "sent" this reaction, i.e., the button's reaction key has been toggled "on" by the current user. This should also be made apparent at the UI level, e.g., by setting the button's background color and/or outline differently than the icon buttons that represent reactions that were not sent by the current user.

One of the main UI challenges in this area is how to get a series of reaction icon buttons to neatly wrap on to the next line (or multiple lines) if there are many reactions. Note that this is a common scenario, especially for popular posts. See this example from Discord:

Makepad may not yet support the ability to "wrap" multiple buttons (or arbitrary widgets) across multiple lines, but I'm not sure.

---

Note:
It is a known issue that Makepad doesn't yet support rendering actual emoji.

That is not a blocker for this issue, as the text on each reactions' icon button can still be a stringified emoji, e.g., :grin:, and work the same way.
See issue #111 for more info.

[smarizvi110]

Hello! I'd like to try and tackle this issue! I see you mentioned Makepad's limitations there, particularly regarding wrapping. Is there any update on that from the Makepad team?
Of course the emoji rendering (or lack thereof) is something that can be easily worked around!

[kevinaboos]

I think that the FlowRight wrapping variant would support this, but I haven't tried it myself. It'd be pretty quick to try it out just by putting a series of icon buttons next to each other and see if they wrap. If not, we can reach out to the makepad team on discord.

[alanpoon]

Sorry, I have been working on this for some time. Sorry @smarizvi110, for not creating a draft pull request

[kevinaboos]

No problem, thanks for letting us know!