feat(core): add confirm modal to add new doc button (#6436)

packages/frontend/core/src/components/page-list/docs/page-list-header.tsx

@@ -1,4 +1,10 @@
-import { Button, Divider, Menu, Scrollable } from '@affine/component';
+import {
+  Button,
+  Divider,
+  Menu,
+  Scrollable,
+  useConfirmModal,
+} from '@affine/component';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import type { Tag } from '@affine/core/modules/tag';
@@ -10,6 +16,7 @@ import {
   SearchIcon,
   ViewLayersIcon,
 } from '@blocksuite/icons';
+import type { Doc } from '@blocksuite/store';
 import { useLiveData, useService, Workspace } from '@toeverything/infra';
 import clsx from 'clsx';
 import { nanoid } from 'nanoid';
@@ -80,15 +87,40 @@ export const CollectionPageListHeader = ({
 
   const workspace = useService(Workspace);
   const { createEdgeless, createPage } = usePageHelper(workspace.docCollection);
+  const { openConfirmModal } = useConfirmModal();
 
-  const handleCreateEdgeless = useCallback(() => {
-    const newDoc = createEdgeless();
-    collectionService.addPageToCollection(collection.id, newDoc.id);
-  }, [collection.id, collectionService, createEdgeless]);
-  const handleCreatePage = useCallback(() => {
-    const newDoc = createPage();
-    collectionService.addPageToCollection(collection.id, newDoc.id);
-  }, [collection.id, collectionService, createPage]);
+  const createAndAddDocument = useCallback(
+    (createDocumentFn: () => Doc) => {
+      const newDoc = createDocumentFn();
+      collectionService.addPageToCollection(collection.id, newDoc.id);
+    },
+    [collection.id, collectionService]
+  );
+
+  const onConfirmAddDocument = useCallback(
+    (createDocumentFn: () => Doc) => {
+      openConfirmModal({
+        title: t['com.affine.collection.add-doc.confirm.title'](),
+        description: t['com.affine.collection.add-doc.confirm.description'](),
+        cancelText: t['Cancel'](),
+        confirmButtonOptions: {
+          type: 'primary',
+          children: t['Confirm'](),
+        },
+        onConfirm: () => createAndAddDocument(createDocumentFn),
+      });
+    },
+    [openConfirmModal, t, createAndAddDocument]
+  );
+
+  const onCreateEdgeless = useCallback(
+    () => onConfirmAddDocument(createEdgeless),
+    [createEdgeless, onConfirmAddDocument]
+  );
+  const onCreatePage = useCallback(
+    () => onConfirmAddDocument(createPage),
+    [createPage, onConfirmAddDocument]
+  );
 
   return (
     <>
@@ -110,8 +142,8 @@ export const CollectionPageListHeader = ({
           <PageListNewPageButton
             size="small"
             testId="new-page-button-trigger"
-            onCreateEdgeless={handleCreateEdgeless}
-            onCreatePage={handleCreatePage}
+            onCreateEdgeless={onCreateEdgeless}
+            onCreatePage={onCreatePage}
           >
             <div className={styles.buttonText}>{t['New Page']()}</div>
           </PageListNewPageButton>

packages/frontend/i18n/src/resources/en.json

@@ -1191,5 +1191,7 @@
   "unnamed": "unnamed",
   "upgradeBrowser": "Please upgrade to the latest version of Chrome for the best experience.",
   "will be moved to Trash": "{{title}} will be moved to Trash",
-  "will delete member": "will delete member"
+  "will delete member": "will delete member",
+  "com.affine.collection.add-doc.confirm.title": "Add new doc to this collection",
+  "com.affine.collection.add-doc.confirm.description": "Do you want to add a document to the current collection? If it is filtered based on rules, this will add a set of included rules."
 }