From a27cfa9a84dfa024bc078b0b2794cdb48d504cb6 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 25 Sep 2023 12:03:22 -0500
Subject: [PATCH] left_sidebar: Express stream row as grid.

---
 web/styles/left_sidebar.css | 69 +++++++++++++++++++------------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 8713c41178..5424f88b9a 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -55,16 +55,13 @@ $before_unread_count_padding: 3px;
     cursor: pointer;
 }
 
-#left-sidebar .filter-icon i {
-    padding-right: 3px;
-
-    &.zulip-icon-lock {
-        position: relative;
-        top: 2px;
-    }
+#stream_filters .zulip-icon-lock {
+    position: relative;
+    top: 2px;
 }
 
 #global_filters .filter-icon i {
+    padding-right: 3px;
     color: var(--color-global-filter-icon);
 }
 
@@ -147,33 +144,16 @@ li.show-more-topics {
         }
     }
 
-    .subscription_block {
-        margin-right: 25px;
-        margin-left: $far_left_gutter_size;
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-
-        & .unread_count {
-            margin-right: 15px;
-        }
-
-        & .masked_unread_count {
-            /* TODO: In theory this should be 19, to make it center aligned with
-               unread_count span which has a padding of 4px
-               horizontally in addition to 15px margin. But 18px looks
-               better centered. */
-            margin-right: 18px;
-        }
-
-        &.stream-with-count {
-            margin-right: 15px;
-        }
-    }
-
     .stream-with-count.hide_unread_counts {
         .masked_unread_count {
-            display: inline;
+            display: block;
+            /* Shift masked dot to align with
+               the least-significant digit on
+               unreads in other rows.
+               We have to do this with margin,
+               because width or padding will
+               distort the CSS-created dot. */
+            margin-right: 3px;
         }
 
         .unread_count {
@@ -600,9 +580,8 @@ li.top_left_scheduled_messages {
 }
 
 /* New .topic-box grid definitions here. */
+.subscription_block,
 .topic-box {
-    /* Padding from original .topic-box definition. */
-    padding-top: 1px;
     display: grid;
     align-items: center;
     /* This general pattern of elements applies to every single row in the left
@@ -618,6 +597,26 @@ li.top_left_scheduled_messages {
        (which alters the box size) or `margin` (which notoriously bleeds outside
        of the element it's defined on). */
     grid-template-areas: "starting-offset starting-anchor-element row-content markers-and-controls ending-anchor-element ending-offset";
+}
+
+.subscription_block {
+    grid-template-columns:
+        7px 22px minmax(0, 1fr) minmax(0, max-content)
+        30px 0;
+    white-space: nowrap;
+
+    .stream-privacy {
+        grid-area: starting-anchor-element;
+    }
+
+    .stream-name {
+        grid-area: row-content;
+    }
+}
+
+.topic-box {
+    /* Padding from original .topic-box definition. */
+    padding-top: 1px;
     grid-template-columns:
         25px $topic_resolve_width minmax(0, 1fr) minmax(0, max-content)
         30px 0;
@@ -655,6 +654,7 @@ li.top_left_scheduled_messages {
     text-overflow: ellipsis;
 }
 
+.stream-markers-and-controls,
 .topic-markers-and-controls {
     grid-area: markers-and-controls;
     display: flex;
@@ -675,6 +675,7 @@ li.top_left_scheduled_messages {
     }
 }
 
+.bottom_left_row .subscription_block .sidebar-menu-icon,
 .bottom_left_row .topic-box .sidebar-menu-icon {
     position: static;
     grid-area: ending-anchor-element;