diff --git a/web/src/topic_list_data.js b/web/src/topic_list_data.js index 5a2b67744a..30750136b2 100644 --- a/web/src/topic_list_data.js +++ b/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, diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index 33020688c1..9b03ebb23e 100644 --- a/web/styles/left_sidebar.css +++ b/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; diff --git a/web/styles/zulip.css b/web/styles/zulip.css index b190aaeef2..827cae8b35 100644 --- a/web/styles/zulip.css +++ b/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%); diff --git a/web/templates/topic_list_item.hbs b/web/templates/topic_list_item.hbs index 3617c70569..a8a760489f 100644 --- a/web/templates/topic_list_item.hbs +++ b/web/templates/topic_list_item.hbs @@ -1,4 +1,4 @@ -
  • +
  • {{topic_resolved_prefix}} @@ -10,6 +10,9 @@ @ + {{else if is_followed}} + +   {{/if}} {{unread}} diff --git a/web/tests/topic_list_data.test.js b/web/tests/topic_list_data.test.js index ea5a42e4fd..17d34ab2fe 100644 --- a/web/tests/topic_list_data.test.js +++ b/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",