feat: show only icon in the bottom panel quick access

Author: devvaannsh

src/nls/root/strings.js

@@ -1560,7 +1560,7 @@ define({
     "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_TITLE": "Quick Access - Tools",
     "BOTTOM_PANEL_DEFAULT_HEADING": "Open a Panel",
     "BOTTOM_PANEL_OPEN_PANEL": "Open a Panel",
     "BOTTOM_PANEL_MAXIMIZE": "Maximize Panel",

src/styles/Extn-BottomPanelTabs.less

@@ -166,11 +166,12 @@
     display: none;
 }
 
-/* Default panel (Tools) tab: always show the icon alongside the title,
-   in both expanded and collapsed modes, active or inactive. */
+/* Pinned Quick Access tab: icon-only, always visible */
 .bottom-panel-tab.bottom-panel-tab-default .bottom-panel-tab-icon {
     display: inline-flex;
-    margin-right: 0.4rem;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin: 0;
 }
 
 .default-panel-btn .panel-titlebar-icon {
@@ -246,14 +247,9 @@
     .bottom-panel-tab:not(.active) .bottom-panel-tab-close-btn {
         display: none;
     }
-    /* Pinned Quick Access tab: keep natural width and show its title
-       even in collapsed mode (other tabs collapse to icon-only). */
+    /* Pinned Quick Access tab: icon-only, keeps its natural width */
     .bottom-panel-tab.bottom-panel-tab-default {
         min-width: auto;
-        justify-content: flex-start;
-    }
-    .bottom-panel-tab.bottom-panel-tab-default .bottom-panel-tab-title {
-        display: inline;
     }
 }
 
@@ -303,13 +299,17 @@
     }
 }
 
-/* Pinned Quick Access tab: subtle separator to distinguish it from regular tabs */
+/* Pinned Quick Access tab: icon-only with separator */
 .bottom-panel-tab.bottom-panel-tab-default {
-    padding-right: 0.8rem;
+    padding: 0 0.6rem;
+    min-width: auto;
+    justify-content: center;
     border-right: 1px solid rgba(0, 0, 0, 0.15);
+    background-color: transparent;
 
     .dark & {
         border-right: 1px solid rgba(255, 255, 255, 0.1);
+        background-color: transparent;
     }
 }
 

src/view/PanelView.js

@@ -159,8 +159,11 @@ define(function (require, exports, module) {
         $icon[0].style.maskImage = maskUrl;
         $icon[0].style.webkitMaskImage = maskUrl;
         $tab.append($icon);
-        $tab.append($('<span class="bottom-panel-tab-title"></span>').text(title));
-        if (!isDefault) {
+        if (isDefault) {
+            // Icon-only tab with tooltip
+            $tab.attr('title', title);
+        } else {
+            $tab.append($('<span class="bottom-panel-tab-title"></span>').text(title));
             $tab.append($('<span class="bottom-panel-tab-close-btn">&times;</span>').attr('title', Strings.CLOSE));
         }
         return $tab;
@@ -391,9 +394,13 @@ define(function (require, exports, module) {
             _$overflowBtn.toggle(stillOverflowing);
         }
 
-        // Show tooltip on hover only in collapsed mode (title text is hidden)
+        // Show tooltip on hover only in collapsed mode (title text is hidden).
+        // The pinned Quick Access tab always keeps its tooltip (icon-only).
         _$tabBar.find(".bottom-panel-tab").each(function () {
             const $tab = $(this);
+            if ($tab.data("panel-id") === _defaultPanelId) {
+                return;
+            }
             if (isOverflowing) {
                 $tab.attr("title", $tab.find(".bottom-panel-tab-title").text());
             } else {