topic_list: Add an icon and update the color for "Followed" topics.

This commit adds the follow icon to the right end
(before the three-dot menu icon) of the topic list item
for followed topics.

The icon replaces '@' instead of showing both the '@' and "Follow"
icons in the case of unread mentions, as users don't care if they
are following a topic if they've got unread mentions there.

In a muted stream, the text color of followed topics in the topic list
is set to be similar to that of unmuted topics.

The reason is that the followed topic has a tier of interest above
being unmuted, so it shouldn't stay faded in the topic list.

web/src/topic_list_data.js

@@ -16,7 +16,11 @@ function choose_topics(stream_id, topic_names, zoomed, topic_choice_state) {
         const num_unread = unread.num_unread_for_topic(stream_id, topic_name);
         const is_active_topic = topic_choice_state.active_topic === topic_name.toLowerCase();
         const is_topic_muted = user_topics.is_topic_muted(stream_id, topic_name);
-        const is_topic_unmuted = user_topics.is_topic_unmuted(stream_id, topic_name);
+        const is_topic_followed = user_topics.is_topic_followed(stream_id, topic_name);
+        const is_topic_unmuted_or_followed = user_topics.is_topic_unmuted_or_followed(
+            stream_id,
+            topic_name,
+        );
         const [topic_resolved_prefix, topic_display_name] =
             resolved_topic.display_parts(topic_name);
         // Important: Topics are lower-case in this set.
@@ -93,7 +97,8 @@ function choose_topics(stream_id, topic_names, zoomed, topic_choice_state) {
             unread: num_unread,
             is_zero: num_unread === 0,
             is_muted: is_topic_muted,
-            is_unmuted: is_topic_unmuted,
+            is_followed: is_topic_followed,
+            is_unmuted_or_followed: is_topic_unmuted_or_followed,
             is_active_topic,
             url: hash_util.by_stream_topic_url(stream_id, topic_name),
             contains_unread_mention,

web/styles/left_sidebar.css

@@ -396,8 +396,8 @@ ul.filters {
             }
         }
 
-        & li.unmuted_topic {
-            color: var(--color-unmuted-topic-list-item);
+        & li.unmuted_or_followed_topic {
+            color: var(--color-unmuted-or-followed-topic-list-item);
 
             .unread_count {
                 opacity: 1;

web/styles/zulip.css

@@ -163,7 +163,7 @@ body {
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
     --color-background-modal: hsl(0deg 0% 98%);
-    --color-unmuted-topic-list-item: hsl(0deg 0% 20%);
+    --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -220,7 +220,7 @@ body {
     --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-background-modal: hsl(212deg 28% 18%);
-    --color-unmuted-topic-list-item: hsl(236deg 33% 90%);
+    --color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 100% / 75%);

web/templates/topic_list_item.hbs

@@ -1,4 +1,4 @@
-<li class='bottom_left_row {{#if is_active_topic}}active-sub-filter{{/if}} {{#if is_zero}}zero-topic-unreads{{/if}} {{#if is_muted}}muted_topic{{/if}} {{#if is_unmuted}}unmuted_topic{{/if}} topic-list-item' data-topic-name='{{topic_name}}'>
+<li class='bottom_left_row {{#if is_active_topic}}active-sub-filter{{/if}} {{#if is_zero}}zero-topic-unreads{{/if}} {{#if is_muted}}muted_topic{{/if}} {{#if is_unmuted_or_followed}}unmuted_or_followed_topic{{/if}} topic-list-item' data-topic-name='{{topic_name}}'>
     <span class='topic-box'>
         <span class="sidebar-topic-check">
             {{topic_resolved_prefix}}
@@ -10,6 +10,9 @@
             <span class="unread_mention_info">
                 @
             </span>
+        {{else if is_followed}}
+            <i class="zulip-icon zulip-icon-follow" aria-hidden="true"> </i>
+            &nbsp;
         {{/if}}
         <span class="unread_count {{#if is_zero}}zero_count{{/if}}">
             {{unread}}

web/tests/topic_list_data.test.js

@@ -19,7 +19,10 @@ const user_topics = mock_esm("../src/user_topics", {
     is_topic_muted() {
         return false;
     },
-    is_topic_unmuted() {
+    is_topic_followed() {
+        return false;
+    },
+    is_topic_unmuted_or_followed() {
         return false;
     },
 });
@@ -95,7 +98,8 @@ test("get_list_info w/real stream_topic_history", ({override}) => {
         contains_unread_mention: false,
         is_active_topic: false,
         is_muted: false,
-        is_unmuted: false,
+        is_followed: false,
+        is_unmuted_or_followed: false,
         is_zero: true,
         topic_display_name: "topic 9",
         topic_name: "✔ topic 9",
@@ -108,7 +112,8 @@ test("get_list_info w/real stream_topic_history", ({override}) => {
         contains_unread_mention: false,
         is_active_topic: false,
         is_muted: false,
-        is_unmuted: false,
+        is_followed: false,
+        is_unmuted_or_followed: false,
         is_zero: true,
         topic_display_name: "topic 8",
         topic_name: "topic 8",