From fa455deb89dcf11e553a3e9c5ea36b9078224df2 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 22 Apr 2026 14:56:03 +0530
Subject: [PATCH 1/6] revert: move back/forward, show-in-tree, search buttons
 to mainNavBar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User feedback indicated the old position (top-right of the sidebar nav)
was better than the relocated positions inside the central control bar
and the sidebar project-files-header. Restore the four divs in
#mainNavBarRight with their original sprite-icon classes, drop the CCB
.ccb-group-nav block and the sidebar-hover #show-in-file-tree button,
and prune the CSS overrides that were added to host the buttons in the
CCB. NavigationProvider wiring is unchanged — it still attaches to
these IDs.

Tests:
- Move #showInfileTree and #searchNav click-dispatch tests to the
  NavigationAndHistory integ suite.
- Add a scroll-to-selected test in SidebarTabs-integ-test for
  handleShowInTree's post-showInTree ViewUtils.scrollElementIntoView
  (previously uncovered).
- Drop the obsolete CCB-side button tests.
---
 .../CollapseFolders/main.js                   | 36 +++++----------
 src/index.html                                | 10 ++--
 src/styles/CentralControlBar.less             | 19 --------
 src/styles/Extn-CollapseFolders.less          | 25 ++--------
 test/spec/CentralControlBar-integ-test.js     | 27 -----------
 .../Extn-NavigationAndHistory-integ-test.js   | 31 +++++++++++++
 test/spec/SidebarTabs-integ-test.js           | 46 +++++++++++++++++++
 7 files changed, 96 insertions(+), 98 deletions(-)

diff --git a/src/extensionsIntegrated/CollapseFolders/main.js b/src/extensionsIntegrated/CollapseFolders/main.js
index 541d79537c..f01ef52994 100644
--- a/src/extensionsIntegrated/CollapseFolders/main.js
+++ b/src/extensionsIntegrated/CollapseFolders/main.js
@@ -18,21 +18,14 @@
  *
  */
 
-/* Displays sidebar-hover action buttons: "show in file tree" (binoculars) and
- * "collapse all folders" (stacked chevrons). Both appear on sidebar hover so the
- * sidebar stays visually quiet when the user isn't interacting with it. */
-/* Styling for both buttons is done in `../../styles/Extn-CollapseFolders.less` */
+/* Displays a Collapse button in the sidebar area */
+/* when the button gets clicked, it closes all the directories recursively that are opened */
+/* Styling for the button is done in `../../styles/Extn-CollapseFolders.less` */
 define(function (require, exports, module) {
     const AppInit = require("utils/AppInit");
-    const CommandManager = require("command/CommandManager");
-    const Commands = require("command/Commands");
     const ProjectManager = require("project/ProjectManager");
     const Strings = require("strings");
 
-    const SHOW_IN_TREE_SVG = '<svg class="show-in-tree-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
-        '<path fill="currentColor" d="M4.5 1A1.5 1.5 0 0 0 3 2.5V3h4v-.5A1.5 1.5 0 0 0 5.5 1h-1zM7 4v1h2V4h4v.882a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V13H9v-1.5a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5V13H1V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V4h4zM1 14v.5A1.5 1.5 0 0 0 2.5 16h3A1.5 1.5 0 0 0 7 14.5V14H1zm8 0v.5a1.5 1.5 0 0 0 1.5 1.5h3a1.5 1.5 0 0 0 1.5-1.5V14H9zm4-11H9v-.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5V3z"/>' +
-        '</svg>';
-
     /**
      * This is the main function that handles the closing of all the directories
      */
@@ -59,37 +52,30 @@ define(function (require, exports, module) {
         }
     }
 
-    function _handleShowInTreeClick() {
-        CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-    }
-
     /**
-     * Append the sidebar hover actions: a "Show in File Tree" binoculars button
-     * followed by the "Collapse All" chevron button. Both live in
-     * #project-files-header and become visible only on #sidebar:hover.
+     * This function is responsible to create the 'Collapse All' button
+     * and append it to the sidebar area on the project-files-header
      */
-    function createSidebarHoverButtons() {
+    function createCollapseButton() {
         const $projectFilesHeader = $("#project-files-header");
+        // make sure that we were able to get the project-files-header DOM element
         if ($projectFilesHeader.length === 0) {
             return;
         }
 
-        const $showInTreeBtn = $('<div id="show-in-file-tree" class="btn-alt-quiet" title="' +
-            Strings.CMD_SHOW_IN_TREE + '">' + SHOW_IN_TREE_SVG + '</div>');
-        $showInTreeBtn.on("click", _handleShowInTreeClick);
-        $projectFilesHeader.append($showInTreeBtn);
-
+        // create the collapse btn
         const $collapseBtn = $(`
             <div id="collapse-folders" class="btn-alt-quiet" title="${Strings.COLLAPSE_ALL_FOLDERS}">
                 <i class="fa-solid fa-chevron-down collapse-icon" aria-hidden="true"></i>
                 <i class="fa-solid fa-chevron-up collapse-icon" aria-hidden="true"></i>
             </div>
         `);
+
         $collapseBtn.on("click", handleCollapseBtnClick);
-        $projectFilesHeader.append($collapseBtn);
+        $projectFilesHeader.append($collapseBtn); // append the btn to the project-files-header
     }
 
     AppInit.appReady(function () {
-        createSidebarHoverButtons();
+        createCollapseButton();
     });
 });
diff --git a/src/index.html b/src/index.html
index d196537d80..0891c01e7e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -914,6 +914,10 @@
                 <a id="phcode-io-main-nav" href="https://phcode.io" target="_blank" rel="noopener">phcode.io</a>
             </div>
             <div id="mainNavBarRight">
+                <div id="navBackButton" class="nav-back-btn btn-alt-quiet"></div>
+                <div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"></div>
+                <div id="showInfileTree" class="show-in-file-tree-btn btn-alt-quiet"></div>
+                <div id="searchNav" class="search-nav-btn btn-alt-quiet"></div>
                 <div class="working-set-splitview-btn btn-alt-quiet"></div>
             </div>
         </div>
@@ -965,12 +969,6 @@
                 <i class="fa-solid fa-floppy-disk"></i>
             </a>
         </div>
-        <div class="ccb-divider"></div>
-        <div class="ccb-group ccb-group-nav">
-            <a href="#" id="searchNav" class="ccb-btn"><i class="fa-solid fa-magnifying-glass"></i></a>
-            <a href="#" id="navBackButton" class="ccb-btn"><i class="fa-solid fa-arrow-left"></i></a>
-            <a href="#" id="navForwardButton" class="ccb-btn"><i class="fa-solid fa-arrow-right"></i></a>
-        </div>
     </div>
 
     <!--
diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
index 39b10dfd02..4645d8b9ba 100644
--- a/src/styles/CentralControlBar.less
+++ b/src/styles/CentralControlBar.less
@@ -107,25 +107,6 @@
         }
     }
 
-    /* Nav buttons: suppress legacy sprite styles (NavigationProvider toggles enabled/disabled class) */
-    #searchNav,
-    #navBackButton,
-    #navForwardButton {
-        background: transparent !important;
-        top: auto !important;
-        padding: 0 !important;
-        width: auto !important;
-        height: 28px !important;
-        content: normal !important;
-        opacity: 1;
-    }
-
-    #navBackButton.nav-back-btn-disabled,
-    #navForwardButton.nav-forward-btn-disabled {
-        opacity: 0.35;
-        pointer-events: none;
-    }
-
 }
 
 /* Editor collapse: actual layout handled in JS via .content width/visibility */
diff --git a/src/styles/Extn-CollapseFolders.less b/src/styles/Extn-CollapseFolders.less
index 91b6f82b8b..ecdfaab1ca 100644
--- a/src/styles/Extn-CollapseFolders.less
+++ b/src/styles/Extn-CollapseFolders.less
@@ -1,21 +1,17 @@
-#collapse-folders,
-#show-in-file-tree {
+#collapse-folders {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 0.2em 0.65em;
     margin-top: 0.1em;
     position: absolute !important;
+    right: 0;
     opacity: 0;
     visibility: hidden;
     transition:
         opacity 0.2s ease-in-out,
         visibility 0.2s ease-in-out;
-}
-
-#collapse-folders {
-    flex-direction: column;
-    right: 0;
 
     .collapse-icon {
         font-size: 0.5em;
@@ -23,20 +19,7 @@
     }
 }
 
-#show-in-file-tree {
-    // Sit to the left of #collapse-folders.
-    right: 24px;
-
-    .show-in-tree-icon {
-        // Sized to match the combined stacked-chevron glyph of #collapse-folders.
-        width: 11px;
-        height: 11px;
-        pointer-events: none;
-    }
-}
-
-#sidebar:hover #collapse-folders,
-#sidebar:hover #show-in-file-tree {
+#sidebar:hover #collapse-folders {
     opacity: 1;
     visibility: visible;
 }
diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js
index 0b45abfe61..a42ac4b7b1 100644
--- a/test/spec/CentralControlBar-integ-test.js
+++ b/test/spec/CentralControlBar-integ-test.js
@@ -246,14 +246,6 @@ define(function (require, exports, module) {
                 expect(executed).toContain(Commands.FILE_SAVE);
             });
 
-            it("should trigger CMD_FIND_IN_FILES when the search button is clicked", function () {
-                const executed = recordCommands(function () {
-                    _$("#searchNav").trigger("click");
-                });
-                // searchNav routes through NavigationProvider._findInFiles which dispatches CMD_FIND_IN_FILES.
-                expect(executed).toContain(Commands.CMD_FIND_IN_FILES);
-            });
-
             it("should execute VIEW_HIDE_SIDEBAR when #ccbSidebarToggleBtn is clicked, and the sidebar's visibility actually flips", async function () {
                 // Measure the effect: sidebar is visible → click → sidebar hides.
                 expect(SidebarView.isVisible()).toBe(true);
@@ -300,25 +292,6 @@ define(function (require, exports, module) {
             });
         });
 
-        describe("2a. #show-in-file-tree button in sidebar", function () {
-
-            it("should render #show-in-file-tree inside #project-files-header, before #collapse-folders, with the localized title", function () {
-                const $btn = _$("#show-in-file-tree");
-                expect($btn.length).toBe(1);
-                expect($btn.parent().attr("id")).toBe("project-files-header");
-                // #collapse-folders sits after #show-in-file-tree in DOM order.
-                expect($btn.nextAll("#collapse-folders").length).toBe(1);
-                expect($btn.attr("title")).toBe(Strings.CMD_SHOW_IN_TREE);
-            });
-
-            it("should execute NAVIGATE_SHOW_IN_FILE_TREE when #show-in-file-tree is clicked", function () {
-                const executed = recordCommands(function () {
-                    _$("#show-in-file-tree").trigger("click");
-                });
-                expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-            });
-        });
-
         describe("3. Toggle Design Mode command", function () {
 
             it("should execute VIEW_TOGGLE_DESIGN_MODE and flip isInDesignMode() from false to true and back", async function () {
diff --git a/test/spec/Extn-NavigationAndHistory-integ-test.js b/test/spec/Extn-NavigationAndHistory-integ-test.js
index 3c0c96b8f6..5fc76b17d5 100644
--- a/test/spec/Extn-NavigationAndHistory-integ-test.js
+++ b/test/spec/Extn-NavigationAndHistory-integ-test.js
@@ -344,6 +344,37 @@ define(function (require, exports, module) {
             await _expectNavButton(false, true, "nav forward disabled due to new file open");
         }
 
+        function recordCommands(fn) {
+            const executed = [];
+            const handler = function (event, id) { executed.push(id); };
+            CommandManager.on(CommandManager.EVENT_BEFORE_EXECUTE_COMMAND, handler);
+            try {
+                fn();
+            } finally {
+                CommandManager.off(CommandManager.EVENT_BEFORE_EXECUTE_COMMAND, handler);
+            }
+            return executed;
+        }
+
+        it("Should dispatch NAVIGATE_SHOW_IN_FILE_TREE when #showInfileTree is clicked", async function () {
+            await openFile("test.css");
+            const $btn = $("#showInfileTree");
+            expect($btn.length).toBe(1);
+            const executed = recordCommands(function () {
+                $btn.trigger("click");
+            });
+            expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
+        }, 15000);
+
+        it("Should dispatch CMD_FIND_IN_FILES when #searchNav is clicked", function () {
+            const $btn = $("#searchNav");
+            expect($btn.length).toBe(1);
+            const executed = recordCommands(function () {
+                $btn.trigger("click");
+            });
+            expect(executed).toContain(Commands.CMD_FIND_IN_FILES);
+        }, 15000);
+
         it("Should navigate back and forward between text files", async function () {
             await navigateResetStack();
             await _validateNavForFiles("test.css", "test.html", "test.js");
diff --git a/test/spec/SidebarTabs-integ-test.js b/test/spec/SidebarTabs-integ-test.js
index 6edd4b4262..3a13268fb3 100644
--- a/test/spec/SidebarTabs-integ-test.js
+++ b/test/spec/SidebarTabs-integ-test.js
@@ -506,6 +506,52 @@ define(function (require, exports, module) {
 
                 expect(SidebarTabs.getActiveTab()).toBe(SidebarTabs.SIDEBAR_TAB_FILES);
             });
+
+            it("should scroll the selected tree node into view when re-invoked on an already-selected file", async function () {
+                // FileTreeView only auto-scrolls on unselected→selected transitions,
+                // so re-invoking NAVIGATE_SHOW_IN_FILE_TREE on an already-selected
+                // file would otherwise be a no-op when the user has scrolled away.
+                // handleShowInTree compensates by calling ViewUtils.scrollElementIntoView
+                // after ProjectManager.showInTree resolves — this asserts that call fires.
+                await awaitsForDone(
+                    SpecRunnerUtils.openProjectFiles(["test.js"]),
+                    "open test file"
+                );
+                // First invocation: sets up the selection. We don't spy here because
+                // FileTreeView's own selection-transition scroll can also fire and we
+                // want to isolate the explicit handleShowInTree scroll.
+                await awaitsForDone(
+                    CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE),
+                    "first show in file tree"
+                );
+
+                const ViewUtils = testWindow.brackets.getModule("utils/ViewUtils");
+                const originalScroll = ViewUtils.scrollElementIntoView;
+                const calls = [];
+                ViewUtils.scrollElementIntoView = function ($container, $element, scrollIntoView) {
+                    calls.push({
+                        containerId: $container && $container.attr && $container.attr("id"),
+                        hasSelectedNode: $element && $element.length > 0
+                    });
+                    return originalScroll.apply(this, arguments);
+                };
+                try {
+                    await awaitsForDone(
+                        CommandManager.execute(Commands.NAVIGATE_SHOW_IN_FILE_TREE),
+                        "re-invoke show in file tree"
+                    );
+                    // The selection-transition scroll in FileTreeView.componentDidUpdate
+                    // cannot fire here (file is already selected), so any scroll call
+                    // against #project-files-container must come from handleShowInTree.
+                    await awaitsFor(function () {
+                        return calls.some(function (c) {
+                            return c.containerId === "project-files-container" && c.hasSelectedNode;
+                        });
+                    }, "ViewUtils.scrollElementIntoView to be called with the selected tree node", 3000);
+                } finally {
+                    ViewUtils.scrollElementIntoView = originalScroll;
+                }
+            });
         });
 
         describe("SidebarView resize", function () {

From f3b4aaa2b0cf93eec21b28bad0366b88b63efaee Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 22 Apr 2026 14:56:27 +0530
Subject: [PATCH 2/6] chore: broaden .claude lock gitignore to nested paths

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index 53be4d0d9c..e7cd8fdf27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,9 @@ Thumbs.db
 /phoenix-builder-mcp/chrome_extension/build/
 /phoenix-builder-mcp/chrome_extension/*.zip
 
+# claude
+.claude/**/*.lock
+
 # ignore node_modules inside src
 /src/node_modules
 /src-node/node_modules

From e7187d0246666d181e867b753f926e5c5b80aac8 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 22 Apr 2026 15:25:16 +0530
Subject: [PATCH 3/6] perf: skip off-screen ai-msg layout with
 content-visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toggling the sidebar off/on with a large AI chat history (>1k messages,
>10k DOM nodes) causes ~750ms of synchronous reflow on show, because
`display: none` drops the layout object and Chromium rebuilds it from
scratch. Adding `content-visibility: auto` lets the browser skip layout
and paint for messages that are far off-screen; `contain-intrinsic-size`
supplies a height estimate so scroll geometry stays stable.

Measured on a 1098-message session: show-freeze dropped from ~752ms to
~89ms (~8.5x). Progressive enhancement — browsers without support just
ignore the property.
---
 src/styles/Extn-AIChatPanel.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less
index 48dadd707b..10f73f8bd6 100644
--- a/src/styles/Extn-AIChatPanel.less
+++ b/src/styles/Extn-AIChatPanel.less
@@ -270,6 +270,11 @@
 .ai-msg {
     margin-bottom: 12px;
     max-width: 100%;
+    // Skip layout / paint for messages that are far off-screen. For a large
+    // chat history (>1k messages, >10k DOM nodes), showing the sidebar after
+    // it was `display: none` otherwise costs ~750ms of synchronous reflow.
+    content-visibility: auto;
+    contain-intrinsic-size: auto 300px;
 
     .ai-msg-label {
         font-size: @sidebar-xs-font-size;

From 6dd641c8f1f9e664b05b324ca994741e9e574d5d Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 22 Apr 2026 15:51:55 +0530
Subject: [PATCH 4/6] perf: preserve sidebar layout across hide/show to make
 expand near-instant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CCB sidebar-toggle routed through `$sidebar.hide()` → `display:none`,
which Chromium handles by destroying the element's layout tree. On
re-show, the browser has to rebuild layout + paint for the entire
sidebar subtree — for the AI chat panel with a large history
(>1k messages) that was ~750ms of synchronous work per toggle, and
scrollTop on the messages container was zeroed along the way.

Add an opt-in visibility-based hide mode to Resizer: when an element
has the `layout-preserve-hide` class, Resizer toggles a `layout-hidden`
class (which applies `visibility: hidden; pointer-events: none`) instead
of calling `$element.hide()` / `$element.show()`. The element's layout
object stays alive across the toggle, so descendants keep their scroll
positions and `content-visibility` caches, and re-show has no layout
rebuild to do.

`Resizer.isVisible` and the drag-path `:visible` checks were updated to
consult the new class so toggle() / drag-to-reopen still work correctly.
Four callers that read `$sidebar.is(":visible")` were switched to
`SidebarView.isVisible()` (which delegates to the updated Resizer path),
since jQuery's `:visible` can't distinguish a visibility-hidden element
from a shown one.

Measured with a 1098-message AI chat (~10k DOM nodes): expand time on
the sidebar toggle dropped from 752ms → 49.7ms (~15x), scrollTop drift
is 0. Existing suites (mainview:CentralControlBar 50/50, mainview:SidebarTabs
37/37, integration:Navigation 6/6) all green.
---
 src/document/DocumentCommandHandlers.js |  3 ++-
 src/index.html                          |  2 +-
 src/project/SidebarView.js              |  2 +-
 src/styles/brackets.less                |  9 +++++++
 src/utils/Resizer.js                    | 35 +++++++++++++++++++------
 src/view/CentralControlBar.js           |  5 ++--
 6 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js
index 03ad037734..b7c2636446 100644
--- a/src/document/DocumentCommandHandlers.js
+++ b/src/document/DocumentCommandHandlers.js
@@ -62,6 +62,7 @@ define(function (require, exports, module) {
         NodeUtils           = require("utils/NodeUtils"),
         ChangeHelper        = require("editor/EditorHelper/ChangeHelper"),
         SidebarTabs         = require("view/SidebarTabs"),
+        SidebarView         = require("project/SidebarView"),
         _                   = require("thirdparty/lodash");
 
     const KernalModeTrust = window.KernalModeTrust;
@@ -1954,7 +1955,7 @@ define(function (require, exports, module) {
     function handleShowInTree() {
         let activeFile = MainViewManager.getCurrentlyViewedFile(MainViewManager.ACTIVE_PANE);
         if(activeFile){
-            if (!$("#sidebar").is(":visible")) {
+            if (!SidebarView.isVisible()) {
                 CommandManager.execute(Commands.VIEW_HIDE_SIDEBAR);
             }
             SidebarTabs.setActiveTab(SidebarTabs.SIDEBAR_TAB_FILES);
diff --git a/src/index.html b/src/index.html
index 0891c01e7e..5ba5083941 100644
--- a/src/index.html
+++ b/src/index.html
@@ -905,7 +905,7 @@
 <div class="main-view forced-hidden">
     <div id="notificationUIDefaultAnchor" href="#">
     </div>
-    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
+    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible layout-preserve-hide" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
         <div id="mainNavBar">
             <div id="mainNavBarLeft">
                 <div id="newProject" class="new-project-btn btn-alt-quiet"></div>
diff --git a/src/project/SidebarView.js b/src/project/SidebarView.js
index ac495ed512..f997d28df0 100644
--- a/src/project/SidebarView.js
+++ b/src/project/SidebarView.js
@@ -251,7 +251,7 @@ define(function (require, exports, module) {
 
         // AppInit.htmlReady in utils/Resizer executes before, so it's possible that the sidebar
         // is collapsed before we add the event. Check here initially
-        if (!$sidebar.is(":visible")) {
+        if (!isVisible()) {
             $sidebar.trigger("panelCollapsed");
         }
 
diff --git a/src/styles/brackets.less b/src/styles/brackets.less
index 38c48a97c9..bc8c58f514 100644
--- a/src/styles/brackets.less
+++ b/src/styles/brackets.less
@@ -1382,6 +1382,15 @@ a, img {
     cursor: col-resize;
 }
 
+/* Resizer.js visibility-preserving hide: elements with .layout-preserve-hide
+   get this class toggled instead of `display: none`, so their descendants
+   keep their layout objects (and scrollTop / content-visibility caches)
+   across collapse/expand. */
+.layout-preserve-hide.layout-hidden {
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
 .working-set-header-title{
     font-size: 15px;
 }
diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
index 3809aea9ff..691d014102 100644
--- a/src/utils/Resizer.js
+++ b/src/utils/Resizer.js
@@ -178,7 +178,7 @@ define(function (require, exports, module) {
      * @param {DOMNode} element Html element to toggle
      */
     function toggle(element) {
-        if ($(element).is(":visible")) {
+        if (isVisible(element)) {
             hide(element);
         } else {
             show(element);
@@ -217,7 +217,14 @@ define(function (require, exports, module) {
      * @return {boolean} true if element is visible, false if it is not visible
      */
     function isVisible(element) {
-        return $(element).is(":visible");
+        var $el = $(element);
+        if ($el.hasClass("layout-preserve-hide")) {
+            // Element opts out of `display: none` on hide (to keep layout alive
+            // so scrollTop / content-visibility cache survive the toggle). jQuery's
+            // `:visible` still returns true in that case, so consult our own flag.
+            return !$el.hasClass("layout-hidden");
+        }
+        return $el.is(":visible");
     }
 
     function _isPercentage(value) {
@@ -422,7 +429,13 @@ define(function (require, exports, module) {
             // the resizer, the size of the element should be 0, so we restore size in preferences
             resizeElement(elementSize, contentSize);
 
-            $element.show();
+            if ($element.hasClass("layout-preserve-hide")) {
+                // Keep display unchanged — just un-hide via class. The element's
+                // layout tree was preserved, so no reflow avalanche here.
+                $element.removeClass("layout-hidden");
+            } else {
+                $element.show();
+            }
             elementPrefs.visible = true;
 
             if (collapsible) {
@@ -451,7 +464,13 @@ define(function (require, exports, module) {
                 elementSize     = elementSizeFunction.apply($element),
                 resizerSize     = elementSizeFunction.apply($resizer);
 
-            $element.hide();
+            if ($element.hasClass("layout-preserve-hide")) {
+                // Visually hide but keep the layout object alive so descendants
+                // retain scrollTop and content-visibility caches across toggles.
+                $element.addClass("layout-hidden");
+            } else {
+                $element.hide();
+            }
             elementPrefs.visible = false;
             if (collapsible) {
                 $resizer.insertBefore($element);
@@ -472,7 +491,7 @@ define(function (require, exports, module) {
         $resizer.on("mousedown.resizer", function (e) {
             var $resizeShield   = $("<div class='resizing-container " + direction + "-resizing' />"),
                 startPosition   = e[directionProperty],
-                startSize       = $element.is(":visible") ? elementSizeFunction.apply($element) : 0,
+                startSize       = isVisible($element) ? elementSizeFunction.apply($element) : 0,
                 newSize         = startSize,
                 previousSize    = startSize,
                 baseSize        = 0,
@@ -502,7 +521,7 @@ define(function (require, exports, module) {
                 if (newSize !== previousSize) {
                     previousSize = newSize;
 
-                    if ($element.is(":visible")) {
+                    if (isVisible($element)) {
                         if (collapsible && newSize < 10) {
                             toggle($element);
                             elementSizeFunction.apply($element, [0]);
@@ -579,7 +598,7 @@ define(function (require, exports, module) {
                 if (isResizing) {
 
                     var elementSize	= elementSizeFunction.apply($element);
-                    if ($element.is(":visible")) {
+                    if (isVisible($element)) {
                         elementPrefs.size = elementSize;
                         if ($resizableElement.length) {
                             elementPrefs.contentSize = contentSizeFunction.apply($resizableElement);
@@ -651,7 +670,7 @@ define(function (require, exports, module) {
     }
 
     function onWindowResize(e) {
-        if ($sideBar.css("display") === "none") {
+        if (!isVisible($sideBar)) {
             return;
         }
 
diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js
index f45f85dbb3..125179f111 100644
--- a/src/view/CentralControlBar.js
+++ b/src/view/CentralControlBar.js
@@ -25,6 +25,7 @@ define(function (require, exports, module) {
     const Commands          = require("command/Commands");
     const Strings           = require("strings");
     const WorkspaceManager  = require("view/WorkspaceManager");
+    const SidebarView       = require("project/SidebarView");
 
     const BAR_WIDTH = 30;
 
@@ -44,7 +45,7 @@ define(function (require, exports, module) {
         // and rendered width can diverge mid-drag, and outerWidth has returned the
         // uncapped style value in some frames which left CCB / main-toolbar stuck
         // at stale offsets.
-        if (!$sidebar || !$sidebar.is(":visible")) {
+        if (!$sidebar || !SidebarView.isVisible()) {
             return 0;
         }
         return $sidebar[0].offsetWidth || 0;
@@ -248,7 +249,7 @@ define(function (require, exports, module) {
         if (!$btn.length) {
             return;
         }
-        const isVisible = $("#sidebar").is(":visible");
+        const isVisible = SidebarView.isVisible();
         $btn.find("i").attr("class", isVisible ? "fa-solid fa-angles-left" : "fa-solid fa-angles-right");
     }
 

From 1fdcf51711feebe1180911882e73726a7ace5023 Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 22 Apr 2026 16:11:51 +0530
Subject: [PATCH 5/6] test(nav): stop new click-dispatch tests from leaking
 state into the suite

Two changes to the new click-dispatch tests added in fa455deb8:

- #showInfileTree test no longer opens test.css. recordCommands hooks
  EVENT_BEFORE_EXECUTE_COMMAND, which fires whether or not handleShowInTree's
  activeFile branch runs, so the openFile call added nothing to the assertion
  but did leak a test.css entry into session-restore state, shifting the
  nav-history ordering that _validateNavForFiles("test.css", ...) expects.

- #searchNav test now closes the Find-in-Files bar via FindInFilesUI._closeFindBar
  and awaits .modal-bar removal before returning. Leaving the modal open
  caused full-suite runs to fail subsequent navigation tests with
  "Active file to be test.css timed out" because the stale modal bar's
  focus/key handling persisted across closeTestWindow + loadProjectInTestWindow.

Nav suite passes 6/6 in isolation across three consecutive runs.
---
 .../Extn-NavigationAndHistory-integ-test.js   | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/test/spec/Extn-NavigationAndHistory-integ-test.js b/test/spec/Extn-NavigationAndHistory-integ-test.js
index 5fc76b17d5..57670ee5ec 100644
--- a/test/spec/Extn-NavigationAndHistory-integ-test.js
+++ b/test/spec/Extn-NavigationAndHistory-integ-test.js
@@ -356,8 +356,11 @@ define(function (require, exports, module) {
             return executed;
         }
 
-        it("Should dispatch NAVIGATE_SHOW_IN_FILE_TREE when #showInfileTree is clicked", async function () {
-            await openFile("test.css");
+        it("Should dispatch NAVIGATE_SHOW_IN_FILE_TREE when #showInfileTree is clicked", function () {
+            // Don't open a file here. `recordCommands` hooks EVENT_BEFORE_EXECUTE_COMMAND,
+            // which fires regardless of whether handleShowInTree's activeFile branch runs.
+            // Opening a file would leak into the session-restore state and shift the
+            // nav-history ordering the subsequent _validateNavForFiles tests depend on.
             const $btn = $("#showInfileTree");
             expect($btn.length).toBe(1);
             const executed = recordCommands(function () {
@@ -366,13 +369,25 @@ define(function (require, exports, module) {
             expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
         }, 15000);
 
-        it("Should dispatch CMD_FIND_IN_FILES when #searchNav is clicked", function () {
+        it("Should dispatch CMD_FIND_IN_FILES when #searchNav is clicked", async function () {
             const $btn = $("#searchNav");
             expect($btn.length).toBe(1);
             const executed = recordCommands(function () {
                 $btn.trigger("click");
             });
             expect(executed).toContain(Commands.CMD_FIND_IN_FILES);
+            // The click opens the Find-in-Files bar; close it before the
+            // next test's beforeEach reloads, otherwise the modal bar leaks
+            // across the reload and subsequent navigation tests fail with
+            // "Active file to be ... timed out" because the new window's
+            // focus/key handling is stuck behind the stale bar.
+            const FindInFilesUI = testWindow.brackets.test.FindInFilesUI;
+            if (FindInFilesUI && FindInFilesUI._closeFindBar) {
+                FindInFilesUI._closeFindBar(true);
+            }
+            await awaitsFor(function () {
+                return $(".modal-bar").length === 0;
+            }, "find bar to close", 2000);
         }, 15000);
 
         it("Should navigate back and forward between text files", async function () {

From 505d3438a845b91823db63bdc43cf1c746aae76d Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Wed, 22 Apr 2026 16:45:24 +0530
Subject: [PATCH 6/6] test(nav): drop the two click-dispatch tests that flaked
 the suite

Removing the #showInfileTree and #searchNav click-dispatch specs added
in fa455deb8 (and then tried to be patched up in 1fdcf5171). Even with
no openFile and with explicit FindInFilesUI._closeFindBar cleanup,
triggering those clicks still leaked side effects across
closeTestWindow() + loadProjectInTestWindow() that shifted the
subsequent _validateNavForFiles tests' nav-history ordering, producing
deterministic "Active file to be test.css" timeouts only in full-suite
runs.

Commenting the two specs out was confirmed by the user to restore the
suite. The dispatch-on-click coverage these provided isn't worth the
flake surface; if it's wanted later it should live in a describe block
with isolated beforeAll/afterAll so it can't race the history tests.
---
 .../Extn-NavigationAndHistory-integ-test.js   | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/test/spec/Extn-NavigationAndHistory-integ-test.js b/test/spec/Extn-NavigationAndHistory-integ-test.js
index 57670ee5ec..3c0c96b8f6 100644
--- a/test/spec/Extn-NavigationAndHistory-integ-test.js
+++ b/test/spec/Extn-NavigationAndHistory-integ-test.js
@@ -344,52 +344,6 @@ define(function (require, exports, module) {
             await _expectNavButton(false, true, "nav forward disabled due to new file open");
         }
 
-        function recordCommands(fn) {
-            const executed = [];
-            const handler = function (event, id) { executed.push(id); };
-            CommandManager.on(CommandManager.EVENT_BEFORE_EXECUTE_COMMAND, handler);
-            try {
-                fn();
-            } finally {
-                CommandManager.off(CommandManager.EVENT_BEFORE_EXECUTE_COMMAND, handler);
-            }
-            return executed;
-        }
-
-        it("Should dispatch NAVIGATE_SHOW_IN_FILE_TREE when #showInfileTree is clicked", function () {
-            // Don't open a file here. `recordCommands` hooks EVENT_BEFORE_EXECUTE_COMMAND,
-            // which fires regardless of whether handleShowInTree's activeFile branch runs.
-            // Opening a file would leak into the session-restore state and shift the
-            // nav-history ordering the subsequent _validateNavForFiles tests depend on.
-            const $btn = $("#showInfileTree");
-            expect($btn.length).toBe(1);
-            const executed = recordCommands(function () {
-                $btn.trigger("click");
-            });
-            expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
-        }, 15000);
-
-        it("Should dispatch CMD_FIND_IN_FILES when #searchNav is clicked", async function () {
-            const $btn = $("#searchNav");
-            expect($btn.length).toBe(1);
-            const executed = recordCommands(function () {
-                $btn.trigger("click");
-            });
-            expect(executed).toContain(Commands.CMD_FIND_IN_FILES);
-            // The click opens the Find-in-Files bar; close it before the
-            // next test's beforeEach reloads, otherwise the modal bar leaks
-            // across the reload and subsequent navigation tests fail with
-            // "Active file to be ... timed out" because the new window's
-            // focus/key handling is stuck behind the stale bar.
-            const FindInFilesUI = testWindow.brackets.test.FindInFilesUI;
-            if (FindInFilesUI && FindInFilesUI._closeFindBar) {
-                FindInFilesUI._closeFindBar(true);
-            }
-            await awaitsFor(function () {
-                return $(".modal-bar").length === 0;
-            }, "find bar to close", 2000);
-        }, 15000);
-
         it("Should navigate back and forward between text files", async function () {
             await navigateResetStack();
             await _validateNavForFiles("test.css", "test.html", "test.js");