From 84f3823b647147fa8a71085f24b0d835b8938d23 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 3 Oct 2024 16:56:13 -0400
Subject: [PATCH] left_sidebar: Place gridded heading hover icons.

---
 web/styles/app_variables.css   | 15 +++++++++++-
 web/styles/left_sidebar.css    | 43 +++++++++++++++++++++++++++-------
 web/templates/left_sidebar.hbs |  8 +++++--
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index cdc6b8851e..f7ebfc9eb1 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -253,7 +253,10 @@
     /* 40px (toggle icon) + 5px (gap) + 20px logo + 10px right margin */
     --left-sidebar-width-with-realm-icon-logo: 75px;
     --right-sidebar-width: 250px;
-    --left-sidebar-header-icon-width: 15px;
+    /* The width of the icon is reduced by 2px, to account for 2px
+       of top and bottom margin needed for hover backgrounds to
+       not touch the row outline. */
+    --left-sidebar-header-icon-width: calc(1.7142em - 2px); /* 24px / 14px em */
     /* Space between section in the left sidebar. */
     --left-sidebar-sections-vertical-gutter: 8px;
     /* The legacy value here is 25px; that's the unitless legacy line-height
@@ -793,6 +796,11 @@
     /* The gray on the filter icons is the same as
        what's set on ul.filters, but with 70% opacity. */
     --color-left-sidebar-navigation-icon: hsl(240deg 30% 40%);
+    --color-left-sidebar-heads-up-icon: hsl(240deg 30% 40%);
+    --color-left-sidebar-heads-up-icon-hover: hsl(240deg 100% 15%);
+    --background-color-left-sidebar-heads-up-icon-hover: hsl(
+        240deg 100% 50% / 7%
+    );
     --color-vdots-hint: hsl(240deg 30% 20%);
     --color-vdots-visible: hsl(240deg 30% 40%);
     --color-vdots-hover: hsl(240deg 100% 15%);
@@ -1309,6 +1317,11 @@
     --color-message-action-interactive: hsl(217deg 41% 90% / 100%);
     --color-left-sidebar-follow-icon-hover: hsl(0deg 0% 100%);
     --color-left-sidebar-navigation-icon: hsl(240deg 35% 68%);
+    --color-left-sidebar-heads-up-icon: hsl(240deg 35% 68%);
+    --color-left-sidebar-heads-up-icon-hover: hsl(240deg 100% 90%);
+    --background-color-left-sidebar-heads-up-icon-hover: hsl(
+        240deg 100% 75% / 20%
+    );
     --color-vdots-hint: hsl(240deg 35% 48%);
     --color-vdots-visible: hsl(240deg 35% 68%);
     --color-vdots-hover: hsl(240deg 100% 90%);
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 0088516f96..bb5f2c6e95 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -41,10 +41,14 @@
 
 #streams_inline_icon,
 .streams_filter_icon {
-    opacity: 0.5;
+    color: var(--color-left-sidebar-heads-up-icon);
+    border-radius: 3px;
 
     &:hover {
-        opacity: 1;
+        color: var(--color-left-sidebar-heads-up-icon-hover);
+        background-color: var(
+            --background-color-left-sidebar-heads-up-icon-hover
+        );
         cursor: pointer;
     }
 }
@@ -215,16 +219,19 @@
     }
 
     #show-all-direct-messages {
-        width: var(--left-sidebar-header-icon-width);
+        color: var(--color-left-sidebar-heads-up-icon);
         display: flex;
         align-items: center;
         justify-content: center;
-        opacity: 0.7;
         text-decoration: none;
-        color: inherit;
+        margin: 2px 0;
+        border-radius: 3px;
 
         &:hover {
-            opacity: 1;
+            color: var(--color-left-sidebar-heads-up-icon-hover);
+            background-color: var(
+                --background-color-left-sidebar-heads-up-icon-hover
+            );
         }
     }
 }
@@ -1140,6 +1147,18 @@ li.top_left_scheduled_messages {
     z-index: 1;
 }
 
+.left-sidebar-controls {
+    grid-area: controls;
+    display: grid;
+    /* We won't know in advance how many controls a given
+       row has, but this allows grid to generate as many
+       as needed, sized to a shared icon width. */
+    grid-auto-columns: var(--left-sidebar-header-icon-width);
+    grid-template-rows: var(--line-height-sidebar-row-prominent);
+    place-content: stretch stretch;
+    margin-right: 1px;
+}
+
 .stream-markers-and-unreads,
 .topic-markers-and-unreads {
     grid-area: markers-and-unreads;
@@ -1494,14 +1513,22 @@ li.topic-list-item {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: var(--left-sidebar-header-icon-width);
+        grid-row: 1 / 1;
+        margin: 2px 0;
     }
 
     #add_streams_tooltip {
+        grid-row: 1 / 1;
+        margin: 2px 0;
+    }
+
+    #streams_inline_icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: var(--left-sidebar-header-icon-width);
+        /* Ensure the clickable area grows to
+           the height of the controls grid. */
+        height: 100%;
     }
 
     .stream_search_section {
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index cd57238bbc..124f9f5680 100644
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -147,10 +147,12 @@
     <div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
         <i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
         <h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{t 'DIRECT MESSAGES' }}</span></h4>
-        <div class="heading-markers-and-unreads">
+        <div class="left-sidebar-controls">
             <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
                 <i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
             </a>
+        </div>
+        <div class="heading-markers-and-unreads">
             <span class="unread_count"></span>
         </div>
         <a class="zoom-out-hide" id="hide-more-direct-messages">
@@ -172,11 +174,13 @@
         <div id="streams_list" class="zoom-out">
             <div id="streams_header" class="zoom-in-hide {{#if hide_unread_counts}}hide_unread_counts{{/if}}">
                 <h4 class="left-sidebar-title"><span class="streams-tooltip-target" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'CHANNELS' }}</span></h4>
-                <div class="heading-markers-and-unreads">
+                <div class="left-sidebar-controls">
                     <i id="filter_streams_tooltip" class="streams_filter_icon zulip-icon zulip-icon-search" aria-hidden="true" data-tooltip-template-id="filter-streams-tooltip-template"></i>
                     <span id="add_streams_tooltip" class="hidden-for-spectators" data-tippy-content="{{t 'Add channels' }}">
                         <i id="streams_inline_icon" class="zulip-icon zulip-icon-square-plus" aria-hidden="true" ></i>
                     </span>
+                </div>
+                <div class="heading-markers-and-unreads">
                     <span class="unread_count"></span>
                     <span class="masked_unread_count"></span>
                 </div>