msglist: Support viewing who reacted to a message

assets/l10n/app_en.arb

@@ -136,6 +136,14 @@
   "@errorUnresolveTopicFailedTitle": {
     "description": "Error title when marking a topic as unresolved failed."
   },
+  "actionSheetOptionSeeWhoReacted": "See who reacted",
+  "@actionSheetOptionSeeWhoReacted":  {
+    "description": "Label for the 'See who reacted' button in the message action sheet."
+  },
+  "seeWhoReactedSheetNoReactions": "This message has no reactions.",
+  "@seeWhoReactedSheetNoReactions":  {
+    "description": "Explanation on the 'See who reacted' sheet when the message has no reactions (because they were removed after the sheet was opened)."
+  },
   "actionSheetOptionCopyMessageText": "Copy message text",
   "@actionSheetOptionCopyMessageText":  {
     "description": "Label for copy message text button on action sheet."

lib/generated/l10n/zulip_localizations.dart

@@ -333,6 +333,18 @@ abstract class ZulipLocalizations {
   /// **'Failed to mark topic as unresolved'**
   String get errorUnresolveTopicFailedTitle;
 
+  /// Label for the 'See who reacted' button in the message action sheet.
+  ///
+  /// In en, this message translates to:
+  /// **'See who reacted'**
+  String get actionSheetOptionSeeWhoReacted;
+
+  /// Explanation on the 'See who reacted' sheet when the message has no reactions (because they were removed after the sheet was opened).
+  ///
+  /// In en, this message translates to:
+  /// **'This message has no reactions.'**
+  String get seeWhoReactedSheetNoReactions;
+
   /// Label for copy message text button on action sheet.
   ///
   /// In en, this message translates to:

lib/generated/l10n/zulip_localizations_ar.dart

@@ -118,6 +118,12 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Failed to mark topic as unresolved';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Copy message text';
 

lib/generated/l10n/zulip_localizations_de.dart

@@ -121,6 +121,12 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Thema konnte nicht als ungelöst markiert werden';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Nachrichtentext kopieren';
 

lib/generated/l10n/zulip_localizations_en.dart

@@ -118,6 +118,12 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Failed to mark topic as unresolved';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Copy message text';
 

lib/generated/l10n/zulip_localizations_it.dart

@@ -120,6 +120,12 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Impossibile contrassegnare l\'argomento come irrisolto';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Copia il testo del messaggio';
 

lib/generated/l10n/zulip_localizations_ja.dart

@@ -118,6 +118,12 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Failed to mark topic as unresolved';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Copy message text';
 

lib/generated/l10n/zulip_localizations_nb.dart

@@ -118,6 +118,12 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Failed to mark topic as unresolved';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Copy message text';
 

lib/generated/l10n/zulip_localizations_pl.dart

@@ -121,6 +121,12 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Nie udało się oznaczyć brak rozwiązania';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Skopiuj tekst wiadomości';
 

lib/generated/l10n/zulip_localizations_ru.dart

@@ -121,6 +121,12 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Не удалось отметить тему как нерешенную';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Скопировать текст сообщения';
 

lib/generated/l10n/zulip_localizations_sk.dart

@@ -118,6 +118,12 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Failed to mark topic as unresolved';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Skopírovať text správy';
 

lib/generated/l10n/zulip_localizations_sl.dart

@@ -119,6 +119,12 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Neuspela označitev teme kot nerazrešene';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Kopiraj besedilo sporočila';
 

lib/generated/l10n/zulip_localizations_uk.dart

@@ -122,6 +122,12 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Не вдалося позначити тему як невирішену';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Копіювати текст повідомлення';
 

lib/generated/l10n/zulip_localizations_zh.dart

@@ -118,6 +118,12 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   String get errorUnresolveTopicFailedTitle =>
       'Failed to mark topic as unresolved';
 
+  @override
+  String get actionSheetOptionSeeWhoReacted => 'See who reacted';
+
+  @override
+  String get seeWhoReactedSheetNoReactions => 'This message has no reactions.';
+
   @override
   String get actionSheetOptionCopyMessageText => 'Copy message text';
 

lib/widgets/action_sheet.dart

@@ -92,12 +92,41 @@ void _showActionSheet(
                           child: SingleChildScrollView(
                             padding: const EdgeInsets.symmetric(vertical: 8),
                             child: MenuButtonsShape(buttons: optionButtons)))),
-                        const ActionSheetCancelButton(),
+                        const BottomSheetDismissButton(style: BottomSheetDismissButtonStyle.cancel),
                       ]))),
               ]))));
     });
 }
 
+/// A header for a bottom sheet with a multiline UI string.
+///
+/// Assumes 8px padding below the top of the bottom sheet.
+///
+/// Figma:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3481-26993&m=dev
+class BottomSheetHeaderPlainText extends StatelessWidget {
+  const BottomSheetHeaderPlainText({super.key, required this.text});
+
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
+    return Padding(
+      padding: EdgeInsets.fromLTRB(16, 8, 16, 4),
+      child: SizedBox(
+        width: double.infinity,
+        child: Text(
+          style: TextStyle(
+            color: designVariables.labelTime,
+            fontSize: 17,
+            height: 22 / 17),
+          text)));
+  }
+}
+
+
 /// A button in an action sheet.
 ///
 /// When built from server data, the action sheet ignores changes in that data;
@@ -160,12 +189,22 @@ abstract class ActionSheetMenuItemButton extends StatelessWidget {
   }
 }
 
-class ActionSheetCancelButton extends StatelessWidget {
-  const ActionSheetCancelButton({super.key});
+/// A stretched gray "Cancel" / "Close" button for the bottom of a bottom sheet.
+class BottomSheetDismissButton extends StatelessWidget {
+  const BottomSheetDismissButton({super.key, required this.style});
+
+  final BottomSheetDismissButtonStyle style;
 
   @override
   Widget build(BuildContext context) {
     final designVariables = DesignVariables.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
+    final label = switch (style) {
+      BottomSheetDismissButtonStyle.cancel => zulipLocalizations.dialogCancel,
+      BottomSheetDismissButtonStyle.close => zulipLocalizations.dialogClose,
+    };
+
     return TextButton(
       style: TextButton.styleFrom(
         minimumSize: const Size.fromHeight(44),
@@ -180,12 +219,20 @@ class ActionSheetCancelButton extends StatelessWidget {
       onPressed: () {
         Navigator.pop(context);
       },
-      child: Text(ZulipLocalizations.of(context).dialogCancel,
+      child: Text(label,
         style: const TextStyle(fontSize: 20, height: 24 / 20)
           .merge(weightVariableTextStyle(context, wght: 600))));
   }
 }
 
+enum BottomSheetDismissButtonStyle {
+  /// The "Cancel" label, for action sheets.
+  cancel,
+
+  /// The "Close" label, for bottom sheets that are read-only or for navigation.
+  close,
+}
+
 /// Show a sheet of actions you can take on a channel.
 ///
 /// Needs a [PageRoot] ancestor.
@@ -613,6 +660,7 @@ void showMessageActionSheet({required BuildContext context, required Message mes
   final optionButtons = [
     if (popularEmojiLoaded)
       ReactionButtons(message: message, pageContext: pageContext),
+    ViewReactionsButton(message: message, pageContext: pageContext),
     StarButton(message: message, pageContext: pageContext),
     if (isComposeBoxOffered)
       QuoteAndReplyButton(message: message, pageContext: pageContext),
@@ -839,6 +887,21 @@ class ReactionButtons extends StatelessWidget {
   }
 }
 
+class ViewReactionsButton extends MessageActionSheetMenuItemButton {
+  ViewReactionsButton({super.key, required super.message, required super.pageContext});
+
+  @override IconData get icon => ZulipIcons.see_who_reacted;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return zulipLocalizations.actionSheetOptionSeeWhoReacted;
+  }
+
+  @override void onPressed() {
+    showViewReactionsSheet(pageContext, messageId: message.id);
+  }
+}
+
 class StarButton extends MessageActionSheetMenuItemButton {
   StarButton({super.key, required super.message, required super.pageContext});