From 6f8f1a836a1f3c9aa7abe1e1051f7d53899db427 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Tue, 10 Dec 2024 11:44:32 +0800
Subject: [PATCH] always put left separator on the first tab

---
 frontend/app/tab/tab.tsx    | 12 +++++++++++-
 frontend/app/tab/tabbar.tsx |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 6be59bef7..62fc9569d 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -251,8 +251,19 @@ const Tab = memo(
                         const separator = currentTabElement.querySelector(".separator") as HTMLElement;
 
                         if (!leftAdjacentElement.classList.contains("active")) {
+                            console.log("here!!!!!", currentTabElement, draggingId);
                             separator.style.opacity = "1"; // Reset opacity for the current tab only if not active
                         }
+
+                        // If dragging tab is the first tab set opacity to 1
+                        if (draggingId === tabIds[0]) {
+                            const draggingTabElement = document.querySelector(
+                                `[data-tab-id="${draggingId}"]`
+                            ) as HTMLElement;
+                            if (!draggingTabElement) return;
+                            const separator = draggingTabElement.querySelector(".separator") as HTMLElement;
+                            separator.style.opacity = "1";
+                        }
                     }
 
                     if (rightAdjacentId) {
@@ -264,7 +275,6 @@ const Tab = memo(
                         const separator = rightAdjacentElement.querySelector(".separator") as HTMLElement;
 
                         if (!rightAdjacentElement.classList.contains("active")) {
-                            console.log("here!!!!!");
                             separator.style.opacity = "1"; // Reset opacity for the right adjacent tab
                         }
                     }
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index c0cb58c1c..b161eed79 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -659,7 +659,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 key={tabId}
                                 ref={tabRefs.current[index]}
                                 id={tabId}
-                                isFirst={index === 0}
+                                isFirst={tabIds[0]}
                                 isPinned={isPinned}
                                 onClick={() => handleSelectTab(tabId)}
                                 isActive={activeTabId === tabId}