fix: ui rendering issues with tab bar

Author: abose

src/extensionsIntegrated/TabBar/html/tabbar-pane.html

@@ -1,9 +1,9 @@
-<div id="tab-bar-container" class="tab-bar-container">
+<div class="tab-bar-container">
     <div id="phoenix-tab-bar" class="phoenix-tab-bar">
 
     </div>
 
     <div id="overflow-button" class="overflow-button" title="Show hidden tabs">
         <i class="fa-solid fa-chevron-down"></i>
     </div>
-</div>
+</div>

src/extensionsIntegrated/TabBar/html/tabbar-second-pane.html

@@ -1,9 +1,9 @@
-<div id="tab-bar-container" class="tab-bar-container">
+<div class="tab-bar-container">
     <div id="phoenix-tab-bar-2" class="phoenix-tab-bar">
 
     </div>
 
     <div id="overflow-button-2" class="overflow-button-2" title="Show hidden tabs">
         <i class="fa-solid fa-chevron-down"></i>
     </div>
-</div>
+</div>

src/extensionsIntegrated/TabBar/main.js

@@ -188,21 +188,22 @@ define(function (require, exports, module) {
         // clean up any existing tab bars first and start fresh
         cleanupTabBar();
 
-        if ($('.not-editor').length === 1) {
+        const $paneHeader = $('.pane-header');
+        if ($paneHeader.length === 1) {
             $tabBar = $(TabBarHTML);
             // since we need to add the tab bar before the editor which has .not-editor class
-            $(".not-editor").before($tabBar);
+            $(".pane-header").after($tabBar);
             WorkspaceManager.recomputeLayout(true);
             updateTabs();
 
-        } else if ($('.not-editor').length === 2) {
+        } else if ($paneHeader.length === 2) {
             $tabBar = $(TabBarHTML);
             $tabBar2 = $(TabBarHTML2);
 
             // eq(0) is for the first pane and eq(1) is for the second pane
             // TODO: Fix bug where the tab bar gets hidden inside the editor in horizontal split
-            $(".not-editor").eq(0).before($tabBar);
-            $(".not-editor").eq(1).before($tabBar2);
+            $paneHeader.eq(0).after($tabBar);
+            $paneHeader.eq(1).after($tabBar2);
             WorkspaceManager.recomputeLayout(true);
             updateTabs();
         }
@@ -344,6 +345,7 @@ define(function (require, exports, module) {
         }
         // Also check for any orphaned tab bars that might exist
         $(".tab-bar-container").remove();
+        WorkspaceManager.recomputeLayout(true);
     }
 
 
@@ -353,7 +355,7 @@ define(function (require, exports, module) {
     function handleTabClick() {
 
         // delegate event handling for both tab bars
-        $(document).on("click", ".tab", function (event) {
+        $(document).on("click", ".phoenix-tab-bar .tab", function (event) {
             // check if the clicked element is the close button
             if ($(event.target).hasClass('fa-times') || $(event.target).closest('.tab-close').length) {
                 // Get the file path from the data-path attribute of the parent tab
@@ -376,23 +378,35 @@ define(function (require, exports, module) {
                     event.preventDefault();
                     event.stopPropagation();
                 }
-                return;
             }
+        });
 
+        // delegate event handling for both tab bars
+        $(document).on("mousedown", ".phoenix-tab-bar .tab", function (event) {
+            if ($(event.target).hasClass('fa-times') || $(event.target).closest('.tab-close').length) {
+                return;
+            }
             // Get the file path from the data-path attribute
             const filePath = $(this).attr("data-path");
 
             if (filePath) {
-                CommandManager.execute(Commands.FILE_OPEN, { fullPath: filePath });
+                // determine the pane inside which the tab belongs
+                const isSecondPane = $(this).closest("#phoenix-tab-bar-2").length > 0;
+                const paneId = isSecondPane ? "second-pane" : "first-pane";
+                const activeEditor = EditorManager.getActiveEditor();
+                const currentActivePane = MainViewManager.getActivePaneId();
+                const isPaneActive = (paneId === currentActivePane);
+                if(isPaneActive && activeEditor && activeEditor.document.file.fullPath === filePath) {
+                    return;
+                }
+                CommandManager.execute(Commands.FILE_OPEN, { fullPath: filePath, paneId: paneId });
 
-                // Prevent default behavior
-                event.preventDefault();
-                event.stopPropagation();
+                // We dont prevent default behavior here to enable drag and drop of this tab
             }
         });
 
         // Add the contextmenu (right-click) handler
-        $(document).on("contextmenu", ".tab", function (event) {
+        $(document).on("contextmenu", ".phoenix-tab-bar .tab", function (event) {
             event.preventDefault();
             event.stopPropagation();
 

src/nls/root/strings.js

@@ -554,7 +554,7 @@ define({
     "CMD_HIDE_SIDEBAR": "Hide Sidebar",
     "CMD_SHOW_SIDEBAR": "Show Sidebar",
     "CMD_TOGGLE_SIDEBAR": "Toggle Sidebar",
-    "CMD_TOGGLE_TABBAR": "Toggle Tab Bar",
+    "CMD_TOGGLE_TABBAR": "File Tab Bar",
     "CMD_TOGGLE_PANELS": "Toggle Panels",
     "CMD_TOGGLE_PURE_CODE": "No Distractions",
     "CMD_TOGGLE_FULLSCREEN": "Fullscreen",

src/view/Pane.js

@@ -1225,8 +1225,13 @@ define(function (require, exports, module) {
      * @private
      */
     Pane.prototype._updateHeaderHeight = function () {
-        var paneContentHeight = this.$el.height();
+        const $el = this.$el;
+        const $tabBar = $el.find(".tab-bar-container");
+        let paneContentHeight = $el.height();
 
+        if($tabBar.length > 0 && $tabBar.is(":visible")) {
+            paneContentHeight = paneContentHeight - $tabBar.height();
+        }
         // Adjust pane content height for header
         if (MainViewManager.getPaneCount() > 1) {
             this.$header.show();