From 19a2365ab9a17c9f6ec6b4de152cb2a98e286441 Mon Sep 17 00:00:00 2001
From: Hardik Dharmani <Ddharmani99@gmail.com>
Date: Sat, 22 Apr 2023 21:44:26 +0530
Subject: [PATCH] left_sidebar: Display unmuted topic in regular font (not
 faded).

Add class unmuted_topic to li.bottom_left_row element if topic is
unmuted. Add relevant CSS for .unmuted_topic to display unmuted
topics in regular font.

Fixes part of #24243.
---
 web/src/topic_list_data.js        | 2 ++
 web/styles/dark_theme.css         | 4 ++++
 web/styles/left_sidebar.css       | 7 +++++++
 web/templates/topic_list_item.hbs | 2 +-
 web/tests/topic_list_data.test.js | 5 +++++
 5 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/topic_list_data.js b/web/src/topic_list_data.js
index 7606ee3320..b6a73dbc93 100644
--- a/web/src/topic_list_data.js
+++ b/web/src/topic_list_data.js
@@ -16,6 +16,7 @@ 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 [topic_resolved_prefix, topic_display_name] =
             resolved_topic.display_parts(topic_name);
         // Important: Topics are lower-case in this set.
@@ -90,6 +91,7 @@ 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_active_topic,
             url: hash_util.by_stream_topic_url(stream_id, topic_name),
             contains_unread_mention,
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index cfca6fbfde..b8f62882dd 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -37,6 +37,10 @@
             color: hsl(236deg 33% 90%/50%);
         }
 
+        & li.unmuted_topic {
+            color: hsl(236deg 33% 90%);
+        }
+
         & li.out_of_home_view {
             &:hover {
                 color: hsl(236deg 33% 90%/ 75%);
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 6a2444a08f..ea3c361260 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -346,6 +346,13 @@ ul.filters {
             opacity: 0.5;
         }
 
+        & li.unmuted_topic {
+            color: hsl(0deg 0% 20%);
+
+            .unread_count {
+                opacity: 1;
+            }
+        }
     }
 
     & li.out_of_home_view {
diff --git a/web/templates/topic_list_item.hbs b/web/templates/topic_list_item.hbs
index 6f4c7cea36..3617c70569 100644
--- a/web/templates/topic_list_item.hbs
+++ b/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}} 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}}unmuted_topic{{/if}} topic-list-item' data-topic-name='{{topic_name}}'>
     <span class='topic-box'>
         <span class="sidebar-topic-check">
             {{topic_resolved_prefix}}
diff --git a/web/tests/topic_list_data.test.js b/web/tests/topic_list_data.test.js
index cab53983b6..11169c5454 100644
--- a/web/tests/topic_list_data.test.js
+++ b/web/tests/topic_list_data.test.js
@@ -19,6 +19,9 @@ const user_topics = mock_esm("../src/user_topics", {
     is_topic_muted() {
         return false;
     },
+    is_topic_unmuted() {
+        return false;
+    },
 });
 const narrow_state = mock_esm("../src/narrow_state", {
     topic() {},
@@ -91,6 +94,7 @@ 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_zero: true,
         topic_display_name: "topic 9",
         topic_name: "✔ topic 9",
@@ -103,6 +107,7 @@ 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_zero: true,
         topic_display_name: "topic 8",
         topic_name: "topic 8",