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/core/src/components/app-sidebar/category-divider/index.css.ts

@@ -2,10 +2,12 @@ import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
-export const actions = style({
+const baseAction = style({
   display: 'flex',
   gap: 8,
+  opacity: 0,
 });
+
 export const root = style({
   fontSize: cssVar('fontXs'),
   height: 20,
@@ -23,11 +25,22 @@ export const root = style({
     [`&[data-collapsible="true"]:hover`]: {
       backgroundColor: cssVarV2('layer/background/hoverOverlay'),
     },
-    [`&[data-collapsible="true"]:hover:has(${actions}:hover)`]: {
+    [`&[data-collapsible="true"]:hover:has(${baseAction}:hover)`]: {
       backgroundColor: 'transparent',
     },
   },
 });
+
+export const actions = style([
+  baseAction,
+  {
+    selectors: {
+      [`${root}:hover &`]: {
+        opacity: 1,
+      },
+    },
+  },
+]);
 export const label = style({
   color: cssVarV2('text/tertiary'),
   fontWeight: 500,