feat: replace toolbar file label with Show-in-File-Tree button

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>
 
     <!--

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 */

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();
     });
 

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