From dc0e82deefff7cbf82c91bc734e40b661901c5a0 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Sat, 16 Nov 2024 12:31:14 -0800
Subject: [PATCH] buddy_list: Move arrow toggle to the left of the header text.

---
 web/src/buddy_list.ts                       |  1 +
 web/styles/app_variables.css                |  4 ++++
 web/styles/right_sidebar.css                | 23 ++++++++++++++++-----
 web/styles/zulip.css                        |  2 +-
 web/templates/buddy_list/section_header.hbs |  2 +-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts
index 307a22c053..c65b342b77 100644
--- a/web/src/buddy_list.ts
+++ b/web/src/buddy_list.ts
@@ -453,6 +453,7 @@ export class BuddyList extends BuddyListConf {
             $("#buddy-list-users-matching-view-container").toggleClass("no-display", true);
         }
 
+        $(".buddy-list-subsection-header").toggleClass("no-display", hide_headers);
         if (hide_headers) {
             return;
         }
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index b459e3739f..3c33c6b888 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -233,6 +233,10 @@
     --left-sidebar-toggle-width-offset: var(
         --left-sidebar-header-icon-toggle-width
     );
+    --right-sidebar-header-icon-toggle-width: 20px;
+    --right-sidebar-toggle-width-offset: calc(
+        var(--right-sidebar-header-icon-toggle-width) - 4px
+    );
     /* This represents the space in the sidebar reserved for symbols like
        the #; labels like the stream name go to the right of this. */
     --left-sidebar-icon-column-width: 16px;
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 336edde718..70757604e5 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -41,6 +41,7 @@ $user_status_emoji_width: 24px;
 }
 
 .buddy-list-section-toggle {
+    grid-area: arrow;
     color: var(--color-text-sidebar-heading);
     opacity: var(--opacity-sidebar-heading-icon);
 }
@@ -53,7 +54,10 @@ $user_status_emoji_width: 24px;
     }
 
     .buddy-list-user-link {
-        margin-left: var(--right-sidebar-left-spacing);
+        margin-left: calc(
+            var(--right-sidebar-toggle-width-offset) +
+                var(--right-sidebar-left-spacing)
+        );
     }
 }
 
@@ -195,7 +199,10 @@ $user_status_emoji_width: 24px;
         font-size: 14px;
         /* Override .empty-list-message !important styling */
         padding: 0 !important;
-        margin-left: var(--right-sidebar-left-spacing);
+        margin-left: calc(
+            var(--right-sidebar-toggle-width-offset) +
+                var(--right-sidebar-left-spacing)
+        );
         text-align: left;
 
         &:hover {
@@ -223,17 +230,20 @@ $user_status_emoji_width: 24px;
 }
 
 .buddy-list-subsection-header {
-    display: flex;
+    display: grid;
     align-items: center;
+    grid-template:
+        "arrow row-content scroll-buffer" var(
+            --line-height-sidebar-row-prominent
+        )
+        / var(--right-sidebar-header-icon-toggle-width) minmax(0, 1fr);
     cursor: pointer;
     background-color: var(--color-background);
-    line-height: 1;
     position: sticky;
     top: 0;
     z-index: 1;
     color: var(--color-text-default);
     border-radius: 4px;
-    padding-left: 4px;
     margin-right: var(--width-simplebar-scroll-hover);
 
     &:hover {
@@ -257,6 +267,7 @@ $user_status_emoji_width: 24px;
     letter-spacing: var(--letter-spacing-sidebar-heading);
     opacity: var(--opacity-sidebar-heading);
     transition: opacity 140ms linear;
+    grid-area: row-content;
 }
 
 .buddy-list-subsection-header.no-display {
@@ -385,6 +396,7 @@ $user_status_emoji_width: 24px;
         "row-content ." auto / minmax(0, 1fr) 26px;
     align-content: baseline;
     margin-right: var(--width-simplebar-scroll-hover);
+    margin-left: var(--right-sidebar-toggle-width-offset);
 
     .user-name-and-status-emoji {
         display: flex;
@@ -449,6 +461,7 @@ $user_status_emoji_width: 24px;
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     margin-bottom: 10px;
+    margin-left: 5px;
 
     #userlist-header-search {
         display: grid;
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 68b503ad54..e75cdf6994 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -550,7 +550,7 @@ body.has-overlay-scrollbar {
     }
 
     .column-right .right-sidebar {
-        padding-left: 10px;
+        padding-left: 5px;
         width: 240px;
     }
 
diff --git a/web/templates/buddy_list/section_header.hbs b/web/templates/buddy_list/section_header.hbs
index 6161cd1f5b..a0d845cdd6 100644
--- a/web/templates/buddy_list/section_header.hbs
+++ b/web/templates/buddy_list/section_header.hbs
@@ -1,4 +1,4 @@
+<i class="buddy-list-section-toggle zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>
 <h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
     {{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
 </h5>
-<i class="buddy-list-section-toggle zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>