feat(mobile): explorer create/rename operation

packages/frontend/component/src/components/member-components/invite-modal.tsx

@@ -61,7 +61,7 @@ export const InviteModal = ({
       confirmButtonOptions={{
         loading: isMutating,
         variant: 'primary',
-        ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
+        'data-testid': 'confirm-enable-affine-cloud-button',
       }}
       onConfirm={handleConfirm}
     >

packages/frontend/component/src/ui/button/button.tsx

@@ -70,6 +70,7 @@ export interface ButtonProps
   tooltip?: TooltipProps['content'];
   tooltipShortcut?: TooltipProps['shortcut'];
   tooltipOptions?: Partial<Omit<TooltipProps, 'content' | 'shortcut'>>;
+  [key: `data-${string}`]: string;
 }
 
 const IconSlot = ({

packages/frontend/component/src/ui/input/row-input.tsx

@@ -20,6 +20,7 @@ export type RowInputProps = {
   type?: HTMLInputElement['type'];
   style?: CSSProperties;
   onEnter?: () => void;
+  [key: `data-${string}`]: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'onBlur'>;
 
 // RowInput component that is used in the selector layout for search input

packages/frontend/component/src/ui/menu/desktop/sub.tsx

@@ -20,9 +20,9 @@ export const DesktopMenuSub = ({
   } = {},
 }: MenuSubProps) => {
   const { className, children, otherProps } = useMenuItem({
-    ...triggerOptions,
     children: propsChildren,
     suffixIcon: <ArrowRightSmallIcon />,
+    ...triggerOptions,
   });
 
   return (

packages/frontend/component/src/ui/menu/index.ts

@@ -30,3 +30,4 @@ export {
 };
 
 export { Menu, MenuItem, MenuSeparator, MenuSub, MenuTrigger };
+export * from './mobile/hook';

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -36,7 +36,9 @@ export interface MenuItemProps
 export interface MenuSubProps {
   children: ReactNode;
   items: ReactNode;
-  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children' | 'suffixIcon'>;
+  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children'> & {
+    [key: `data-${string}`]: string;
+  };
   portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
   subOptions?: Omit<DropdownMenuSubProps, 'children'>;
   subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;

packages/frontend/component/src/ui/menu/mobile/context.ts

@@ -8,6 +8,11 @@ import {
 import type { MenuSubProps } from '../menu.types';
 
 export type SubMenuContent = {
+  /**
+   * Customize submenu's title
+   * @default "Back"
+   */
+  title?: string;
   items: ReactNode;
   contentOptions?: MenuSubProps['subContentOptions'];
 };

packages/frontend/component/src/ui/menu/mobile/hook.ts

@@ -0,0 +1,18 @@
+import { useCallback, useContext } from 'react';
+
+import { MobileMenuContext } from './context';
+
+export const useMobileMenuController = () => {
+  const context = useContext(MobileMenuContext);
+
+  /**
+   * **A workaround to close mobile menu manually**
+   * By default, it will close automatically when `MenuItem` clicked.
+   * For custom menu content, you can use this method to close the menu.
+   */
+  const close = useCallback(() => {
+    context.setOpen?.(false);
+  }, [context]);
+
+  return { close };
+};

packages/frontend/component/src/ui/menu/mobile/root.tsx

@@ -134,9 +134,9 @@ export const MobileMenu = ({
                   className={styles.backButton}
                   prefix={<ArrowLeftSmallIcon />}
                   onClick={() => setSubMenus(prev => prev.slice(0, index))}
-                  prefixStyle={{ width: 20, height: 20 }}
+                  prefixStyle={{ width: 24, height: 24 }}
                 >
-                  {t['com.affine.backButton']()}
+                  {sub.title || t['com.affine.backButton']()}
                 </Button>
 
                 {sub.items}

packages/frontend/component/src/ui/menu/mobile/sub.tsx

@@ -7,26 +7,28 @@ import { useMenuItem } from '../use-menu-item';
 import { MobileMenuContext } from './context';
 
 export const MobileMenuSub = ({
+  title,
   children: propsChildren,
   items,
   triggerOptions,
   subContentOptions: contentOptions = {},
-}: MenuSubProps) => {
+}: MenuSubProps & { title?: string }) => {
   const {
     className,
     children,
     otherProps: { onClick, ...otherTriggerOptions },
   } = useMenuItem({
-    ...triggerOptions,
     children: propsChildren,
     suffixIcon: <ArrowRightSmallPlusIcon />,
+    ...triggerOptions,
   });
 
   return (
     <MobileMenuSubRaw
       onClick={onClick}
       items={items}
       subContentOptions={contentOptions}
+      title={title}
     >
       <div className={className} {...otherTriggerOptions}>
         {children}
@@ -36,19 +38,23 @@ export const MobileMenuSub = ({
 };
 
 export const MobileMenuSubRaw = ({
+  title,
   onClick,
   children,
   items,
   subContentOptions: contentOptions = {},
-}: MenuSubProps & { onClick?: (e: MouseEvent<HTMLDivElement>) => void }) => {
+}: MenuSubProps & {
+  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+  title?: string;
+}) => {
   const { setSubMenus } = useContext(MobileMenuContext);
 
   const onItemClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       onClick?.(e);
-      setSubMenus(prev => [...prev, { items, contentOptions }]);
+      setSubMenus(prev => [...prev, { items, contentOptions, title }]);
     },
-    [contentOptions, items, onClick, setSubMenus]
+    [contentOptions, items, onClick, setSubMenus, title]
   );
 
   return <Slot onClick={onItemClick}>{children}</Slot>;

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -40,7 +40,7 @@ export const WorkspaceDeleteModal = ({
       confirmButtonOptions={{
         variant: 'error',
         disabled: !allowDelete,
-        ['data-testid' as string]: 'delete-workspace-confirm-button',
+        'data-testid': 'delete-workspace-confirm-button',
       }}
       {...props}
     >

packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx

@@ -127,7 +127,7 @@ export const Export = ({ exportHandler, className, pageMode }: ExportProps) => {
       triggerOptions={{
         className: transitionStyle,
         prefixIcon: <ExportIcon />,
-        ['data-testid' as string]: 'export-menu',
+        'data-testid': 'export-menu',
       }}
       subOptions={{
         onOpenChange: handleExportMenuOpenChange,

packages/frontend/core/src/components/page-list/operation-menu-items/snapshot.tsx

@@ -193,7 +193,7 @@ export const Snapshot = ({ className }: SnapshotProps) => {
       triggerOptions={{
         className: transitionStyle,
         prefixIcon: <ToneIcon />,
-        ['data-testid' as string]: 'snapshot-menu',
+        'data-testid': 'snapshot-menu',
       }}
       subOptions={{}}
     >

packages/frontend/core/src/mobile/components/explorer/nodes/collection/dialog.tsx

@@ -0,0 +1,43 @@
+import { useI18n } from '@affine/i18n';
+
+import {
+  RenameDialog,
+  type RenameDialogProps,
+  RenameSubMenu,
+  type RenameSubMenuProps,
+} from '../../../rename';
+
+export const CollectionRenameSubMenu = ({
+  title,
+  text,
+  ...props
+}: RenameSubMenuProps) => {
+  const t = useI18n();
+  return (
+    <RenameSubMenu
+      title={title || t['com.affine.m.explorer.collection.rename-menu-title']()}
+      text={text || t['com.affine.m.explorer.collection.rename']()}
+      {...props}
+    />
+  );
+};
+
+const CollectionDesc = () => {
+  const t = useI18n();
+  return t['com.affine.collection.emptyCollectionDescription']();
+};
+
+export const CollectionRenameDialog = ({
+  title,
+  confirmText,
+  ...props
+}: RenameDialogProps) => {
+  return (
+    <RenameDialog
+      title={title}
+      confirmText={confirmText}
+      {...props}
+      descRenderer={CollectionDesc}
+    />
+  );
+};

packages/frontend/core/src/mobile/components/explorer/nodes/collection/index.tsx

@@ -52,23 +52,6 @@ export const ExplorerCollectionNode = ({
 
   const collection = useLiveData(collectionService.collection$(collectionId));
 
-  const handleRename = useCallback(
-    (name: string) => {
-      if (collection && collection.name !== name) {
-        collectionService.updateCollection(collectionId, () => ({
-          ...collection,
-          name,
-        }));
-
-        track.$.navigationPanel.organize.renameOrganizeItem({
-          type: 'collection',
-        });
-        notify.success({ message: t['com.affine.toastMessage.rename']() });
-      }
-    },
-    [collection, collectionId, collectionService, t]
-  );
-
   const handleOpenCollapsed = useCallback(() => {
     setCollapsed(false);
   }, []);
@@ -105,7 +88,7 @@ export const ExplorerCollectionNode = ({
       return [...additionalOperations, ...collectionOperations];
     }
     return collectionOperations;
-  }, [collectionOperations, additionalOperations]);
+  }, [additionalOperations, collectionOperations]);
 
   if (!collection) {
     return null;
@@ -115,12 +98,10 @@ export const ExplorerCollectionNode = ({
     <ExplorerTreeNode
       icon={CollectionIcon}
       name={collection.name || t['Untitled']()}
-      renameable
       collapsed={collapsed}
       setCollapsed={setCollapsed}
       to={`/collection/${collection.id}`}
       active={active}
-      onRename={handleRename}
       operations={finalOperations}
       data-testid={`explorer-collection-${collectionId}`}
     >

packages/frontend/core/src/mobile/components/explorer/nodes/collection/operations.tsx

@@ -2,6 +2,7 @@ import {
   IconButton,
   MenuItem,
   MenuSeparator,
+  notify,
   useConfirmModal,
 } from '@affine/component';
 import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
@@ -28,6 +29,8 @@ import {
 } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import { CollectionRenameSubMenu } from './dialog';
+
 export const useExplorerCollectionNodeOperations = (
   collectionId: string,
   onOpenCollapsed: () => void,
@@ -113,6 +116,24 @@ export const useExplorerCollectionNodeOperations = (
     onOpenEdit();
   }, [onOpenEdit]);
 
+  const handleRename = useCallback(
+    (name: string) => {
+      const collection = collectionService.collection$(collectionId).value;
+      if (collection && collection.name !== name) {
+        collectionService.updateCollection(collectionId, () => ({
+          ...collection,
+          name,
+        }));
+
+        track.$.navigationPanel.organize.renameOrganizeItem({
+          type: 'collection',
+        });
+        notify.success({ message: t['com.affine.toastMessage.rename']() });
+      }
+    },
+    [collectionId, collectionService, t]
+  );
+
   return useMemo(
     () => ({
       favorite,
@@ -122,13 +143,15 @@ export const useExplorerCollectionNodeOperations = (
       handleOpenInSplitView,
       handleShowEdit,
       handleToggleFavoriteCollection,
+      handleRename,
     }),
     [
       favorite,
       handleAddDocToCollection,
       handleDeleteCollection,
       handleOpenInNewTab,
       handleOpenInSplitView,
+      handleRename,
       handleShowEdit,
       handleToggleFavoriteCollection,
     ]
@@ -154,6 +177,7 @@ export const useExplorerCollectionNodeOperationsMenu = (
     handleOpenInSplitView,
     handleShowEdit,
     handleToggleFavoriteCollection,
+    handleRename,
   } = useExplorerCollectionNodeOperations(
     collectionId,
     onOpenCollapsed,
@@ -177,6 +201,14 @@ export const useExplorerCollectionNodeOperationsMenu = (
           </IconButton>
         ),
       },
+      {
+        index: 10,
+        view: <CollectionRenameSubMenu onConfirm={handleRename} />,
+      },
+      {
+        index: 11,
+        view: <MenuSeparator />,
+      },
       {
         index: 99,
         view: (
@@ -256,6 +288,7 @@ export const useExplorerCollectionNodeOperationsMenu = (
       handleDeleteCollection,
       handleOpenInNewTab,
       handleOpenInSplitView,
+      handleRename,
       handleShowEdit,
       handleToggleFavoriteCollection,
       t,

packages/frontend/core/src/mobile/components/explorer/nodes/doc/dialog.tsx

@@ -0,0 +1,18 @@
+import { useI18n } from '@affine/i18n';
+
+import { RenameSubMenu, type RenameSubMenuProps } from '../../../rename';
+
+export const DocRenameSubMenu = ({
+  title,
+  text,
+  ...props
+}: RenameSubMenuProps) => {
+  const t = useI18n();
+  return (
+    <RenameSubMenu
+      title={title || t['com.affine.m.explorer.doc.rename']()}
+      text={text || t['com.affine.m.explorer.doc.rename']()}
+      {...props}
+    />
+  );
+};