fix(mobile): explorer node touch optimization (#8101)

close AF-1338

packages/frontend/core/src/components/app-sidebar/category-divider/index.css.ts

@@ -73,10 +73,7 @@ export const mobileRoot = style([
     padding: '0 16px',
     selectors: {
       '&[data-collapsible="true"]:hover': {
-        backgroundColor: 'transparent',
+        backgroundColor: 'none',
-      },
-      '&[data-collapsible="true"]:active': {
-        backgroundColor: cssVarV2('layer/background/hoverOverlay'),
       },
     },
   },

packages/frontend/core/src/components/app-sidebar/category-divider/index.tsx

@@ -53,9 +53,11 @@ export const CategoryDivider = forwardRef(
             />
           ) : null}
         </div>
+        {mobile ? null : (
           <div className={styles.actions} onClick={e => e.stopPropagation()}>
             {children}
           </div>
+        )}
       </div>
     );
   }

packages/frontend/core/src/modules/explorer/views/layouts/collapsible-section.tsx

@@ -78,7 +78,7 @@ export const CollapsibleSection = ({
         ref={headerRef}
         className={clsx(header, headerClassName)}
       >
-        {mobile ? null : actions}
+        {actions}
       </CategoryDivider>
       <Collapsible.Content
         data-testid="collapsible-section-content"

packages/frontend/core/src/modules/explorer/views/tree/node.css.ts

@@ -189,7 +189,7 @@ export const mobileItemRoot = style([
     gap: 12,
     selectors: {
       '&:hover': {
-        background: 'transparent',
+        background: 'none',
       },
       '&:active': {
         background: cssVar('hoverColor'),

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -138,19 +138,21 @@ export const ExplorerTreeNode = ({
     AffineDNDData & { draggable: { __cid: string } }
   >(
     () => ({
+      canDrag: () => !mobile,
       data: { ...dndData?.draggable, __cid: cid },
       dragPreviewPosition: 'pointer-outside',
     }),
-    [cid, dndData]
+    [cid, dndData, mobile]
   );
   const handleCanDrop = useMemo<DropTargetOptions<AffineDNDData>['canDrop']>(
     () => args => {
+      if (mobile) return false;
       if (!reorderable && args.treeInstruction?.type !== 'make-child') {
         return false;
       }
       return (typeof canDrop === 'function' ? canDrop(args) : canDrop) ?? true;
     },
-    [canDrop, reorderable]
+    [canDrop, mobile, reorderable]
   );
   const {
     dropTargetRef,
@@ -347,6 +349,7 @@ export const ExplorerTreeNode = ({
         </div>
 
         {postfix}
+        {mobile ? null : (
           <div
             className={styles.postfix}
             onClick={e => {
@@ -374,6 +377,7 @@ export const ExplorerTreeNode = ({
               </Menu>
             )}
           </div>
+        )}
       </div>
 
       {renameable && (