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>
-        <div className={styles.actions} onClick={e => e.stopPropagation()}>
+        {mobile ? null : (
-          {children}
+          <div className={styles.actions} onClick={e => e.stopPropagation()}>
-        </div>
+            {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,33 +349,35 @@ export const ExplorerTreeNode = ({
         </div>
 
         {postfix}
-        <div
+        {mobile ? null : (
-          className={styles.postfix}
+          <div
-          onClick={e => {
+            className={styles.postfix}
-            // prevent jump to page
+            onClick={e => {
-            e.stopPropagation();
+              // prevent jump to page
-            e.preventDefault();
+              e.stopPropagation();
-          }}
+              e.preventDefault();
-        >
+            }}
-          {inlineOperations.map(({ view }, index) => (
+          >
-            <Fragment key={index}>{view}</Fragment>
+            {inlineOperations.map(({ view }, index) => (
-          ))}
+              <Fragment key={index}>{view}</Fragment>
-          {menuOperations.length > 0 && (
+            ))}
-            <Menu
+            {menuOperations.length > 0 && (
-              items={menuOperations.map(({ view }, index) => (
+              <Menu
-                <Fragment key={index}>{view}</Fragment>
+                items={menuOperations.map(({ view }, index) => (
-              ))}
+                  <Fragment key={index}>{view}</Fragment>
-            >
+                ))}
-              <IconButton
-                size="16"
-                data-testid="explorer-tree-node-operation-button"
-                style={{ marginLeft: 4 }}
               >
-                <MoreHorizontalIcon />
+                <IconButton
-              </IconButton>
+                  size="16"
-            </Menu>
+                  data-testid="explorer-tree-node-operation-button"
-          )}
+                  style={{ marginLeft: 4 }}
-        </div>
+                >
+                  <MoreHorizontalIcon />
+                </IconButton>
+              </Menu>
+            )}
+          </div>
+        )}
       </div>
 
       {renameable && (