From 1fb76e774937bbfad8dd25cda547610106442ae4 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Tue, 3 Dec 2024 21:59:08 +0800
Subject: [PATCH] more tracking the three tabs that should be dynamically
 styled while a tab is dragged

---
 frontend/app/tab/tab.tsx    | 3 +++
 frontend/app/tab/tabbar.tsx | 8 +++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index b28745cdb..a8fb363c7 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -24,6 +24,7 @@ interface TabProps {
     tabWidth: number;
     isNew: boolean;
     tabIndicesMovedAtom: Atom<number[]>;
+    tabIds: string[];
     onSelect: () => void;
     onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
     onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -42,6 +43,7 @@ const Tab = React.memo(
                 tabWidth,
                 isNew,
                 tabIndicesMovedAtom,
+                tabIds,
                 onLoaded,
                 onSelect,
                 onClose,
@@ -61,6 +63,7 @@ const Tab = React.memo(
             const tabIndicesMoved = useAtomValue(tabIndicesMovedAtom);
 
             console.log("tabIndicesMoved", tabIndicesMoved);
+            console.log("tabIds", tabIds);
 
             useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);
 
diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index 58acb8141..db5b8ea89 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -114,7 +114,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const [draggingTab, setDraggingTab] = useState<string>();
     const [tabsLoaded, setTabsLoaded] = useState({});
     const [newTabId, setNewTabId] = useState<string | null>(null);
-    const [test, setTest] = useState("");
 
     const tabbarWrapperRef = useRef<HTMLDivElement>(null);
     const tabBarRef = useRef<HTMLDivElement>(null);
@@ -329,8 +328,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         return newTabIndex;
     };
 
-    console.log("test::::::::::::::::", test);
-
     const handleMouseMove = (event: MouseEvent) => {
         const { tabId, ref, tabStartX } = draggingTabDataRef.current;
 
@@ -429,7 +426,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
             if (getDragDirection(currentX) === "+") {
                 setTabIndicesMoved([tabIndex, newTabIndex, newTabIndex + 1]);
             } else if (getDragDirection(currentX) === "-") {
-                setTabIndicesMoved([newTabIndex, tabIndex, tabIndex + 1]);
+                setTabIndicesMoved([newTabIndex - 1, newTabIndex, newTabIndex + 1]);
             }
 
             tabIds.splice(newTabIndex, 0, tabId);
@@ -593,7 +590,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
             </div>
         ) : undefined;
 
-    console.log("draggingTAb==========", draggingTab);
+    // console.log("tabIds==========", tabIds);
 
     return (
         <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
@@ -620,6 +617,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
                                 tabWidth={tabWidthRef.current}
                                 isNew={tabId === newTabId}
                                 tabIndicesMovedAtom={tabIndicesMovedAtom}
+                                tabIds={tabIds}
                             />
                         );
                     })}