From ef052182b11c0c943200224f01f1a8b01c841d05 Mon Sep 17 00:00:00 2001
From: Evy Kassirer <evy@zulip.com>
Date: Tue, 29 Jul 2025 16:07:50 -0700
Subject: [PATCH] left_sidebar: Clean up hide_unread_counts vs
 hide-unread-messages-count.

Now the former is only used in the channels list (headers and inactive
toggles included) and the latter is only used for the home view.

Note that this changes some behavior, notably the header and inactive
toggles now show the masked dots when all unread markers in them are
also masked.
---
 web/src/left_sidebar_navigation_area.ts |  2 +-
 web/src/sidebar_ui.ts                   | 10 ++-----
 web/styles/left_sidebar.css             | 40 +++++++++++++++----------
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/web/src/left_sidebar_navigation_area.ts b/web/src/left_sidebar_navigation_area.ts
index 0c27af7fa9..57411db9db 100644
--- a/web/src/left_sidebar_navigation_area.ts
+++ b/web/src/left_sidebar_navigation_area.ts
@@ -172,7 +172,7 @@ export function update_dom_with_unread_counts(
         }
         $header.toggleClass("has-only-muted-unreads", show_muted_count);
         $header.toggleClass(
-            "hide-unread-messages-count",
+            "hide_unread_counts",
             should_mask_header_unread_count(show_muted_count, unmuted_count),
         );
     }
diff --git a/web/src/sidebar_ui.ts b/web/src/sidebar_ui.ts
index 5aa732038e..3909a58647 100644
--- a/web/src/sidebar_ui.ts
+++ b/web/src/sidebar_ui.ts
@@ -133,13 +133,9 @@ export function update_invite_user_option(): void {
 
 export function update_unread_counts_visibility(): void {
     const hidden = !user_settings.web_left_sidebar_unreads_count_summary;
-
-    const $channel_sections: JQuery = $(".stream-list-subsection-header");
-    const $home_view_li: JQuery = $(".top_left_row");
-
-    for (const $el of [$home_view_li, $channel_sections]) {
-        $el.toggleClass("hide-unread-messages-count", hidden);
-    }
+    $(".top_left_row").toggleClass("hide-unread-messages-count", hidden);
+    // Note: Channel folder count visibilities are handled in
+    // `update_section_unread_count`, since they depend on unread counts.
 }
 
 export function hide_all(): void {
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index a527e8bc9f..2ddd22d8a8 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -80,21 +80,14 @@
     width: var(--left-sidebar-single-digit-unread-width);
 }
 
-.selected-home-view {
-    &.hide-unread-messages-count {
-        .masked_unread_count {
-            /* Adding margin-right aligns the .masked_unread_count with the rest of the masked unread counts. */
-            margin-right: var(--left-sidebar-unread-offset);
-        }
-    }
-}
-
-#left-sidebar-navigation-list .selected-home-view,
-.show-inactive-channels {
+#left-sidebar-navigation-list .selected-home-view {
     &.hide-unread-messages-count {
         .masked_unread_count {
             display: flex;
             grid-area: markers-and-unreads;
+            /* Adding margin-right aligns the .masked_unread_count  */
+            /* with the rest of the masked unread counts. */
+            margin-right: var(--left-sidebar-unread-offset);
             justify-self: end;
             visibility: visible;
         }
@@ -110,7 +103,6 @@
 }
 
 #left-sidebar-navigation-list .selected-home-view:hover,
-.stream-list-toggle-inactive-channels:hover .show-inactive-channels,
 .selected-home-view.top-left-active-filter {
     &.hide-unread-messages-count {
         .masked_unread_count {
@@ -148,7 +140,9 @@
         }
     }
 
-    .stream-with-count.hide_unread_counts {
+    .stream-with-count.hide_unread_counts,
+    .stream-list-subsection-header.hide_unread_counts,
+    .show-inactive-channels.hide_unread_counts {
         .masked_unread_count {
             display: flex;
         }
@@ -156,6 +150,16 @@
         .unread_count {
             display: none;
         }
+
+        &:hover {
+            .masked_unread_count {
+                display: none;
+            }
+
+            .unread_count {
+                display: inline;
+            }
+        }
     }
 
     .narrow-filter
@@ -364,7 +368,8 @@
        below. This extra margin prevents that overlap. */
     margin-bottom: 1px;
 
-    .unread_count {
+    .unread_count,
+    .masked_unread_count {
         margin-right: var(--left-sidebar-unread-offset);
     }
 
@@ -465,6 +470,10 @@
         "content markers-and-unreads three-dot-placeholder" auto
         / minmax(0, 1fr) minmax(0, max-content) var(--left-sidebar-vdots-width);
     align-items: center;
+
+    .markers-and-unreads {
+        margin-right: var(--left-sidebar-unread-offset);
+    }
 }
 
 .stream-list-section {
@@ -1616,8 +1625,7 @@ li.top_left_scheduled_messages {
 
 .dm-markers-and-unreads,
 .stream-markers-and-unreads,
-.topic-markers-and-unreads,
-.show-inactive-channels .markers-and-unreads {
+.topic-markers-and-unreads {
     grid-area: markers-and-unreads;
     display: flex;
     /* Present a uniform space between icons */