From c324259a9bdcde26e29c9bacf7d3d292b79659d6 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Wed, 4 Dec 2024 09:50:48 +0800
Subject: [PATCH] handle hiding/showing of separators on hover programmatically

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

diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index a1caacb09..39400d731 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -24,10 +24,12 @@ interface TabProps {
     isNew: boolean;
     tabIndicesMovedAtom: Atom<number[]>;
     tabIds: string[];
-    onSelect: () => void;
+    onClick: () => void;
     onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
-    onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onLoaded: () => void;
+    onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseLeave: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 
 const Tab = memo(
@@ -44,9 +46,11 @@ const Tab = memo(
                 tabIndicesMovedAtom,
                 tabIds,
                 onLoaded,
-                onSelect,
+                onClick,
                 onClose,
-                onDragStart,
+                onMouseDown,
+                onMouseEnter,
+                onMouseLeave,
             },
             ref
         ) => {
@@ -195,12 +199,13 @@ const Tab = memo(
 
             const showSeparator = useCallback(
                 (id) => {
+                    if (isFirst) return false;
+
                     const idx = tabIds.indexOf(id);
                     const found = tabIndicesMoved.find((i, ii) => ii !== 0 && i === idx) === undefined;
-                    console.log("idx", id, ":", idx, ":", found);
                     return found;
                 },
-                [tabIndicesMoved]
+                [tabIndicesMoved, isFirst, active]
             );
 
             console.log("showSeparator(id)=====", id, showSeparator(id));
@@ -214,12 +219,14 @@ const Tab = memo(
                         "before-active": isBeforeActive,
                         "new-tab": isNew,
                     })}
-                    onMouseDown={onDragStart}
-                    onClick={onSelect}
+                    onMouseDown={onMouseDown}
+                    onClick={onClick}
                     onContextMenu={handleContextMenu}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
                     data-tab-id={id}
                 >
-                    {!isFirst && showSeparator(id) && <div className="separator"></div>}
+                    {showSeparator(id) && <div className="separator"></div>}
                     <div className="tab-inner">
                         <div
                             ref={editableRef}
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index c2f265dee..3542cb63b 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -142,7 +142,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
 
     let prevDelta: number;
     let prevDragDirection: string;
-    let prevRightAdjacentIndex: number | null = null; // Track the previous right-adjacent tab index
 
     // Update refs when tabIds change
     useEffect(() => {
@@ -540,6 +539,14 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         });
     }, []);
 
+    const handleMouseEnterTab = (index: number) => {
+        setTabIndicesMoved([index - 1, index, index + 1]);
+    };
+
+    const handleMouseLeaveTab = (index: number) => {
+        setTabIndicesMoved([]);
+    };
+
     const isBeforeActive = (tabId: string) => {
         return tabIds.indexOf(tabId) === tabIds.indexOf(activeTabId) - 1;
     };
@@ -576,9 +583,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 ref={tabRefs.current[index]}
                                 id={tabId}
                                 isFirst={index === 0}
-                                onSelect={() => handleSelectTab(tabId)}
+                                onClick={() => handleSelectTab(tabId)}
                                 active={activeTabId === tabId}
-                                onDragStart={(event) => handleDragStart(event, tabId, tabRefs.current[index])}
+                                onMouseDown={(event) => handleDragStart(event, tabId, tabRefs.current[index])}
                                 onClose={(event) => handleCloseTab(event, tabId)}
                                 onLoaded={() => handleTabLoaded(tabId)}
                                 isBeforeActive={isBeforeActive(tabId)}
@@ -587,6 +594,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 isNew={tabId === newTabId}
                                 tabIndicesMovedAtom={tabIndicesMovedAtom}
                                 tabIds={tabIds}
+                                onMouseEnter={() => handleMouseEnterTab(index)}
+                                onMouseLeave={() => handleMouseLeaveTab(index)}
                             />
                         );
                     })}