inbox: Show muted icon for muted channels.

web/src/inbox_ui.ts

@@ -36,6 +36,7 @@ import * as pm_list from "./pm_list.ts";
 import * as stream_color from "./stream_color.ts";
 import * as stream_data from "./stream_data.ts";
 import * as stream_list from "./stream_list.ts";
+import * as stream_settings_api from "./stream_settings_api.ts";
 import * as stream_topic_history from "./stream_topic_history.ts";
 import * as stream_topic_history_util from "./stream_topic_history_util.ts";
 import * as sub_store from "./sub_store.ts";
@@ -2356,6 +2357,40 @@ export function initialize({hide_other_views}: {hide_other_views: () => void}):
         compose_closed_ui.set_standard_text_for_reply_button();
     });
 
+    $("body").on(
+        "click",
+        "#inbox-list .toggle-channel-visibility",
+        function (this: HTMLElement, e) {
+            e.stopPropagation();
+            const $elt = $(this);
+            focus_clicked_list_element($elt);
+            const stream_id = Number($elt.attr("data-stream-id"));
+            if (stream_id) {
+                const sub = sub_store.get(stream_id);
+                if (sub) {
+                    stream_settings_api.set_stream_property(sub, {
+                        property: "is_muted",
+                        value: false,
+                    });
+                }
+            }
+        },
+    );
+
+    $("body").on("keydown", "#inbox-list .toggle-channel-visibility", (e) => {
+        if (e.metaKey || e.ctrlKey) {
+            return;
+        }
+
+        if (keydown_util.is_enter_event(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const $elt = $(e.currentTarget);
+            $elt.trigger("click");
+        }
+    });
+
     $(document).on("compose_canceled.zulip", () => {
         if (inbox_util.is_visible()) {
             revive_current_focus();

web/styles/inbox.css

@@ -209,28 +209,15 @@
                 .inbox-topic-name {
                     grid-area: recipient_info;
                 }
-
-                .inbox-right-part-wrapper {
-                    flex-grow: 1;
-
-                    .inbox-right-part {
-                        display: flex;
-                        justify-content: space-between;
-                        flex-grow: 1;
-
-                        > .inbox-action-button:first-child {
-                            margin-left: auto;
-                        }
-                    }
             }
 
+            .channel-visibility-policy-indicator,
             .visibility-policy-indicator {
                 display: flex;
                 align-items: center;
                 border-radius: 3px;
                 margin-left: 3px;
             }
-            }
 
             .unread-count-focus-outline {
                 /* Because the inbox view font-size will
@@ -359,8 +346,17 @@
         }
 
         .inbox-right-part-wrapper {
+            flex-grow: 1;
+
+            .inbox-right-part {
                 display: flex;
-            align-items: center;
+                justify-content: space-between;
+                flex-grow: 1;
+
+                > .inbox-action-button:first-child {
+                    margin-left: auto;
+                }
+            }
         }
 
         .inbox-row,
@@ -717,6 +713,7 @@
         }
     }
 
+    .channel-visibility-policy-indicator,
     .visibility-policy-indicator {
         &:focus-visible {
             outline: 2px solid var(--color-outline-focus);
@@ -741,6 +738,7 @@
             on the element or one of the elements within it. */
         &:focus-within:not(:focus),
         &:focus-visible {
+            .channel-visibility-policy-indicator,
             .inbox-row-visibility-policy-inherit,
             .inbox-action-button {
                 opacity: 1;

web/templates/inbox_view/inbox_stream_header_row.hbs

@@ -26,6 +26,11 @@
         </div>
         <div class="inbox-right-part-wrapper">
             <div class="inbox-right-part">
+                {{#if is_muted}}
+                <span class="channel-visibility-policy-indicator toggle-channel-visibility tippy-zulip-tooltip" data-stream-id="{{stream_id}}" tabindex="0" data-col-index="{{ column_indexes.TOPIC_VISIBILITY }}" data-tooltip-template-id="inbox-channel-mute-toogle-tooltip-template">
+                    <i class="zulip-icon zulip-icon-mute recipient_bar_icon" role="button"></i>
+                </span>
+                {{/if}}
                 <div class="inbox-action-button inbox-stream-menu" data-stream-id="{{stream_id}}" tabindex="0" data-col-index="{{ column_indexes.ACTION_MENU }}">
                     <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
                 </div>

web/templates/tooltip_templates.hbs

@@ -295,3 +295,11 @@
     {{t 'Filter left sidebar' }}
     {{tooltip_hotkey_hints "Q"}}
 </template>
+<template id="inbox-channel-mute-toogle-tooltip-template">
+    <div>
+        <div>{{t "You have muted this channel." }}</div>
+        <div class="italic">
+            {{t "Click to unmute this channel." }}
+        </div>
+    </div>
+</template>