feat: hide the bottom panel and don’t destroy any active ones

Author: devvaannsh

src/styles/Extn-BottomPanelTabs.less

@@ -46,10 +46,6 @@
 
         .toolbar {
             box-shadow: none;
-
-            .close {
-                display: none;
-            }
         }
     }
 }
@@ -200,29 +196,29 @@
     flex: 0 0 auto;
 }
 
-.bottom-panel-close-all-btn {
+.bottom-panel-hide-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 1.6rem;
     height: 1.6rem;
+    margin-right: 0.3rem;
     border-radius: 3px;
     cursor: pointer;
-    color: #777;
-    font-size: 1.3rem;
+    color: #333;
+    font-size: 0.8rem;
+    -webkit-text-stroke: 0.4px;
     line-height: 1;
-    transition: color 0.12s ease, background-color 0.12s ease;
+    transition: background-color 0.12s ease;
 
     .dark & {
-        color: #777;
+        color: #fff;
     }
 
     &:hover {
-        color: #333;
         background-color: rgba(0, 0, 0, 0.1);
 
         .dark & {
-            color: #fff;
             background-color: rgba(255, 255, 255, 0.12);
         }
     }

src/view/WorkspaceManager.js

@@ -534,7 +534,7 @@ define(function (require, exports, module) {
         $bottomPanelTabsOverflow = $('<div class="bottom-panel-tabs-overflow"></div>');
         let $tabBarActions = $('<div class="bottom-panel-tab-bar-actions"></div>');
         $tabBarActions.append(
-            '<span class="bottom-panel-close-all-btn" title="Close Panel">&times;</span>'
+            '<span class="bottom-panel-hide-btn" title="Hide Panel"><i class="fa-solid fa-chevron-down"></i></span>'
         );
         $bottomPanelTabBar.append($bottomPanelTabsOverflow);
         $bottomPanelTabBar.append($tabBarActions);
@@ -568,8 +568,8 @@ define(function (require, exports, module) {
             }
         });
 
-        // Close-panel button collapses the container but keeps tabs intact
-        $bottomPanelTabBar.on("click", ".bottom-panel-close-all-btn", function (e) {
+        // Hide-panel button collapses the container but keeps tabs intact
+        $bottomPanelTabBar.on("click", ".bottom-panel-hide-btn", function (e) {
             e.stopPropagation();
             if ($bottomPanelContainer.is(":visible")) {
                 Resizer.hide($bottomPanelContainer[0]);