From a06306cab105fdac8461d5c77fcaa492dc5490f3 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Sat, 4 Apr 2026 22:46:26 +0530
Subject: [PATCH] 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.
---
 src/styles/Extn-BottomPanelTabs.less |  5 ++++-
 src/view/DefaultPanelView.js         | 13 ++++---------
 src/view/PanelView.js                |  9 ++++++---
 src/view/WorkspaceManager.js         | 10 +++++-----
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/styles/Extn-BottomPanelTabs.less b/src/styles/Extn-BottomPanelTabs.less
index 4e5c9e3d61..b65d181aee 100644
--- a/src/styles/Extn-BottomPanelTabs.less
+++ b/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 & {
diff --git a/src/view/DefaultPanelView.js b/src/view/DefaultPanelView.js
index 6f5291a45d..5dff454dbf 100644
--- a/src/view/DefaultPanelView.js
+++ b/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);
             }
         }
 
diff --git a/src/view/PanelView.js b/src/view/PanelView.js
index 83c3f4e9e5..5f07df9758 100644
--- a/src/view/PanelView.js
+++ b/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
diff --git a/src/view/WorkspaceManager.js b/src/view/WorkspaceManager.js
index faaad7b894..e7babe09ae 100644
--- a/src/view/WorkspaceManager.js
+++ b/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);