feat(core): add new doc button to collection item (#6521)

https://github.com/toeverything/AFFiNE/assets/102217452/3da65392-cee8-4f51-a05d-82e27027fa78

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -6,6 +6,7 @@ import {
   MenuItem,
   toast,
   Tooltip,
+  useConfirmModal,
 } from '@affine/component';
 import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
@@ -25,6 +26,7 @@ import {
   FilterMinusIcon,
   MoreVerticalIcon,
   OpenInNewIcon,
+  PlusIcon,
   ResetIcon,
   SplitViewIcon,
 } from '@blocksuite/icons';
@@ -34,6 +36,7 @@ import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import type { CollectionService } from '../../modules/collection';
+import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
 import { FavoriteTag } from './components/favorite-tag';
 import * as styles from './list.css';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
@@ -285,7 +288,10 @@ export const CollectionOperationCell = ({
   info,
 }: CollectionOperationCellProps) => {
   const t = useAFFiNEI18N();
+
   const favAdapter = useService(FavoriteItemsAdapter);
+  const { createPage } = usePageHelper(config.docCollection);
+  const { openConfirmModal } = useConfirmModal();
   const favourite = useLiveData(
     favAdapter.isFavorite$(collection.id, 'collection')
   );
@@ -336,6 +342,24 @@ export const CollectionOperationCell = ({
     );
   }, [favAdapter, collection.id, t]);
 
+  const createAndAddDocument = useCallback(() => {
+    const newDoc = createPage();
+    service.addPageToCollection(collection.id, newDoc.id);
+  }, [collection.id, createPage, service]);
+
+  const onConfirmAddDocToCollection = useCallback(() => {
+    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,
+    });
+  }, [createAndAddDocument, openConfirmModal, t]);
+
   return (
     <>
       {editModal}
@@ -380,6 +404,16 @@ export const CollectionOperationCell = ({
                   ? t['com.affine.favoritePageOperation.remove']()
                   : t['com.affine.favoritePageOperation.add']()}
               </MenuItem>
+              <MenuItem
+                onClick={onConfirmAddDocToCollection}
+                preFix={
+                  <MenuIcon>
+                    <PlusIcon />
+                  </MenuIcon>
+                }
+              >
+                {t['New Page']()}
+              </MenuItem>
               <MenuItem
                 onClick={handleDelete}
                 preFix={

packages/frontend/core/src/components/page-list/view/collection-operations.tsx

@@ -12,6 +12,7 @@ import {
   FavoritedIcon,
   FavoriteIcon,
   FilterIcon,
+  PlusIcon,
   SplitViewIcon,
 } from '@blocksuite/icons';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -30,11 +31,13 @@ export const CollectionOperations = ({
   collection,
   config,
   openRenameModal,
+  onAddDocToCollection,
   children,
 }: PropsWithChildren<{
   collection: Collection;
   config: AllPageListConfig;
   openRenameModal?: () => void;
+  onAddDocToCollection?: () => void;
 }>) => {
   const deleteInfo = useDeleteCollectionInfo();
   const { appSettings } = useAppSettingHelper();
@@ -125,6 +128,19 @@ export const CollectionOperations = ({
         name: t['com.affine.collection.menu.edit'](),
         click: showEdit,
       },
+      ...(onAddDocToCollection
+        ? [
+            {
+              icon: (
+                <MenuIcon>
+                  <PlusIcon />
+                </MenuIcon>
+              ),
+              name: t['New Page'](),
+              click: onAddDocToCollection,
+            },
+          ]
+        : []),
       {
         icon: (
           <MenuIcon>
@@ -173,6 +189,7 @@ export const CollectionOperations = ({
       t,
       showEditName,
       showEdit,
+      onAddDocToCollection,
       favorite,
       onToggleFavoritePage,
       appSettings.enableMultiView,

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -1,6 +1,11 @@
-import { AnimatedCollectionsIcon, toast } from '@affine/component';
+import {
+  AnimatedCollectionsIcon,
+  toast,
+  useConfirmModal,
+} from '@affine/component';
 import { RenameModal } from '@affine/component/rename-modal';
 import { Button, IconButton } from '@affine/component/ui/button';
+import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import {
   CollectionOperations,
   filterPage,
@@ -16,7 +21,11 @@ import { CollectionService } from '@affine/core/modules/collection';
 import { FavoriteItemsAdapter } from '@affine/core/modules/workspace';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { MoreHorizontalIcon, ViewLayersIcon } from '@blocksuite/icons';
+import {
+  MoreHorizontalIcon,
+  PlusIcon,
+  ViewLayersIcon,
+} from '@blocksuite/icons';
 import type { DocCollection } from '@blocksuite/store';
 import { type AnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -56,6 +65,8 @@ export const CollectionSidebarNavItem = ({
   const [open, setOpen] = useState(false);
   const collectionService = useService(CollectionService);
   const favAdapter = useService(FavoriteItemsAdapter);
+  const { createPage } = usePageHelper(docCollection);
+  const { openConfirmModal } = useConfirmModal();
   const t = useAFFiNEI18N();
 
   const favourites = useLiveData(favAdapter.favorites$);
@@ -138,6 +149,24 @@ export const CollectionSidebarNavItem = ({
     setOpen(true);
   }, []);
 
+  const createAndAddDocument = useCallback(() => {
+    const newDoc = createPage();
+    collectionService.addPageToCollection(collection.id, newDoc.id);
+  }, [collection.id, collectionService, createPage]);
+
+  const onConfirmAddDocToCollection = useCallback(() => {
+    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,
+    });
+  }, [createAndAddDocument, openConfirmModal, t]);
+
   return (
     <Collapsible.Root
       open={!collapsed}
@@ -168,10 +197,14 @@ export const CollectionSidebarNavItem = ({
             }}
             style={{ display: 'flex', alignItems: 'center' }}
           >
+            <IconButton onClick={onConfirmAddDocToCollection} size="small">
+              <PlusIcon />
+            </IconButton>
             <CollectionOperations
               collection={collection}
               config={config}
               openRenameModal={handleOpen}
+              onAddDocToCollection={onConfirmAddDocToCollection}
             >
               <IconButton
                 data-testid="collection-options"