Added modal bottom sheet that shows list of users and their reaction

[E-m-i-n-e-n-c-e]

See who left an emoji reaction #740

This PR adds a new feature that shows detailed information about message reactions when long-pressing a reaction button. Users can see who reacted with which emoji in a bottom sheet.

Closes #740

Feature Description

When a user long-presses on a reaction:

1. A bottom sheet appears showing:

   • A row of filterable reaction buttons at the top
   • A list of users who reacted below

2. Each user row shows:

   • User's profile picture
   • User's name

3. Tapping on a user's row navigates to their profile

Implementation Details

The implementation consists of two main parts:

1. ReactionUsersSheet - The bottom sheet UI component
2. Long-press handler in ReactionChip - Triggers the bottom sheet

ReactionUserSheet is in test\widgets\reaction_users_sheet_test.dart

Tests are in test\widgets\reaction_users_sheet_test.dart

Testing

1. displays emoji buttons correctly

   • Verifies emoji buttons display with correct counts

2. displays user list correctly

   • Verifies user names are displayed

3. handles unknown users gracefully

   • Tests fallback text for unknown users

4. navigates to user profile on tap

   • Tests navigation to profile page

5. switches between reactions

   • Tests reaction switching functionality
   • Verifies user list updates

6. handles horizontal overflow with many reactions

   • Tests horizontal scrolling behavior
   • Verifies emoji button visibility

7. handles vertical overflow with many users

   • Tests vertical scrolling behavior
   • Verifies user list scrolling

8. handles long user names without overflow

   • Tests text overflow handling

9. displays different types of emojis correctly

   • Tests Unicode emoji display
   • Tests custom/image emoji display
   • Tests text emoji display

Screenshots

[E-m-i-n-e-n-c-e]

Do tell me if you need any changes to the design or something like that. I think i should change the flexible widget to an expanded so that it works something like this

I have made the change locally and can push if you want me to. Also tell me if you want me to reorganize the code in any of ways mentioned in the previous comment under the header Code Organization Discussion

[PIG208]

@E-m-i-n-e-n-c-e, thanks for working on this! We do have an issue for this feature: #740. It specifies the exact design we want for the feature. However, this is a Post-Launch issue so we might not spend as much time on implementing it.

[gnprice]

Chat thread: https://chat.zulip.org/#narrow/channel/516-mobile-dev-help/topic/view-reactions.20sheet/near/2043883

[E-m-i-n-e-n-c-e]

@E-m-i-n-e-n-c-e, thanks for working on this! We do have an issue for this feature: #740. It specifies the exact design we want for the feature. However, this is a Post-Launch issue so we might not spend as much time on implementing it.

Updated the design to match the figma design

Chat thread: https://chat.zulip.org/#narrow/channel/516-mobile-dev-help/topic/view-reactions.20sheet/near/2043883

Please check the updated pr description

[gnprice]

It looks like there's still quite a bit of work this PR will need in order to match all the details in the design in Figma, and in order to get the code up to our standards.

There's also an existing PR #1243 for this issue, which was already open when this one was sent and also is somewhat closer to ready.

So let's leave this PR aside. @E-m-i-n-e-n-c-e I recommend looking for another issue to try, focusing on those in the launch milestones.