Distinguish muted users in UI #1429

sm-sayedi · 2025-03-21T18:58:23Z

Note: No tests are included in this draft revision.

This PR aims to respect the user's settings for muting other users by distinguishing its related UI appearance. From the list of places in UI mentioned in https://zulip.com/help/mute-a-user, the following are included as they're compatible with the current scope of mobile:

Combined feed sent by muted users, including the name, profile picture, and message content, are hidden behind a Click here to reveal banner. A revealed message can later be re-hidden.

Message from muted user (Before)	Message from muted user (After)

Revealed muted message	Revealed muted message (Long-pressed)

Muted users have their name displayed as "Muted user" for emoji reactions, polls, and when displaying the recipients of group direct messages.

Emoji reactions \| Poll (Before)	Emoji reactions \| Poll (After)

Group DMs with muted user (Before)	Group DMs with muted user (After)

Recent DMs view (Before)	Recent DMs view (After)

Recent conversations and other features that display avatars will show a generic user symbol in place of a muted user's profile picture.

Custom profile field (Before)	Custom profile field (After)

Muted users are excluded from the autocomplete for ~~composing a direct message or~~ mentioning a user.

Fixes: #296

sm-sayedi · 2025-05-22T17:37:04Z

@chrisbobbe This is now ready for a general review, as we discussed on the call this week. PTAL.

I am now starting to write tests.

sm-sayedi · 2025-05-22T17:42:23Z

assets/icons/person.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.9975C6.78948 1.9975 4.9975 3.78948 4.9975 6C4.9975 8.21052 6.78948 10.0025 9 10.0025C11.2105 10.0025 13.0025 8.21052 13.0025 6C13.0025 3.78948 11.2105 1.9975 9 1.9975ZM12.6361 10.77C14.0714 9.67415 14.9975 7.94523 14.9975 6C14.9975 2.68767 12.3123 0.00250244 9 0.00250244C5.68767 0.00250244 3.0025 2.68767 3.0025 6C3.0025 7.94523 3.92857 9.67415 5.36389 10.77C4.3572 11.2147 3.43107 11.8445 2.63781 12.6378C0.950451 14.3252 0.00250244 16.6137 0.00250244 19C0.00250244 19.5509 0.449098 19.9975 1 19.9975C1.55091 19.9975 1.9975 19.5509 1.9975 19C1.9975 17.1428 2.73526 15.3617 4.04849 14.0485C5.36171 12.7353 7.14282 11.9975 9 11.9975C10.8572 11.9975 12.6383 12.7353 13.9515 14.0485C15.2647 15.3617 16.0025 17.1428 16.0025 19C16.0025 19.5509 16.4491 19.9975 17 19.9975C17.5509 19.9975 17.9975 19.5509 17.9975 19C17.9975 16.6137 17.0496 14.3252 15.3622 12.6378C14.5689 11.8445 13.6428 11.2147 12.6361 10.77Z" fill="black"/>
+</svg>


This icon file is displayed differently when used as ZulipIcon. In the file, the head section is an outlined circle, but in the app, it is a filled circle.

Yeah, fill-rule="evenodd" doesn't work when converted to a font. Here's instructions for fixing it:
https://zulip.readthedocs.io/en/latest/subsystems/icons.html#correcting-icons-with-an-evenodd-fill-rule

chrisbobbe · 2025-05-23T23:05:56Z

Thanks, glad to see this progress on this helpful feature!

Comments on the first four commits:

451ec5a api: Add InitialSnapshot.mutedUsers
0e1259d user: Add UserStore.mutedUsers and helper methods
4b8e1b5 api: Handle muted_users event
bbf9f9c icons: Add "person", "eye", and "eye_off" icons

Let's put the API-binding changes in their own api: commits (one for the initial snapshot, one for the event), then after those, just one user: commit that adds UserStore.mutedUsers / helper methods and also handles MutedUsersEvent. The earlier api: commit that creates MutedUsersEvent will need something like this to satisfy the analyzer:

      case MutedUsersEvent():
        // TODO handle

but that's easy to do. 🙂

Then please send those revised commits as a new, non-draft PR and label it for Greg's review:

Add the "integration review" label
Set the "assignees" and "reviewers" metadata

Thanks! I'll start reading the later commits now.

chrisbobbe

And here's a review of the next commit 🙂:

7072228 msglist: Distinguish messages sent by muted users

chrisbobbe · 2025-05-24T00:19:56Z

lib/widgets/message_list.dart

+class PossibleMutedMessage extends InheritedWidget {
+  const PossibleMutedMessage({
+    super.key,
+    required this.changeMuteStatus,
+    required super.child,
+  });
+
+  final ValueChanged<bool> changeMuteStatus;
+
+  @override
+  bool updateShouldNotify(covariant PossibleMutedMessage oldWidget) => false;
+
+  static PossibleMutedMessage of(BuildContext context) {
+    final value = context.getInheritedWidgetOfExactType<PossibleMutedMessage>();
+    assert(value != null, 'No PossibleMutedMessage ancestor');
+    return value!;
+  }
+}


Interesting; the ValueChanged typedef was new to me!

I think a different approach would be worthwhile, though, toward more familiar/transparent state management and to minimize added code in _MessageListPageState.build.

On MessageListPageState, add methods like the following:

/// 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 sender" placeholder. void revealMutedMessage(int messageId); /// For a message from a muted sender, hide the sender and content again /// with the "Muted sender" placeholder. void unrevealMutedMessage(int messageId);

Implement these in _MessageListPageState, backed by a Set of message IDs. The implementations should be simple and don't need to involve the store or any event handling; just simple add/remove/read.

Read the dartdoc on MessageListPage.ancestorOf and the implementation comment under it. Since we'll need to call this from a build method, make a prep commit that creates an InheritedWidget, so that ancestorOf can become something like:

/// The [MessageListPageState] above this context in the tree. /// /// Uses the efficient [BuildContext.dependOnInheritedWidgetOfExactType], /// so this may be called in a build method. static MessageListPageState ancestorOf(BuildContext context) { final state = context .dependOnInheritedWidgetOfExactType<_MessageListPageInheritedWidget>() .state; assert(state != null, 'No _MessageListPageInheritedWidget ancestor'); return state!; }

Ah—in fact I think it might need to be an InheritedNotifier, with the reveal…/unreveal… methods calling notifyListeners, so that widgets update when isMutedMessageRevealed has a new value?

HideMutedMessageButton (perhaps renamed UnrevealMutedMessageButton for consistency) can just do this in its onPressed:

MessageListPage.ancestorOf(pageContext).unrevealMutedMessage(message.id);

The "Reveal" button in the message list can do this:

MessageListPage.ancestorOf(context).revealMutedMessage(message.id);

And the UI state in _MessageWithPossibleSenderState.build can use MessageListPage.ancestorOf(context).isMutedMessageRevealed.

chrisbobbe · 2025-05-24T00:23:40Z

assets/l10n/app_en.arb

+  "revealButtonLabel": "Reveal message for muted sender",
+  "@revealButtonLabel": {
+    "description": "Label for the button revealing hidden message from a muted sender in message list."
+  },


This feels verbose; how about just "Reveal message"? The sender row already says "Muted sender".

chrisbobbe · 2025-05-24T00:24:52Z

assets/l10n/app_en.arb

+  "mutedSender": "Muted sender",
+  "@mutedSender": {
+    "description": "Name for a muted user to display in message list."
+  },


How about "Muted user"? The fact that it's the sender is already communicated by the position of this text.

chrisbobbe · 2025-05-24T00:28:32Z

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",


msglist: Distinguish messages sent by muted users

Commit-message nit: no Fixes: line until a later commit, when all of the issue's work is done :)

chrisbobbe · 2025-05-24T00:31:12Z

lib/widgets/content.dart

+class AvatarPlaceholder extends StatelessWidget {
+  const AvatarPlaceholder({super.key, this.size});
+
+  final double? size;


If all callers pass size, let's make it required

chrisbobbe · 2025-05-24T00:41:20Z

lib/widgets/content.dart

+        // Scale the icon proportionally to match the Figma design.
+        size: size != null ? size! * 20 / 32 : null,


What's the meaning of the size param, and why isn't it used directly here? When I read this I wonder why callers don't just pass the size they want (e.g. from a Figma frame) and expect it to be applied faithfully :)

Ah I think I see: size is really about the dimensions of the square gray box, and the icon is meant to be some fraction of that, right?

Oh, but a nuance: the actual size of the box is controlled by AvatarShape, which callers are supposed to use as a wrapper. So I think the size param calls for a dartdoc explaining why it's needed; something like:

/// The size of the placeholder box. /// /// This should match the `size` passed to the wrapping [AvatarShape]. /// The placeholder's "person" icon will be scaled proportionally to this.

Then here, on the arithmetic, an implementation comment like:

// Where the avatar placeholder appears in the Figma, // this is how the icon is sized proportionally to its box.

chrisbobbe · 2025-05-24T01:01:41Z

lib/widgets/theme.dart

+    required this.grey250,
+    required this.grey550,


Ah, these aren't Figma design variables in the usual way—

—they're part of a "color palette" (see #831).

Since the Figma doesn't seem to offer a variable, let's first see how these look in dark mode (please post screenshots); if they look reasonable (even if not perfect), I'd just hard-code the colors inline, with a TODO(design): dark-mode variant?. If we need a dark-mode variant, please @-mention Vlad in #mobile.

chrisbobbe · 2025-05-24T01:03:55Z

lib/widgets/message_list.dart

+    Widget? revealButton;
+    if (showAsMuted) {
+      revealButton = TextButton.icon(
+        onPressed: () {
+          changeMuteStatus(false);
+        },
+        style: TextButton.styleFrom(
+          minimumSize: Size.zero,
+          padding: EdgeInsets.symmetric(vertical: 4, horizontal: 6),
+          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
+          splashFactory: NoSplash.splashFactory,
+        ).copyWith(
+          backgroundColor: WidgetStateColor.fromMap({
+            WidgetState.pressed: designVariables.neutralButtonBg,
+            ~WidgetState.pressed: designVariables.neutralButtonBg
+              .withFadedAlpha(0),
+          }),
+          foregroundColor: WidgetStateColor.fromMap({
+            WidgetState.pressed: designVariables.neutralButtonLabel,
+            ~WidgetState.pressed: designVariables.neutralButtonLabel
+              .withFadedAlpha(0.85),
+          }),
+        ),
+        icon: Icon(ZulipIcons.eye),
+        label: Text(zulipLocalizations.revealButtonLabel,
+          style: TextStyle(fontSize: 16, height: 1)
+            .merge(weightVariableTextStyle(context, wght: 600))));
+    }


With 20+ lines of code, this would be good to pull out into a separate widget or a helper method

Also renamed "user" to "two_person" to make it consistent with other icons of the same purpose. New icons taken from: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5968-237884&t=dku3J5Fv2dmWo7ht-0 https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5968-264632&t=dku3J5Fv2dmWo7ht-0 https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5968-291260&t=B5jAmeUMMG4dlsU7-0

Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6089-28385&t=28DdYiTs6fXWR9ua-0 Fixes: zulip#296

…ions

The conversations are excluded where all the recipients are muted.

This is solely for a better order.

Direct messages of those conversations are excluded where all the recipients are muted. Currently the applicable narrows are: - CombinedFeedNarrow - MentionsNarrow - StarredMessagesNarrow In the future, this will apply to the ReactionsNarrow from the Web app too, once we have it.

alya · 2025-05-29T17:39:29Z

"Reveal message for muted sender" is an odd phrase. I think @terpimost 's design just had "Reveal":

Was this changed because we decided to put the button on a separate line from the sender? Even so, maybe "Reveal message" is best -- I think it'll be clear enough.

sm-sayedi force-pushed the 296-respect-muted-users branch from c34b94b to d80442b Compare March 24, 2025 03:49

sm-sayedi force-pushed the 296-respect-muted-users branch 3 times, most recently from 86d0e66 to db3216f Compare May 2, 2025 19:01

sm-sayedi force-pushed the 296-respect-muted-users branch from db3216f to 17f2f6b Compare May 6, 2025 02:06

sm-sayedi force-pushed the 296-respect-muted-users branch 5 times, most recently from 8ab889f to cddcfcc Compare May 22, 2025 17:30

sm-sayedi commented May 22, 2025

View reviewed changes

api: Add InitialSnapshot.mutedUsers

451ec5a

sm-sayedi force-pushed the 296-respect-muted-users branch from cddcfcc to 3df45ad Compare May 23, 2025 09:50

chrisbobbe reviewed May 24, 2025

View reviewed changes

sm-sayedi added 12 commits May 24, 2025 07:32

api: Add muted_users event

2d888ac

user: Add UserStore.mutedUsers with helper methods, updating with events

d5178e6

msglist: Distinguish messages sent by muted users

c01b196

Figma design: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6089-28385&t=28DdYiTs6fXWR9ua-0 Fixes: zulip#296

msglist/emoji: Distinguish muted users in message list page and react…

e3a388d

…ions

poll: Distinguish muted users in polls

2a0dfd6

recent-dms: Distinguish muted users in recent DMs page

23c3025

recent-dms: Exclude DM conversations with muted users

8314fc7

The conversations are excluded where all the recipients are muted.

msglist [nfc]: Place _allMessagesVisible right after _messageVisible

6eece26

This is solely for a better order.

profile: Distinguish muted users in custom profile fields of type User

2949af1

autocomplete: Exclude muted users from user-mention autocomplete

c1a1982

sm-sayedi mentioned this pull request May 24, 2025

Muted users prep #1530

Open

sm-sayedi force-pushed the 296-respect-muted-users branch from 3df45ad to c1a1982 Compare May 24, 2025 03:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Distinguish muted users in UI #1429

Distinguish muted users in UI #1429

sm-sayedi commented Mar 21, 2025

Uh oh!

sm-sayedi commented May 22, 2025 •

edited

Loading

Uh oh!

sm-sayedi May 22, 2025

Uh oh!

gnprice May 22, 2025

Uh oh!

chrisbobbe commented May 23, 2025

Uh oh!

chrisbobbe left a comment

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025 •

edited

Loading

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

chrisbobbe May 24, 2025

Uh oh!

alya commented May 29, 2025

Uh oh!

		// Scale the icon proportionally to match the Figma design.
		size: size != null ? size! * 20 / 32 : null,

Distinguish muted users in UI #1429

Are you sure you want to change the base?

Distinguish muted users in UI #1429

Conversation

sm-sayedi commented Mar 21, 2025

Uh oh!

sm-sayedi commented May 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrisbobbe commented May 23, 2025

Uh oh!

chrisbobbe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chrisbobbe May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alya commented May 29, 2025

Uh oh!

sm-sayedi commented May 22, 2025 •

edited

Loading

chrisbobbe May 24, 2025 •

edited

Loading