feat(ui): switch tab on drag over tab button

invokeai/frontend/web/src/features/ui/components/TabButton.tsx

@@ -1,10 +1,12 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { IconButton, Tooltip } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import type { TabName } from 'features/ui/store/uiTypes';
-import { forwardRef, memo, type ReactElement, useCallback } from 'react';
+import type { ReactElement } from 'react';
+import { memo, useCallback, useRef } from 'react';
 
 const sx: SystemStyleObject = {
   '&[data-selected=true]': {
@@ -12,32 +14,32 @@ const sx: SystemStyleObject = {
   },
 };
 
-export const TabButton = memo(
-  forwardRef(({ tab, icon, label }: { tab: TabName; icon: ReactElement; label: string }, ref) => {
-    const dispatch = useAppDispatch();
-    const activeTabName = useAppSelector(selectActiveTab);
-    const onClick = useCallback(() => {
-      dispatch(setActiveTab(tab));
-    }, [dispatch, tab]);
+export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: ReactElement; label: string }) => {
+  const dispatch = useAppDispatch();
+  const ref = useRef<HTMLDivElement>(null);
+  const activeTabName = useAppSelector(selectActiveTab);
+  const selectTab = useCallback(() => {
+    dispatch(setActiveTab(tab));
+  }, [dispatch, tab]);
+  useCallbackOnDragEnter(selectTab, ref, 300);
 
-    return (
-      <Tooltip label={label} placement="end">
-        <IconButton
-          ref={ref}
-          p={0}
-          onClick={onClick}
-          icon={icon}
-          size="md"
-          fontSize="24px"
-          variant="appTab"
-          data-selected={activeTabName === tab}
-          aria-label={label}
-          data-testid={label}
-          sx={sx}
-        />
-      </Tooltip>
-    );
-  })
-);
+  return (
+    <Tooltip label={label} placement="end">
+      <IconButton
+        p={0}
+        ref={ref}
+        onClick={selectTab}
+        icon={icon}
+        size="md"
+        fontSize="24px"
+        variant="appTab"
+        data-selected={activeTabName === tab}
+        aria-label={label}
+        data-testid={label}
+        sx={sx}
+      />
+    </Tooltip>
+  );
+});
 
 TabButton.displayName = 'TabButton';