feat(terminal): add View > Terminal menu entry and improve panel toggling

- Add VIEW_TERMINAL command to Commands.js and View menu
- Remove toolbar-terminal sidebar icon and related CSS
- Terminal command shows/focuses panel, cycles through terminals when
  panel is visible and focused with 2+ terminals open
- Extract _togglePanels() in WorkspaceManager for reuse by both
  Escape key and status bar chevron
- Escape toggles bottom panel, Shift+Escape cycles open panel tabs
- Add PanelView.showNextPanel() for cycling open bottom panels
- Fix DefaultPanelView terminal card to use Commands.VIEW_TERMINAL

Author: abose

src/command/Commands.js

@@ -297,6 +297,9 @@ define(function (require, exports, module) {
     /** Toggles problems panel visibility */
     exports.VIEW_TOGGLE_PROBLEMS        = "view.toggleProblems";        // CodeInspection.js            toggleProblems()
 
+    /** Opens the terminal panel */
+    exports.VIEW_TERMINAL               = "view.terminal";              // Terminal/main.js              _showTerminal()
+
     /** Toggles line numbers visibility */
     exports.TOGGLE_LINE_NUMBERS         = "view.toggleLineNumbers";     // EditorOptionHandlers.js      _getToggler()
 

src/command/DefaultMenus.js

@@ -231,6 +231,7 @@ define(function (require, exports, module) {
         menu.addMenuItem(Commands.TOGGLE_RULERS);
         menu.addMenuDivider();
         menu.addMenuItem(Commands.VIEW_TOGGLE_PROBLEMS);
+        menu.addMenuItem(Commands.VIEW_TERMINAL);
         menu.addMenuItem(Commands.VIEW_TOGGLE_INSPECTION);
 
         /*

src/extensionsIntegrated/Terminal/main.js

@@ -30,7 +30,6 @@ define(function (require, exports, module) {
 
     const AppInit = require("utils/AppInit");
     const CommandManager = require("command/CommandManager");
-    const Menus = require("command/Menus");
     const WorkspaceManager = require("view/WorkspaceManager");
     const ProjectManager = require("project/ProjectManager");
     const ExtensionUtils = require("utils/ExtensionUtils");
@@ -40,6 +39,7 @@ define(function (require, exports, module) {
     const Strings = require("strings");
     const StringUtils = require("utils/StringUtils");
 
+    const Commands = require("command/Commands");
     const TerminalInstance = require("./TerminalInstance");
     const ShellProfiles = require("./ShellProfiles");
     const panelHTML = require("text!./terminal-panel.html");
@@ -48,7 +48,7 @@ define(function (require, exports, module) {
     ExtensionUtils.loadStyleSheet(module, "../../thirdparty/xterm/xterm.css");
 
     // Constants
-    const CMD_TOGGLE_TERMINAL = "terminal.toggle";
+    const CMD_VIEW_TERMINAL = Commands.VIEW_TERMINAL;
     const CMD_NEW_TERMINAL = "terminal.new";
     const PANEL_ID = "terminal-panel";
     const PANEL_MIN_SIZE = 100;
@@ -254,7 +254,7 @@ define(function (require, exports, module) {
         // Show panel if hidden
         if (!panel.isVisible()) {
             panel.show();
-            _updateToolbarIcon(true);
+
         }
 
         // Spawn PTY process
@@ -329,7 +329,7 @@ define(function (require, exports, module) {
         // If no terminals left, hide the panel
         if (terminalInstances.length === 0) {
             panel.hide();
-            _updateToolbarIcon(false);
+
         }
 
         _updateFlyout();
@@ -467,23 +467,28 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Toggle the terminal panel visibility
+     * Show the terminal panel. Creates a new terminal if none exist.
+     * If the panel is visible and the active terminal is focused and there
+     * are 2+ terminals, cycles to the next one. Otherwise just shows and
+     * focuses the active terminal.
      */
-    function _togglePanel() {
-        if (panel.isVisible()) {
-            panel.hide();
-            _updateToolbarIcon(false);
+    function _showTerminal() {
+        if (terminalInstances.length === 0) {
+            _createNewTerminal();
+            return;
+        }
+        const active = _getActiveTerminal();
+        const terminalHasFocus = active && active.$container &&
+            active.$container[0].contains(document.activeElement);
+        if (terminalInstances.length >= 2 && panel.isVisible() && terminalHasFocus) {
+            const activeIdx = terminalInstances.findIndex(t => t.id === activeTerminalId);
+            const nextIdx = (activeIdx + 1) % terminalInstances.length;
+            _activateTerminal(terminalInstances[nextIdx].id);
         } else {
-            if (terminalInstances.length === 0) {
-                _createNewTerminal();
-            } else {
-                panel.show();
-                _updateToolbarIcon(true);
-                const active = _getActiveTerminal();
-                if (active) {
-                    active.handleResize();
-                    active.focus();
-                }
+            panel.show();
+            if (active) {
+                active.handleResize();
+                active.focus();
             }
         }
     }
@@ -507,18 +512,6 @@ define(function (require, exports, module) {
         }
     }
 
-    /**
-     * Update toolbar icon active state
-     */
-    function _updateToolbarIcon(isActive) {
-        const $icon = $("#toolbar-terminal");
-        if (isActive) {
-            $icon.addClass("selected-button");
-        } else {
-            $icon.removeClass("selected-button");
-        }
-    }
-
     /**
      * Escape HTML special characters
      */
@@ -541,13 +534,7 @@ define(function (require, exports, module) {
 
     // Register commands
     CommandManager.register("New Terminal", CMD_NEW_TERMINAL, _createNewTerminal);
-    CommandManager.register("Toggle Terminal", CMD_TOGGLE_TERMINAL, _togglePanel);
-
-    // Add menu item
-    const fileMenu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
-    if (fileMenu) {
-        fileMenu.addMenuItem(CMD_NEW_TERMINAL, null, Menus.AFTER, "file.close");
-    }
+    CommandManager.register(Strings.CMD_VIEW_TERMINAL, CMD_VIEW_TERMINAL, _showTerminal);
 
     // Initialize on app ready
     AppInit.appReady(function () {
@@ -558,12 +545,6 @@ define(function (require, exports, module) {
         _initNodeConnector();
         _createPanel();
 
-        // Set up toolbar icon click handler
-        const $toolbarIcon = $("#toolbar-terminal");
-        $toolbarIcon.html('<i class="fa-solid fa-terminal"></i>');
-        $toolbarIcon.removeClass("forced-hidden");
-        $toolbarIcon.on("click", _togglePanel);
-
         // Detect shells
         ShellProfiles.init(nodeConnector).then(function () {
             const shells = ShellProfiles.getShells();
@@ -581,6 +562,6 @@ define(function (require, exports, module) {
     });
 
     // Export for testing
-    exports.CMD_TOGGLE_TERMINAL = CMD_TOGGLE_TERMINAL;
+    exports.CMD_VIEW_TERMINAL = CMD_VIEW_TERMINAL;
     exports.CMD_NEW_TERMINAL = CMD_NEW_TERMINAL;
 });

src/index.html

@@ -995,7 +995,6 @@
     <div id="plugin-icons-bar">
         <div class="buttons">
             <a id="toolbar-go-live" href="#"></a> <!-- tooltip for this is set in JS -->
-            <a id="toolbar-terminal" href="#" class="forced-hidden" title="Terminal"></a>
             <a id="toolbar-extension-manager" href="#"></a>
             <a id="update-notification" href="#" class="forced-hidden"></a>
         </div>

src/nls/root/strings.js

@@ -650,6 +650,7 @@ define({
     "CMD_TOGGLE_WORD_WRAP": "Word Wrap",
     "CMD_VIEW_TOGGLE_INSPECTION": "Lint Files on Save",
     "CMD_VIEW_TOGGLE_PROBLEMS": "Problems",
+    "CMD_VIEW_TERMINAL": "Terminal",
     "CMD_WORKINGSET_SORT_BY_ADDED": "Sort by Added",
     "CMD_WORKINGSET_SORT_BY_NAME": "Sort by Name",
     "CMD_WORKINGSET_SORT_BY_TYPE": "Sort by Type",

src/styles/Extn-Terminal.less

@@ -390,23 +390,6 @@
     background-color: var(--terminal-background) !important;
 }
 
-/* ─── Toolbar icon in right sidebar ─── */
-#toolbar-terminal {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-}
-
-#toolbar-terminal > i {
-    font-size: 14px;
-    line-height: 24px;
-    color: #bbb;
-}
-
-#toolbar-terminal:hover > i {
-    color: #fff;
-}
-
 /* Empty state */
 .terminal-empty-state {
     display: flex;

src/view/DefaultPanelView.js

@@ -71,7 +71,7 @@ define(function (require, exports, module) {
             id: "terminal",
             icon: "fa-solid fa-terminal",
             label: "Terminal",
-            commandID: "terminal.toggle",
+            commandID: Commands.VIEW_TERMINAL,
             nativeOnly: true
         }
     ];

src/view/PanelView.js

@@ -765,12 +765,31 @@ define(function (require, exports, module) {
         return closedIds;
     }
 
+    /**
+     * Cycle to the next open bottom panel tab. If the container is hidden
+     * or no panels are open, does nothing and returns false.
+     * @return {boolean} true if a panel switch occurred
+     */
+    function showNextPanel() {
+        if (_openIds.length <= 0) {
+            return false;
+        }
+        const currentIdx = _activeId ? _openIds.indexOf(_activeId) : -1;
+        const nextIdx = (currentIdx + 1) % _openIds.length;
+        const nextPanel = _panelMap[_openIds[nextIdx]];
+        if (nextPanel) {
+            nextPanel.show();
+        }
+        return true;
+    }
+
     EventDispatcher.makeEventDispatcher(exports);
 
     // Public API
     exports.Panel = Panel;
     exports.init = init;
     exports.getOpenBottomPanelIDs = getOpenBottomPanelIDs;
+    exports.showNextPanel = showNextPanel;
     exports.hideAllOpenPanels = hideAllOpenPanels;
     exports.exitMaximizeOnResize = exitMaximizeOnResize;
     exports.enterMaximizeOnResize = enterMaximizeOnResize;

src/view/WorkspaceManager.js

@@ -389,15 +389,7 @@ define(function (require, exports, module) {
 
         $statusBarPanelToggle.on("click", function () {
             _statusBarToggleInProgress = true;
-            if ($bottomPanelContainer.is(":visible")) {
-                Resizer.hide($bottomPanelContainer[0]);
-                triggerUpdateLayout();
-            } else if (PanelView.getOpenBottomPanelIDs().length > 0) {
-                Resizer.show($bottomPanelContainer[0]);
-                triggerUpdateLayout();
-            } else {
-                _showDefaultPanel();
-            }
+            _togglePanels();
             _statusBarToggleInProgress = false;
         });
 
@@ -631,15 +623,28 @@ define(function (require, exports, module) {
         }
     }
 
-    function _handleEscapeKey() {
-        // Collapse the entire bottom panel container, keeping all tabs intact.
-        // Maximize state is preserved so the panel re-opens maximized.
-        if ($bottomPanelContainer && $bottomPanelContainer.is(":visible")) {
+    /**
+     * Toggle the bottom panel container: hide if visible, show if there are
+     * open panels, or show the default panel when nothing is open.
+     * @return {boolean} true if the toggle was handled
+     */
+    function _togglePanels() {
+        if (!$bottomPanelContainer) {
+            return false;
+        }
+        if ($bottomPanelContainer.is(":visible")) {
             Resizer.hide($bottomPanelContainer[0]);
-            triggerUpdateLayout();
-            return true;
+        } else if (PanelView.getOpenBottomPanelIDs().length > 0) {
+            Resizer.show($bottomPanelContainer[0]);
+        } else {
+            _showDefaultPanel();
         }
-        return false;
+        triggerUpdateLayout();
+        return true;
+    }
+
+    function _handleEscapeKey() {
+        return _togglePanels();
     }
 
     // pressing escape when focused on editor will hide the bottom panel container
@@ -666,7 +671,10 @@ define(function (require, exports, module) {
             return;
         }
 
-        if (event.keyCode === KeyEvent.DOM_VK_ESCAPE) {
+        if (event.shiftKey) {
+            // Shift+Escape: cycle through open bottom panels
+            PanelView.showNextPanel();
+        } else {
             _handleEscapeKey();
         }