From 4dd1bf7e32911a4a788d9f9d043177ebf3412be0 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Mon, 16 Oct 2023 14:50:48 -0500
Subject: [PATCH] left_sidebar: Expand and condense the VIEWS navigation.

---
 tools/test-js-with-node                 |  1 +
 web/src/left_sidebar_navigation_area.js | 30 ++++++++++++++++++++++++
 web/styles/left_sidebar.css             | 31 +++++++++++++++++++++++++
 web/templates/left_sidebar.hbs          |  2 +-
 4 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/tools/test-js-with-node b/tools/test-js-with-node
index de13922e78..39ce6fd227 100755
--- a/tools/test-js-with-node
+++ b/tools/test-js-with-node
@@ -117,6 +117,7 @@ EXEMPT_FILES = make_set(
         "web/src/info_overlay.js",
         "web/src/integration_url_modal.js",
         "web/src/invite.ts",
+        "web/src/left_sidebar_navigation_area.js",
         "web/src/left_sidebar_navigation_area_popovers.js",
         "web/src/lightbox.js",
         "web/src/list_util.ts",
diff --git a/web/src/left_sidebar_navigation_area.js b/web/src/left_sidebar_navigation_area.js
index 32b80c78df..e8a231b5df 100644
--- a/web/src/left_sidebar_navigation_area.js
+++ b/web/src/left_sidebar_navigation_area.js
@@ -81,6 +81,24 @@ export function handle_narrow_activated(filter) {
     }
 }
 
+function toggle_condensed_navigation_area() {
+    const $views_label_container = $("#views-label-container");
+    const $views_label_icon = $("#toggle-top-left-navigation-area-icon");
+    if ($views_label_container.hasClass("showing-expanded-navigation")) {
+        // Toggle into the condensed state
+        $views_label_container.addClass("showing-condensed-navigation");
+        $views_label_container.removeClass("showing-expanded-navigation");
+        $views_label_icon.addClass("fa-caret-right");
+        $views_label_icon.removeClass("fa-caret-down");
+    } else {
+        // Toggle into the expanded state
+        $views_label_container.addClass("showing-expanded-navigation");
+        $views_label_container.removeClass("showing-condensed-navigation");
+        $views_label_icon.addClass("fa-caret-down");
+        $views_label_icon.removeClass("fa-caret-right");
+    }
+}
+
 export function highlight_recent_view() {
     remove($(".top_left_all_messages"));
     remove($(".top_left_starred_messages"));
@@ -125,4 +143,16 @@ export function highlight_inbox_view() {
 
 export function initialize() {
     update_scheduled_messages_row();
+
+    $("body").on("click", "#views-label-container", (e) => {
+        if (
+            $(e.currentTarget).hasClass("showing-condensed-navigation") &&
+            !($(e.target).hasClass("sidebar-title") || $(e.target).hasClass("fa-caret-right"))
+        ) {
+            // Ignore clicks on condensed nav items
+            return;
+        }
+        e.stopPropagation();
+        toggle_condensed_navigation_area();
+    });
 }
diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index d582ae0949..0cbf2c4227 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -674,6 +674,37 @@ li.top_left_scheduled_messages {
     margin-left: -3px;
     cursor: pointer;
 
+    &.showing-expanded-navigation {
+        /* When the expanded navigation is visible,
+           hide the condensed navigation's controls. */
+        #left-sidebar-navigation-list-condensed,
+        .left-sidebar-navigation-menu-icon {
+            display: none;
+        }
+        /* Give the sidebar title through the end of the markers
+           area, if needed. */
+        .sidebar-title {
+            grid-column: row-content-start / markers-and-controls-end;
+        }
+    }
+
+    /* Use a next-sibling combinator (+) to use CSS to show and hide
+       filter rows as needed, based on the narrow. */
+    &.showing-condensed-navigation {
+        + #left-sidebar-navigation-list {
+            /* When the navigation area is condensed, hide all
+               the rows in the full navigation list... */
+            & .top_left_row {
+                display: none;
+            }
+            /* ...except when there is an active filter in place:
+               that row should still be shown. */
+            & .top_left_row.active-filter {
+                display: block;
+            }
+        }
+    }
+
     #toggle-top-left-navigation-area-icon {
         grid-area: starting-anchor-element;
         /* Remove negative left margin. This should be cleaned
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index 5d9ed080d7..e091c25c55 100644
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -1,6 +1,6 @@
 <div class="left-sidebar" id="left-sidebar" role="navigation">
     <div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
-        <div id="views-label-container" class="hidden-for-spectators">
+        <div id="views-label-container" class="showing-expanded-navigation hidden-for-spectators">
             <i id="toggle-top-left-navigation-area-icon" class="fa fa-sm fa-caret-down" aria-hidden="true"></i>
             {{~!-- squash whitespace --~}}
             <h4 class="sidebar-title">{{t 'VIEWS' }}</h4>