recipient_row: Use unmute icon for topics in muted stream.

Updated mute_or_unmute_topic to take visibility policy as parameter
and set topic visibility_policy to the passed visibility_policy.

In zulip.css, updated CSS to set opacity as per visibility_policy.

Updated click handlers for recipient_row mute/unmute icons to
work as per stream.

Fixes #25124

web/src/click_handlers.js

@@ -43,6 +43,7 @@ import * as topic_list from "./topic_list";
 import * as ui_util from "./ui_util";
 import {parse_html} from "./ui_util";
 import * as user_profile from "./user_profile";
+import * as user_topics from "./user_topics";
 import * as util from "./util";
 
 export function initialize() {
@@ -384,15 +385,40 @@ export function initialize() {
         message_edit.toggle_resolve_topic(message_id, topic_name);
     });
 
-    // TOPIC MUTING
-    $("body").on("click", ".message_header .on_hover_topic_mute", (e) => {
+    // Mute topic in a unmuted stream
+    $("body").on("click", ".message_header .stream_unmuted.on_hover_topic_mute", (e) => {
         e.stopPropagation();
-        muted_topics_ui.mute_or_unmute_topic($(e.target), true);
+        muted_topics_ui.mute_or_unmute_topic(
+            $(e.target),
+            user_topics.all_visibility_policies.MUTED,
+        );
     });
 
-    $("body").on("click", ".message_header .on_hover_topic_unmute", (e) => {
+    // Unmute topic in a unmuted stream
+    $("body").on("click", ".message_header .stream_unmuted.on_hover_topic_unmute", (e) => {
         e.stopPropagation();
-        muted_topics_ui.mute_or_unmute_topic($(e.target), false);
+        muted_topics_ui.mute_or_unmute_topic(
+            $(e.target),
+            user_topics.all_visibility_policies.INHERIT,
+        );
+    });
+
+    // Unmute topic in a muted stream
+    $("body").on("click", ".message_header .stream_muted.on_hover_topic_unmute", (e) => {
+        e.stopPropagation();
+        muted_topics_ui.mute_or_unmute_topic(
+            $(e.target),
+            user_topics.all_visibility_policies.UNMUTED,
+        );
+    });
+
+    // Mute topic in a muted stream
+    $("body").on("click", ".message_header .stream_muted.on_hover_topic_mute", (e) => {
+        e.stopPropagation();
+        muted_topics_ui.mute_or_unmute_topic(
+            $(e.target),
+            user_topics.all_visibility_policies.INHERIT,
+        );
     });
 
     // RECIPIENT BARS

web/src/message_list_view.js

@@ -198,9 +198,11 @@ function populate_group_from_message_container(group, message_container) {
             group.stream_id = -1;
         } else {
             group.stream_id = sub.stream_id;
+            group.stream_muted = sub.is_muted;
         }
         group.topic_is_resolved = resolved_topic.is_resolved(group.topic);
         group.topic_muted = user_topics.is_topic_muted(group.stream_id, group.topic);
+        group.topic_unmuted = user_topics.is_topic_unmuted(group.stream_id, group.topic);
     } else if (group.is_private) {
         group.pm_with_url = message_container.pm_with_url;
         group.display_reply_to = message_store.get_pm_full_names(message_container.msg);

web/src/muted_topics_ui.js

@@ -55,20 +55,8 @@ export function toggle_topic_visibility_policy(message) {
     }
 }
 
-export function mute_or_unmute_topic($elt, mute) {
+export function mute_or_unmute_topic($elt, visibility_policy) {
     const stream_id = Number.parseInt($elt.attr("data-stream-id"), 10);
     const topic = $elt.attr("data-topic-name");
-    if (mute) {
-        user_topics.set_user_topic_visibility_policy(
-            stream_id,
-            topic,
-            user_topics.all_visibility_policies.MUTED,
-        );
-    } else {
-        user_topics.set_user_topic_visibility_policy(
-            stream_id,
-            topic,
-            user_topics.all_visibility_policies.INHERIT,
-        );
-    }
+    user_topics.set_user_topic_visibility_policy(stream_id, topic, visibility_policy);
 }

web/styles/zulip.css

@@ -1494,7 +1494,8 @@ td.pointer {
 
 .always_visible_topic_edit,
 .on_hover_topic_read,
-.on_hover_topic_unmute {
+.stream_unmuted.on_hover_topic_unmute,
+.stream_muted.on_hover_topic_mute {
     opacity: 0.7;
 
     &:hover {
@@ -1506,7 +1507,8 @@ td.pointer {
 .on_hover_topic_edit,
 .on_hover_topic_unresolve,
 .on_hover_topic_resolve,
-.on_hover_topic_mute {
+.stream_unmuted.on_hover_topic_mute,
+.stream_muted.on_hover_topic_unmute {
     opacity: 0.2;
 
     &:hover {

web/templates/recipient_row.hbs

@@ -57,19 +57,22 @@
                 {{/if}}
             {{/if}}
 
-            {{#if topic_muted}}
-                <i class="zulip-icon zulip-icon-mute on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tooltip-template-id="topic-unmute-tooltip-template" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
-                <template id="topic-unmute-tooltip-template">
-                    {{t "Unmute topic" }}
-                    {{tooltip_hotkey_hints "Shift" "M"}}
-                </template>
+            {{#if stream_muted}}
+                <i class="zulip-icon zulip-icon-unmute stream_muted {{#if topic_unmuted}} on_hover_topic_mute {{else}} on_hover_topic_unmute {{/if}} recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" role="button" tabindex="0"
+                  {{#if topic_unmuted}} data-tooltip-template-id="topic-mute-tooltip-template" aria-label="{{t 'Mute topic' }}" {{else}} data-tooltip-template-id="topic-unmute-tooltip-template" aria-label="{{t 'Unmute topic' }}" {{/if}}></i>
             {{else}}
-                <i class="zulip-icon zulip-icon-mute on_hover_topic_mute recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tooltip-template-id="topic-mute-tooltip-template" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
-                <template id="topic-mute-tooltip-template">
-                    {{t "Mute topic" }}
-                    {{tooltip_hotkey_hints "Shift" "M"}}
-                </template>
+                <i class="zulip-icon zulip-icon-mute stream_unmuted{{#if topic_muted}} on_hover_topic_unmute {{else}} on_hover_topic_mute {{/if}} recipient_bar_icon hidden-for-spectators" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" role="button" tabindex="0"
+                  {{#if topic_muted}} data-tooltip-template-id="topic-unmute-tooltip-template" aria-label="{{t 'Unmute topic' }}" {{else}} data-tooltip-template-id="topic-mute-tooltip-template" aria-label="{{t 'Mute topic' }}" {{/if}}></i>
             {{/if}}
+
+            <template id="topic-unmute-tooltip-template">
+                {{t "Unmute topic" }}
+                {{tooltip_hotkey_hints "Shift" "M"}}
+            </template>
+            <template id="topic-mute-tooltip-template">
+                {{t "Mute topic" }}
+                {{tooltip_hotkey_hints "Shift" "M"}}
+            </template>
         </span>
         <span class="recipient_row_date {{#if date_unchanged}}recipient_row_date_unchanged{{/if}}">{{{date}}}</span>
     </div>