topic_popover: Add support to follow a topic from the topic_popover.

This commit adds support for following a topic from the topic
three-dot menu in the left sidebar.

Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic',
are shown at the top of the menu (in the mentioned order), regardless
of whether the stream is muted or unmuted.

We can no longer set the topic's visibility_policy to INHERIT
(the default value) from this menu.

The changes are visible in the development environment only.

Fixes #25917.

Co-authored-by: Prakhar Pratyush <prakhar841301@gmail.com>
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>

web/src/popover_menus.js

@@ -483,6 +483,18 @@ export function initialize() {
                 return;
             }
 
+            $popper.on("click", ".tab-option", (e) => {
+                $(".tab-option").removeClass("selected-tab");
+                $(e.currentTarget).addClass("selected-tab");
+
+                const visibility_policy = $(e.currentTarget).attr("data-visibility-policy");
+                user_topics.set_user_topic_visibility_policy(
+                    stream_id,
+                    topic_name,
+                    visibility_policy,
+                );
+            });
+
             $popper.one("click", ".sidebar-popover-unmute-topic", () => {
                 user_topics.set_user_topic_visibility_policy(
                     stream_id,

web/src/popover_menus_data.js

@@ -130,6 +130,8 @@ export function get_topic_popover_content_context({stream_id, topic_name, url})
     const has_starred_messages = starred_messages.get_count_in_topic(sub.stream_id, topic_name) > 0;
     const can_move_topic = settings_data.user_can_move_messages_between_streams();
     const can_rename_topic = settings_data.user_can_move_messages_to_another_topic();
+    const visibility_policy = user_topics.get_topic_visibility_policy(sub.stream_id, topic_name);
+    const all_visibility_policies = user_topics.all_visibility_policies;
     return {
         stream_name: sub.name,
         stream_id: sub.stream_id,
@@ -144,5 +146,8 @@ export function get_topic_popover_content_context({stream_id, topic_name, url})
         color: sub.color,
         has_starred_messages,
         url,
+        visibility_policy,
+        all_visibility_policies,
+        development: page_params.development_environment,
     };
 }

web/styles/app_components.css

@@ -1044,3 +1044,44 @@ div.overlay {
             0 0 8px hsl(206deg 80% 62% / 60%);
     }
 }
+
+/* Icon-based tab picker used for topics popover. */
+.tabs-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 27px;
+    background-color: hsl(0deg 0% 0% / 7%);
+    position: relative;
+    border-radius: 5px;
+
+    & i {
+        z-index: 2;
+        color: hsl(200deg 100% 40%);
+        font-size: 17px;
+    }
+
+    .selected-tab {
+        background-color: hsl(0deg 0% 100%);
+        border: 1px solid hsl(0deg 0% 0% / 30%);
+        z-index: 1;
+    }
+
+    .tab-option {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        border-radius: 5px;
+
+        &:hover:not(.selected-tab) {
+            background-color: hsl(0deg 0% 100%);
+            border: 1px solid hsl(0deg 0% 0% / 30%);
+        }
+    }
+}

web/styles/dark_theme.css

@@ -1543,6 +1543,26 @@
             }
         }
     }
+
+    .tabs-container {
+        background-color: hsl(0deg 0% 0% / 30%);
+
+        & i {
+            color: hsl(0deg 0% 80%);
+        }
+
+        .selected-tab {
+            background-color: hsl(0deg 0% 17% / 50%);
+            border: 1px solid hsl(0deg 0% 100% / 12%);
+        }
+
+        .tab-option {
+            &:hover:not(.selected-tab) {
+                background-color: hsl(0deg 0% 17% / 50%);
+                border: 1px solid hsl(0deg 0% 100% / 12%);
+            }
+        }
+    }
 }
 
 @supports (-moz-appearance: none) {

web/templates/topic_sidebar_actions.hbs

@@ -8,38 +8,56 @@
 
     <hr />
 
-    {{#if stream_muted}}
+    {{#if development}}
-        {{#unless topic_unmuted}}
+        <li class="hidden-for-spectators">
-            <li class="hidden-for-spectators">
+            <div class="tabs-container">
-                <a tabindex="0" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+                <div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.MUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.MUTED}}" data-tippy-content="{{t 'Mute topic' }}" aria-label="{{t 'Mute topic' }}">
-                    <i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
+                    <i class="zulip-icon zulip-icon-mute-new"></i>
-                    {{t "Unmute topic"}}
+                </div>
-                </a>
+                <div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" data-tippy-content="{{t 'Unmute topic' }}" aria-label="{{t 'Unmute topic' }}">
-            </li>
+                    <i class="zulip-icon zulip-icon-unmute-new"></i>
+                </div>
+                <div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" data-tippy-content="{{t 'Follow topic' }}" aria-label="{{t 'Follow topic' }}">
+                    <i class="zulip-icon zulip-icon-follow"></i>
+                </div>
+            </div>
+        </li>
+
+        <hr/>
+    {{else}}
+        {{#if stream_muted}}
+            {{#unless topic_unmuted}}
+                <li class="hidden-for-spectators">
+                    <a tabindex="0" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+                        <i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
+                        {{t "Unmute topic"}}
+                    </a>
+                </li>
+            {{else}}
+                <li class="hidden-for-spectators">
+                    <a tabindex="0" class="sidebar-popover-remove-unmute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+                        <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
+                        {{t "Mute topic"}}
+                    </a>
+                </li>
+            {{/unless}}
         {{else}}
+            {{#unless topic_muted}}
             <li class="hidden-for-spectators">
-                <a tabindex="0" class="sidebar-popover-remove-unmute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+                <a tabindex="0" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
                     <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
                     {{t "Mute topic"}}
                 </a>
             </li>
-        {{/unless}}
+            {{else}}
-    {{else}}
+            <li class="hidden-for-spectators">
-        {{#unless topic_muted}}
+                <a tabindex="0" class="sidebar-popover-remove-mute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
-        <li class="hidden-for-spectators">
+                    <i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
-            <a tabindex="0" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
+                    {{t "Unmute topic"}}
-                <i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
+                </a>
-                {{t "Mute topic"}}
+            </li>
-            </a>
+            {{/unless}}
-        </li>
+        {{/if}}
-        {{else}}
-        <li class="hidden-for-spectators">
-            <a tabindex="0" class="sidebar-popover-remove-mute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
-                <i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
-                {{t "Unmute topic"}}
-            </a>
-        </li>
-        {{/unless}}
     {{/if}}
 
     {{#if has_starred_messages}}