2222
2323/**
2424 * SidebarTabs manages multiple tab panes within the sidebar. Tab buttons are
25- * rendered into the `#ccbTabGroup ` element inside the left control bar. The
25+ * rendered into the `#centralControlBar ` element ( the left control bar) . The
2626 * module provides an API for registering tabs, associating DOM content with
2727 * tabs, and switching between them.
2828 *
@@ -40,7 +40,8 @@ define(function (require, exports, module) {
4040
4141 const AppInit = require ( "utils/AppInit" ) ,
4242 EventDispatcher = require ( "utils/EventDispatcher" ) ,
43- PreferencesManager = require ( "preferences/PreferencesManager" ) ;
43+ PreferencesManager = require ( "preferences/PreferencesManager" ) ,
44+ Strings = require ( "strings" ) ;
4445
4546 // --- Constants -----------------------------------------------------------
4647
@@ -50,6 +51,13 @@ define(function (require, exports, module) {
5051 */
5152 const SIDEBAR_TAB_FILES = "sidebar-tab-files" ;
5253
54+ // Inline SVG icons for the control bar — all use fill="currentColor" so
55+ // they inherit the button's text color. viewBoxes are cropped tightly
56+ // around the path content for consistent visual sizing.
57+ const ICON_FILES = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="128 64 384 512"><path fill="currentColor" d="M304 112L192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 272L376 272C336.2 272 304 239.8 304 200L304 112zM444.1 224L352 131.9L352 200C352 213.3 362.7 224 376 224L444.1 224zM128 128C128 92.7 156.7 64 192 64L325.5 64C342.5 64 358.8 70.7 370.8 82.7L493.3 205.3C505.3 217.3 512 233.6 512 250.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128z"/></svg>' ;
58+
59+ const ICON_SEARCH = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>' ;
60+
5361 /**
5462 * Preferred sidebar width (px) when a non-files tab (e.g. AI) is
5563 * first activated. Applied once if the current width is narrower.
@@ -84,7 +92,7 @@ define(function (require, exports, module) {
8492
8593 /** @type {jQuery }
8694 * @private */
87- let $ccbTabGroup ;
95+ let $controlBar ;
8896
8997 /** @type {jQuery }
9098 * @private */
@@ -161,11 +169,13 @@ define(function (require, exports, module) {
161169 * @private
162170 */
163171 function _rebuildTabBar ( ) {
164- if ( ! $ccbTabGroup ) {
172+ if ( ! $controlBar ) {
165173 return ;
166174 }
167- $ccbTabGroup . empty ( ) ;
175+ $controlBar . empty ( ) ;
168176 _tabs . sort ( function ( a , b ) { return a . priority - b . priority ; } ) ;
177+
178+ // Render tab buttons
169179 _tabs . forEach ( function ( tab ) {
170180 const iconMarkup = tab . iconHTML || '<i class="' + tab . iconClass + '"></i>' ;
171181 const $item = $ ( '<a href="#" class="ccb-btn ccb-tab-btn" data-tab-id="' + tab . id + '" title="' + tab . label + '">' +
@@ -175,9 +185,13 @@ define(function (require, exports, module) {
175185 $item . addClass ( "active" ) ;
176186 }
177187 tab . $tabItem = $item ;
178- $ccbTabGroup . append ( $item ) ;
188+ $controlBar . append ( $item ) ;
179189 } ) ;
180190
191+ // Render the search button
192+ $controlBar . append ( '<a href="#" id="searchNav" class="ccb-btn" title="' +
193+ Strings . CMD_FIND_IN_FILES + '">' + ICON_SEARCH + '</a>' ) ;
194+
181195 // Also rebuild the sidebar chip bar
182196 if ( $navTabBar ) {
183197 $navTabBar . empty ( ) ;
@@ -452,10 +466,10 @@ define(function (require, exports, module) {
452466 _activeTabId = id ;
453467
454468 // Update active class on tab items in the control bar
455- if ( $ccbTabGroup ) {
456- $ccbTabGroup . find ( ".ccb-tab-btn" ) . removeClass ( "active" ) ;
469+ if ( $controlBar ) {
470+ $controlBar . find ( ".ccb-tab-btn" ) . removeClass ( "active" ) ;
457471 if ( $sidebar && $sidebar . is ( ":visible" ) ) {
458- $ccbTabGroup . find ( '.ccb-tab-btn[data-tab-id="' + id + '"]' ) . addClass ( "active" ) ;
472+ $controlBar . find ( '.ccb-tab-btn[data-tab-id="' + id + '"]' ) . addClass ( "active" ) ;
459473 }
460474 }
461475
@@ -515,10 +529,10 @@ define(function (require, exports, module) {
515529 // --- Initialization ------------------------------------------------------
516530
517531 function _updateTabActiveStates ( ) {
518- if ( $ccbTabGroup ) {
519- $ccbTabGroup . find ( ".ccb-tab-btn" ) . removeClass ( "active" ) ;
532+ if ( $controlBar ) {
533+ $controlBar . find ( ".ccb-tab-btn" ) . removeClass ( "active" ) ;
520534 if ( $sidebar && $sidebar . is ( ":visible" ) ) {
521- $ccbTabGroup . find ( '.ccb-tab-btn[data-tab-id="' + _activeTabId + '"]' ) . addClass ( "active" ) ;
535+ $controlBar . find ( '.ccb-tab-btn[data-tab-id="' + _activeTabId + '"]' ) . addClass ( "active" ) ;
522536 }
523537 }
524538 if ( $navTabBar ) {
@@ -529,31 +543,29 @@ define(function (require, exports, module) {
529543
530544 AppInit . htmlReady ( function ( ) {
531545 $sidebar = $ ( "#sidebar" ) ;
532- $ccbTabGroup = $ ( "#ccbTabGroup " ) ;
546+ $controlBar = $ ( "#centralControlBar " ) ;
533547
534548 // Create the sidebar chip tab bar and insert after #mainNavBar
535549 $navTabBar = $ ( '<div id="navTabBar"></div>' ) ;
536550 $sidebar . find ( "#mainNavBar" ) . after ( $navTabBar ) ;
537551
538552 // Register the built-in Files tab
539- addTab ( SIDEBAR_TAB_FILES , "Files" , "" , { priority : 0 , iconHTML : '<span class="files-icon"></span>' } ) ;
553+ addTab ( SIDEBAR_TAB_FILES , "Files" , "" , { priority : 0 , iconHTML : ICON_FILES } ) ;
540554
541555 // VSCode-style toggle: clicking the active tab hides sidebar,
542556 // clicking an inactive tab shows sidebar and switches to that tab.
543- $ccbTabGroup . on ( "click" , ".ccb-tab-btn" , function ( e ) {
557+ $controlBar . on ( "click" , ".ccb-tab-btn" , function ( e ) {
544558 e . preventDefault ( ) ;
545559 const tabId = $ ( this ) . attr ( "data-tab-id" ) ;
546560 if ( ! tabId ) {
547561 return ;
548562 }
549563 const sidebarVisible = $sidebar . is ( ":visible" ) ;
550564 if ( sidebarVisible && tabId === _activeTabId ) {
551- // Toggle sidebar off
552565 const CommandManager = require ( "command/CommandManager" ) ;
553566 const Commands = require ( "command/Commands" ) ;
554567 CommandManager . execute ( Commands . VIEW_HIDE_SIDEBAR ) ;
555568 } else if ( ! sidebarVisible ) {
556- // Show sidebar and switch to the clicked tab
557569 const CommandManager = require ( "command/CommandManager" ) ;
558570 const Commands = require ( "command/Commands" ) ;
559571 CommandManager . execute ( Commands . VIEW_HIDE_SIDEBAR ) ;
0 commit comments