feat: active file in non-active pane is now highlighted too

Author: devvaannsh

src/extensionsIntegrated/TabBar/main.js

@@ -123,26 +123,29 @@ define(function (require, exports, module) {
             return;
         }
 
-        // set up all the necessary properties
-        const activeEditor = EditorManager.getActiveEditor();
-        const activePath = activeEditor ? activeEditor.document.file.fullPath : null;
+        // get the current active file for this specific pane
+        const activeFileInPane = MainViewManager.getCurrentlyViewedFile(paneId);
+        const activePathInPane = activeFileInPane ? activeFileInPane.fullPath : null;
 
+        // Check if this file is active in its pane
+        const isActive = (entry.path === activePathInPane);
+
+        // Current active pane (used to determine whether to add the blue underline)
         const currentActivePane = MainViewManager.getActivePaneId();
-        // if the file is the currently active file
-        // also verify that the tab belongs to the active pane
-        const isActive = (entry.path === activePath && paneId === currentActivePane);
-        const isDirty = Helper._isFileModified(FileSystem.getFileForPath(entry.path)); // if the file is dirty
+        const isPaneActive = (paneId === currentActivePane);
+
+        const isDirty = Helper._isFileModified(FileSystem.getFileForPath(entry.path));
 
-        // Create the tab element with the structure we need
-        // tab name is written as a separate div because it may include directory info which we style differently
+        // create tab with active class
         const $tab = $(
-            `<div class="tab ${isActive ? 'active' : ''} ${isDirty ? 'dirty' : ''}" 
-            data-path="${entry.path}" 
-            title="${entry.path}">
-            <div class="tab-icon"></div>
-            <div class="tab-name"></div>
-            <div class="tab-close"><i class="fa-solid fa-times"></i></div>
-        </div>`);
+            `<div class="tab 
+                ${isActive ? 'active' : ''} 
+                ${isDirty ? 'dirty' : ''}" data-path="${entry.path}" title="${entry.path}">
+                <div class="tab-icon"></div>
+                <div class="tab-name"></div>
+                <div class="tab-close"><i class="fa-solid fa-times"></i></div>
+            </div>`
+        );
 
         // Add the file icon
         const $icon = Helper._getFileIcon(entry);
@@ -163,6 +166,13 @@ define(function (require, exports, module) {
             $tabName.text(entry.name);
         }
 
+        // only add the underline class if this is both active AND in the active pane
+        if (isActive && !isPaneActive) {
+            // if it's active but in a non-active pane, we add a special class
+            // to style differently in CSS to indicate that it's active but not in the active pane
+            $tab.addClass('active-in-inactive-pane');
+        }
+
         return $tab;
     }
 

src/styles/Extn-TabBar.less

@@ -169,6 +169,32 @@
     background-color: #75BEFF;
 }
 
+.tab.active-in-inactive-pane {
+    background-color: #fff;
+}
+
+.dark .tab.active-in-inactive-pane {
+    background-color: #3D3D3D;
+}
+
+.tab.active-in-inactive-pane::after {
+    display: none;
+}
+
+.tab.active-in-inactive-pane::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0.12rem;
+    background-color: #b4b2b2;
+}
+
+.dark .tab.active-in-inactive-pane::before {
+    background-color: #666;
+}
+
 .tab.dirty::before {
     content: "•";
     color: #888;