left_sidebar: Show the search bar all the time.

This is preparation for adding channel folders to the sidebar
and removing the CHANNELS header, where we'll want to have an
always open search bar.

web/src/add_stream_options_popover.ts

@@ -43,15 +43,6 @@ export function initialize(): void {
                 placement: "bottom",
             });
 
-            const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined =
-                $("#filter_streams_tooltip").get(0);
-            // If `filter_streams_tooltip` is not triggered yet, this will set its initial placement.
-            assert(filter_streams_tooltip !== undefined);
-            filter_streams_tooltip.dataset.tippyPlacement = "bottom";
-            filter_streams_tooltip._tippy?.setProps({
-                placement: "bottom",
-            });
-
             return undefined;
         },
         onHidden(instance) {
@@ -70,14 +61,6 @@ export function initialize(): void {
             add_streams_tooltip._tippy?.setProps({
                 placement: "top",
             });
-
-            const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined =
-                $("#filter_streams_tooltip").get(0);
-            assert(filter_streams_tooltip !== undefined);
-            filter_streams_tooltip.dataset.tippyPlacement = "top";
-            filter_streams_tooltip._tippy?.setProps({
-                placement: "top",
-            });
         },
     });
 }

web/src/click_handlers.ts

@@ -830,11 +830,6 @@ export function initialize(): void {
         topic_list.clear_topic_search,
     );
 
-    $(".streams_filter_icon").on("click", (e) => {
-        e.stopPropagation();
-        stream_list.toggle_filter_displayed(e);
-    });
-
     $("body").on("click", "#direct-messages-section-header.zoom-out", (e) => {
         if ($(e.target).closest("#show-all-direct-messages").length === 1) {
             // Let the browser handle the "direct message feed" widget.

web/src/hotkey.js

@@ -432,7 +432,7 @@ export function process_escape_key(e) {
         }
 
         if (stream_list.searching()) {
-            stream_list.clear_and_hide_search();
+            stream_list.clear_search();
             return true;
         }
 
@@ -597,14 +597,6 @@ export function process_enter_key(e) {
     }
 
     if (processing_text()) {
-        if (stream_list.searching()) {
-            // This is sort of funny behavior, but I think
-            // the intention is that we want it super easy
-            // to close stream search.
-            stream_list.clear_and_hide_search();
-            return true;
-        }
-
         // Don't send the message if topic box is focused.
         if (compose.is_topic_input_focused()) {
             return true;

web/src/left_sidebar_tooltips.ts

@@ -137,7 +137,7 @@ export function initialize(): void {
     });
 
     tippy.delegate("body", {
-        target: ["#streams_header .streams-tooltip-target", "#filter_streams_tooltip"].join(","),
+        target: "#streams_header .streams-tooltip-target",
         appendTo: () => document.body,
     });
 

web/src/stream_list.ts

@@ -923,7 +923,7 @@ function on_sidebar_channel_click(
     e: JQuery.ClickEvent | null,
     show_channel_feed: (stream_id: number, trigger: string) => void,
 ): void {
-    clear_and_hide_search();
+    clear_search();
     if (e !== null) {
         e.preventDefault();
         e.stopPropagation();
@@ -1126,21 +1126,8 @@ export function test_clear_search(): void {
     update_streams_for_search();
 }
 
-export function show_search_section(): void {
-    $("#streams_header").addClass("showing-stream-search-section");
-    $(".stream_search_section").expectOne().removeClass("notdisplayed");
-    resize.resize_stream_filters_container();
-}
-
-export function hide_search_section(): void {
-    $("#streams_header").removeClass("showing-stream-search-section");
-    $(".stream_search_section").expectOne().addClass("notdisplayed");
-    resize.resize_stream_filters_container();
-}
-
 export function initiate_search(): void {
     popovers.hide_all();
-    show_search_section();
 
     const $filter = $(".stream-list-filter").expectOne();
 
@@ -1150,7 +1137,7 @@ export function initiate_search(): void {
     stream_cursor.reset();
 }
 
-export function clear_and_hide_search(): void {
+export function clear_search(): void {
     const $filter = $(".stream-list-filter").expectOne();
     if ($filter.val() !== "") {
         $filter.val("");
@@ -1158,17 +1145,6 @@ export function clear_and_hide_search(): void {
     }
     stream_cursor.clear();
     $filter.trigger("blur");
-
-    hide_search_section();
-}
-
-export function toggle_filter_displayed(e: JQuery.ClickEvent): void {
-    if ($(".stream_search_section.notdisplayed").length === 0) {
-        clear_and_hide_search();
-    } else {
-        initiate_search();
-    }
-    e.preventDefault();
 }
 
 function scroll_stream_into_view($stream_li: JQuery): void {

web/styles/left_sidebar.css

@@ -48,8 +48,7 @@
     margin-right: var(--left-sidebar-right-margin);
 }
 
-#streams_inline_icon,
-.streams_filter_icon {
+#streams_inline_icon {
     color: var(--color-left-sidebar-heads-up-icon);
     border-radius: 3px;
 
@@ -62,10 +61,6 @@
     }
 }
 
-.streams_filter_icon.web_public {
-    margin-right: 10px;
-}
-
 .masked_unread_count {
     /* 8px at 16px/14em */
     font-size: 0.5em;
@@ -1818,18 +1813,6 @@ li.topic-list-item {
         }
     }
 
-    #filter_streams_tooltip {
-        display: none;
-        align-items: center;
-        justify-content: center;
-        grid-row: 1 / 1;
-        margin: 2px 0;
-
-        @media (hover: none) {
-            display: flex;
-        }
-    }
-
     #add_streams_tooltip {
         grid-row: 1 / 1;
         margin: 2px 0;
@@ -1862,7 +1845,6 @@ li.topic-list-item {
             opacity: var(--opacity-sidebar-heading-hover);
         }
 
-        #filter_streams_tooltip,
         #streams_inline_icon {
             display: flex;
         }

web/templates/left_sidebar.hbs

@@ -195,10 +195,9 @@
         </div>
 
         <div id="streams_list" class="zoom-out">
-            <div id="streams_header" class="zoom-in-hide">
-                <h4 class="left-sidebar-title"><span class="streams-tooltip-target" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'CHANNELS' }}</span></h4>
+            <div id="streams_header" class="showing-stream-search-section zoom-in-hide">
+                <h4 class="left-sidebar-title"><span class="streams-tooltip-target">{{t 'CHANNELS' }}</span></h4>
                 <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">
                         <i id="streams_inline_icon" class="zulip-icon zulip-icon-square-plus" aria-hidden="true" ></i>
                     </span>
@@ -210,7 +209,7 @@
                     </span>
                 </div>
                 <div class="left-sidebar-filter-input-container">
-                    {{#> input_wrapper input_type="filter-input" custom_classes="notdisplayed stream_search_section" icon="search" input_button_icon="close"}}
+                    {{#> input_wrapper input_type="filter-input" custom_classes="stream_search_section" icon="search" input_button_icon="close"}}
                         <input type="text" class="input-element stream-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter channels' }}" />
                     {{/input_wrapper}}
                 </div>

web/templates/tooltip_templates.hbs

@@ -181,10 +181,6 @@
         <div class="tootlip-inner-content views-message-count italic"></div>
     </div>
 </template>
-<template id="filter-streams-tooltip-template">
-    {{t 'Filter channels' }}
-    {{tooltip_hotkey_hints "Q"}}
-</template>
 <template id="message-expander-tooltip-template">
     {{t 'Show more' }}
     {{tooltip_hotkey_hints "-"}}

web/tests/stream_search.test.cjs

@@ -41,21 +41,6 @@ function make_cursor_helper(override_rewire) {
     };
 }
 
-function simulate_search_expanded() {
-    // The way we check if the search widget is expanded
-    // is kind of awkward.
-
-    $(".stream_search_section.notdisplayed").length = 0;
-}
-
-function simulate_search_collapsed() {
-    $(".stream_search_section.notdisplayed").length = 1;
-}
-
-function toggle_filter() {
-    stream_list.toggle_filter_displayed({preventDefault: noop});
-}
-
 function clear_search_input() {
     stream_list.test_clear_search();
 }
@@ -65,28 +50,19 @@ run_test("basics", ({override, override_rewire}) => {
     override(sidebar_ui, "show_left_sidebar", noop);
 
     const $input = $(".stream-list-filter");
-    const $section = $(".stream_search_section");
 
     expand_sidebar();
-    $section.addClass("notdisplayed");
 
     let cursor_helper = make_cursor_helper(override_rewire);
 
-    function verify_expanded() {
-        assert.ok(!$section.hasClass("notdisplayed"));
-        simulate_search_expanded();
-    }
-
     function verify_focused() {
         assert.ok(stream_list.searching());
         assert.ok($input.is_focused());
     }
 
-    function verify_collapsed() {
-        assert.ok($section.hasClass("notdisplayed"));
-        assert.ok(!$input.is_focused());
+    function verify_not_focused() {
         assert.ok(!stream_list.searching());
-        simulate_search_collapsed();
+        assert.ok(!$input.is_focused());
     }
 
     function verify_list_updated(f) {
@@ -99,70 +75,31 @@ run_test("basics", ({override, override_rewire}) => {
         assert.ok(updated);
     }
 
-    // Initiate search (so expand widget).
+    // Initiate search
     stream_list.initiate_search();
-    verify_expanded();
     verify_focused();
 
-    assert.deepEqual(cursor_helper.events, ["reset"]);
-
-    // Collapse the widget.
-    cursor_helper = make_cursor_helper(override_rewire);
-
-    toggle_filter();
-    verify_collapsed();
-
-    assert.deepEqual(cursor_helper.events, ["clear"]);
-
-    // Expand the widget.
-    toggle_filter();
-    verify_expanded();
-    verify_focused();
-
-    (function add_some_text_and_collapse() {
+    (function add_some_text_and_clear() {
+        stream_list.initiate_search();
         cursor_helper = make_cursor_helper(override_rewire);
         $input.val("foo");
         verify_list_updated(() => {
-            toggle_filter();
+            clear_search_input();
         });
-
-        verify_collapsed();
-        assert.deepEqual(cursor_helper.events, ["reset", "clear"]);
+        assert.deepEqual(cursor_helper.events, ["reset"]);
     })();
 
-    // Expand the widget.
-    toggle_filter();
-    verify_expanded();
-    verify_focused();
-
-    // Expand the widget.
-    toggle_filter();
-    stream_list.initiate_search();
-
-    // Clear a non-empty search.
-    $input.val("foo");
-    verify_list_updated(() => {
-        clear_search_input();
-    });
-    verify_expanded();
-
-    // Expand the widget.
-    toggle_filter();
-    stream_list.initiate_search();
-
     // Escape a non-empty search.
-    $input.val("foo");
-    stream_list.clear_and_hide_search();
-    verify_collapsed();
-
-    // Expand the widget.
-    toggle_filter();
     stream_list.initiate_search();
+    $input.val("foo");
+    stream_list.clear_search();
+    verify_not_focused();
 
     // Escape an empty search.
+    stream_list.initiate_search();
     $input.val("");
-    stream_list.clear_and_hide_search();
-    verify_collapsed();
+    stream_list.clear_search();
+    verify_not_focused();
 });
 
 run_test("expanding_sidebar", ({override, override_rewire}) => {