feat: collapse all button in the sidebar which closes all the open directories

Author: devvaannsh

src/extensionsIntegrated/CollapseFolders/main.js

@@ -0,0 +1,79 @@
+define(function (require, exports, module) {
+    const AppInit = require("utils/AppInit");
+    const ProjectManager = require("project/ProjectManager");
+
+    /**
+     * This is the main function that handles the closing of all the directories
+     */
+    function handleCollapseBtnClick() {
+        // this will give us an array of array's
+        // the root level directories will be at index 0, its next level will be at index 1 and so on
+        const openNodes = ProjectManager._actionCreator.model.getOpenNodes();
+        if (!openNodes || openNodes.length === 0) {
+            return;
+        }
+
+        // traversing from the back because the deepest nested directories should be closed first
+        // Note: this is an array of all the directories at the deepest level
+        for (let i = openNodes.length - 1; i >= 0; i--) {
+            // close all the directories
+            openNodes[i].forEach(function (folderPath) {
+                try {
+                    // to close each dir
+                    ProjectManager._actionCreator.setDirectoryOpen(folderPath, false);
+                } catch (error) {
+                    console.error("Failed to close folder:", folderPath, error);
+                }
+            });
+        }
+    }
+
+    /**
+     * This function is responsible to create the 'Collapse All' button
+     * and append it to the sidebar area on the project-files-header
+     */
+    function createCollapseButton() {
+        const $projectFilesHeader = $("#project-files-header");
+        // make sure that we were able to get the project-files-header DOM element
+        if ($projectFilesHeader.length === 0) {
+            return;
+        }
+
+        // create the collapse btn
+        const $collapseBtn = $(`
+            <div id="collapse-folders" class="btn-alt-quiet" title="Collapse All">
+                <i class="fa-solid fa-chevron-down collapse-icon" aria-hidden="true"></i>
+                <i class="fa-solid fa-chevron-up collapse-icon" aria-hidden="true"></i>
+            </div>
+        `);
+
+        $collapseBtn.on("click", handleCollapseBtnClick);
+
+        $projectFilesHeader.append($collapseBtn); // append the btn to the project-files-header
+
+        _setupHoverBehavior($collapseBtn); // hover functionality to show/hide the button
+    }
+
+    /**
+     * This function is responsible for the hover behavior to show/hide the collapse button
+     * we only show the button when the cursor is over the sidebar area
+     */
+    function _setupHoverBehavior($collapseBtn) {
+        const $sidebar = $("#sidebar");
+        if ($sidebar.length === 0) {
+            return;
+        }
+
+        $sidebar.on("mouseenter", function () {
+            $collapseBtn.addClass("show");
+        });
+
+        $sidebar.on("mouseleave", function () {
+            $collapseBtn.removeClass("show");
+        });
+    }
+
+    AppInit.appReady(function () {
+        createCollapseButton();
+    });
+});

src/extensionsIntegrated/loader.js

@@ -44,4 +44,5 @@ define(function (require, exports, module) {
     require("./indentGuides/main");
     require("./CSSColorPreview/main");
     require("./TabBar/main");
+    require("./CollapseFolders/main");
 });

src/styles/Extn-CollapseFolders.less

@@ -0,0 +1,24 @@
+#collapse-folders {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0.2em 0.4em;
+    position: absolute !important;
+    right: 0.5em;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out;
+
+    .collapse-icon {
+        font-size: 0.5em;
+        line-height: 1;
+    }
+
+    &.show {
+        opacity: 1;
+        visibility: visible;
+    }
+}

src/styles/brackets.less

@@ -44,6 +44,7 @@
 @import "Extn-TabBar.less";
 @import "Extn-DisplayShortcuts.less";
 @import "Extn-CSSColorPreview.less";
+@import "Extn-CollapseFolders.less";
 @import "UserProfile.less";
 
 /* Overall layout */