Add keyboard shortcut for collapse/expand section (#1779)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

assets/css/js_interop.css

@@ -65,7 +65,9 @@ solely client-side operations.
   [data-el-section-headline]:not(:hover):not([data-js-focused])
   [data-el-section-collapse-button],
 [data-el-section]:not([data-js-collapsed]) [data-el-section-expand-button],
-[data-el-section][data-js-collapsed] > [data-el-section-content],
+[data-el-session]:not([data-js-code-zen])
+  [data-el-section][data-js-collapsed]
+  > [data-el-section-content],
 [data-el-section]:not([data-js-collapsed])
   > [data-el-section-subheadline-collapsed] {
   @apply hidden;
@@ -276,6 +278,7 @@ solely client-side operations.
 
 [data-el-session][data-js-code-zen] [data-el-section-headline],
 [data-el-session][data-js-code-zen] [data-el-section-subheadline],
+[data-el-session][data-js-code-zen] [data-el-section-subheadline-collapsed],
 [data-el-session][data-js-code-zen] [data-el-cell][data-type="markdown"],
 [data-el-session][data-js-code-zen] [data-el-actions],
 [data-el-session][data-js-code-zen] [data-el-insert-buttons] {

assets/js/hooks/session.js

@@ -146,6 +146,11 @@ const Session = {
       (event) => this.el.toggleAttribute("data-js-no-outputs")
     );
 
+    this.getElement("section-toggle-collapse-all-button").addEventListener(
+      "click",
+      (event) => this.toggleCollapseAllSections()
+    );
+
     window.addEventListener(
       "phx:page-loading-stop",
       () => {
@@ -419,6 +424,10 @@ const Session = {
         !this.codeZen && this.insertCellAboveFocused("markdown");
       } else if (keyBuffer.tryMatch(["z"])) {
         this.setCodeZen(!this.codeZen);
+      } else if (keyBuffer.tryMatch(["c"])) {
+        !this.codeZen && this.toggleCollapseSection();
+      } else if (keyBuffer.tryMatch(["C"])) {
+        !this.codeZen && this.toggleCollapseAllSections();
       }
     }
   },
@@ -979,6 +988,45 @@ const Session = {
     }
   },
 
+  toggleCollapseSection() {
+    if (this.focusedId) {
+      const sectionId = this.getSectionIdByFocusableId(this.focusedId);
+      const section = this.getSectionById(sectionId);
+
+      if (section) {
+        if (section.hasAttribute("data-js-collapsed")) {
+          section.removeAttribute("data-js-collapsed");
+        } else {
+          section.setAttribute("data-js-collapsed", "");
+          this.setFocusedEl(sectionId, { scroll: true });
+        }
+      }
+    }
+  },
+
+  toggleCollapseAllSections() {
+    const allCollapsed = this.getSections().every((section) =>
+      section.hasAttribute("data-js-collapsed")
+    );
+
+    if (allCollapsed) {
+      this.getSections().forEach((section) => {
+        section.removeAttribute("data-js-collapsed");
+      });
+    } else {
+      this.getSections().forEach((section) => {
+        section.setAttribute("data-js-collapsed", "");
+      });
+    }
+    if (this.focusedId) {
+      const focusedSectionId = this.getSectionIdByFocusableId(this.focusedId);
+
+      if (focusedSectionId) {
+        this.setFocusedEl(focusedSectionId, { scroll: true });
+      }
+    }
+  },
+
   // Server event handlers
 
   handleCellInserted(cellId) {

lib/livebook_web/live/session_live.ex

@@ -185,7 +185,7 @@ defmodule LivebookWeb.SessionLive do
         class="flex flex-col h-full w-full max-w-xs absolute z-30 top-0 left-[64px] overflow-y-auto shadow-xl md:static md:shadow-none bg-gray-50 border-r border-gray-100 px-6 pt-16 md:py-8"
         data-el-side-panel
       >
-        <div data-el-sections-list>
+        <div class="flex grow" data-el-sections-list>
           <.sections_list data_view={@data_view} />
         </div>
         <div data-el-clients-list>
@@ -600,6 +600,14 @@ defmodule LivebookWeb.SessionLive do
         <.remix_icon icon="add-line" class="text-lg align-center" />
         <span>New section</span>
       </button>
+      <div class="grow"></div>
+      <button
+        class="inline-flex items-center justify-center p-8 py-1 mt-8 space-x-2 text-sm font-medium text-gray-500 border border-gray-400 border-dashed rounded-xl hover:bg-gray-100"
+        data-el-section-toggle-collapse-all-button
+      >
+        <.remix_icon icon="split-cells-vertical" class="text-lg align-center" />
+        <span>Expand/collapse all</span>
+      </button>
     </div>
     """
   end

lib/livebook_web/live/session_live/shortcuts_component.ex

@@ -92,6 +92,8 @@ defmodule LivebookWeb.SessionLive.ShortcutsComponent do
       %{seq: ["N"], desc: "Insert Code cell above"},
       %{seq: ["M"], desc: "Insert Markdown cell above"},
       %{seq: ["z"], desc: "Toggle code zen"},
+      %{seq: ["c"], desc: "Expand/collapse section"},
+      %{seq: ["C"], desc: "Expand/collapse all sections"},
       %{seq: ["d", "d"], desc: "Delete cell", basic: true},
       %{seq: ["e", "e"], desc: "Evaluate cell"},
       %{seq: ["e", "s"], desc: "Evaluate section"},