feat: replace react-dnd to dnd-kit (#2028)

Co-authored-by: Himself65 <himself65@outlook.com>

packages/component/src/ui/tree-view/styles.ts

@@ -16,28 +16,28 @@ export const StyledTreeNodeWrapper = styled('div')(() => {
   };
 });
 export const StyledTreeNodeContainer = styled('div')<{ isDragging?: boolean }>(
-  ({ isDragging = false, theme }) => {
+  ({ isDragging = false }) => {
     return {
       background: isDragging ? 'var(--affine-hover-color)' : '',
-      // opacity: isDragging ? 0.4 : 1,
     };
   }
 );
 
-export const StyledNodeLine = styled('div')<{ show: boolean; isTop?: boolean }>(
-  ({ show, isTop = false, theme }) => {
-    return {
-      position: 'absolute',
-      left: '0',
-      ...(isTop ? { top: '-1px' } : { bottom: '-1px' }),
-      width: '100%',
-      paddingTop: '2x',
-      borderTop: '2px solid',
-      borderColor: show ? 'var(--affine-primary-color)' : 'transparent',
-      boxShadow: show
-        ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
-        : 'none',
-      zIndex: 1,
-    };
-  }
-);
+export const StyledNodeLine = styled('div')<{
+  isOver: boolean;
+  isTop?: boolean;
+}>(({ isOver, isTop = false }) => {
+  return {
+    position: 'absolute',
+    left: '0',
+    ...(isTop ? { top: '-1px' } : { bottom: '-1px' }),
+    width: '100%',
+    paddingTop: '2x',
+    borderTop: '2px solid',
+    borderColor: isOver ? 'var(--affine-primary-color)' : 'transparent',
+    boxShadow: isOver
+      ? `0px 0px 8px ${alpha(lightTheme.primaryColor, 0.35)}`
+      : 'none',
+    zIndex: 1,
+  };
+});