Display emoji reactions

[flescio]

Your use case

Tasks

Beta Give feedback

1. - Once an emoji has been added, a show more emoji icon next to the reaction is displayed (which will open the standard emoji set).
2. - The standard emoji set will have a selection state for the current users emojis
3. - Emoji added by the users will have a different state form the ones added by others (it will reflect the bubbles background)
4. - Reactions on messages received will be sticky to the left side
5. - Reactions on messages sent will be sticky to the right side
6. - If there are too many emoji introduce a 2nd row
7. - When there are more then 2 lines of emoji a pill will appear to expand / collpase those

• QA signoff on completion
• Design signoff on completion
• Product signoff on completion

Designs

• Figma

Rust Data

timeline.rs EventTimelineItem.reactions() will expose the reactions for a given event

Dependency

Expose more data in EventTimeline's Reactions

[langleyd]

#1158

[langleyd]

#1249

[kittykat]

Works on both platforms, but last point looks different on Android and iOS:

[langleyd]

Sorry, one of the checkboxes should not have been checked. The add more button will be added on iOS in #1314.

There are a few other discrepancies that will be cleaned up soon:

1. I think android should be filling the second row with emojis and adding he expand collapse as the end of the second row.
2. It's technically not possible to show the count on the expand button on iOS as it cause a bug that can freeze the app(an infinite loop where to get the count of those truncated we need to layout the view first -> Then update the count on the view -> which updates the layout -> loops forever). I want to review that with @callumu . It may also be an issue for android when they go to implement 1. and we may want to make the two consistent anyway with the "Show more" text.
3. The text color looks different across iOS/Android on the "Show more/less" button.

Will resolve these shortly, thanks @kittykat !

[kittykat]

@langleyd We also found an issue where the add more button is in the wrong order on Android when reacting to own messages: https://www.figma.com/file/0MMNu7cTOzLOlWb7ctTkv3/Element-X?type=design&node-id=2128-106960&mode=design&t=j9eT47A2LWp1vMji-0

On iOS, the UI also jumps when there is a reaction on a location event and it's removed from another session.

We are also missing the bottom sheet on Android with the list of people who reacted.

Would you like issues filed for any of those?

[langleyd]

@kittykat PR incoming here for the reaction order here, and some other improvements that will bring it in line with iOS.

I have also started on the bottom sheet for reaction summary, that will probably come tomorrow.

So just an issue for the iOS jumping bug please.

[kittykat]

Filed the UI issue: #1372