left_sidebar: Place new-topic button on stream rows.

Fixes #31801

web/src/click_handlers.js

@@ -603,6 +603,20 @@ export function initialize() {
         });
     });
 
+    // Left sidebar channel rows
+    $("body").on("click", ".channel-new-topic-button", (e) => {
+        e.stopPropagation();
+        const elem = e.currentTarget;
+        const stream_id = Number.parseInt(elem.dataset.streamId, 10);
+        compose_actions.start({
+            message_type: "stream",
+            stream_id,
+            topic: "",
+            trigger: "clear topic button",
+            keep_composebox_empty: true,
+        });
+    });
+
     // Recent conversations direct messages (Not displayed on small widths)
     $("body").on("mouseenter", ".recent_topic_stream .pm_status_icon", (e) => {
         e.stopPropagation();

web/styles/left_sidebar.css

@@ -123,6 +123,10 @@
     }
 
     .stream-expanded {
+        .channel-new-topic-button {
+            display: flex;
+        }
+
         .stream-with-count.hide_unread_counts {
             .masked_unread_count {
                 display: none;
@@ -1188,6 +1192,30 @@ li.top_left_scheduled_messages {
     }
 }
 
+.channel-new-topic-button {
+    /* display: flex; is set on visible channels and
+       channel-row hovers. */
+    display: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-left-sidebar-heads-up-icon);
+    margin: 2px 0;
+    border-radius: 3px;
+
+    &:hover {
+        color: var(--color-left-sidebar-heads-up-icon-hover);
+        background-color: var(
+            --background-color-left-sidebar-heads-up-icon-hover
+        );
+    }
+}
+
+.narrow-filter:hover {
+    .channel-new-topic-button {
+        display: flex;
+    }
+}
+
 .bottom_left_row .sidebar-menu-icon {
     grid-area: ending-anchor-element;
 }
@@ -1546,7 +1574,6 @@ li.topic-list-item {
            the height of the controls grid. */
         height: 100%;
 
-
         @media (hover: none) {
             display: flex;
         }

web/templates/stream_sidebar_row.hbs

@@ -10,6 +10,12 @@
 
             <a href="{{url}}" title="{{name}}" class="stream-name">{{name}}</a>
 
+            <div class="left-sidebar-controls">
+                <div class="channel-new-topic-button tippy-zulip-tooltip hidden-for-spectators" data-tippy-content="{{t 'New topic'}}" data-stream-id="{{id}}">
+                    <i class="channel-new-topic-icon zulip-icon zulip-icon-square-plus" aria-hidden="true"></i>
+                </div>
+            </div>
+
             <div class="stream-markers-and-unreads">
                 <span class="unread_mention_info"></span>
                 <span class="unread_count"></span>