left_sidebar: Remove `#direct-messages-sticky-header`.

We clean up unnecessary nesting in this commit and replace one
usage of `#direct-messages-sticky-header` with
`#direct-messages-section-header`. Since `.direct-messages-container`
was being used along with `#direct-messages-sticky-header` at multiple
places, just removing the nesting would break those selectors. For those
selectors, they have been refactored to just look for
`#direct-messages-section-header` instead. `.direct-messages-container`
specific selectors still exist but they apply to both instances of
`.direct-messages-container`, the DM header and the DM list.

web/src/click_handlers.js

@@ -740,50 +740,42 @@ export function initialize() {
         stream_list.toggle_filter_displayed(e);
     });
 
-    $("body").on(
-        "click",
-        ".direct-messages-container.zoom-out #direct-messages-section-header",
-        (e) => {
-            if ($(e.target).closest("#show-all-direct-messages").length === 1) {
-                // Let the browser handle the "direct message feed" widget.
-                return;
-            }
+    $("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.
+            return;
+        }
 
-            e.preventDefault();
-            e.stopPropagation();
-            const $left_sidebar_scrollbar = $(
-                "#left_sidebar_scroll_container .simplebar-content-wrapper",
-            );
-            const scroll_position = $left_sidebar_scrollbar.scrollTop();
+        e.preventDefault();
+        e.stopPropagation();
+        const $left_sidebar_scrollbar = $(
+            "#left_sidebar_scroll_container .simplebar-content-wrapper",
+        );
+        const scroll_position = $left_sidebar_scrollbar.scrollTop();
 
-            if (stream_list.is_zoomed_in()) {
-                stream_list.zoom_out();
-            }
+        if (stream_list.is_zoomed_in()) {
+            stream_list.zoom_out();
+        }
 
-            // This next bit of logic is a bit subtle; this header
-            // button scrolls to the top of the direct messages
-            // section is uncollapsed but out of view; otherwise, we
-            // toggle its collapsed state.
-            if (scroll_position === 0 || pm_list.is_private_messages_collapsed()) {
-                pm_list.toggle_private_messages_section();
-            }
-            $left_sidebar_scrollbar.scrollTop(0);
-        },
-    );
+        // This next bit of logic is a bit subtle; this header
+        // button scrolls to the top of the direct messages
+        // section is uncollapsed but out of view; otherwise, we
+        // toggle its collapsed state.
+        if (scroll_position === 0 || pm_list.is_private_messages_collapsed()) {
+            pm_list.toggle_private_messages_section();
+        }
+        $left_sidebar_scrollbar.scrollTop(0);
+    });
 
     /* The DIRECT MESSAGES label's click behavior is complicated;
      * only when zoomed in does it have a navigation effect, so we need
      * this click handler rather than just a link. */
-    $("body").on(
-        "click",
-        ".direct-messages-container.zoom-in #direct-messages-section-header",
-        (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+    $("body").on("click", "#direct-messages-section-header.zoom-in", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
 
-            window.location.hash = "narrow/is/dm";
-        },
-    );
+        window.location.hash = "narrow/is/dm";
+    });
 
     // disable the draggability for left-sidebar components
     $("#stream_filters, #left-sidebar-navigation-list").on("dragstart", (e) => {

web/src/pm_list.ts

@@ -23,7 +23,7 @@ let private_messages_collapsed = false;
 let zoomed = false;
 
 function get_private_messages_section_header(): JQuery {
-    return $(".direct-messages-container #direct-messages-section-header");
+    return $("#direct-messages-section-header");
 }
 
 export function set_count(count: number): void {

web/src/resize.ts

@@ -30,7 +30,7 @@ function get_new_heights(): {
         Number.parseInt($("#left-sidebar-navigation-area").css("marginTop"), 10) -
         Number.parseInt($("#left-sidebar-navigation-area").css("marginBottom"), 10) -
         ($("#left-sidebar-navigation-list").outerHeight(true) ?? 0) -
-        ($("#direct-messages-sticky-header").outerHeight(true) ?? 0);
+        ($("#direct-messages-section-header").outerHeight(true) ?? 0);
 
     // Don't let us crush the stream sidebar completely out of view
     stream_filters_max_height = Math.max(80, stream_filters_max_height);

web/styles/left_sidebar.css

@@ -203,7 +203,7 @@ li.show-more-topics {
        in the DM section. */
     margin-right: 12px;
 
-    #direct-messages-section-header {
+    &#direct-messages-section-header {
         grid-template-columns: 0 15px minmax(0, 1fr) max-content 30px 0;
         grid-template-rows: var(--line-height-sidebar-row-prominent);
         /* TODO: Rewrite the `--left-sidebar-collapse-widget-gutter`

web/templates/left_sidebar.hbs

@@ -143,20 +143,18 @@
         </ul>
     </div>
 
-    <div id="direct-messages-sticky-header" class="direct-messages-container zoom-out hidden-for-spectators">
-        <div id="direct-messages-section-header" class="zoom-out zoom-in-sticky">
-            <i id="toggle-direct-messages-section-icon" class="fa fa-sm fa-caret-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="heading-markers-and-controls">
-                <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
-                    <i class="fa fa-align-right" aria-label="{{t 'Direct message feed' }}"></i>
-                </a>
-                <span class="unread_count"></span>
-            </div>
-            <a class="zoom-out-hide" id="hide-more-direct-messages">
-                <span class="hide-more-direct-messages-text"> {{t 'back to channels' }}</span>
+    <div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
+        <i id="toggle-direct-messages-section-icon" class="fa fa-sm fa-caret-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="heading-markers-and-controls">
+            <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
+                <i class="fa fa-align-right" aria-label="{{t 'Direct message feed' }}"></i>
             </a>
+            <span class="unread_count"></span>
         </div>
+        <a class="zoom-out-hide" id="hide-more-direct-messages">
+            <span class="hide-more-direct-messages-text"> {{t 'back to channels' }}</span>
+        </a>
     </div>
     {{~!-- squash whitespace --~}}
     <div id="left_sidebar_scroll_container" class="scrolling_list" data-simplebar data-simplebar-tab-index="-1">

web/tests/pm_list.test.js

@@ -12,7 +12,7 @@ run_test("update_dom_with_unread_counts", () => {
     let counts;
 
     const $total_count = $.create("total-count-stub");
-    const $private_li = $(".direct-messages-container #direct-messages-section-header");
+    const $private_li = $("#direct-messages-section-header");
     $private_li.set_find_results(".unread_count", $total_count);
 
     counts = {