feat: replace bottom panel + button with Tools label and icon

Replace the confusing + button with app-drawer icon and "Tools" text
matching the Tools panel tab. Use inline HTML with relative icon path
instead of programmatic icon injection. Also change status bar panel
toggle from chevron to angles-up/angles-down icons.

Author: abose

src/styles/Extn-BottomPanelTabs.less

@@ -200,12 +200,15 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1.9rem;
+    padding: 0 8px;
     height: 2rem;
+    line-height: 2rem;
+    overflow: hidden;
     cursor: pointer;
     color: #888;
     font-size: 0.82rem;
     flex: 0 0 auto;
+    white-space: nowrap;
     transition: color 0.12s ease, background-color 0.12s ease;
 
     .dark & {

src/view/DefaultPanelView.js

@@ -31,8 +31,7 @@ define(function (require, exports, module) {
         CommandManager = require("command/CommandManager"),
         Strings = require("strings"),
         WorkspaceManager = require("view/WorkspaceManager"),
-        PanelView = require("view/PanelView"),
-        ExtensionUtils = require("utils/ExtensionUtils");
+        PanelView = require("view/PanelView");
 
     /**
      * Descriptors for each launcher button.
@@ -178,7 +177,8 @@ define(function (require, exports, module) {
             }
         });
 
-        const iconURL = ExtensionUtils.getModulePath(module, "../styles/images/app-drawer.svg");
+        const iconHTML = '<img class="app-drawer-tab-icon" src="styles/images/app-drawer.svg"'
+            + ' style="width:12px;height:12px;vertical-align:middle;margin-right:4px">';
 
         /**
          * Inject the app-drawer icon into the Quick Access tab title.
@@ -188,12 +188,7 @@ define(function (require, exports, module) {
             const $tabTitle = $('#bottom-panel-tab-bar .bottom-panel-tab[data-panel-id="'
                 + WorkspaceManager.DEFAULT_PANEL_ID + '"] .bottom-panel-tab-title');
             if ($tabTitle.length && !$tabTitle.find(".app-drawer-tab-icon").length) {
-                $tabTitle.prepend($('<img class="app-drawer-tab-icon">').attr("src", iconURL).css({
-                    "width": "12px",
-                    "height": "12px",
-                    "vertical-align": "middle",
-                    "margin-right": "4px"
-                }));
+                $tabTitle.prepend(iconHTML);
             }
         }
 

src/view/PanelView.js

@@ -512,9 +512,12 @@ define(function (require, exports, module) {
         _recomputeLayout = recomputeLayoutFn;
         _defaultPanelId = defaultPanelId;
 
-        // Create the "+" button inside the tabs overflow area (after all tabs)
-        _$addBtn = $('<span class="bottom-panel-add-btn"><i class="fa-solid fa-plus"></i></span>')
-            .attr('title', Strings.BOTTOM_PANEL_OPEN_PANEL);
+        // Create the "Tools" button inside the tabs overflow area (after all tabs)
+        // This opens the default/quick-access panel when clicked.
+        _$addBtn = $('<span class="bottom-panel-add-btn" title="' + Strings.BOTTOM_PANEL_DEFAULT_TITLE + '">'
+            + '<img class="app-drawer-tab-icon" src="styles/images/app-drawer.svg"'
+            + ' style="width:12px;height:12px;vertical-align:middle;margin-right:4px">'
+            + Strings.BOTTOM_PANEL_DEFAULT_TITLE + '</span>');
         _$tabsOverflow.append(_$addBtn);
 
         // Tab bar click handlers

src/view/WorkspaceManager.js

@@ -389,7 +389,7 @@ define(function (require, exports, module) {
             $editorHolder, recomputeLayout, DEFAULT_PANEL_ID);
 
         // Create status bar chevron toggle for bottom panel
-        $statusBarPanelToggle = $('<div id="status-panel-toggle" class="indicator global-indicator"><i class="fa-solid fa-chevron-up"></i></div>')
+        $statusBarPanelToggle = $('<div id="status-panel-toggle" class="indicator global-indicator"><i class="fa-solid fa-angles-up"></i></div>')
             .attr('title', Strings.BOTTOM_PANEL_SHOW);
         $("#status-indicators").prepend($statusBarPanelToggle);
 
@@ -419,8 +419,8 @@ define(function (require, exports, module) {
 
         $bottomPanelContainer.on("panelCollapsed", function () {
             $statusBarPanelToggle.find("i")
-                .removeClass("fa-chevron-down")
-                .addClass("fa-chevron-up");
+                .removeClass("fa-angles-down")
+                .addClass("fa-angles-up");
             $statusBarPanelToggle.attr("title", Strings.BOTTOM_PANEL_SHOW);
             if (!_statusBarToggleInProgress) {
                 AnimationUtils.animateUsingClass($statusBarPanelToggle[0], "flash", 800);
@@ -436,8 +436,8 @@ define(function (require, exports, module) {
 
         $bottomPanelContainer.on("panelExpanded", function () {
             $statusBarPanelToggle.find("i")
-                .removeClass("fa-chevron-up")
-                .addClass("fa-chevron-down");
+                .removeClass("fa-angles-up")
+                .addClass("fa-angles-down");
             $statusBarPanelToggle.attr("title", Strings.BOTTOM_PANEL_HIDE_TOGGLE);
             if (!_statusBarToggleInProgress) {
                 AnimationUtils.animateUsingClass($statusBarPanelToggle[0], "flash", 800);