From f54a2f043503cfb7da446b3393c8aae577b85e4b Mon Sep 17 00:00:00 2001
From: abose <arun@core.ai>
Date: Mon, 20 Apr 2026 21:03:40 +0530
Subject: [PATCH] feat: replace CCB file label with Show-in-File-Tree button

- Remove the .ccb-group-file block (HTML, JS wiring, LESS). The vertical
  file name is redundant with the live-preview heading and file tabs.
- Drop no-longer-used DocumentManager and MainViewManager requires, plus
  the _updateFileLabel function and its event subscriptions.
- Add #ccbShowInTreeBtn below #searchNav in .ccb-group-nav with the
  legacy binoculars glyph inlined as SVG using currentColor so it
  inherits the button color. ViewBox tightened to 16x16 so the artwork
  fills the rendering box at the same weight as the pen-nib icon.
- Button invokes the existing NAVIGATE_SHOW_IN_FILE_TREE command and
  uses the existing Strings.CMD_SHOW_IN_TREE localized title.
- Update control-bar-tests-todo.md: replace the three file-label
  bullets with checks for the new button.
---
 src/index.html                    | 12 +++----
 src/styles/CentralControlBar.less | 57 ++++---------------------------
 src/view/CentralControlBar.js     | 35 ++-----------------
 test/control-bar-tests-todo.md    | 14 +++++---
 4 files changed, 22 insertions(+), 96 deletions(-)

diff --git a/src/index.html b/src/index.html
index 88d90271b..a29e28d7f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -964,16 +964,14 @@
         <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="ccbShowInTreeBtn" class="ccb-btn" title="Show in File Tree">
+                <svg class="ccb-binoculars-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>
+            </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 class="ccb-divider"></div>
-        <div class="ccb-group ccb-group-file">
-            <div id="ccbFileLabel" class="ccb-file-label">
-                <span class="ccb-file-dot">•</span>
-                <span class="ccb-file-name"></span>
-            </div>
-        </div>
     </div>
 
     <!--
diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less
index d6c511563..625227277 100644
--- a/src/styles/CentralControlBar.less
+++ b/src/styles/CentralControlBar.less
@@ -47,14 +47,6 @@
         flex-direction: column;
         align-items: stretch;
         gap: 2px;
-
-        &.ccb-group-file {
-            flex: 0 1 auto;
-            max-height: 220px;
-            overflow: hidden;
-            justify-content: flex-start;
-            padding: 4px 0;
-        }
     }
 
     .ccb-divider {
@@ -81,6 +73,12 @@
             pointer-events: none;
         }
 
+        svg.ccb-binoculars-icon {
+            width: 15px;
+            height: 15px;
+            pointer-events: none;
+        }
+
         &:hover {
             color: @project-panel-text-1;
             background-color: rgba(255, 255, 255, 0.08);
@@ -128,49 +126,6 @@
         pointer-events: none;
     }
 
-    /* Vertical filename label — clicking reveals the current file in the
-       file tree, mirroring the old binoculars button. */
-    .ccb-file-label {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 0;
-        color: @project-panel-text-2;
-        height: 100%;
-        overflow: hidden;
-        cursor: pointer;
-
-        .ccb-file-dot {
-            flex: 0 0 auto;
-            line-height: 1;
-            color: #f1b84e;
-            visibility: hidden;
-            font-size: 1rem;
-        }
-
-        &.is-dirty .ccb-file-dot {
-            visibility: visible;
-        }
-
-        .ccb-file-name {
-            flex: 1 1 auto;
-            min-height: 0;
-            writing-mode: vertical-rl;
-            transform: rotate(180deg);
-            text-orientation: mixed;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: @project-panel-text-1;
-            font-size: 13px;
-            font-weight: 500;
-        }
-
-        &:hover .ccb-file-name {
-            text-decoration: underline;
-        }
-    }
 }
 
 /* Editor collapse: actual layout handled in JS via .content width/visibility */
diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js
index 904e21a06..a25b77c88 100644
--- a/src/view/CentralControlBar.js
+++ b/src/view/CentralControlBar.js
@@ -23,8 +23,6 @@ define(function (require, exports, module) {
     const AppInit           = require("utils/AppInit");
     const CommandManager    = require("command/CommandManager");
     const Commands          = require("command/Commands");
-    const DocumentManager   = require("document/DocumentManager");
-    const MainViewManager   = require("view/MainViewManager");
     const Strings           = require("strings");
     const WorkspaceManager  = require("view/WorkspaceManager");
 
@@ -33,8 +31,6 @@ define(function (require, exports, module) {
     let $bar;
     let $sidebar;
     let $content;
-    let $fileLabel;
-    let $fileName;
     let editorCollapsed = false;
     let savedToolbarWidth = null;
     let livePreviewWasOpen = false;
@@ -73,27 +69,6 @@ define(function (require, exports, module) {
         }
     }
 
-    function _updateFileLabel() {
-        if (!$fileLabel) {
-            return;
-        }
-        const doc = DocumentManager.getCurrentDocument();
-        if (!doc) {
-            $fileLabel.removeClass("is-dirty");
-            $fileName.text("");
-            $fileLabel.attr("title", "");
-            return;
-        }
-        const name = doc.file && doc.file.name ? doc.file.name : "";
-        const fullPath = doc.file && doc.file.fullPath ? doc.file.fullPath : "";
-        const displayPath = fullPath && Phoenix && Phoenix.app && Phoenix.app.getDisplayPath
-            ? Phoenix.app.getDisplayPath(fullPath)
-            : fullPath || name;
-        $fileName.text(name);
-        $fileLabel.attr("title", displayPath);
-        $fileLabel.toggleClass("is-dirty", !!doc.isDirty);
-    }
-
     function _executeCmd(id) {
         CommandManager.execute(id);
     }
@@ -286,7 +261,7 @@ define(function (require, exports, module) {
             e.preventDefault();
             _executeCmd(Commands.VIEW_HIDE_SIDEBAR);
         });
-        $("#ccbFileLabel").on("click", function (e) {
+        $("#ccbShowInTreeBtn").on("click", function (e) {
             e.preventDefault();
             _executeCmd(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
         });
@@ -301,8 +276,6 @@ define(function (require, exports, module) {
         $bar = $("#centralControlBar");
         $sidebar = $("#sidebar");
         $content = $(".content");
-        $fileLabel = $("#ccbFileLabel");
-        $fileName = $fileLabel.find(".ccb-file-name");
 
         // Cache the authored pen-nib SVG from the DOM so the toggle handler
         // can restore it after swapping in the fa-code icon for design mode.
@@ -315,6 +288,7 @@ define(function (require, exports, module) {
         // navForwardButton get their localized titles from NavigationProvider.)
         $("#ccbCollapseEditorBtn").attr("title", Strings.CCB_SWITCH_TO_DESIGN_MODE);
         $("#ccbSidebarToggleBtn").attr("title", Strings.CMD_TOGGLE_SIDEBAR);
+        $("#ccbShowInTreeBtn").attr("title", Strings.CMD_SHOW_IN_TREE);
         $("#ccbUndoBtn").attr("title", Strings.CMD_UNDO);
         $("#ccbRedoBtn").attr("title", Strings.CMD_REDO);
         $("#ccbSaveBtn").attr("title", Strings.CMD_FILE_SAVE);
@@ -428,11 +402,6 @@ define(function (require, exports, module) {
             };
         }
 
-        MainViewManager.on("currentFileChange.ccb", _updateFileLabel);
-        DocumentManager.on("dirtyFlagChange.ccb", _updateFileLabel);
-        DocumentManager.on("pathDeleted.ccb fileNameChange.ccb", _updateFileLabel);
-
-        _updateFileLabel();
         _updateSidebarToggleIcon();
     });
 
diff --git a/test/control-bar-tests-todo.md b/test/control-bar-tests-todo.md
index 28cfaef60..42a5c192f 100644
--- a/test/control-bar-tests-todo.md
+++ b/test/control-bar-tests-todo.md
@@ -33,11 +33,15 @@ Keep this file updated as we add coverage; remove lines as suites land.
 - [ ] `#ccbSidebarToggleBtn` executes `VIEW_HIDE_SIDEBAR` and the icon flips
       `fa-angles-left` ↔ `fa-angles-right` on panelCollapsed/panelExpanded.
 - [ ] The old `#sidebar-toggle-btn` in the menubar is NOT in the DOM.
-- [ ] Clicking `#ccbFileLabel` executes `NAVIGATE_SHOW_IN_FILE_TREE` and (if
-      sidebar was hidden) re-opens the sidebar as part of that command.
-- [ ] File label shows the current doc's `file.name` and uses
-      `Phoenix.app.getDisplayPath` for its tooltip.
-- [ ] Dirty indicator dot toggles with `DocumentManager`'s `dirtyFlagChange`.
+- [ ] `#ccbShowInTreeBtn` is rendered in `.ccb-group-nav` directly below
+      `#searchNav` and has a `title` of `Strings.CMD_SHOW_IN_TREE`.
+- [ ] Clicking `#ccbShowInTreeBtn` executes `NAVIGATE_SHOW_IN_FILE_TREE` (if
+      sidebar was hidden, it re-opens as part of the command).
+- [ ] Binoculars `<svg>` renders and inherits `.ccb-btn` color
+      (`currentColor` on the path).
+- [ ] Neither `#ccbFileLabel`, `.ccb-group-file`, `.ccb-file-label`,
+      `.ccb-file-name`, nor `.ccb-file-dot` exists in the DOM or in the
+      compiled CSS.
 
 ## 3. Toggle Design Mode command