From 39e9a057203fb76f091c80df887c5e7938f57b31 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Tue, 10 Dec 2024 13:20:03 +0800
Subject: [PATCH] retain hover effect on mouse leave while still dragging

---
 frontend/app/tab/tab.scss   | 12 ++++++++++--
 frontend/app/tab/tab.tsx    | 11 +++--------
 frontend/app/tab/tabbar.tsx |  1 -
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
index e6841b410..b1dd0a23b 100644
--- a/frontend/app/tab/tab.scss
+++ b/frontend/app/tab/tab.scss
@@ -14,7 +14,8 @@
 	align-items: center; 
 	justify-content: center; 
 
-	.separator {
+	.separator,
+	.right-separator {
 		position: absolute;
 		left: 0px;
 		width: 1px;
@@ -25,8 +26,14 @@
 		opacity: 1;
 	}
 
+	.right-separator {
+		left: auto;
+		right: 0px;
+	}
+
 	&.hover {
 		.separator,
+		.right-separator,
 		& + .tab .separator {
 			display: none;
 		}
@@ -103,7 +110,8 @@
 }
 
 // Only apply hover effects when not in nohover mode. This prevents the previously-hovered tab from remaining hovered while a tab view is not mounted.
-body:not(.nohover) .tab:hover {
+body:not(.nohover) .tab:hover,
+body:not(.nohover) .is-dragging {
     .tab-inner {
         border-color: transparent;
         background: rgb(from var(--main-text-color) r g b / 0.07);
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 27bfbdf0c..8ded033b8 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -20,7 +20,6 @@ const adjacentTabsAtom = atom<Set<string>>(new Set<string>());
 interface TabProps {
     id: string;
     isActive: boolean;
-    isFirst: boolean;
     isBeforeActive: boolean;
     draggingId: string;
     tabWidth: number;
@@ -33,8 +32,6 @@ interface TabProps {
     onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onLoaded: () => void;
     onPinChange: () => void;
-    // onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    // onMouseLeave: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 
 const Tab = memo(
@@ -43,7 +40,6 @@ const Tab = memo(
             {
                 id,
                 isActive,
-                isFirst,
                 isPinned,
                 isBeforeActive,
                 draggingId,
@@ -55,8 +51,6 @@ const Tab = memo(
                 onClick,
                 onClose,
                 onMouseDown,
-                // onMouseEnter,
-                // onMouseLeave,
                 onPinChange,
             },
             ref
@@ -293,7 +287,7 @@ const Tab = memo(
                     console.log("entered else ?????????????????????????", tabsSwapped);
                     reset();
                 }
-            }, [id, tabIds, isFirst, isActive, draggingId, tabsSwapped]);
+            }, [id, tabIds, isActive, draggingId, tabsSwapped]);
 
             const handleMouseEnter = useCallback(() => {
                 if (isActive) return;
@@ -331,7 +325,7 @@ const Tab = memo(
                     ref={tabRef}
                     className={clsx("tab", {
                         active: isActive,
-                        isDragging: draggingId === id,
+                        "is-dragging": draggingId === id,
                         "before-active": isBeforeActive,
                         "new-tab": isNew,
                     })}
@@ -372,6 +366,7 @@ const Tab = memo(
                             </Button>
                         )}
                     </div>
+                    {tabIds[tabIds.length - 1] === id && <div className="right-separator"></div>}
                 </div>
             );
         }
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index c2c957906..106509a12 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -653,7 +653,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 key={tabId}
                                 ref={tabRefs.current[index]}
                                 id={tabId}
-                                isFirst={tabIds[0]}
                                 isPinned={isPinned}
                                 onClick={() => handleSelectTab(tabId)}
                                 isActive={activeTabId === tabId}