From e5a339df25eb9022cffeb69f40a963be9c075d2b Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad Bodas <abhijeetbodas2001@gmail.com>
Date: Wed, 12 May 2021 11:43:26 +0530
Subject: [PATCH] recent topics: Handle muted user avatars in participants.

We use styling same as that of the number shown for overflow
(e.g "+3") which has a gray background.
To keep these avatars up-to-date, we need to rerender the
recent topics view after receiving a `muted_users` event.

Also update the user documentation to mention this detail.
We deliberately avoid mentioning "recent topics" because
this applies to mobile too.
---
 frontend_tests/node_tests/people.js   |  2 ++
 static/js/muting_ui.js                |  4 ++++
 static/js/people.js                   |  1 +
 static/templates/recent_topic_row.hbs | 12 +++++++++---
 templates/zerver/help/mute-a-user.md  |  3 +++
 5 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend_tests/node_tests/people.js b/frontend_tests/node_tests/people.js
index a28bedf393..a4af6c674c 100644
--- a/frontend_tests/node_tests/people.js
+++ b/frontend_tests/node_tests/people.js
@@ -681,9 +681,11 @@ test_people("message_methods", () => {
         "https://secure.gravatar.com/avatar/6dbdd7946b58d8b11351fcb27e5cdd55?d=identicon&s=50",
     );
 
+    muting.add_muted_user(30);
     assert.deepEqual(people.sender_info_for_recent_topics_row([30]), [
         {
             avatar_url_small: "/avatar/30&s=50",
+            is_muted: true,
             email: "me@example.com",
             full_name: me.full_name,
             is_admin: false,
diff --git a/static/js/muting_ui.js b/static/js/muting_ui.js
index 308ebf0c1a..45df71254a 100644
--- a/static/js/muting_ui.js
+++ b/static/js/muting_ui.js
@@ -169,6 +169,10 @@ export function rerender_for_muted_user() {
 
     activity.redraw();
     pm_list.update_private_messages();
+
+    // If a user is (un)muted, we want to update their avatars on the recent topics
+    // participants column.
+    recent_topics.complete_rerender();
 }
 
 export function handle_user_updates(muted_user_ids) {
diff --git a/static/js/people.js b/static/js/people.js
index 491d111889..f92f03cd9a 100644
--- a/static/js/people.js
+++ b/static/js/people.js
@@ -662,6 +662,7 @@ export function sender_info_for_recent_topics_row(sender_ids) {
     for (const id of sender_ids) {
         const sender = {...get_by_user_id(id)};
         sender.avatar_url_small = small_avatar_url_for_person(sender);
+        sender.is_muted = muting.is_user_muted(id);
         senders_info.push(sender);
     }
     return senders_info;
diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs
index 26788c03fc..25e13b8536 100644
--- a/static/templates/recent_topic_row.hbs
+++ b/static/templates/recent_topic_row.hbs
@@ -37,9 +37,15 @@
             </li>
             {{/if}}
             {{#each senders}}
-            <li class="recent_avatars_item" title="{{this.full_name}}">
-                <img src="{{this.avatar_url_small}}" class="recent_avatars_img" />
-            </li>
+                {{#if this.is_muted}}
+                <li class="recent_avatars_item" title="{{t 'Muted user'}}">
+                    <span><i class="fa fa-user recent_avatars_others"></i></span>
+                </li>
+                {{else}}
+                <li class="recent_avatars_item" title="{{this.full_name}}">
+                    <img src="{{this.avatar_url_small}}" class="recent_avatars_img" />
+                </li>
+                {{/if}}
             {{/each}}
         </ul>
     </td>
diff --git a/templates/zerver/help/mute-a-user.md b/templates/zerver/help/mute-a-user.md
index 05d93682a9..1af57e5a54 100644
--- a/templates/zerver/help/mute-a-user.md
+++ b/templates/zerver/help/mute-a-user.md
@@ -36,6 +36,9 @@ have the following effects:
 * Muted users are excluded from the autocomplete for composing a
   private message or [mentioning a user](/help/mention-a-user-or-group).
 
+* Areas in Zulip which show users' avatars will now show a generic user symbol
+  in place of a muted user's profile picture.
+
 * To avoid interfering with administration tasks, parts of the
   settings UI (such as the list of subscribers to a stream, or members
   of the organization) will display muted users' names and other