Updated the design to match the requirements and organized the reaction_user_sheet into a seperate file and added tests

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

lib/widgets/emoji_reaction.dart

@@ -6,13 +6,11 @@ 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 'reaction_users_sheet.dart';
 import 'store.dart';
 import 'text.dart';
 import 'theme.dart';
@@ -130,7 +128,7 @@ class ReactionChipsList extends StatelessWidget {
       context: context,
       builder: (BuildContext context) => PerAccountStoreWidget(
         accountId: store.accountId,
-        child: _ReactionUsersSheet(
+        child: ReactionUsersSheet(
           reactions: reactions,
           initialSelectedReaction: selectedReaction,
           store: store,
@@ -155,252 +153,6 @@ class ReactionChipsList extends StatelessWidget {
   }
 }
 
-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;