message: Improve muted sender design. by apoorvapendse · Pull Request #34794 · zulip/zulip

apoorvapendse · 2025-06-02T11:55:21Z

If the message needs to be hidden because the sender was muted,
we replace the sender's avatar with that of a muted sender
and name them as "Muted sender".

This also introduces a new reveal button to show the message.

We hide the muted message notice on mobile widths.

Discussion: https://chat.zulip.org/#narrow/channel/101-design/topic/muted.20users/near/2185476
Fixes: #32945.

CZO: #design > muted users

Follow-up items

Add a "Hide" button when a hidden message is revealed. czo.
Make the muted user avatars clickable to get information about the muted user's identity without showing the message itself: message: Improve muted sender design. #34794 (comment)
~~- [ ] Figure out pills for muted participants in DMs and group DMs czo~~

Updated version can be found at #34794 (comment)

Screenshots and screen captures:

light	dark

In a mobile breakpoint we can hide the message and just have something like this:

I am doing this with cq_sm_min as the breakpoint for now.

light	dark

I hid the ~~reveal label~~ muted sender message notice at the cq_mm_min breakpoint to avoid truncating "Muted user" on small screens and reduce visual clutter.
Feedback welcome.

Device: iPhone 12 Pro (390x844)

Without breakpoint	With breakpoint

Self-review checklist

apoorvapendse · 2025-06-02T12:55:50Z

@whilstsomebody, can you do a buddy review if you find time?
Thanks.

whilstsomebody · 2025-06-02T14:20:02Z

Tag me again when this is ready for a review.

apoorvapendse · 2025-06-03T06:25:15Z

tagging @alya, @terpimost for a design review

chrisbobbe · 2025-06-06T03:19:43Z

How about "Muted user" in place of "Muted sender"? That's our plan in mobile; the fact that it's the sender is already communicated by the position of the text. (Thanks @sm-sayedi for mentioning this at zulip/zulip-flutter#1429 (comment) )

apoorvapendse · 2025-06-19T15:25:18Z

Updated Screencast and screenshots for this and this suggestion.

apoorvapendse · 2025-06-19T15:27:08Z

tagging @whilstsomebody for buddy review.
@zulipbot add "buddy review".

whilstsomebody

Left some comments.
Looks good in the manual testiing.

whilstsomebody · 2025-06-20T16:38:47Z

@@ -1,5 +1,5 @@
 <div id="message-row-{{message_list_id}}-{{msg/id}}" data-message-id="{{msg/id}}"
-  class="message_row{{#unless msg/is_stream}} private-message{{/unless}}{{#if include_sender}} messagebox-includes-sender{{/if}}{{#if mention_classname}} {{mention_classname}}{{/if}}{{#if msg.unread}} unread{{/if}} {{#if msg.locally_echoed}}locally-echoed{{/if}} selectable_row"
+  class="message_row{{#unless msg/is_stream}} private-message{{/unless}}{{#if include_sender}} messagebox-includes-sender{{/if}}{{#if mention_classname}} {{mention_classname}}{{/if}}{{#if msg.unread}} unread{{/if}} {{#if msg.locally_echoed}}locally-echoed{{/if}} selectable_row {{#if is_hidden}}muted_message_sender{{/if}}"


muted-message-sender and not muted_message_sender.

whilstsomebody

Looks good to me.

apoorvapendse · 2025-06-23T09:32:49Z

@zulipbot add "mentor review"

apoorvapendse · 2025-06-23T09:33:36Z

Thanks @whilstsomebody!
@punchagan, @vinitS101 tagging you for mentor review.

apoorvapendse · 2025-11-27T13:04:33Z

We should have a bit of margin between the text and the button (when hovered).

For this, I introduced a margin-left: 0.1em.
Tagging @karlstolley, in case he has better ideas.

Light, no hover	Light, hover

previous version:

Light, no hover	Light, hover

karlstolley · 2025-12-01T21:46:27Z

The margin-left approach is probably fine for now.

alya · 2025-12-01T21:50:46Z

@karlstolley Any more feedback from your side before this goes to integration review?

karlstolley · 2025-12-03T19:22:34Z

Should we address the state of the UI when viewing a DM conversation with a muted user, either here or as a follow-up? As in main, we're not showing an avatar here. We also have "Muted user" in the left sidebar and sender row, but then the compose box shows the pill and name, plain as day:

karlstolley · 2025-12-03T19:24:37Z

Left a question about what looks now like some dead CSS. Commit history also needs to be cleaned up and finalized before we can mark this one for integration review.

apoorvapendse · 2025-12-04T01:24:24Z

Addressed the comment and updated the commit history.

alya · 2025-12-04T02:42:10Z

The DM part can be a follow-up if it's not a regression in this PR.

apoorvapendse · 2025-12-04T16:03:26Z

This is how it looks like on my end, I think the pills have to be updated to show the Muted user name and avatar.

screenshot

Probably worth addressing as a follow-up?

Edit: But wait, what if there are multiple users in these pills, say for a group DM and all are muted, I don't think having multiple pills showing "Muted user" makes sense in that case.

Example: Assume I muted Tim and Alya here

I imagine this will also require performing multiple clicks to show/hide the users behind these muted user pills, so not sure how useful this pill masking feature might be.

Maybe knowing who the DM participants are but with hidden messages (so you know you muted them) is better UX wise?

karlstolley · 2025-12-04T16:21:03Z

Cool. Yes, let's address the DM issue as a prompt follow up.

@apoorvapendse, probably worth opening a #design discussion about the group DMs case, if a search of CZO doesn't turn up previous discussions of that.

alya · 2025-12-04T16:34:17Z

@karlstolley I think the PR is ready for integration review, then?

apoorvapendse · 2025-12-04T17:15:19Z

Opened #design > muted user UX for DMs for the follow-up discussion.

timabbott · 2025-12-04T21:05:28Z

@@ -1,6 +1,6 @@
-<div class="u-{{msg/sender_id}} message-avatar sender_info_hover view_user_card_tooltip no-select" aria-hidden="true" data-is-bot="{{sender_is_bot}}">
+<div class="u-{{msg/sender_id}} message-avatar {{#unless is_hidden}}sender_info_hover view_user_card_tooltip{{/unless}} no-select" aria-hidden="true" data-is-bot="{{sender_is_bot}}">


Why is the tooltip for viewing the user card being disabled here? I feel like it's totally reasonable to want that tooltip to work for muted users, if we're going to show an avatar element.

Just removing this conditional seems to not make that work. I think we can change this in a follow-up; added it to the list at the top of the PR.

timabbott · 2025-12-04T21:07:31Z

    <i role="button" tabindex="0" class="message-controls-icon star zulip-icon {{#if msg/starred}}zulip-icon-star-filled{{else}}zulip-icon-star{{/if}}"></i>
    {{/unless}}
 </div>
+


Let's not add a blank line here in this commit.

Fixed this myself so we can merge this.

If the message needs to be hidden because the sender was muted, we replace the sender's avatar with that of a muted sender and name them as "Muted sender". Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

This is reworded because we will introduce a reveal button instead of the "Click here to reveal" link. Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

We want to avoid showing the hidden message notice on mobile widths. Discussion: https://chat.zulip.org/#narrow/channel/101-design/topic/muted.20users/near/2189225 Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

We keep the reveal button invisible until hovered. This mechanism is only followed for devices where hover is possible, on touchscreens the "Reveal" button is visible by default. Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

Fixes: zulip#32945. Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

timabbott · 2025-12-04T21:18:52Z

Merged with the changes detailed in #34794 (comment), thanks for all the work on this @apoorvapendse and @karlstolley!

@apoorvapendse please consider the two follow-ups to be priorities; it'd be nice if those made it to Zulip Cloud at the same time as this change.

zulipbot added the size: XL label Jun 2, 2025

apoorvapendse marked this pull request as draft June 2, 2025 11:55

apoorvapendse force-pushed the improve-muted-sender-ui branch 2 times, most recently from 27da778 to 19804a2 Compare June 2, 2025 12:23

apoorvapendse force-pushed the improve-muted-sender-ui branch from 19804a2 to 48c9f1a Compare June 2, 2025 13:18

apoorvapendse force-pushed the improve-muted-sender-ui branch from 48c9f1a to eaa498b Compare June 3, 2025 06:11

apoorvapendse force-pushed the improve-muted-sender-ui branch 2 times, most recently from 6a8d7a0 to b38fc49 Compare June 4, 2025 12:05

sm-sayedi mentioned this pull request Jun 6, 2025

Distinguish muted users in UI zulip/zulip-flutter#1429

Closed

apoorvapendse force-pushed the improve-muted-sender-ui branch from b38fc49 to 36b317f Compare June 6, 2025 05:36

apoorvapendse force-pushed the improve-muted-sender-ui branch from 36b317f to a17f0de Compare June 19, 2025 14:51

apoorvapendse commented Jun 19, 2025

View reviewed changes

Comment thread web/styles/message_row.css Outdated

apoorvapendse marked this pull request as ready for review June 19, 2025 15:26

zulipbot added the buddy review GSoC buddy review needed. label Jun 19, 2025

whilstsomebody suggested changes Jun 20, 2025

View reviewed changes

apoorvapendse force-pushed the improve-muted-sender-ui branch 2 times, most recently from 9dcd249 to f0968e3 Compare June 20, 2025 17:18

apoorvapendse changed the title ~~[WIP] message: Improve muted sender design.~~ message: Improve muted sender design. Jun 21, 2025

apoorvapendse requested a review from whilstsomebody June 21, 2025 03:44

whilstsomebody approved these changes Jun 21, 2025

View reviewed changes

zulipbot removed the buddy review GSoC buddy review needed. label Jun 21, 2025

zulipbot added the mentor review GSoC mentor review needed. label Jun 23, 2025

apoorvapendse force-pushed the improve-muted-sender-ui branch from fed6773 to c03325c Compare November 27, 2025 13:02

apoorvapendse force-pushed the improve-muted-sender-ui branch from 8c7f8da to 4f9ae38 Compare November 27, 2025 13:17

apoorvapendse force-pushed the improve-muted-sender-ui branch from 4f9ae38 to 72418d3 Compare December 4, 2025 01:17

apoorvapendse force-pushed the improve-muted-sender-ui branch from 72418d3 to 8a1d55c Compare December 4, 2025 01:28

alya added integration review Added by maintainers when a PR may be ready for integration. and removed maintainer review PR is ready for review by Zulip maintainers. labels Dec 4, 2025

timabbott reviewed Dec 4, 2025

View reviewed changes

apoorvapendse added 6 commits December 4, 2025 13:08

messages: Add muted user avatar and user name.

073f830

If the message needs to be hidden because the sender was muted, we replace the sender's avatar with that of a muted sender and name them as "Muted sender". Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

messages: Disable edited labels and status emoji for muted user.

07acbc2

Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

muted_users: Update message hidden dialog.

eeddf4e

This is reworded because we will introduce a reveal button instead of the "Click here to reveal" link. Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

muted_users: Add reveal button for hidden messages.

e8fefa0

We keep the reveal button invisible until hovered. This mechanism is only followed for devices where hover is possible, on touchscreens the "Reveal" button is visible by default. Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

message_body: Show reminders line for hidden messages.

290524c

Fixes: zulip#32945. Signed-off-by: apoorvapendse <apoorvavpendse@gmail.com>

timabbott force-pushed the improve-muted-sender-ui branch from 8a1d55c to 290524c Compare December 4, 2025 21:18

timabbott merged commit 290524c into zulip:main Dec 4, 2025
5 of 6 checks passed

This was referenced Dec 5, 2025

muted_users: Enable username and avatar interaction. #36914

Merged

muted_users: Introduce a "Hide" button for revealed messages. #36930

Merged

		@@ -1,6 +1,6 @@
		<div class="u-{{msg/sender_id}} message-avatar sender_info_hover view_user_card_tooltip no-select" aria-hidden="true" data-is-bot="{{sender_is_bot}}">
		<div class="u-{{msg/sender_id}} message-avatar {{#unless is_hidden}}sender_info_hover view_user_card_tooltip{{/unless}} no-select" aria-hidden="true" data-is-bot="{{sender_is_bot}}">

Uh oh!

Conversation

apoorvapendse commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

apoorvapendse commented Jun 2, 2025

Uh oh!

whilstsomebody commented Jun 2, 2025

Uh oh!

apoorvapendse commented Jun 3, 2025

Uh oh!

chrisbobbe commented Jun 6, 2025

Uh oh!

Uh oh!

apoorvapendse commented Jun 19, 2025

Uh oh!

apoorvapendse commented Jun 19, 2025

Uh oh!

whilstsomebody left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

whilstsomebody Jun 20, 2025

Choose a reason for hiding this comment

Uh oh!

whilstsomebody left a comment

Choose a reason for hiding this comment

Uh oh!

apoorvapendse commented Jun 23, 2025

Uh oh!

apoorvapendse commented Jun 23, 2025

Uh oh!

apoorvapendse commented Nov 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

karlstolley commented Dec 1, 2025

Uh oh!

alya commented Dec 1, 2025

Uh oh!

karlstolley commented Dec 3, 2025

Uh oh!

karlstolley commented Dec 3, 2025

Uh oh!

apoorvapendse commented Dec 4, 2025

Uh oh!

alya commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

apoorvapendse commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

karlstolley commented Dec 4, 2025

Uh oh!

alya commented Dec 4, 2025

Uh oh!

apoorvapendse commented Dec 4, 2025

Uh oh!

timabbott Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

timabbott Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

timabbott Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

timabbott Dec 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

timabbott commented Dec 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

apoorvapendse commented Jun 2, 2025 •

edited

Loading

apoorvapendse commented Nov 27, 2025 •

edited

Loading

alya commented Dec 4, 2025 •

edited

Loading

apoorvapendse commented Dec 4, 2025 •

edited

Loading