Add terminal button in toolbar + some ui improvements

src/extensions/default/Git/src/Panel.js

@@ -1528,14 +1528,14 @@ define(function (require, exports) {
         }
     });
 
-    // When any bottom panel is shown (container is visible),
-    // re-select the git icon if git panel is still open.
     WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_PANEL_SHOWN, function (event, panelID) {
-        if (Main.$icon && Preferences.get("panelEnabled")) {
-            Main.$icon.toggleClass("on", true);
-            Main.$icon.toggleClass("selected-button", true);
-            CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(true);
+        if (!Main.$icon) {
+            return;
         }
+        const isGitActive = (panelID === "main-git.panel");
+        Main.$icon.toggleClass("on", isGitActive);
+        Main.$icon.toggleClass("selected-button", isGitActive);
+        CommandManager.get(Constants.CMD_GIT_TOGGLE_PANEL).setChecked(isGitActive);
     });
 
     exports.init = init;

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -375,14 +375,49 @@
     color: rgba(100, 180, 255, 0.8);
 }
 
-.lp-mode-btn-group {
+.lp-toolbar-left {
+    width: 20%;
     display: flex;
     align-items: center;
+    gap: 6px;
+    padding-left: 6px;
+    box-sizing: border-box;
     flex-shrink: 0;
-    margin: 0 4px 0 3px;
+}
+
+#reloadLivePreviewButton,
+#designModeToggleLivePreviewButton {
+    width: 28px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: #a0a0a0;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+}
+
+#live-preview-plugin-toolbar #reloadLivePreviewButton:hover,
+#live-preview-plugin-toolbar #designModeToggleLivePreviewButton:hover {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+.lp-mode-btn-group {
+    display: flex;
+    align-items: stretch;
+    height: 24px;
+    margin: 0;
     border: 1px solid transparent;
     border-radius: 3px;
     box-sizing: border-box;
+    flex-shrink: 0;
 }
 
 .lp-mode-btn-group:hover {
@@ -393,8 +428,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 22px;
-    height: 22px;
+    width: 24px;
+    height: 100%;
     cursor: pointer;
     background: transparent;
     box-shadow: none !important;
@@ -420,16 +455,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 14px;
+    height: 100%;
     cursor: pointer;
     background: transparent;
     box-shadow: none !important;
     border: none;
     border-left: 1px solid transparent;
-    border-radius: 0 3px 3px 0;
+    border-radius: 0;
     color: #a0a0a0;
-    padding: 0 4px;
+    padding: 0;
     margin: 0;
-    height: 22px;
     font-size: 10px;
 }
 
@@ -446,24 +482,6 @@
     box-shadow: none !important;
 }
 
-#reloadLivePreviewButton {
-    color: #a0a0a0;
-    margin-left: 3px;
-    margin-top: 0;
-    width: 30px;
-    height: 22px;
-    flex-shrink: 0;
-}
-
-#designModeToggleLivePreviewButton {
-    color: #a0a0a0;
-    margin-left: 3px;
-    margin-top: 0;
-    width: 30px;
-    height: 22px;
-    flex-shrink: 0;
-}
-
 .live-preview-status-overlay {
     display: flex;
     flex-direction: row;

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -1,6 +1,6 @@
 <div id="panel-live-preview">
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
-        <div style="width: 20%;display: flex;">
+        <div class="lp-toolbar-left">
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-arrow-rotate-right"></i>
 	        </button>

src/extensionsIntegrated/Terminal/main.js

@@ -879,6 +879,34 @@
         CommandManager.get(CMD_TERMINAL_CLEAR).setEnabled(!!active);
     });
 
+    function _createToolbarButton() {
+        const $btn = $("<a>")
+            .attr({
+                id: "terminal-toolbar-button",
+                href: "#",
+                title: Strings.CMD_VIEW_TERMINAL
+            })
+            .insertBefore("#app-drawer-button");
+
+        $btn.on("click", function () {
+            if (panel && panel.isVisible()) {
+                panel.hide();
+            } else {
+                CommandManager.execute(CMD_VIEW_TERMINAL);
+            }
+        });
+
+        const PanelView = require("view/PanelView");
+        PanelView.on(PanelView.EVENT_PANEL_SHOWN, function (_event, panelId) {
+            $btn.toggleClass("selected-button", panelId === PANEL_ID);
+        });
+        PanelView.on(PanelView.EVENT_PANEL_HIDDEN, function (_event, panelId) {
+            if (panelId === PANEL_ID || panelId === WorkspaceManager.DEFAULT_PANEL_ID) {
+                $btn.removeClass("selected-button");
+            }
+        });
+    }
+
     // Initialize on app ready
     AppInit.appReady(function () {
         if (Phoenix.isSpecRunnerWindow) {
@@ -887,6 +915,7 @@
 
         _initNodeConnector();
         _createPanel();
+        _createToolbarButton();
 
         // Gate user-initiated panel close (X button): confirm if needed, then
         // dispose all terminals. Programmatic hide() just collapses the panel

src/styles/Extn-SidebarTabs.less

@@ -69,10 +69,6 @@
     &.active {
         color: @project-panel-text-1;
         background-color: rgba(255, 255, 255, 0.09);
-        // Heavier weight on the active tab so the selected state
-        // doesn't rely on color alone — strengthens the affordance
-        // without changing the silhouette.
-        font-weight: 600;
         box-shadow:
             0 1px 0 rgba(255, 255, 255, 0.05) inset,
             0 1px 2px rgba(0, 0, 0, 0.2);

src/styles/brackets.less

@@ -1200,6 +1200,12 @@ a, img {
     background-size: 16px;
 }
 
+#terminal-toolbar-button {
+    background-image: url("images/toolbar-terminal.svg");
+    background-position: center;
+    background-size: 16px;
+}
+
 /* Project panel */
 
 #working-set-list-container {

src/utils/Resizer.js

@@ -570,7 +570,14 @@ define(function (require, exports, module) {
                     if (_isPercentage(maxSize)) {
                         maxSize = _percentageToPixels(maxSize, _sideBarMaxSize());
                     }
-                    newSize = Math.min(newSize, maxSize);
+                    // Ignore a non-positive computed cap: it can only come from a
+                    // pathological layout (e.g. design mode + hidden sidebar makes
+                    // _sideBarMaxSize negative, so 1000% becomes a negative px cap
+                    // and pins every drag below zero). CSS max-width still enforces
+                    // the real visible limit in that mode.
+                    if (maxSize > 0) {
+                        newSize = Math.min(newSize, maxSize);
+                    }
                 }
 
                 e.preventDefault();