diff --git a/packages/frontend/core/src/components/page-list/operation-cell.tsx b/packages/frontend/core/src/components/page-list/operation-cell.tsx index 0954655473..e842c473e4 100644 --- a/packages/frontend/core/src/components/page-list/operation-cell.tsx +++ b/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']()} + + + + } + > + {t['New Page']()} + 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: ( + + + + ), + name: t['New Page'](), + click: onAddDocToCollection, + }, + ] + : []), { icon: ( @@ -173,6 +189,7 @@ export const CollectionOperations = ({ t, showEditName, showEdit, + onAddDocToCollection, favorite, onToggleFavoritePage, appSettings.enableMultiView, diff --git a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx index a6b9a45dfa..595f0ca011 100644 --- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx +++ b/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 ( + + +