msglist: Distinguish messages sent by muted senders

sm-sayedi · sm-sayedi · commit e77e29b21c70 · 2025-03-23T07:35:03.000+04:30
Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6089-28385&t=28DdYiTs6fXWR9ua-0 Fixes: zulip#296
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -128,6 +128,10 @@
   "@actionSheetOptionMarkAsUnread":  {
     "description": "Label for mark as unread button on action sheet."
   },
+  "actionSheetOptionHideMutedMessage": "Hide muted message again",
+  "@actionSheetOptionHideMutedMessage":  {
+    "description": "Label for hide muted message again button on action sheet."
+  },
   "actionSheetOptionShare": "Share",
   "@actionSheetOptionShare":  {
     "description": "Label for share button on action sheet."
@@ -851,6 +855,14 @@
   "@noEarlierMessages": {
     "description": "Text to show at the start of a message list if there are no earlier messages."
   },
+  "mutedSender": "Muted sender",
+  "@mutedSender": {
+    "description": "Name for a muted user to display in message list."
+  },
+  "revealButtonLabel": "Reveal message for muted sender",
+  "@revealButtonLabel": {
+    "description": "Label for the button revealing hidden message from a muted sender in message list."
+  },
   "scrollToBottomTooltip": "Scroll to bottom",
   "@scrollToBottomTooltip": {
     "description": "Tooltip for button to scroll to bottom."
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -297,6 +297,12 @@ abstract class ZulipLocalizations {
   /// **'Mark as unread from here'**
   String get actionSheetOptionMarkAsUnread;
 
+  /// Label for hide muted message again button on action sheet.
+  ///
+  /// In en, this message translates to:
+  /// **'Hide muted message again'**
+  String get actionSheetOptionHideMutedMessage;
+
   /// Label for share button on action sheet.
   ///
   /// In en, this message translates to:
@@ -1245,6 +1251,18 @@ abstract class ZulipLocalizations {
   /// **'No earlier messages'**
   String get noEarlierMessages;
 
+  /// Name for a muted user to display in message list.
+  ///
+  /// In en, this message translates to:
+  /// **'Muted sender'**
+  String get mutedSender;
+
+  /// 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'**
+  String get revealButtonLabel;
+
   /// Tooltip for button to scroll to bottom.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Mark as unread from here';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Share';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'No earlier messages';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Scroll to bottom';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Mark as unread from here';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Share';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'No earlier messages';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Scroll to bottom';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Mark as unread from here';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Share';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'No earlier messages';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Scroll to bottom';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Mark as unread from here';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Share';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'No earlier messages';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Scroll to bottom';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Odtąd oznacz jako nieprzeczytane';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Udostępnij';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'Brak historii';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Przewiń do dołu';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Отметить как непрочитанные начиная отсюда';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Поделиться';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'No earlier messages';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Scroll to bottom';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -106,6 +106,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get actionSheetOptionMarkAsUnread => 'Označiť ako neprečítané od tejto správy';
 
+  @override
+  String get actionSheetOptionHideMutedMessage => 'Hide muted message again';
+
   @override
   String get actionSheetOptionShare => 'Zdielať';
 
@@ -664,6 +667,12 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get noEarlierMessages => 'No earlier messages';
 
+  @override
+  String get mutedSender => 'Muted sender';
+
+  @override
+  String get revealButtonLabel => 'Reveal message for muted sender';
+
   @override
   String get scrollToBottomTooltip => 'Scroll to bottom';
 
diff --git a/lib/widgets/action_sheet.dart b/lib/widgets/action_sheet.dart
@@ -562,13 +562,18 @@ 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 = [
     ReactionButtons(message: message, pageContext: pageContext),
     StarButton(message: message, pageContext: pageContext),
     if (isComposeBoxOffered)
       QuoteAndReplyButton(message: message, pageContext: pageContext),
     if (showMarkAsUnreadButton)
       MarkAsUnreadButton(message: message, pageContext: pageContext),
+    if (isSenderMuted)
+      HideMutedMessageButton(message: message, pageContext: pageContext,
+        messageContext: context),
     CopyMessageTextButton(message: message, pageContext: pageContext),
     CopyMessageLinkButton(message: message, pageContext: pageContext),
     ShareButton(message: message, pageContext: pageContext),
@@ -883,6 +888,31 @@ class MarkAsUnreadButton extends MessageActionSheetMenuItemButton {
   }
 }
 
+class HideMutedMessageButton extends MessageActionSheetMenuItemButton {
+  HideMutedMessageButton({
+    super.key,
+    required super.message,
+    required super.pageContext,
+    required this.messageContext,
+  });
+
+  final BuildContext messageContext;
+
+  @override
+  IconData get icon => ZulipIcons.eye_off;
+
+  @override
+  String label(ZulipLocalizations zulipLocalizations) {
+    return zulipLocalizations.actionSheetOptionHideMutedMessage;
+  }
+
+  @override
+  void onPressed() {
+    if (!messageContext.mounted) return;
+    PossibleMutedMessage.of(messageContext).changeMuteStatus(true);
+  }
+}
+
 class CopyMessageTextButton extends MessageActionSheetMenuItemButton {
   CopyMessageTextButton({super.key, required super.message, required super.pageContext});
 
diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart
@@ -16,6 +16,7 @@ import '../model/binding.dart';
 import '../model/content.dart';
 import '../model/internal_link.dart';
 import 'code_block.dart';
+import 'color.dart';
 import 'dialog.dart';
 import 'icons.dart';
 import 'inset_shadow.dart';
@@ -24,6 +25,7 @@ import 'message_list.dart';
 import 'poll.dart';
 import 'store.dart';
 import 'text.dart';
+import 'theme.dart';
 
 /// A central place for styles for Zulip content (rendered Zulip Markdown).
 ///
@@ -1565,18 +1567,44 @@ class Avatar extends StatelessWidget {
     required this.userId,
     required this.size,
     required this.borderRadius,
+    this.showAsMuted = false,
   });
 
   final int userId;
   final double size;
   final double borderRadius;
+  final bool showAsMuted;
 
   @override
   Widget build(BuildContext context) {
     return AvatarShape(
       size: size,
       borderRadius: borderRadius,
-      child: AvatarImage(userId: userId, size: size));
+      child: showAsMuted
+        ? AvatarPlaceholder(
+            // Scale the icon proportionally to match the Figma design.
+            iconSize: size * 20 / 32
+          )
+        : AvatarImage(userId: userId, size: size));
+  }
+}
+
+/// A placeholder avatar for muted users.
+///
+/// Wrap this with [AvatarShape].
+class AvatarPlaceholder extends StatelessWidget {
+  const AvatarPlaceholder({super.key, this.iconSize});
+
+  final double? iconSize;
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: designVariables.grey250.withFadedAlpha(0.5)),
+      child: Icon(ZulipIcons.person, size: iconSize,
+        color: designVariables.grey550.withFadedAlpha(0.5)));
   }
 }
 
diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
