feat: add support to open quick access panel

Author: devvaannsh

src/nls/root/strings.js

@@ -1251,11 +1251,12 @@ define({
     "REFERENCES_NO_RESULTS": "No References available for current cursor position",
     "REFERENCES_PANEL_TITLE": "References",
     "SEARCH_RESULTS_PANEL_TITLE": "Search Results",
-    "BOTTOM_PANEL_HIDE": "Hide Panel",
+    "BOTTOM_PANEL_MINIMIZE": "Minimize Panel",
     "BOTTOM_PANEL_SHOW": "Show Bottom Panel",
     "BOTTOM_PANEL_HIDE_TOGGLE": "Hide Bottom Panel",
     "BOTTOM_PANEL_DEFAULT_TITLE": "Quick Access",
     "BOTTOM_PANEL_DEFAULT_HEADING": "Open a Panel",
+    "BOTTOM_PANEL_OPEN_PANEL": "Open a Panel",
     "BOTTOM_PANEL_MAXIMIZE": "Maximize Panel",
     "BOTTOM_PANEL_RESTORE": "Restore Panel Size",
 

src/styles/Extn-BottomPanelTabs.less

@@ -194,6 +194,33 @@
     }
 }
 
+.bottom-panel-add-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.9rem;
+    height: 2rem;
+    cursor: pointer;
+    color: #888;
+    font-size: 0.82rem;
+    flex: 0 0 auto;
+    transition: color 0.12s ease, background-color 0.12s ease;
+
+    .dark & {
+        color: #777;
+    }
+
+    &:hover {
+        background-color: #e0e0e0;
+        color: #333;
+
+        .dark & {
+            background-color: #333;
+            color: #eee;
+        }
+    }
+}
+
 .bottom-panel-tab-bar-actions {
     display: flex;
     align-items: center;

src/view/PanelView.js

@@ -467,9 +467,9 @@ define(function (require, exports, module) {
             _toggleMaximize();
         });
 
-        // Double-click on tab bar toggles maximize (exclude action buttons)
+        // Double-click on tab bar toggles maximize (exclude action buttons and add button)
         _$tabBar.on("dblclick", function (e) {
-            if ($(e.target).closest(".bottom-panel-tab-close-btn, .bottom-panel-hide-btn, .bottom-panel-maximize-btn").length) {
+            if ($(e.target).closest(".bottom-panel-tab-close-btn, .bottom-panel-hide-btn, .bottom-panel-maximize-btn, .bottom-panel-add-btn").length) {
                 return;
             }
             _toggleMaximize();
@@ -568,12 +568,12 @@ define(function (require, exports, module) {
         let $btn = _$tabBar.find(".bottom-panel-maximize-btn");
         let $icon = $btn.find("i");
         if (_isMaximized) {
-            $icon.removeClass("fa-expand")
-                .addClass("fa-compress");
+            $icon.removeClass("fa-regular fa-square")
+                .addClass("fa-solid fa-window-restore");
             $btn.attr("title", Strings.BOTTOM_PANEL_RESTORE);
         } else {
-            $icon.removeClass("fa-compress")
-                .addClass("fa-expand");
+            $icon.removeClass("fa-solid fa-window-restore")
+                .addClass("fa-regular fa-square");
             $btn.attr("title", Strings.BOTTOM_PANEL_MAXIMIZE);
         }
     }

src/view/WorkspaceManager.js

@@ -363,16 +363,19 @@ define(function (require, exports, module) {
         $bottomPanelContainer = $('<div id="bottom-panel-container" class="vert-resizable top-resizer"></div>');
         let $bottomPanelTabBar = $('<div id="bottom-panel-tab-bar"></div>');
         let $bottomPanelTabsOverflow = $('<div class="bottom-panel-tabs-overflow"></div>');
+        let $addPanelBtn = $('<span class="bottom-panel-add-btn"><i class="fa-solid fa-plus"></i></span>')
+            .attr('title', Strings.BOTTOM_PANEL_OPEN_PANEL);
         let $tabBarActions = $('<div class="bottom-panel-tab-bar-actions"></div>');
         $tabBarActions.append(
-            $('<span class="bottom-panel-maximize-btn"><i class="fa-solid fa-expand"></i></span>')
-                .attr('title', Strings.BOTTOM_PANEL_MAXIMIZE)
+            $('<span class="bottom-panel-hide-btn"><i class="fa-solid fa-minus"></i></span>')
+                .attr('title', Strings.BOTTOM_PANEL_MINIMIZE)
         );
         $tabBarActions.append(
-            $('<span class="bottom-panel-hide-btn"><i class="fa-solid fa-chevron-down"></i></span>')
-                .attr('title', Strings.BOTTOM_PANEL_HIDE)
+            $('<span class="bottom-panel-maximize-btn"><i class="fa-regular fa-square"></i></span>')
+                .attr('title', Strings.BOTTOM_PANEL_MAXIMIZE)
         );
         $bottomPanelTabBar.append($bottomPanelTabsOverflow);
+        $bottomPanelTabBar.append($addPanelBtn);
         $bottomPanelTabBar.append($tabBarActions);
         $bottomPanelContainer.append($bottomPanelTabBar);
         $bottomPanelContainer.insertBefore("#status-bar");
@@ -402,6 +405,11 @@ define(function (require, exports, module) {
             _statusBarToggleInProgress = false;
         });
 
+        // "+" button opens the quick access / default panel
+        $addPanelBtn.on("click", function () {
+            _showDefaultPanel();
+        });
+
         // Make the container resizable (not individual panels)
         Resizer.makeResizable($bottomPanelContainer[0], Resizer.DIRECTION_VERTICAL, Resizer.POSITION_TOP,
             200, false, undefined, true);