From 772e48db80e6d3e22bd1865a0938f485a3b6eef4 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Mon, 9 Dec 2024 23:48:28 +0800
Subject: [PATCH] save work

---
 frontend/app/tab/tab.scss |  7 ++++
 frontend/app/tab/tab.tsx  | 81 +++++++++++++++++++++++++++++++++++----
 2 files changed, 80 insertions(+), 8 deletions(-)

diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss
index 20a38033c..e6841b410 100644
--- a/frontend/app/tab/tab.scss
+++ b/frontend/app/tab/tab.scss
@@ -25,6 +25,13 @@
 		opacity: 1;
 	}
 
+	&.hover {
+		.separator,
+		& + .tab .separator {
+			display: none;
+		}
+	}
+
     .tab-inner {
         position: relative;
         width: calc(100% - 6px); 
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index fbfdef6fd..24cfc5487 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -250,10 +250,7 @@ const Tab = memo(
                     // Set the opacity of the separator for the current tab
                     if (currentIndex !== -1) {
                         const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
-                        // To check if leftAdjacentId is the active tab then do not set opacity to 0
-                        const leftAdjacentElement = document.querySelector(
-                            `[data-tab-id="${leftAdjacentId}"]`
-                        ) as HTMLElement;
+
                         if (currentTabElement) {
                             const separator = currentTabElement.querySelector(".separator") as HTMLElement;
                             if (separator) {
@@ -283,8 +280,8 @@ const Tab = memo(
                                 if (isActive && !tabIndicesMoved.length) {
                                     separator.style.opacity = "0"; // Hide the separator of the right adjacent tab
                                 } else if (tabIndicesMoved.length) {
-                                    console.log("rightAdjacentTabElement>>>>>>", rightAdjacentTabElement);
-                                    console.log("2");
+                                    // console.log("rightAdjacentTabElement>>>>>>", rightAdjacentTabElement);
+                                    // console.log("2");
                                     separator.style.opacity = "0"; // Hide the separator of the right adjacent tab
                                 }
                             }
@@ -337,6 +334,74 @@ const Tab = memo(
                 }
             }, [id, tabIds, isFirst, isActive, tabIndicesMoved]);
 
+            const handleMouseEnter = useCallback(() => {
+                if (isActive) return;
+
+                const currentIndex = tabIds.indexOf(id);
+
+                console.log("tabIds", tabIds);
+                console.log("id", id);
+                const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
+
+                if (currentTabElement) {
+                    // Ensure the element exists
+                    if (!tabIndicesMoved.length) {
+                        currentTabElement.classList.add("hover");
+                    }
+                }
+                // const crrSeparator = currentTabElement.querySelector(".separator") as HTMLElement;
+                // if (crrSeparator) {
+                //     crrSeparator.style.opacity = "0"; // Reset opacity for the right adjacent tab
+                // }
+
+                // const rightAdjacentTabElement = document.querySelector(
+                //     `[data-tab-id="${rightAdjacentId}"]`
+                // ) as HTMLElement;
+                // const rightSeparator = rightAdjacentTabElement.querySelector(".separator") as HTMLElement;
+                // if (rightSeparator) {
+                //     rightSeparator.style.opacity = "0"; // Reset opacity for the right adjacent tab
+                // }
+            }, [id, isActive, tabIndicesMoved]);
+
+            const handleMouseLeave = useCallback(() => {
+                if (isActive) return;
+
+                console.log("tabIds", tabIds);
+                console.log("id", id);
+                const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
+
+                if (currentTabElement) {
+                    // Ensure the element exists
+
+                    currentTabElement.classList.remove("hover");
+                }
+
+                // const currentIndex = tabIds.indexOf(id);
+
+                // console.log("tabIds", tabIds);
+                // console.log("id", id);
+
+                // // Get the right adjacent ID
+                // const rightAdjacentId = tabIds[currentIndex + 1];
+                // // Get the left adjacent ID
+                // const leftAdjacentId = tabIds[currentIndex - 1];
+
+                // const currentElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
+                // const crrSeparator = currentElement.querySelector(".separator") as HTMLElement;
+                // const leftAdjacentElement = document.querySelector(`[data-tab-id="${leftAdjacentId}"]`) as HTMLElement;
+                // if (crrSeparator && leftAdjacentElement && !leftAdjacentElement.classList.contains("active")) {
+                //     crrSeparator.style.opacity = "1"; // Reset opacity for the right adjacent tab
+                // }
+
+                // const rightAdjacentElement = document.querySelector(
+                //     `[data-tab-id="${rightAdjacentId}"]`
+                // ) as HTMLElement;
+                // const rightSeparator = rightAdjacentElement.querySelector(".separator") as HTMLElement;
+                // if (rightSeparator && rightAdjacentElement && !rightAdjacentElement.classList.contains("active")) {
+                //     rightSeparator.style.opacity = "1"; // Reset opacity for the right adjacent tab
+                // }
+            }, [id, isActive, tabIndicesMoved]);
+
             return (
                 <div
                     ref={tabRef}
@@ -349,8 +414,8 @@ const Tab = memo(
                     onMouseDown={onMouseDown}
                     onClick={onClick}
                     onContextMenu={handleContextMenu}
-                    // onMouseEnter={onMouseEnter}
-                    // onMouseLeave={onMouseLeave}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
                     data-tab-id={id}
                 >
                     <div className="separator"></div>