From fd08149993688eacf6d2e6bae1e364cbdaedbe1c Mon Sep 17 00:00:00 2001
From: Evy Kassirer <evy@zulip.com>
Date: Thu, 31 Jul 2025 13:04:45 -0700
Subject: [PATCH] left_sidebar: Use icons for the inactive/muted toggle.

Finishes #35552.
---
 web/styles/left_sidebar.css                     | 17 +++++++++++++++--
 .../show_inactive_or_muted_channels.hbs         |  6 ++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 6a24997d04..76be7899d7 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -457,13 +457,26 @@
 .hide-inactive-or-muted-channels {
     display: grid;
     grid-template:
-        "content markers-and-unreads three-dot-placeholder" auto
-        / minmax(0, 1fr) minmax(0, max-content) var(--left-sidebar-vdots-width);
+        "icon content markers-and-unreads three-dot-placeholder" auto
+        / 1.5em 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);
     }
+
+    .zulip-icon-collapse,
+    .zulip-icon-expand {
+        grid-area: icon;
+        /* 2px at 16px/1em to properly vertically center it */
+        margin-top: 0.125em;
+    }
+
+    .stream-list-toggle-inactive-or-muted-channels-text {
+        grid-area: content;
+    }
 }
 
 .stream-list-section {
diff --git a/web/templates/show_inactive_or_muted_channels.hbs b/web/templates/show_inactive_or_muted_channels.hbs
index 4f2a9c7184..ea0d3aa6f4 100644
--- a/web/templates/show_inactive_or_muted_channels.hbs
+++ b/web/templates/show_inactive_or_muted_channels.hbs
@@ -1,7 +1,8 @@
 <div class="stream-list-toggle-inactive-or-muted-channels bottom_left_row zoom-in-hide">
     <div class="show-inactive-or-muted-channels sidebar-topic-action-heading">
+        <i class="zulip-icon zulip-icon-expand" aria-hidden="true"></i>
         <div class="stream-list-toggle-inactive-or-muted-channels-text">
-            {{#tr}}+ {inactive_or_muted_count} inactive or muted{{/tr}}
+            {{#tr}}{inactive_or_muted_count} inactive or muted{{/tr}}
         </div>
         <div class="markers-and-unreads">
             <span class="unread_count quiet-count"></span>
@@ -11,8 +12,9 @@
         </div>
     </div>
     <div class="hide-inactive-or-muted-channels sidebar-topic-action-heading">
+        <i class="zulip-icon zulip-icon-collapse" aria-hidden="true"></i>
         <div class="stream-list-toggle-inactive-or-muted-channels-text">
-            {{#tr}}- {inactive_or_muted_count} inactive or muted{{/tr}}
+            {{#tr}}{inactive_or_muted_count} inactive or muted{{/tr}}
         </div>
     </div>
 </div>