feat: add new page button (#2417)

apps/web/src/atoms/index.ts

@@ -96,7 +96,13 @@ export const openDisableCloudAlertModalAtom = atom(false);
 
 export { workspacesAtom } from './root';
 
-type View = { id: string; mode: 'page' | 'edgeless' };
+type View = {
+  id: string;
+  /**
+   * @deprecated Use `mode` from `useWorkspacePreferredMode` instead.
+   */
+  mode: 'page' | 'edgeless';
+};
 
 export type WorkspaceRecentViews = Record<string, View[]>;
 
@@ -106,6 +112,9 @@ export const workspaceRecentViewsAtom = atomWithStorage<WorkspaceRecentViews>(
 );
 
 export type PreferredModeRecord = Record<Page['id'], 'page' | 'edgeless'>;
+/**
+ * @deprecated Use `useWorkspacePreferredMode` instead.
+ */
 export const workspacePreferredModeAtom = atomWithStorage<PreferredModeRecord>(
   'preferredMode',
   {}

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,
+  };
+};

apps/web/src/components/root-app-sidebar/index.tsx

@@ -84,7 +84,7 @@ export const RootAppSidebar = ({
   const blockSuiteWorkspace = currentWorkspace?.blockSuiteWorkspace;
   const t = useAFFiNEI18N();
   const onClickNewPage = useCallback(async () => {
-    const page = await createPage();
+    const page = createPage();
     openPage(page.id);
   }, [createPage, openPage]);
 

apps/web/src/hooks/use-recent-views.ts

@@ -1,6 +1,6 @@
-import type { Workspace } from '@blocksuite/store';
+import type { Page, Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { NextRouter } from 'next/router';
 import { useEffect } from 'react';
 
@@ -11,6 +11,19 @@ import {
 } from '../atoms';
 import { useCurrentWorkspace } from './current/use-current-workspace';
 
+export const useWorkspacePreferredMode = () => {
+  const [record, setPreferred] = useAtom(workspacePreferredModeAtom);
+  return {
+    getPreferredMode: (pageId: Page['id']) => record[pageId] ?? 'page',
+    setPreferredMode: (pageId: Page['id'], mode: 'page' | 'edgeless') => {
+      setPreferred(record => ({
+        ...record,
+        [pageId]: mode,
+      }));
+    },
+  };
+};
+
 export function useRecentlyViewed() {
   const [workspace] = useCurrentWorkspace();
   const workspaceId = workspace?.id || null;
@@ -30,15 +43,19 @@ export function useSyncRecentViewsWithRouter(
   const meta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
-  const currentMode = useAtomValue(workspacePreferredModeAtom)[
-    pageId as string
-  ];
+  const { getPreferredMode } = useWorkspacePreferredMode();
+
+  const currentMode =
+    typeof pageId === 'string' ? getPreferredMode(pageId) : 'page';
   useEffect(() => {
     if (!workspaceId) return;
     if (pageId && meta) {
       set(workspaceId, {
         id: pageId as string,
-        mode: currentMode ?? 'page',
+        /**
+         * @deprecated No necessary update `mode` at here, use `mode` from {@link useWorkspacePreferredMode} directly.
+         */
+        mode: currentMode,
       });
     }
   }, [pageId, meta, workspaceId, set, currentMode]);