feat: add sidebar collapse/expand toggle button in titlebar

Adds a « / » button before the File menu that toggles sidebar
visibility. Shows context-aware tooltip (Hide/Show Sidebar) and
updates icon direction on panelCollapsed/panelExpanded events.

Author: abose

src/command/Menus.js

@@ -1778,6 +1778,35 @@ define(function (require, exports, module) {
         const $hamburgerToggle = $hamburger.find(".hamburger-toggle");
         let _activeSubmenuId = null;
 
+        // Sidebar collapse/expand toggle button before the File menu
+        const $sidebarToggle = $(`<li class="sidebar-toggle-btn" id="sidebar-toggle-btn">
+            <a href="#">
+                <i class="fa-solid fa-angles-left"></i>
+            </a>
+        </li>`);
+        $menubar.prepend($sidebarToggle);
+        const $sidebarIcon = $sidebarToggle.find("a");
+
+        function _updateSidebarToggleIcon() {
+            const isVisible = $("#sidebar").is(":visible");
+            if (isVisible) {
+                $sidebarIcon.html('<i class="fa-solid fa-angles-left"></i>');
+                $sidebarIcon.attr("title", Strings.CMD_HIDE_SIDEBAR);
+            } else {
+                $sidebarIcon.html('<i class="fa-solid fa-angles-right"></i>');
+                $sidebarIcon.attr("title", Strings.CMD_SHOW_SIDEBAR);
+            }
+        }
+
+        $sidebarIcon.on("click", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            CommandManager.execute(Commands.VIEW_HIDE_SIDEBAR);
+        });
+
+        $("#sidebar").on("panelCollapsed panelExpanded", _updateSidebarToggleIcon);
+        _updateSidebarToggleIcon();
+
         function _resetMenuItemStyles($menuItem) {
             const menu = menuMap[$menuItem.attr("id")];
             if (menu) {

src/styles/brackets_patterns_override.less

@@ -211,6 +211,28 @@ a:focus {
             animation: none;
         }
     }
+    .nav .sidebar-toggle-btn {
+        float: left;
+        a {
+            display: inline-block;
+            padding: @menubar-top-padding 6px @menubar-bottom-padding;
+            border: 1px solid transparent;
+            font-size: @menu-item-font-size;
+            color: fadeout(@bc-menu-text, 50%);
+            cursor: default;
+            outline: none;
+            .dark & {
+                color: fadeout(@dark-bc-menu-text, 50%);
+            }
+            &:hover {
+                color: @bc-menu-text;
+                .dark & {
+                    color: @dark-bc-menu-text;
+                }
+            }
+        }
+    }
+
     .nav .hamburger-menu {
         float: left;
         .hamburger-toggle, .hamburger-toggle:hover, .hamburger-toggle:focus {