left_sidebar: Standardize channel list filter input.

This follow-up commit replaces the current left sidebar channel list
filter input implementation with the redesigned input component.

Note: This commit removes `clear_search` method from `stream_list.ts`,
since the `.input-button` onclick handler over at `inputs.ts` handles
the clearing of the filter input fields by sending an empty text input
event. This input event triggers the filter update handler of the
module, in this case the `update_streams_for_search` function and
resets the filter list, eliminating the need for a separate per-module
input clearing/resetting workflow.

Fixes part of #34476.

web/src/stream_list.ts

@@ -973,13 +973,14 @@ export function set_event_handlers({
         }
     });
 
-    $("#clear_search_stream_button").on("click", clear_search);
-
     $("#streams_header")
         .expectOne()
         .on("click", (e) => {
             e.preventDefault();
-            if (e.target.id === "streams_inline_icon") {
+            if (
+                e.target.id === "streams_inline_icon" ||
+                $(e.target).parent().hasClass("input-button")
+            ) {
                 return;
             }
             toggle_filter_displayed(e);
@@ -1054,13 +1055,8 @@ export function searching(): boolean {
     return $(".stream-list-filter").expectOne().is(":focus");
 }
 
-export function clear_search(e: JQuery.ClickEvent): void {
+export function test_clear_search(): void {
-    e.stopPropagation();
     const $filter = $(".stream-list-filter").expectOne();
-    if ($filter.val() === "") {
-        clear_and_hide_search();
-        return;
-    }
     $filter.val("");
     $filter.trigger("blur");
     update_streams_for_search();

web/styles/left_sidebar.css

@@ -1320,11 +1320,6 @@ li.top_left_scheduled_messages {
     }
 }
 
-.direct-messages-list-filter {
-    grid-area: filter-box;
-    padding-right: var(--line-height-sidebar-row-prominent);
-}
-
 .topic-list-filter {
     grid-area: filter-box;
     padding-right: var(--line-height-sidebar-row-prominent);
@@ -1832,23 +1827,6 @@ li.topic-list-item {
         grid-area: filter-box;
         white-space: nowrap;
     }
-
-    .stream-list-filter {
-        grid-area: filter-box;
-        padding-right: var(--line-height-sidebar-row-prominent);
-    }
-}
-
-.stream_search_section,
-.direct-messages-search-section {
-    .direct-messages-list-filter:placeholder-shown
-        + #clear-direct-messages-search-button {
-        visibility: hidden;
-    }
-
-    .stream-list-filter:placeholder-shown + #clear_search_stream_button {
-        visibility: hidden;
-    }
 }
 
 /* Prepare an adjusted grid for the logged-out state,
@@ -1914,11 +1892,18 @@ li.topic-list-item {
     }
 }
 
-.direct-messages-list-filter,
+.direct-messages-search-section {
-.stream-list-filter {
+    .direct-messages-list-filter {
-    white-space: nowrap;
+        grid-area: filter-box;
-    text-overflow: ellipsis;
+        padding-right: var(--line-height-sidebar-row-prominent);
-    overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        &:placeholder-shown + #clear-direct-messages-search-button {
+            visibility: hidden;
+        }
+    }
 }
 
 .zero_count {

web/templates/left_sidebar.hbs

@@ -211,12 +211,9 @@
                     </span>
                 </div>
 
-                <div class="notdisplayed stream_search_section left-sidebar-filter-row">
+                {{#> input input_type="filter-input" custom_classes="notdisplayed stream_search_section" icon="search" input_button_icon="close"}}
-                    <input class="stream-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Filter channels' }}" />
+                    <input type="text" class="input-element stream-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter channels' }}" />
-                    <button type="button" class="clear_search_button" id="clear_search_stream_button">
+                {{/input}}
-                        <i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
-                    </button>
-                </div>
             </div>
             <div id="topics_header">
                 <a class="show-all-streams" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count quiet-count"></span>

web/tests/stream_search.test.cjs

@@ -57,7 +57,7 @@ function toggle_filter() {
 }
 
 function clear_search_input() {
-    stream_list.clear_search({stopPropagation: noop});
+    stream_list.test_clear_search();
 }
 
 run_test("basics", ({override, override_rewire}) => {
@@ -135,10 +135,6 @@ run_test("basics", ({override, override_rewire}) => {
     verify_expanded();
     verify_focused();
 
-    // Clear an empty search.
-    clear_search_input();
-    verify_collapsed();
-
     // Expand the widget.
     toggle_filter();
     stream_list.initiate_search();