@@ -86,6 +86,10 @@ define(function (require, exports, module) {
8686 * @private */
8787 let $ccbTabGroup ;
8888
89+ /** @type {jQuery }
90+ * @private */
91+ let $navTabBar ;
92+
8993 /** @type {jQuery }
9094 * @private */
9195 let $sidebar ;
@@ -124,7 +128,7 @@ define(function (require, exports, module) {
124128
125129 // --- IDs to always exclude from visibility toggling ----------------------
126130
127- const _EXCLUDED_IDS = { "mainNavBar" : true } ;
131+ const _EXCLUDED_IDS = { "mainNavBar" : true , "navTabBar" : true } ;
128132
129133 /**
130134 * CSS classes that mark structural/resizer elements which must never be
@@ -163,15 +167,37 @@ define(function (require, exports, module) {
163167 $ccbTabGroup . empty ( ) ;
164168 _tabs . sort ( function ( a , b ) { return a . priority - b . priority ; } ) ;
165169 _tabs . forEach ( function ( tab ) {
170+ const iconMarkup = tab . iconHTML || '<i class="' + tab . iconClass + '"></i>' ;
166171 const $item = $ ( '<a href="#" class="ccb-btn ccb-tab-btn" data-tab-id="' + tab . id + '" title="' + tab . label + '">' +
167- '<i class="' + tab . iconClass + '"></i>' +
172+ iconMarkup +
168173 '</a>' ) ;
169174 if ( tab . id === _activeTabId && $sidebar && $sidebar . is ( ":visible" ) ) {
170175 $item . addClass ( "active" ) ;
171176 }
172177 tab . $tabItem = $item ;
173178 $ccbTabGroup . append ( $item ) ;
174179 } ) ;
180+
181+ // Also rebuild the sidebar chip bar
182+ if ( $navTabBar ) {
183+ $navTabBar . empty ( ) ;
184+ _tabs . forEach ( function ( tab ) {
185+ const iconMarkup = tab . iconHTML || '<i class="' + tab . iconClass + '"></i>' ;
186+ const $chip = $ ( '<div class="sidebar-tab" data-tab-id="' + tab . id + '">' +
187+ iconMarkup +
188+ '<span>' + tab . label + '</span>' +
189+ '</div>' ) ;
190+ if ( tab . id === _activeTabId ) {
191+ $chip . addClass ( "active" ) ;
192+ }
193+ $navTabBar . append ( $chip ) ;
194+ } ) ;
195+ if ( _tabs . length >= 2 ) {
196+ $navTabBar . addClass ( "has-tabs" ) ;
197+ } else {
198+ $navTabBar . removeClass ( "has-tabs" ) ;
199+ }
200+ }
175201 }
176202
177203 /**
@@ -273,6 +299,7 @@ define(function (require, exports, module) {
273299 id : id ,
274300 label : label ,
275301 iconClass : iconClass ,
302+ iconHTML : options . iconHTML || null ,
276303 priority : options . priority !== undefined ? options . priority : 100 ,
277304 $tabItem : null
278305 } ;
@@ -432,6 +459,12 @@ define(function (require, exports, module) {
432459 }
433460 }
434461
462+ // Update active class on sidebar chip tabs
463+ if ( $navTabBar ) {
464+ $navTabBar . find ( ".sidebar-tab" ) . removeClass ( "active" ) ;
465+ $navTabBar . find ( '.sidebar-tab[data-tab-id="' + id + '"]' ) . addClass ( "active" ) ;
466+ }
467+
435468 _applyTabVisibility ( ) ;
436469
437470 // One-time sidebar width bump when switching to a non-files tab
@@ -482,21 +515,28 @@ define(function (require, exports, module) {
482515 // --- Initialization ------------------------------------------------------
483516
484517 function _updateTabActiveStates ( ) {
485- if ( ! $ccbTabGroup ) {
486- return ;
518+ if ( $ccbTabGroup ) {
519+ $ccbTabGroup . find ( ".ccb-tab-btn" ) . removeClass ( "active" ) ;
520+ if ( $sidebar && $sidebar . is ( ":visible" ) ) {
521+ $ccbTabGroup . find ( '.ccb-tab-btn[data-tab-id="' + _activeTabId + '"]' ) . addClass ( "active" ) ;
522+ }
487523 }
488- $ccbTabGroup . find ( ".ccb-tab-btn" ) . removeClass ( "active" ) ;
489- if ( $sidebar && $ sidebar. is ( ":visible" ) ) {
490- $ccbTabGroup . find ( '.ccb -tab-btn [data-tab-id="' + _activeTabId + '"]' ) . addClass ( "active" ) ;
524+ if ( $navTabBar ) {
525+ $navTabBar . find ( ". sidebar-tab" ) . removeClass ( "active" ) ;
526+ $navTabBar . find ( '.sidebar -tab[data-tab-id="' + _activeTabId + '"]' ) . addClass ( "active" ) ;
491527 }
492528 }
493529
494530 AppInit . htmlReady ( function ( ) {
495531 $sidebar = $ ( "#sidebar" ) ;
496532 $ccbTabGroup = $ ( "#ccbTabGroup" ) ;
497533
534+ // Create the sidebar chip tab bar and insert after #mainNavBar
535+ $navTabBar = $ ( '<div id="navTabBar"></div>' ) ;
536+ $sidebar . find ( "#mainNavBar" ) . after ( $navTabBar ) ;
537+
498538 // Register the built-in Files tab
499- addTab ( SIDEBAR_TAB_FILES , "Files" , "fa-solid fa-file " , { priority : 0 } ) ;
539+ addTab ( SIDEBAR_TAB_FILES , "Files" , "" , { priority : 0 , iconHTML : '<span class="files-icon"></span>' } ) ;
500540
501541 // VSCode-style toggle: clicking the active tab hides sidebar,
502542 // clicking an inactive tab shows sidebar and switches to that tab.
@@ -523,6 +563,14 @@ define(function (require, exports, module) {
523563 }
524564 } ) ;
525565
566+ // Sidebar chip tab clicks just switch tabs (sidebar is already visible)
567+ $navTabBar . on ( "click" , ".sidebar-tab" , function ( ) {
568+ const tabId = $ ( this ) . attr ( "data-tab-id" ) ;
569+ if ( tabId ) {
570+ setActiveTab ( tabId ) ;
571+ }
572+ } ) ;
573+
526574 // Update active states when sidebar is shown/hidden
527575 $sidebar . on ( "panelCollapsed.sidebarTabs" , function ( ) {
528576 _updateTabActiveStates ( ) ;
0 commit comments