recent_topics: Add filter button to show muted topics.

We don't show muted streams/topics by defualt. Only when user
turns on muted filter.

static/js/click_handlers.js

@@ -346,6 +346,13 @@ exports.initialize = function () {
         muting_ui.mute(stream_id, topic);
     });
 
+    $('body').on('click', '.on_hover_topic_unmute', function (e) {
+        e.stopPropagation();
+        const stream_id = parseInt($(e.currentTarget).attr('data-stream-id'), 10);
+        const topic = $(e.currentTarget).attr('data-topic-name');
+        muting_ui.unmute(stream_id, topic);
+    });
+
     // RECENT TOPICS
 
     $('body').on('click', '.on_hover_topic_read', function (e) {

static/js/muting_ui.js

@@ -112,7 +112,7 @@ exports.mute = function (stream_id, topic) {
         title_text: i18n.t("Topic muted"),
         undo_button_text: i18n.t("Unmute"),
     });
-    recent_topics.update_topic_is_muted(stream_id, topic, true);
+    recent_topics.update_topic_is_muted(stream_id, topic);
 };
 
 exports.unmute = function (stream_id, topic) {
@@ -125,7 +125,7 @@ exports.unmute = function (stream_id, topic) {
     exports.rerender();
     exports.persist_unmute(stream_id, topic);
     feedback_widget.dismiss();
-    recent_topics.update_topic_is_muted(stream_id, topic, false);
+    recent_topics.update_topic_is_muted(stream_id, topic);
 };
 
 exports.toggle_mute = function (message) {

static/js/recent_topics.js

@@ -88,7 +88,9 @@ function format_topic(topic_data) {
     // We only supply the data to the topic rows and let jquery
     // display / hide them according to filters instead of
     // doing complete re-render.
-    const muted = !!muting.is_topic_muted(stream_id, topic);
+    const topic_muted = !!muting.is_topic_muted(stream_id, topic);
+    const stream_muted = stream_data.is_muted(stream_id);
+    const muted = topic_muted || stream_muted;
     const unread_count = unread.unread_topic_counter.get(stream_id, topic);
 
     // Display in most recent sender first order
@@ -112,6 +114,7 @@ function format_topic(topic_data) {
         senders: senders_info,
         count_senders: Math.max(0, all_senders.length - MAX_AVATAR),
         muted: muted,
+        topic_muted: topic_muted,
         participated: topic_data.participated,
     };
 }
@@ -149,7 +152,7 @@ function is_row_hidden(data) {
         return true;
     } else if (!participated && filters.has('participated')) {
         return true;
-    } else if (muted) {
+    } else if (muted && !filters.has('muted')) {
         return true;
     }
     return false;
@@ -196,7 +199,7 @@ exports.inplace_rerender = function (topic_key) {
     }
 };
 
-exports.update_topic_is_muted = function (stream_id, topic, is_muted) {
+exports.update_topic_is_muted = function (stream_id, topic) {
     const key = stream_id + ":" + topic;
     if (!topics.has(key)) {
         // we receive mute request for a topic we are
@@ -204,11 +207,7 @@ exports.update_topic_is_muted = function (stream_id, topic, is_muted) {
         return false;
     }
 
-    if (is_muted) {
-        get_topic_row(key).hide();
-    } else {
-        get_topic_row(key).show();
-    }
+    exports.inplace_rerender(key);
     return true;
 };
 
@@ -262,6 +261,7 @@ exports.update_filters_view = function () {
     const rendered_filters = render_recent_topics_filters({
         filter_participated: filters.has('participated'),
         filter_unread: filters.has('unread'),
+        filter_muted: filters.has('muted'),
     });
     $("#recent_filters_group").html(rendered_filters);
 
@@ -297,6 +297,7 @@ exports.complete_rerender = function () {
         recent_topics: format_all_topics(),
         filter_participated: filters.has('participated'),
         filter_unread: filters.has('unread'),
+        filter_muted: filters.has('muted'),
     });
     $('#recent_topics_table').html(rendered_body);
     exports.update_filters_view();

static/styles/zulip.scss

@@ -1128,6 +1128,7 @@ td.pointer {
 .on_hover_topic_edit,
 .always_visible_topic_edit,
 .on_hover_topic_mute,
+.on_hover_topic_unmute,
 .on_hover_topic_read {
     &:hover {
         cursor: pointer;

static/templates/recent_topic_row.hbs

@@ -10,7 +10,11 @@
         {{#if unread_count}}<span class="recent_topic_unread_count">+{{unread_count}}</span>{{/if}}
     </td>
     <td class="recent_topic_actions">
+        {{#if topic_muted}}
+        <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Unmute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+        {{else}}
         <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+        {{/if}}
         <i class="fa fa-check-circle on_hover_topic_read recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}"></i>
     </td>
     <td class='recent_topic_users'>

static/templates/recent_topics_filters.hbs

@@ -15,3 +15,11 @@
     {{/if}}
     {{t 'Participated' }}
 </button>
+<button data-filter="muted" type="button" class="btn btn-default btn-recent-filters">
+    {{#if filter_muted }}
+    <i class="fa fa-check-square-o"></i>
+    {{else}}
+    <i class="fa fa-square-o"></i>
+    {{/if}}
+    {{t 'Muted' }}
+</button>