left_sidebar: Add plus icon beside channel search bar.

This button was previously found when hovering on the CHANNELS
header, but now that we've removed that header, we show the
button here instead, and always visible.

web/src/stream_list.ts

@@ -1149,7 +1149,7 @@ export let scroll_stream_into_view = function ($stream_li: JQuery): void {
         blueslip.error("Invalid stream_li was passed in");
         return;
     }
-    const stream_filter_height = $(".stream_search_section").outerHeight()!;
+    const stream_filter_height = $("#stream-search-and-add").outerHeight()!;
     const header_height = $stream_li
         .closest(".stream-list-section-container")
         .children(".stream-list-subsection-header")

web/styles/left_sidebar.css

@@ -48,10 +48,17 @@
     margin-right: var(--left-sidebar-right-margin);
 }
 
-#streams_inline_icon {
-    color: var(--color-left-sidebar-heads-up-icon);
+.add-stream-icon-container {
+    grid-area: add-channel;
+    display: grid;
+    place-items: center center;
+    margin: 2px 0;
     border-radius: 3px;
 
+    .add_stream_icon {
+        color: var(--color-left-sidebar-heads-up-icon);
+    }
+
     &:hover {
         color: var(--color-left-sidebar-heads-up-icon-hover);
         background-color: var(
@@ -308,11 +315,19 @@
     }
 }
 
-.stream_search_section {
+.spectator-view #stream-search-and-add {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+#stream-search-and-add {
+    display: grid;
+    grid-template-areas: "filter-container add-channel";
+    grid-template-columns: minmax(0, 1fr) var(--left-sidebar-header-icon-width);
     position: sticky;
     top: 0;
     /* Must be more than .stream-list-subsection-header */
     z-index: 3;
+    background: var(--color-background);
     /* Must be padding not margin so that the sticky headers don't show behind it */
     padding: var(--left-sidebar-sections-vertical-gutter)
         var(--left-sidebar-right-margin) 3px 5px;
@@ -1877,7 +1892,8 @@ li.topic-list-item {
         margin: 5px 0;
     }
 
-    .zoom-in-hide {
+    .zoom-in-hide,
+    #stream-search-and-add.zoom-in-hide {
         display: none;
     }
 

web/templates/left_sidebar.hbs

@@ -195,9 +195,14 @@
         </div>
 
         <div id="streams_list" class="zoom-out">
-            {{#> 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 id="stream-search-and-add" class="zoom-in-hide">
+                {{#> 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}}
+                <span id="add_streams_tooltip" class="add-stream-icon-container hidden-for-spectators">
+                    <i id="streams_inline_icon" class="add_stream_icon zulip-icon zulip-icon-square-plus" aria-hidden="true" ></i>
+                </span>
+            </div>
             <div id="topics_header">
                 <a class="show-all-streams trigger-click-on-enter" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count quiet-count"></span>
             </div>