msglist: Hide content of muted messages, with a "Reveal message" button

chrisbobbe · sm-sayedi · chrisbobbe · commit c90fa9df9f25 · 2025-06-10T10:27:10.000-07:00
Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6089-28385&t=28DdYiTs6fXWR9ua-0 Co-authored-by: Sayed Mahmood Sayedi <smahmood.sayedi@gmail.com>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -983,7 +983,7 @@
   "@noEarlierMessages": {
     "description": "Text to show at the start of a message list if there are no earlier messages."
   },
-  "revealButtonLabel": "Reveal message for muted sender",
+  "revealButtonLabel": "Reveal message",
   "@revealButtonLabel": {
     "description": "Label for the button revealing hidden message from a muted sender in message list."
   },
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -1466,7 +1466,7 @@ abstract class ZulipLocalizations {
   /// Label for the button revealing hidden message from a muted sender in message list.
   ///
   /// In en, this message translates to:
-  /// **'Reveal message for muted sender'**
+  /// **'Reveal message'**
   String get revealButtonLabel;
 
   /// Text to display in place of a muted user's name.
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -797,7 +797,7 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -797,7 +797,7 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -797,7 +797,7 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -797,7 +797,7 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -797,7 +797,7 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -808,7 +808,7 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   String get noEarlierMessages => 'Brak historii';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -811,7 +811,7 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   String get noEarlierMessages => 'Предшествующих сообщений нет';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -799,7 +799,7 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -811,7 +811,7 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   String get noEarlierMessages => 'Немає попередніх повідомлень';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -797,7 +797,7 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   String get noEarlierMessages => 'No earlier messages';
 
   @override
-  String get revealButtonLabel => 'Reveal message for muted sender';
+  String get revealButtonLabel => 'Reveal message';
 
   @override
   String get mutedUser => 'Muted user';
diff --git a/lib/widgets/action_sheet.dart b/lib/widgets/action_sheet.dart
@@ -589,6 +589,8 @@ void showMessageActionSheet({required BuildContext context, required Message mes
   final markAsUnreadSupported = store.zulipFeatureLevel >= 155; // TODO(server-6)
   final showMarkAsUnreadButton = markAsUnreadSupported && isMessageRead;
 
+  final isSenderMuted = store.isUserMuted(message.senderId);
+
   final optionButtons = [
     if (popularEmojiLoaded)
       ReactionButtons(message: message, pageContext: pageContext),
@@ -597,6 +599,8 @@ void showMessageActionSheet({required BuildContext context, required Message mes
       QuoteAndReplyButton(message: message, pageContext: pageContext),
     if (showMarkAsUnreadButton)
       MarkAsUnreadButton(message: message, pageContext: pageContext),
+    if (isSenderMuted)
+      UnrevealMutedMessageButton(message: message, pageContext: pageContext),
     CopyMessageTextButton(message: message, pageContext: pageContext),
     CopyMessageLinkButton(message: message, pageContext: pageContext),
     ShareButton(message: message, pageContext: pageContext),
@@ -902,6 +906,27 @@ class MarkAsUnreadButton extends MessageActionSheetMenuItemButton {
   }
 }
 
+class UnrevealMutedMessageButton extends MessageActionSheetMenuItemButton {
+  UnrevealMutedMessageButton({
+    super.key,
+    required super.message,
+    required super.pageContext,
+  });
+
+  @override
+  IconData get icon => ZulipIcons.eye_off;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return zulipLocalizations.actionSheetOptionHideMutedMessage;
+  }
+
+  @override
+  void onPressed() {
+    findMessageListPage().unrevealMutedMessage(message.id);
+  }
+}
+
 class CopyMessageTextButton extends MessageActionSheetMenuItemButton {
   CopyMessageTextButton({super.key, required super.message, required super.pageContext});
 
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -12,6 +12,7 @@ import '../model/typing_status.dart';
 import 'action_sheet.dart';
 import 'actions.dart';
 import 'app_bar.dart';
+import 'button.dart';
 import 'color.dart';
 import 'compose_box.dart';
 import 'content.dart';
@@ -138,6 +139,19 @@ abstract class MessageListPageState {
   ///
   /// This is null if [MessageList] has not mounted yet.
   MessageListView? get model;
+
+  /// The "revealed" state of a message from a muted sender.
+  ///
+  /// See also: [revealMutedMessage], [unrevealMutedMessage].
+  bool isMutedMessageRevealed(int messageId);
+
+  /// For a message from a muted sender, reveal the sender and content,
+  /// replacing the "Muted user" placeholder.
+  void revealMutedMessage(int messageId);
+
+  /// For a message from a muted sender, hide the sender and content again
+  /// with the "Muted user" placeholder.
+  void unrevealMutedMessage(int messageId);
 }
 
 class MessageListPage extends StatefulWidget {
@@ -183,6 +197,25 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
   MessageListView? get model => _messageListKey.currentState?.model;
   final GlobalKey<_MessageListState> _messageListKey = GlobalKey();
 
+  @override
+  bool isMutedMessageRevealed(int messageId) =>
+    _revealedMutedMessages.contains(messageId);
+  final Set<int> _revealedMutedMessages = {};
+
+  @override
+  void revealMutedMessage(int messageId) {
+    setState(() {
+      _revealedMutedMessages.add(messageId);
+    });
+  }
+
+  @override
+  void unrevealMutedMessage(int messageId) {
+    setState(() {
+      _revealedMutedMessages.remove(messageId);
+    });
+  }
+
   @override
   void initState() {
     super.initState();
@@ -1447,12 +1480,18 @@ class _SenderRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
+    final messageListPage = MessageListPage.ancestorOf(context);
     final messageListTheme = MessageListTheme.of(context);
     final designVariables = DesignVariables.of(context);
 
     final sender = store.getUser(message.senderId);
     final time = _kMessageTimestampFormat
       .format(DateTime.fromMillisecondsSinceEpoch(1000 * message.timestamp));
+
+    final showAsMuted = store.isUserMuted(message.senderId)
+      && message is Message // i.e., not an outbox message
+      && !messageListPage.isMutedMessageRevealed((message as Message).id);
+
     return Padding(
       padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
       child: Row(
@@ -1461,22 +1500,26 @@ class _SenderRow extends StatelessWidget {
         children: [
           Flexible(
             child: GestureDetector(
-              onTap: () => Navigator.push(context,
+              onTap: () => showAsMuted ? null : Navigator.push(context,
                 ProfilePage.buildRoute(context: context,
                   userId: message.senderId)),
               child: Row(
                 children: [
                   Avatar(size: 32, borderRadius: 3,
-                    userId: message.senderId),
+                    userId: message.senderId,
+                    replaceIfMuted: showAsMuted),
                   const SizedBox(width: 8),
                   Flexible(
                     child: Text(message is Message
-                        ? store.senderDisplayName(message as Message)
+                        ? store.senderDisplayName(message as Message,
+                            replaceIfMuted: showAsMuted)
                         : store.userDisplayName(message.senderId),
                       style: TextStyle(
                         fontSize: 18,
                         height: (22 / 18),
-                        color: designVariables.title,
+                        color: showAsMuted
+                          ? designVariables.title.withFadedAlpha(0.5)
+                          : designVariables.title,
                       ).merge(weightVariableTextStyle(context, wght: 600)),
                       overflow: TextOverflow.ellipsis)),
                   if (sender?.isBot ?? false) ...[
@@ -1514,6 +1557,7 @@ class MessageWithPossibleSender extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
+    final messageListPage = MessageListPage.ancestorOf(context);
     final designVariables = DesignVariables.of(context);
     final message = item.message;
 
@@ -1557,6 +1601,9 @@ class MessageWithPossibleSender extends StatelessWidget {
       }
     }
 
+    final showAsMuted = store.isUserMuted(message.senderId)
+      && !messageListPage.isMutedMessageRevealed(message.id);
+
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
       onLongPress: () => showMessageActionSheet(context: context, message: message),
@@ -1570,28 +1617,38 @@ class MessageWithPossibleSender extends StatelessWidget {
             textBaseline: localizedTextBaseline(context),
             children: [
               const SizedBox(width: 16),
-              Expanded(child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  content,
-                  if ((message.reactions?.total ?? 0) > 0)
-                    ReactionChipsList(messageId: message.id, reactions: message.reactions!),
-                  if (editMessageErrorStatus != null)
-                    _EditMessageStatusRow(messageId: message.id, status: editMessageErrorStatus)
-                  else if (editStateText != null)
-                    Padding(
-                      padding: const EdgeInsets.only(bottom: 4),
-                      child: Text(editStateText,
-                        textAlign: TextAlign.end,
-                        style: TextStyle(
-                          color: designVariables.labelEdited,
-                          fontSize: 12,
-                          height: (12 / 12),
-                          letterSpacing: proportionalLetterSpacing(context,
-                            0.05, baseFontSize: 12))))
-                  else
-                    Padding(padding: const EdgeInsets.only(bottom: 4))
-                ])),
+              Expanded(child: showAsMuted
+                ? Align(
+                    alignment: AlignmentDirectional.topStart,
+                    child: ZulipWebUiKitButton(
+                      label: zulipLocalizations.revealButtonLabel,
+                      icon: ZulipIcons.eye,
+                      size: ZulipWebUiKitButtonSize.small,
+                      intent: ZulipWebUiKitButtonIntent.neutral,
+                      attention: ZulipWebUiKitButtonAttention.minimal,
+                      onPressed: () => messageListPage.revealMutedMessage(message.id)))
+                : Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      content,
+                      if ((message.reactions?.total ?? 0) > 0)
+                        ReactionChipsList(messageId: message.id, reactions: message.reactions!),
+                      if (editMessageErrorStatus != null)
+                        _EditMessageStatusRow(messageId: message.id, status: editMessageErrorStatus)
+                      else if (editStateText != null)
+                        Padding(
+                          padding: const EdgeInsets.only(bottom: 4),
+                          child: Text(editStateText,
+                            textAlign: TextAlign.end,
+                            style: TextStyle(
+                              color: designVariables.labelEdited,
+                              fontSize: 12,
+                              height: (12 / 12),
+                              letterSpacing: proportionalLetterSpacing(context,
+                                0.05, baseFontSize: 12))))
+                      else
+                        Padding(padding: const EdgeInsets.only(bottom: 4))
+                    ])),
               SizedBox(width: 16,
                 child: star),
             ]),
diff --git a/test/widgets/action_sheet_test.dart b/test/widgets/action_sheet_test.dart
diff --git a/test/widgets/message_list_test.dart b/test/widgets/message_list_test.dart
