feat: refactor trash, page would delete from its parent's subpageIds after move to trash (#1871)

apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx

@@ -9,7 +9,6 @@ import {
 import { useTranslation } from '@affine/i18n';
 import {
   DeletePermanentlyIcon,
-  DeleteTemporarilyIcon,
   FavoritedIcon,
   FavoriteIcon,
   MoreVerticalIcon,
@@ -22,7 +21,7 @@ import { useState } from 'react';
 
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { toast } from '../../../../utils';
-import { MoveTo } from '../../../affine/operation-menu-items';
+import { MoveTo, MoveToTrash } from '../../../affine/operation-menu-items';
 
 export type OperationCellProps = {
   pageMeta: PageMeta;
@@ -30,7 +29,7 @@ export type OperationCellProps = {
   blockSuiteWorkspace: BlockSuiteWorkspace;
   onOpenPageInNewTab: (pageId: string) => void;
   onToggleFavoritePage: (pageId: string) => void;
-  onToggleTrashPage: (pageId: string) => void;
+  onToggleTrashPage: (pageId: string, isTrash: boolean) => void;
 };
 
 export const OperationCell: React.FC<OperationCellProps> = ({
@@ -74,15 +73,12 @@ export const OperationCell: React.FC<OperationCellProps> = ({
         />
       )}
       {!pageMeta.isRootPinboard && (
-        <MenuItem
-          data-testid="move-to-trash"
-          onClick={() => {
+        <MoveToTrash
+          testId="move-to-trash"
+          onItemClick={() => {
             setOpen(true);
           }}
-          icon={<DeleteTemporarilyIcon />}
-        >
-          {t('Move to Trash')}
-        </MenuItem>
+        />
       )}
     </>
   );
@@ -100,16 +96,11 @@ export const OperationCell: React.FC<OperationCellProps> = ({
           </IconButton>
         </Menu>
       </FlexWrapper>
-      <Confirm
+      <MoveToTrash.ConfirmModal
         open={open}
-        title={t('Delete page?')}
-        content={t('will be moved to Trash', {
-          title: pageMeta.title || 'Untitled',
-        })}
-        confirmText={t('Delete')}
-        confirmType="danger"
+        meta={pageMeta}
         onConfirm={() => {
-          onToggleTrashPage(id);
+          onToggleTrashPage(id, true);
           toast(t('Deleted'));
           setOpen(false);
         }}

apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx

@@ -19,9 +19,10 @@ import type { PageMeta } from '@blocksuite/store';
 import { useMediaQuery, useTheme } from '@mui/material';
 import { useAtomValue } from 'jotai';
 import type React from 'react';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { workspacePreferredModeAtom } from '../../../../atoms';
+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import {
   usePageMeta,
   usePageMetaHelper,
@@ -101,6 +102,8 @@ export const PageList: React.FC<PageListProps> = ({
 }) => {
   const pageList = usePageMeta(blockSuiteWorkspace);
   const helper = usePageMetaHelper(blockSuiteWorkspace);
+  const { removeToTrash, restoreFromTrash } =
+    useMetaHelper(blockSuiteWorkspace);
   const { t } = useTranslation();
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.up('sm'));
@@ -113,20 +116,6 @@ export const PageList: React.FC<PageListProps> = ({
       ),
     [pageList, listType]
   );
-  const restorePage = useCallback(
-    (pageMeta: PageMeta, allMetas: PageMeta[]) => {
-      helper.setPageMeta(pageMeta.id, {
-        trash: false,
-      });
-
-      allMetas
-        .filter(m => pageMeta?.subpageIds.includes(m.id))
-        .forEach(m => {
-          restorePage(m, allMetas);
-        });
-    },
-    [helper]
-  );
   if (list.length === 0) {
     return <Empty listType={listType} />;
   }
@@ -212,7 +201,7 @@ export const PageList: React.FC<PageListProps> = ({
                               blockSuiteWorkspace.removePage(pageId);
                             }}
                             onRestorePage={() => {
-                              restorePage(pageMeta, pageList);
+                              restoreFromTrash(pageMeta.id);
                             }}
                             onOpenPage={pageId => {
                               onClickPage(pageId, false);
@@ -231,11 +220,12 @@ export const PageList: React.FC<PageListProps> = ({
                                 favorite: !pageMeta.favorite,
                               });
                             }}
-                            onToggleTrashPage={() => {
-                              helper.setPageMeta(pageMeta.id, {
-                                trash: !pageMeta.trash,
-                                trashDate: +new Date(),
-                              });
+                            onToggleTrashPage={(pageId, isTrash) => {
+                              if (isTrash) {
+                                removeToTrash(pageId);
+                              } else {
+                                restoreFromTrash(pageId);
+                              }
                             }}
                           />
                         )}

apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx

@@ -14,6 +14,7 @@ import { useAtom } from 'jotai';
 import { useState } from 'react';
 
 import { workspacePreferredModeAtom } from '../../../../atoms';
+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import {
@@ -47,7 +48,7 @@ export const EditorOptionMenu = () => {
   const { favorite } = pageMeta;
   const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
   const [openConfirm, setOpenConfirm] = useState(false);
-
+  const { removeToTrash } = useMetaHelper(blockSuiteWorkspace);
   const EditMenu = (
     <>
       <MenuItem
@@ -118,11 +119,8 @@ export const EditorOptionMenu = () => {
           open={openConfirm}
           meta={pageMeta}
           onConfirm={() => {
+            removeToTrash(pageMeta.id);
             toast(t('Moved to Trash'));
-            setPageMeta(pageMeta.id, {
-              trash: true,
-              trashDate: +new Date(),
-            });
           }}
           onCancel={() => {
             setOpenConfirm(false);

apps/web/src/components/blocksuite/workspace-header/header-right-items/TrashButtonGroup.tsx

@@ -4,12 +4,10 @@ import { assertExists } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
-import {
-  usePageMeta,
-  usePageMetaHelper,
-} from '../../../../hooks/use-page-meta';
+import { usePageMeta } from '../../../../hooks/use-page-meta';
 
 export const TrashButtonGroup = () => {
   // fixme(himself65): remove these hooks ASAP
@@ -22,12 +20,12 @@ export const TrashButtonGroup = () => {
     meta => meta.id === pageId
   );
   assertExists(pageMeta);
-  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const { t } = useTranslation();
   const router = useRouter();
-  //
+  const { restoreFromTrash } = useMetaHelper(blockSuiteWorkspace);
+
   const [open, setOpen] = useState(false);
 
-  const { t } = useTranslation();
   return (
     <>
       <Button
@@ -35,7 +33,7 @@ export const TrashButtonGroup = () => {
         shape="round"
         style={{ marginRight: '24px' }}
         onClick={() => {
-          setPageMeta(pageId, { trash: false });
+          restoreFromTrash(pageId);
         }}
       >
         {t('Restore it')}