From 0dedd001123b39bfe01b64eb962afc2dd18830c7 Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Mon, 30 Sep 2024 16:07:24 -0700
Subject: [PATCH] buddy_list: Add span for search section of header.

This is in preparation for adding a three-dot menu to the header,
which we don't want to be a click/hover target in the way the
search parts are.
---
 web/src/tippyjs.ts              |  2 +-
 web/src/user_search.ts          |  2 +-
 web/styles/right_sidebar.css    |  9 ++++++++-
 web/templates/right_sidebar.hbs | 10 ++++++----
 web/tests/activity.test.js      |  2 +-
 web/tests/user_search.test.js   |  4 ++--
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts
index 9088da5df0..9479af4c79 100644
--- a/web/src/tippyjs.ts
+++ b/web/src/tippyjs.ts
@@ -679,7 +679,7 @@ export function initialize(): void {
     });
 
     tippy.delegate("body", {
-        target: "#userlist-header",
+        target: "#userlist-header-search",
         placement: "top",
         appendTo: () => document.body,
         onShow(instance) {
diff --git a/web/src/user_search.ts b/web/src/user_search.ts
index 65ad7eb937..e66ea11dad 100644
--- a/web/src/user_search.ts
+++ b/web/src/user_search.ts
@@ -25,7 +25,7 @@ export class UserSearch {
         $("#clear_search_people_button").on("click", () => {
             this.clear_search();
         });
-        $("#userlist-header").on("click", () => {
+        $("#userlist-header-search").on("click", () => {
             this.toggle_filter_displayed();
         });
 
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 57a4f4d80d..a6f9e3f7c8 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -352,10 +352,17 @@ $user_status_emoji_width: 24px;
     cursor: pointer;
     display: grid;
     grid-template-rows: var(--line-height-sidebar-row-prominent);
-    grid-template-columns: minmax(0, 1fr) 20px;
+    grid-template-columns: minmax(0, 1fr);
     align-items: center;
     margin-right: var(--width-simplebar-scroll-hover);
 
+    #userlist-header-search {
+        display: grid;
+        grid-template-rows: var(--line-height-sidebar-row-prominent);
+        grid-template-columns: minmax(0, 1fr) 20px;
+        align-items: center;
+    }
+
     #userlist-title {
         margin: 0;
     }
diff --git a/web/templates/right_sidebar.hbs b/web/templates/right_sidebar.hbs
index 8ce27cb683..a0e6296596 100644
--- a/web/templates/right_sidebar.hbs
+++ b/web/templates/right_sidebar.hbs
@@ -2,10 +2,12 @@
     <div class="right-sidebar-items">
         <div id="user-list">
             <div id="userlist-header">
-                <h4 class='right-sidebar-title' id='userlist-title'>
-                    {{t 'USERS' }}
-                </h4>
-                <i id="user_filter_icon" class="fa fa-search"></i>
+                <span id="userlist-header-search">
+                    <h4 class='right-sidebar-title' id='userlist-title'>
+                        {{t 'USERS' }}
+                    </h4>
+                    <i id="user_filter_icon" class="fa fa-search"></i>
+                </span>
             </div>
             <div class="notdisplayed" id="user_search_section">
                 <input class="user-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />
diff --git a/web/tests/activity.test.js b/web/tests/activity.test.js
index 2ea77d1ede..06373f44b9 100644
--- a/web/tests/activity.test.js
+++ b/web/tests/activity.test.js
@@ -374,7 +374,7 @@ test("handlers", ({override, override_rewire, mock_template}) => {
     (function test_click_header_filter() {
         init();
         const e = {};
-        const handler = $("#userlist-header").get_on_handler("click");
+        const handler = $("#userlist-header-search").get_on_handler("click");
 
         simulate_right_column_buddy_list();
 
diff --git a/web/tests/user_search.test.js b/web/tests/user_search.test.js
index 5058d53400..52f7eb2ac6 100644
--- a/web/tests/user_search.test.js
+++ b/web/tests/user_search.test.js
@@ -242,7 +242,7 @@ test("click on user header to toggle display", ({override}) => {
 
     $user_filter.val("bla");
 
-    $("#userlist-header").trigger("click");
+    $("#userlist-header-search").trigger("click");
     assert.ok($("#user_search_section").hasClass("notdisplayed"));
     assert.equal($user_filter.val(), "");
 
@@ -251,7 +251,7 @@ test("click on user header to toggle display", ({override}) => {
         return $.create("sidebar").addClass("column-right");
     };
 
-    $("#userlist-header").trigger("click");
+    $("#userlist-header-search").trigger("click");
     assert.equal($("#user_search_section").hasClass("notdisplayed"), false);
 });