retain hover effect on mouse leave while still dragging

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);

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>
             );
         }

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}