fix(core): optimize explorer's dnd behaviors (#7769)

close AF-1198, AF-1169, AF-1204, AF-1167, AF-1168

- **fix**: empty favorite cannot be dropped(AF-1198)
- **fix**: folder close animation has a unexpected delay
- **fix**: mount explorer's DropEffect to body to avoid clipping(AF-1169)
- **feat**: drop on empty organize to create folder and put item into it(AF-1204)
- **feat**: only show explorer section's action when hovered(AF-1168)
- **feat**: animate folder icon when opened(AF-1167)
- **chore**: extract dnd related `dropEffect`, `canDrop` functions outside component

packages/frontend/component/src/ui/lottie/folder-icon.json

@@ -2,7 +2,7 @@
   "v": "5.12.1",
   "fr": 60,
   "ip": 0,
-  "op": 89,
+  "op": 6,
   "w": 240,
   "h": 240,
   "nm": "folder",

packages/frontend/component/src/ui/lottie/folder-icon.tsx

@@ -7,25 +7,31 @@ import animationData from './folder-icon.json';
 import * as styles from './styles.css';
 
 export interface FolderIconProps {
-  closed: boolean; // eg, when folder icon is a "dragged over" state
+  open: boolean; // eg, when folder icon is a "dragged over" state
   className?: string;
+  speed?: number;
 }
 
 // animated folder icon that has two states: closed and opened
-export const AnimatedFolderIcon = ({ closed, className }: FolderIconProps) => {
+export const AnimatedFolderIcon = ({
+  open,
+  className,
+  speed = 0.5,
+}: FolderIconProps) => {
   const lottieRef: LottieRef = useRef(null);
 
   useEffect(() => {
     if (lottieRef.current) {
       const lottie = lottieRef.current;
-      if (closed) {
+      lottie.setSpeed(speed);
+      if (open) {
         lottie.setDirection(1);
       } else {
         lottie.setDirection(-1);
       }
       lottie.play();
     }
-  }, [closed]);
+  }, [open, speed]);
 
   return (
     <Lottie