left_sidebar: Add New DM hover button to DM header row.

web/src/click_handlers.js

@@ -425,6 +425,17 @@ export function initialize() {
     });
 
     // SIDEBARS
+    $("body").on("click", "#compose-new-direct-message", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        compose_actions.start({
+            message_type: "private",
+            trigger: "new direct message",
+            keep_composebox_empty: true,
+        });
+    });
+
     $(".buddy-list-section").on("click", ".selectable_sidebar_block", (e) => {
         if (e.metaKey || e.ctrlKey || e.shiftKey) {
             return;

web/styles/left_sidebar.css

@@ -236,6 +236,7 @@
         }
     }
 
+    #compose-new-direct-message,
     #show-all-direct-messages {
         color: var(--color-left-sidebar-heads-up-icon);
         display: none;
@@ -244,6 +245,7 @@
         text-decoration: none;
         margin: 2px 0;
         border-radius: 3px;
+        grid-row: 1 / 1;
 
         &:hover {
             color: var(--color-left-sidebar-heads-up-icon-hover);
@@ -257,8 +259,11 @@
         }
     }
 
-    &:hover #show-all-direct-messages {
+    &:hover {
-        display: flex;
+        #compose-new-direct-message,
+        #show-all-direct-messages {
+            display: flex;
+        }
     }
 }
 

web/templates/left_sidebar.hbs

@@ -150,6 +150,9 @@
         <i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
         <h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{t 'DIRECT MESSAGES' }}</span></h4>
         <div class="left-sidebar-controls">
+            <span id="compose-new-direct-message" class="tippy-left-sidebar-tooltip" data-tooltip-template-id="new_direct_message_button_tooltip_template">
+                <i class="left-sidebar-new-direct-message-icon zulip-icon zulip-icon-square-plus" aria-label="{{t 'New direct message' }}"></i>
+            </span>
             <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
                 <i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
             </a>