refactor(mobile): use separate explorer components for mobile (#8503)

close AF-1488

- remove dnd related logic
- separate styles
- remove empty status, always show a `New` button in each level of tree

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

@@ -64,27 +64,3 @@ export const collapseIcon = style({
     },
   },
 });
-
-//  ------------- mobile -------------
-export const mobileRoot = style([
-  root,
-  {
-    height: 25,
-    padding: '0 16px',
-    selectors: {
-      '&[data-collapsible="true"]:hover': {
-        backgroundColor: 'none',
-      },
-    },
-  },
-]);
-export const mobileLabel = style([
-  label,
-  {
-    color: cssVarV2('text/primary'),
-    fontSize: 20,
-    lineHeight: '25px',
-    letterSpacing: -0.45,
-    fontWeight: 400,
-  },
-]);

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

@@ -9,7 +9,6 @@ export type CategoryDividerProps = PropsWithChildren<
     label: string;
     className?: string;
     collapsed?: boolean;
-    mobile?: boolean;
     setCollapsed?: (collapsed: boolean) => void;
   } & {
     [key: `data-${string}`]: unknown;
@@ -23,7 +22,6 @@ export const CategoryDivider = forwardRef(
       children,
       className,
       collapsed,
-      mobile,
       setCollapsed,
       ...otherProps
     }: CategoryDividerProps,
@@ -33,16 +31,15 @@ export const CategoryDivider = forwardRef(
 
     return (
       <div
-        className={clsx(mobile ? styles.mobileRoot : styles.root, className)}
+        className={clsx(styles.root, className)}
         ref={ref}
         role="switch"
         onClick={() => setCollapsed?.(!collapsed)}
-        data-mobile={mobile}
         data-collapsed={collapsed}
         data-collapsible={collapsible}
         {...otherProps}
       >
-        <div className={mobile ? styles.mobileLabel : styles.label}>
+        <div className={styles.label}>
           {label}
           {collapsible ? (
             <ToggleCollapseIcon
@@ -53,11 +50,9 @@ export const CategoryDivider = forwardRef(
             />
           ) : null}
         </div>
-        {mobile ? null : (
-          <div className={styles.actions} onClick={e => e.stopPropagation()}>
-            {children}
-          </div>
-        )}
+        <div className={styles.actions} onClick={e => e.stopPropagation()}>
+          {children}
+        </div>
       </div>
     );
   }