feat: new pop message on details page (#1392)

Co-authored-by: Himself65 <himself65@outlook.com>

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

@@ -26,6 +26,7 @@ export type OperationCellProps = {
   onToggleFavoritePage: (pageId: string) => void;
   onToggleTrashPage: (pageId: string) => void;
 };
+
 export const OperationCell: React.FC<OperationCellProps> = ({
   pageMeta,
   onOpenPageInNewTab,
@@ -119,9 +120,6 @@ export const TrashOperationCell: React.FC<TrashOperationCellProps> = ({
   onOpenPage,
 }) => {
   const { id, title } = pageMeta;
-  // const { openPage, getPageMeta } = usePageHelper();
-  // const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
-  // const confirm = useConfirm(store => store.confirm);
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   return (

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

@@ -1,5 +1,5 @@
 // fixme(himself65): refactor this file
-import { Menu, MenuItem } from '@affine/component';
+import { Confirm, FlexWrapper, Menu, MenuItem } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
@@ -14,6 +14,7 @@ import {
 } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useTheme } from '@mui/material';
+import { useState } from 'react';
 
 import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
@@ -23,7 +24,7 @@ import {
 } from '../../../../hooks/use-page-meta';
 import { EdgelessIcon, PaperIcon } from '../editor-mode-switch/Icons';
 
-const PopoverContent = () => {
+export const EditorOptionMenu = () => {
   const { t } = useTranslation();
   const theme = useTheme();
 
@@ -39,9 +40,9 @@ const PopoverContent = () => {
   assertExists(pageMeta);
   const { mode = 'page', favorite, trash } = pageMeta;
   const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
-  //
+  const [open, setOpen] = useState(false);
 
-  return (
+  const EditMenu = (
     <>
       <MenuItem
         data-testid="editor-option-menu-favorite"
@@ -105,9 +106,7 @@ const PopoverContent = () => {
       <MenuItem
         data-testid="editor-option-menu-delete"
         onClick={() => {
-          // fixme(himself65): regression that don't have conform dialog
-          setPageMeta(pageId, { trash: !trash, trashDate: +new Date() });
-          toast(t('Moved to Trash'));
+          setOpen(true);
         }}
         icon={<DeleteTemporarilyIcon />}
       >
@@ -115,14 +114,41 @@ const PopoverContent = () => {
       </MenuItem>
     </>
   );
-};
 
-export const EditorOptionMenu = () => {
   return (
-    <Menu content={<PopoverContent />} placement="bottom-end" trigger="click">
+    <>
+      <FlexWrapper alignItems="center" justifyContent="center">
+        <Menu
+          content={EditMenu}
+          placement="bottom-end"
+          disablePortal={true}
+          trigger="click"
+        >
           <IconButton data-testid="editor-option-menu" iconSize={[20, 20]}>
             <MoreVerticalIcon />
           </IconButton>
         </Menu>
+      </FlexWrapper>
+      <Confirm
+        title={t('Delete page?')}
+        content={t('will be moved to Trash', {
+          title: pageMeta.title || 'Untitled',
+        })}
+        confirmText={t('Delete')}
+        confirmType="danger"
+        open={open}
+        onConfirm={() => {
+          toast(t('Moved to Trash'));
+          setOpen(false);
+          setPageMeta(pageId, { trash: !trash, trashDate: +new Date() });
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      />
+    </>
   );
 };