feat: add new page button (#2417)

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

@@ -5,17 +5,14 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import dayjs from 'dayjs';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import { useAtomValue } from 'jotai';
 import type React from 'react';
 import { useMemo } from 'react';
 
-import { workspacePreferredModeAtom } from '../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';
 import { toast } from '../../../utils';
 import { pageListEmptyStyle } from './index.css';
+import { formatDate, usePageHelper } from './utils';
 
 export type BlockSuitePageListProps = {
   blockSuiteWorkspace: BlockSuiteWorkspace;
@@ -34,13 +31,6 @@ const filter = {
   shared: (pageMeta: PageMeta) => pageMeta.isPublic && !pageMeta.trash,
 };
 
-dayjs.extend(localizedFormat);
-const formatDate = (date?: number | unknown) => {
-  const dateStr =
-    typeof date === 'number' ? dayjs(date).format('YYYY-MM-DD HH:mm') : '--';
-  return dateStr;
-};
-
 const PageListEmpty = (props: {
   listType: BlockSuitePageListProps['listType'];
 }) => {
@@ -80,12 +70,13 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     permanentlyDeletePage,
     cancelPublicPage,
   } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const { createPage, createEdgeless, isPreferredEdgeless } =
+    usePageHelper(blockSuiteWorkspace);
   const t = useAFFiNEI18N();
   const list = useMemo(
     () => pageMetas.filter(pageMeta => filter[listType](pageMeta, pageMetas)),
     [pageMetas, listType]
   );
-  const record = useAtomValue(workspacePreferredModeAtom);
   if (list.length === 0) {
     return <PageListEmpty listType={listType} />;
   }
@@ -93,8 +84,11 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
   if (listType === 'trash') {
     const pageList: TrashListData[] = list.map(pageMeta => {
       return {
-        icon:
-          record[pageMeta.id] === 'edgeless' ? <EdgelessIcon /> : <PageIcon />,
+        icon: isPreferredEdgeless(pageMeta.id) ? (
+          <EdgelessIcon />
+        ) : (
+          <PageIcon />
+        ),
         pageId: pageMeta.id,
         title: pageMeta.title,
         createDate: formatDate(pageMeta.createDate),
@@ -118,8 +112,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
 
   const pageList: ListData[] = list.map(pageMeta => {
     return {
-      icon:
-        record[pageMeta.id] === 'edgeless' ? <EdgelessIcon /> : <PageIcon />,
+      icon: isPreferredEdgeless(pageMeta.id) ? <EdgelessIcon /> : <PageIcon />,
       pageId: pageMeta.id,
       title: pageMeta.title,
       favorite: !!pageMeta.favorite,
@@ -158,10 +151,10 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
 
   return (
     <PageList
-      onClickPage={onOpenPage}
+      onCreateNewPage={createPage}
+      onCreateNewEdgeless={createEdgeless}
       isPublicWorkspace={isPublic}
       list={pageList}
-      listType={listType}
     />
   );
 };

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

@@ -0,0 +1,40 @@
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import { useRouter } from 'next/router';
+
+import { useWorkspacePreferredMode } from '../../../hooks/use-recent-views';
+import { useRouterHelper } from '../../../hooks/use-router-helper';
+import type { BlockSuiteWorkspace } from '../../../shared';
+
+dayjs.extend(localizedFormat);
+export const formatDate = (date?: number | unknown) => {
+  const dateStr =
+    typeof date === 'number' ? dayjs(date).format('YYYY-MM-DD HH:mm') : '--';
+  return dateStr;
+};
+
+export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
+  const router = useRouter();
+  const { openPage } = useRouterHelper(router);
+  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
+  const { getPreferredMode, setPreferredMode } = useWorkspacePreferredMode();
+  const isPreferredEdgeless = (pageId: string) => {
+    return getPreferredMode(pageId) === 'edgeless';
+  };
+
+  const createPageAndOpen = () => {
+    const page = createPage();
+    openPage(blockSuiteWorkspace.id, page.id);
+  };
+  const createEdgelessAndOpen = () => {
+    const page = createPage();
+    setPreferredMode(page.id, 'edgeless');
+    openPage(blockSuiteWorkspace.id, page.id);
+  };
+  return {
+    createPage: createPageAndOpen,
+    createEdgeless: createEdgelessAndOpen,
+    isPreferredEdgeless: isPreferredEdgeless,
+  };
+};