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

@@ -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) {

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();
         });
 

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;
     }

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' }}" />

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();
 

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);
 });