From 2e43d01e6d9745ba4d4ab1130c9add2ea5c30303 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Tue, 26 Nov 2024 14:47:11 +0800
Subject: [PATCH] refactor

---
 frontend/app/tab/tab.scss   |  8 ++++----
 frontend/app/tab/tab.tsx    |  9 ---------
 frontend/app/tab/tabbar.tsx | 19 +------------------
 3 files changed, 5 insertions(+), 31 deletions(-)

diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
index df27e7fab..d12f19b49 100644
--- a/frontend/app/tab/tab.scss
+++ b/frontend/app/tab/tab.scss
@@ -17,7 +17,7 @@
 	&::after {
 		content: "";
 		position: absolute;
-		right: 0;
+		left: 0;
 		width: 1px;
 		height: 14px;
 		border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2);
@@ -32,6 +32,7 @@
     }
 
 	&:hover {
+		& + .tab::after,
 		&::after {
 			content: none;
 		}
@@ -59,14 +60,13 @@
             color: var(--main-text-color);
         }
 
+		&+.tab::after,
 		&::after {
 			content: none;
 		}
     }
 
-	&.before-active:after,
-	&.before-hovered:after,
-	&:last-child::after {
+	&:first-child::after {
 		content: none;
 	}
 
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index 40291f48b..0b01cf832 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -19,7 +19,6 @@ interface TabProps {
     active: boolean;
     isFirst: boolean;
     isBeforeActive: boolean;
-    isBeforeHovered: boolean;
     isDragging: boolean;
     tabWidth: number;
     isNew: boolean;
@@ -27,8 +26,6 @@ interface TabProps {
     onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
     onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     onLoaded: () => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 
 const Tab = React.memo(
@@ -39,7 +36,6 @@ const Tab = React.memo(
                 active,
                 isFirst,
                 isBeforeActive,
-                isBeforeHovered,
                 isDragging,
                 tabWidth,
                 isNew,
@@ -47,8 +43,6 @@ const Tab = React.memo(
                 onSelect,
                 onClose,
                 onDragStart,
-                onMouseEnter,
-                onMouseLeave,
             },
             ref
         ) => {
@@ -197,14 +191,11 @@ const Tab = React.memo(
                         active,
                         isDragging,
                         "before-active": isBeforeActive,
-                        "before-hovered": isBeforeHovered,
                         "new-tab": isNew,
                     })}
                     onMouseDown={onDragStart}
                     onClick={onSelect}
                     onContextMenu={handleContextMenu}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
                     data-tab-id={id}
                 >
                     <div className="tab-inner">
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index 9bf7b4a15..b55684e8d 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -106,7 +106,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
     // const [scrollable, setScrollable] = useState(false);
     // const [tabWidth, setTabWidth] = useState(TAB_DEFAULT_WIDTH);
     const [newTabId, setNewTabId] = useState<string | null>(null);
-    const [hoveredTabId, setHoveredTabId] = useState<string | null>(null);
+    // const [hoveredTabId, setHoveredTabId] = useState<string | null>(null);
 
     const tabbarWrapperRef = useRef<HTMLDivElement>(null);
     const tabBarRef = useRef<HTMLDivElement>(null);
@@ -520,24 +520,10 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
         });
     }, []);
 
-    const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, tabId: string) => {
-        event.stopPropagation();
-        setHoveredTabId(tabId);
-    };
-
-    const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-        event.stopPropagation();
-        setHoveredTabId(null);
-    };
-
     const isBeforeActive = (tabId: string) => {
         return tabIds.indexOf(tabId) === tabIds.indexOf(activeTabId) - 1;
     };
 
-    const isBeforeHovered = (tabId: string) => {
-        return tabIds.indexOf(tabId) === tabIds.indexOf(hoveredTabId) - 1;
-    };
-
     function onEllipsisClick() {
         getApi().showContextMenu();
     }
@@ -575,12 +561,9 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
                                 onClose={(event) => handleCloseTab(event, tabId)}
                                 onLoaded={() => handleTabLoaded(tabId)}
                                 isBeforeActive={isBeforeActive(tabId)}
-                                isBeforeHovered={isBeforeHovered(tabId)}
                                 isDragging={draggingTab === tabId}
                                 tabWidth={tabWidthRef.current}
                                 isNew={tabId === newTabId}
-                                onMouseEnter={(e) => handleMouseEnter(e, tabId)}
-                                onMouseLeave={handleMouseLeave}
                             />
                         );
                     })}