left_sidebar: Open topic menu when clicking on follow topic icon.

Earlier, in left sidebar, clicking on followed topic icon would narrow
to the topic.

This commit introduces the ability to open topic status menu from
left sidebar from followed topic icon.

Fixes: zulip#28941.

web/src/tippyjs.ts

@@ -678,7 +678,11 @@ export function initialize(): void {
     });
 
     tippy.delegate("body", {
-        target: ["#recent_view .recipient_bar_icon", "#inbox-view .recipient_bar_icon"].join(","),
+        target: [
+            "#recent_view .recipient_bar_icon",
+            "#inbox-view .recipient_bar_icon",
+            "#left-sidebar-container .visibility-policy-icon",
+        ].join(","),
         ...topic_visibility_policy_tooltip_props,
     });
 

web/src/topic_list.ts

@@ -347,6 +347,10 @@ export function initialize({
                 return;
             }
 
+            if ($(e.target).hasClass("visibility-policy-icon")) {
+                return;
+            }
+
             const $stream_row = $(e.target).parents(".narrow-filter");
             const stream_id_string = $stream_row.attr("data-stream-id");
             assert(stream_id_string !== undefined);

web/src/topic_list_data.ts

@@ -14,6 +14,7 @@ const max_topics = 8;
 const max_topics_with_unread = 12;
 
 export type TopicInfo = {
+    stream_id: number;
     topic_name: string;
     topic_resolved_prefix: string;
     topic_display_name: string;
@@ -123,6 +124,7 @@ function choose_topics(
         }
 
         const topic_info: TopicInfo = {
+            stream_id,
             topic_name,
             topic_resolved_prefix,
             topic_display_name,

web/styles/app_variables.css

@@ -493,6 +493,7 @@
     --color-message-action-visible: hsl(216deg 43% 20% / 50%);
     --color-message-action-interactive: hsl(216deg 43% 20% / 100%);
     --color-message-star-action: hsl(41deg 100% 47% / 100%);
+    --color-left-sidebar-follow-icon-hover: hsl(0deg 0% 0%);
     /* The gray on the filter icons is the same as
        what's set on ul.filters, but with 70% opacity. */
     --color-left-sidebar-navigation-icon: hsl(0deg 0% 20% / 70%);
@@ -879,6 +880,7 @@
     --color-icon-bot: hsl(180deg 5% 50% / 100%);
     --color-message-action-visible: hsl(217deg 41% 90% / 50%);
     --color-message-action-interactive: hsl(217deg 41% 90% / 100%);
+    --color-left-sidebar-follow-icon-hover: hsl(0deg 0% 100%);
     --color-left-sidebar-navigation-icon: hsl(0deg 0% 100% / 56%);
     --color-vdots-hint: hsl(0deg 0% 100% / 30%);
     --color-vdots-visible: hsl(236deg 33% 80%);

web/styles/left_sidebar.css

@@ -421,6 +421,11 @@ ul.filters {
 
     .zulip-icon-follow {
         opacity: 0.6;
+
+        &:hover {
+            opacity: 1;
+            color: var(--color-left-sidebar-follow-icon-hover);
+        }
     }
 
     & li.muted_topic,

web/templates/topic_list_item.hbs

@@ -6,13 +6,13 @@
         <a href="{{url}}" class="sidebar-topic-name" title="{{topic_name}}">
             <span class="sidebar-topic-name-inner">{{topic_display_name}}</span>
         </a>
-        <div class="topic-markers-and-controls">
+        <div class="topic-markers-and-controls change_visibility_policy" data-stream-id="{{stream_id}}" data-topic-name="{{topic_name}}">
             {{#if contains_unread_mention}}
                 <span class="unread_mention_info">
                     @
                 </span>
             {{else if is_followed}}
-                <i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
+                <i class="zulip-icon zulip-icon-follow visibility-policy-icon" role="button" aria-hidden="true" data-tippy-content="{{t 'You follow this topic'}}"></i>
             {{/if}}
             <span class="unread_count {{#if is_zero}}zero_count{{/if}}">
                 {{unread}}

web/tests/topic_list_data.test.js

@@ -101,6 +101,7 @@ test("get_list_info w/real stream_topic_history", ({override}) => {
         topic_display_name: "topic 11",
         unread: 0,
         is_zero: true,
+        stream_id: 556,
         is_muted: false,
         is_followed: false,
         is_unmuted_or_followed: false,
@@ -124,6 +125,7 @@ test("get_list_info w/real stream_topic_history", ({override}) => {
         is_followed: false,
         is_unmuted_or_followed: false,
         is_zero: true,
+        stream_id: 556,
         topic_display_name: "topic 9",
         topic_name: "✔ topic 9",
         topic_resolved_prefix: "✔ ",
@@ -138,6 +140,7 @@ test("get_list_info w/real stream_topic_history", ({override}) => {
         is_followed: false,
         is_unmuted_or_followed: false,
         is_zero: true,
+        stream_id: 556,
         topic_display_name: "topic 8",
         topic_name: "topic 8",
         topic_resolved_prefix: "",