Added modal bottom sheet that shows list of users and their reactions on long pressing reactions

Author: E-m-i-n-e-n-c-e

lib/widgets/emoji_reaction.dart

@@ -6,10 +6,13 @@ import '../api/route/messages.dart';
 import '../generated/l10n/zulip_localizations.dart';
 import '../model/autocomplete.dart';
 import '../model/emoji.dart';
+import '../model/store.dart';
 import 'color.dart';
+import 'content.dart';
 import 'dialog.dart';
 import 'emoji.dart';
 import 'inset_shadow.dart';
+import 'profile.dart';
 import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
@@ -120,6 +123,22 @@ class ReactionChipsList extends StatelessWidget {
   final int messageId;
   final Reactions reactions;
 
+  void showReactedUsers(BuildContext context, ReactionWithVotes selectedReaction) {
+    final store = PerAccountStoreWidget.of(context);
+
+    showModalBottomSheet<void>(
+      context: context,
+      builder: (BuildContext context) => PerAccountStoreWidget(
+        accountId: store.accountId,
+        child: _ReactionUsersSheet(
+          reactions: reactions,
+          initialSelectedReaction: selectedReaction,
+          store: store,
+        ),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
@@ -129,21 +148,271 @@ class ReactionChipsList extends StatelessWidget {
     return Wrap(spacing: 4, runSpacing: 4, crossAxisAlignment: WrapCrossAlignment.center,
       children: reactions.aggregated.map((reactionVotes) => ReactionChip(
         showName: showNames,
-        messageId: messageId, reactionWithVotes: reactionVotes),
+        messageId: messageId, reactionWithVotes: reactionVotes,
+        showReactedUsers: showReactedUsers,
+        ),
       ).toList());
   }
 }
 
+class _ReactionUsersSheet extends StatefulWidget {
+  const _ReactionUsersSheet({
+    required this.reactions,
+    required this.initialSelectedReaction,
+    required this.store,
+  });
+
+  final Reactions reactions;
+  final ReactionWithVotes initialSelectedReaction;
+  final PerAccountStore store;
+
+  @override
+  State<_ReactionUsersSheet> createState() => _ReactionUsersSheetState();
+}
+
+class _ReactionUsersSheetState extends State<_ReactionUsersSheet> {
+  late ReactionWithVotes? _selectedReaction;
+
+  /// Cache for emoji displays to avoid recomputing them
+  final Map<String, Widget> _emojiCache = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedReaction = widget.initialSelectedReaction;
+    _prepareEmojiCache();
+  }
+
+  /// Pre-compute emoji displays for better performance
+  void _prepareEmojiCache() {
+    for (final reaction in widget.reactions.aggregated) {
+      final key = '${reaction.reactionType}_${reaction.emojiCode}';
+      if (!_emojiCache.containsKey(key)) {
+        final emojiDisplay = widget.store.emojiDisplayFor(
+          emojiType: reaction.reactionType,
+          emojiCode: reaction.emojiCode,
+          emojiName: reaction.emojiName,
+        ).resolve(widget.store.userSettings);
+
+        final emoji = switch (emojiDisplay) {
+          UnicodeEmojiDisplay() => _UnicodeEmoji(
+            emojiDisplay: emojiDisplay),
+          ImageEmojiDisplay() => _ImageEmoji(
+            emojiDisplay: emojiDisplay, emojiName: reaction.emojiName, selected: false),
+          TextEmojiDisplay() => _TextEmoji(
+            emojiDisplay: emojiDisplay, selected: false),
+        };
+
+        _emojiCache[key] = SizedBox(
+          width: 20,
+          height: 20,
+          child: emoji,
+        );
+      }
+    }
+  }
+
+  Widget _getEmojiWidget(ReactionWithVotes reaction) {
+    final key = '${reaction.reactionType}_${reaction.emojiCode}';
+    return _emojiCache[key]!;
+  }
+
+  Widget _buildEmojiButton(ReactionWithVotes reaction) {
+    final isSelected = _selectedReaction == reaction;
+    final reactionTheme = EmojiReactionTheme.of(context);
+
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: () {
+          setState(() {
+            _selectedReaction = reaction;
+          });
+        },
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 4),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                decoration: BoxDecoration(
+                  color: isSelected ? reactionTheme.bgSelected.withValues(alpha: 0.1) : Colors.transparent,
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    _getEmojiWidget(reaction),
+                    const SizedBox(width: 4),
+                    Text(
+                      reaction.userIds.length.toString(),
+                      style: TextStyle(
+                        fontSize: 14,
+                        fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+                        color: isSelected ? reactionTheme.textSelected : reactionTheme.textUnselected,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              AnimatedContainer(
+                duration: const Duration(milliseconds: 300),
+                margin: const EdgeInsets.only(top: 4),
+                height: 2,
+                width: isSelected ? 20 : 0,
+                decoration: BoxDecoration(
+                  color: isSelected ? reactionTheme.textSelected : Colors.transparent,
+                  borderRadius: BorderRadius.circular(1),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildAllButton() {
+    final reactionTheme = EmojiReactionTheme.of(context);
+    final isSelected = _selectedReaction == null;
+
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: () {
+          setState(() {
+            _selectedReaction = null;
+          });
+        },
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 4),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                decoration: BoxDecoration(
+                  color: isSelected ? reactionTheme.bgSelected.withValues(alpha: 0.1) : Colors.transparent,
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: Text(
+                  'All ${widget.reactions.total}',
+                  style: TextStyle(
+                    fontSize: 14,
+                    fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+                    color: isSelected ? reactionTheme.textSelected : reactionTheme.textUnselected,
+                  ),
+                ),
+              ),
+              AnimatedContainer(
+                duration: const Duration(milliseconds: 300),
+                margin: const EdgeInsets.only(top: 4),
+                height: 2,
+                width: isSelected ? 20 : 0,
+                decoration: BoxDecoration(
+                  color: isSelected ? reactionTheme.textSelected : Colors.transparent,
+                  borderRadius: BorderRadius.circular(1),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  List<({String name, Widget emoji, int userId})> _getUserNamesWithEmojis() {
+    if (_selectedReaction == null) {
+      // Show all users when "All" is selected
+      final allUserReactions = <({String name, Widget emoji, int userId})>[];
+
+      for (final reaction in widget.reactions.aggregated) {
+        // Add each user-reaction combination separately
+        for (final userId in reaction.userIds) {
+          allUserReactions.add((
+            name: widget.store.users[userId]?.fullName ?? '(unknown user)',
+            emoji: _getEmojiWidget(reaction),
+            userId: userId,
+          ));
+        }
+      }
+
+      // Sort by name to group the same user's reactions together
+      return allUserReactions..sort((a, b) => a.name.compareTo(b.name));
+    } else {
+      // Show users for selected reaction
+      return _selectedReaction!.userIds.map((userId) => (
+        name: widget.store.users[userId]?.fullName ?? '(unknown user)',
+        emoji: _getEmojiWidget(_selectedReaction!),
+        userId: userId,
+      )).toList()..sort((a, b) => a.name.compareTo(b.name));
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final users = _getUserNamesWithEmojis();
+
+    return SafeArea(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: [
+                  _buildAllButton(),
+                  ...widget.reactions.aggregated.map((reaction) => _buildEmojiButton(reaction)),
+                ],
+              ),
+            ),
+          ),
+          Flexible(
+            child: ListView.builder(
+              shrinkWrap: true,
+              itemCount: users.length,
+              itemBuilder: (context, index) => InkWell(
+                onTap: () => Navigator.push(context,
+                  ProfilePage.buildRoute(context: context,
+                    userId: users[index].userId)),
+                child: ListTile(
+                  leading: Avatar(
+                    size: 32,
+                    borderRadius: 3,
+                    userId: users[index].userId,
+                  ),
+                  title: Row(
+                    children: [
+                      Expanded(child: Text(users[index].name)),
+                      users[index].emoji,
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 class ReactionChip extends StatelessWidget {
   final bool showName;
   final int messageId;
   final ReactionWithVotes reactionWithVotes;
+  final void Function(BuildContext, ReactionWithVotes) showReactedUsers;
 
   const ReactionChip({
     super.key,
     required this.showName,
     required this.messageId,
     required this.reactionWithVotes,
+    required this.showReactedUsers,
   });
 
   @override
@@ -214,6 +483,9 @@ class ReactionChip extends StatelessWidget {
               emojiName: emojiName,
             );
           },
+          onLongPress: () {
+            showReactedUsers(context, reactionWithVotes);
+          },
           child: Padding(
             // 1px of this padding accounts for the border, which Flutter
             // just paints without changing size.