fix: move tools button back inside scrollable tab area

Tools button is better placed inside the scrollable tabs area near
the panels it launches. Restores original show/hide behavior when
active. Overflow dropdown handles it when scrolled out of view.

Author: abose

src/styles/Extn-BottomPanelTabs.less

@@ -286,11 +286,6 @@ img.panel-titlebar-icon {
     align-items: center;
     justify-content: center;
     padding: 0 8px;
-    border-left: 1px solid rgba(0, 0, 0, 0.08);
-
-    .dark & {
-        border-left: 1px solid rgba(255, 255, 255, 0.08);
-    }
     height: 2rem;
     line-height: 2rem;
     overflow: hidden;
@@ -315,30 +310,6 @@ img.panel-titlebar-icon {
         }
     }
 
-    &.active {
-        color: #333;
-        background-color: #fff;
-        position: relative;
-
-        .dark & {
-            color: #dedede;
-            background-color: #1D1F21;
-        }
-
-        &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 0.1rem;
-            background-color: #0078D7;
-
-            .dark & {
-                background-color: #75BEFF;
-            }
-        }
-    }
 }
 
 .bottom-panel-tab-bar-actions {

src/view/PanelView.js

@@ -172,20 +172,24 @@ define(function (require, exports, module) {
         if (!_$tabsOverflow) {
             return;
         }
+        // Detach the add button before emptying to preserve its event handlers
+        if (_$addBtn) {
+            _$addBtn.detach();
+        }
         _$tabsOverflow.empty();
 
         _openIds.forEach(function (panelId) {
-            // Default panel uses the external Tools button, not a tab
-            if (panelId === _defaultPanelId) {
-                return;
-            }
             let panel = _panelMap[panelId];
             if (!panel) {
                 return;
             }
             _$tabsOverflow.append(_buildTab(panel, panelId === _activeId));
         });
 
+        // Re-append the Tools button at the end
+        if (_$addBtn) {
+            _$tabsOverflow.append(_$addBtn);
+        }
         _updateAddButtonVisibility();
         _checkTabOverflow();
     }
@@ -218,17 +222,17 @@ define(function (require, exports, module) {
         if (!_$tabsOverflow) {
             return;
         }
-        // Default panel uses the external Tools button, not a tab
-        if (panelId === _defaultPanelId) {
-            _updateAddButtonVisibility();
-            return;
-        }
         let panel = _panelMap[panelId];
         if (!panel) {
             return;
         }
         let $tab = _buildTab(panel, panelId === _activeId);
-        _$tabsOverflow.append($tab);
+        // Insert before the Tools button so it stays at the end
+        if (_$addBtn && _$addBtn.parent().length) {
+            _$addBtn.before($tab);
+        } else {
+            _$tabsOverflow.append($tab);
+        }
         _updateAddButtonVisibility();
         _checkTabOverflow();
     }
@@ -243,10 +247,6 @@ define(function (require, exports, module) {
         if (!_$tabsOverflow) {
             return;
         }
-        if (panelId === _defaultPanelId) {
-            _updateAddButtonVisibility();
-            return;
-        }
         _$tabsOverflow.find('.bottom-panel-tab[data-panel-id="' + panelId + '"]').remove();
         _updateAddButtonVisibility();
         _checkTabOverflow();
@@ -495,8 +495,11 @@ define(function (require, exports, module) {
         if (!_$addBtn) {
             return;
         }
-        // Highlight the Tools button as active when the default panel is shown
-        _$addBtn.toggleClass("active", _defaultPanelId && _activeId === _defaultPanelId);
+        if (_defaultPanelId && _activeId === _defaultPanelId) {
+            _$addBtn.hide();
+        } else {
+            _$addBtn.show();
+        }
     }
 
     /**
@@ -773,13 +776,12 @@ define(function (require, exports, module) {
         _recomputeLayout = recomputeLayoutFn;
         _defaultPanelId = defaultPanelId;
 
-        // Create the "Tools" button outside the scrollable tabs area
-        // so it's always visible even when tabs overflow.
+        // Create the "Tools" button inside the scrollable tabs area.
         _$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>');
-        _$tabBar.find(".bottom-panel-tab-bar-actions").before(_$addBtn);
+        _$tabsOverflow.append(_$addBtn);
 
         // Tab bar click handlers
         _$tabBar.on("click", ".bottom-panel-tab-close-btn", function (e) {