From 484d5d05d666268767bcc13cf3d857ad18d9b521 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 4 Oct 2024 14:51:18 -0400
Subject: [PATCH] left_sidebar: Present better-aligned masked unreads as icons.

---
 web/shared/icons/masked-unread.svg   | Bin 0 -> 140 bytes
 web/styles/app_components.css        |   9 --------
 web/styles/app_variables.css         |   4 +++-
 web/styles/left_sidebar.css          |  32 +++++++++++++--------------
 web/templates/left_sidebar.hbs       |   8 +++++--
 web/templates/stream_sidebar_row.hbs |   4 +++-
 6 files changed, 28 insertions(+), 29 deletions(-)
 create mode 100644 web/shared/icons/masked-unread.svg

diff --git a/web/shared/icons/masked-unread.svg b/web/shared/icons/masked-unread.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dde416d2115b92518f1660792a0f436c1d5da86b
GIT binary patch
literal 140
zcmXAiu?_+u5JY>wV!Q1Qq87veg@1A)!p0R0M{du*_rzvq@-maL%bH+&aakPZ-rpCc
zL}ZfFR9jL<t+m=42txOs9U6ojDdj%mgP0wbS|Y+qQLc4!s6m4PgWd*efg^++o)N-l
SSR49Z-gpjARNnqR{NW2Ph$?mf

literal 0
HcmV?d00001

diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 36c8700a7e..fb020742ad 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -628,15 +628,6 @@ input.settings_text_input {
     opacity: 0.7;
 }
 
-.masked_unread_count {
-    float: right;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: var(--color-masked-unread-marker);
-    display: none;
-}
-
 /* Implement the web app's default-hidden convention for alert
    elements.  Portico pages lack this CSS and thus show them by
    default. */
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index be3e9bd510..f6582bbc8f 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -239,6 +239,9 @@
     /* space direct message / stream / topic names from unread counters
     and @ mention indicators by 3px on the right */
     --left-sidebar-before-unread-count-padding: 3px;
+    /* 15px is the approximate width of a single-digit
+       unread marker. */
+    --left-sidebar-single-digit-unread-width: 15px;
     --left-sidebar-right-margin: 12px;
     /* 289px at 14px/1em */
     --left-sidebar-max-width: calc(
@@ -396,7 +399,6 @@
     it doesn't leak through message header.
     */
     --unread-marker-left: -1px;
-    --masked-unread-count-margin-right: 3px;
 
     /*
     Compose-recipient box minimum height. Used in a flexbox context to
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 4a5ff89943..2e6c1a8932 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -61,6 +61,16 @@
     max-width: 18em;
 }
 
+.masked_unread_count {
+    font-size: 8px;
+    display: none;
+    /* Masked unreads display as flex when revealed. */
+    align-items: center;
+    justify-content: center;
+    color: var(--color-masked-unread-marker);
+    width: var(--left-sidebar-single-digit-unread-width);
+}
+
 #stream_filters {
     overflow: visible;
     margin-bottom: 5px;
@@ -95,14 +105,7 @@
 
     .stream-with-count.hide_unread_counts {
         .masked_unread_count {
-            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: var(--masked-unread-count-margin-right);
+            display: flex;
         }
 
         .unread_count {
@@ -767,10 +770,8 @@ li.top_left_scheduled_messages {
 .top_left_starred_messages {
     &.hide_starred_message_count {
         .masked_unread_count {
-            display: block;
+            display: flex;
             grid-area: markers-and-unreads;
-            /* Adding margin-right aligns the .masked_unread_count with the rest of the masked unread counts in the channel list. */
-            margin-right: var(--masked-unread-count-margin-right);
         }
 
         .unread_count {
@@ -1183,6 +1184,7 @@ li.top_left_scheduled_messages {
     /* Present a uniform space between icons */
     gap: 5px;
     align-items: center;
+    justify-content: center;
 
     .unread_mention_info {
         /* Unset margin in favor of flex gap. */
@@ -1501,7 +1503,8 @@ li.topic-list-item {
             0,
             max-content
         )
-        minmax(17px, max-content) var(--left-sidebar-vdots-width) 0;
+        minmax(0, max-content) var(--left-sidebar-vdots-width)
+        0;
     /* Keep the stream-search area rows collapsed. */
     grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
     cursor: pointer;
@@ -1612,10 +1615,7 @@ li.topic-list-item {
         }
 
         .masked_unread_count {
-            display: block;
-            /* Hold space enough so single-digit
-               unreads don't shift on hover. */
-            margin: 0 3px;
+            display: flex;
         }
 
         &:hover {
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index 124f9f5680..5c0b5a1458 100644
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -116,7 +116,9 @@
                     {{~!-- squash whitespace --~}}
                     <span class="left-sidebar-navigation-label">{{t 'Starred messages' }}</span>
                     <span class="unread_count"></span>
-                    <span class="masked_unread_count"></span>
+                    <span class="masked_unread_count">
+                        <i class="zulip-icon zulip-icon-masked-unread"></i>
+                    </span>
                 </a>
                 <span class="arrow sidebar-menu-icon starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
             </li>
@@ -182,7 +184,9 @@
                 </div>
                 <div class="heading-markers-and-unreads">
                     <span class="unread_count"></span>
-                    <span class="masked_unread_count"></span>
+                    <span class="masked_unread_count">
+                        <i class="zulip-icon zulip-icon-masked-unread"></i>
+                    </span>
                 </div>
 
                 <div class="notdisplayed stream_search_section">
diff --git a/web/templates/stream_sidebar_row.hbs b/web/templates/stream_sidebar_row.hbs
index ab43886a6e..bbbffe8a33 100644
--- a/web/templates/stream_sidebar_row.hbs
+++ b/web/templates/stream_sidebar_row.hbs
@@ -19,7 +19,9 @@
             <div class="stream-markers-and-unreads">
                 <span class="unread_mention_info"></span>
                 <span class="unread_count"></span>
-                <span class="masked_unread_count"></span>
+                <span class="masked_unread_count">
+                    <i class="zulip-icon zulip-icon-masked-unread"></i>
+                </span>
             </div>
 
             <span class="sidebar-menu-icon stream-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>