feat: add page setting atom (#2725)

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

@@ -17,7 +17,7 @@ import { useAtom } from 'jotai';
 import type React from 'react';
 import { useMemo } from 'react';
 
-import { pageModeSelectAtom } from '../../../atoms';
+import { allPageModeSelectAtom } from '../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';
 import { toast } from '../../../utils';
@@ -107,7 +107,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     permanentlyDeletePage,
     cancelPublicPage,
   } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
-  const [filterMode] = useAtom(pageModeSelectAtom);
+  const [filterMode] = useAtom(allPageModeSelectAtom);
   const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
     usePageHelper(blockSuiteWorkspace);
   const t = useAFFiNEI18N();

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

@@ -1,7 +1,9 @@
 import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useRouter } from 'next/router';
+import { useCallback } from 'react';
 
-import { useWorkspacePreferredMode } from '../../../hooks/use-recent-views';
+import { pageSettingsAtom, setPageModeAtom } from '../../../atoms';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';
 
@@ -9,24 +11,25 @@ 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 pageSettings = useAtomValue(pageSettingsAtom);
+  const isPreferredEdgeless = useCallback(
+    (pageId: string) => pageSettings[pageId]?.mode === 'edgeless',
+    [pageSettings]
+  );
+  const setPageMode = useSetAtom(setPageModeAtom);
+  const createPageAndOpen = useCallback(() => {
     const page = createPage();
     return openPage(blockSuiteWorkspace.id, page.id);
-  };
-  const createEdgelessAndOpen = () => {
+  }, [blockSuiteWorkspace.id, createPage, openPage]);
+  const createEdgelessAndOpen = useCallback(() => {
     const page = createPage();
-    setPreferredMode(page.id, 'edgeless');
+    setPageMode(page.id, 'edgeless');
     return openPage(blockSuiteWorkspace.id, page.id);
-  };
-  const importFileAndOpen = async () => {
+  }, [blockSuiteWorkspace.id, createPage, openPage, setPageMode]);
+  const importFileAndOpen = useCallback(async () => {
     const { showImportModal } = await import('@blocksuite/blocks');
     showImportModal({ workspace: blockSuiteWorkspace });
-  };
+  }, [blockSuiteWorkspace]);
   return {
     createPage: createPageAndOpen,
     createEdgeless: createEdgelessAndOpen,

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx

@@ -1,10 +1,10 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import type { CSSProperties } from 'react';
 
-import { workspacePreferredModeAtom } from '../../../../atoms';
+import { pageSettingFamily } from '../../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { toast } from '../../../../utils';
 import { StyledEditorModeSwitch } from './style';
@@ -22,9 +22,8 @@ export const EditorModeSwitch = ({
   blockSuiteWorkspace,
   pageId,
 }: EditorModeSwitchProps) => {
-  const currentMode =
-    useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page';
-  const setMode = useSetAtom(workspacePreferredModeAtom);
+  const [setting, setSetting] = useAtom(pageSettingFamily(pageId));
+  const currentMode = setting?.mode ?? 'page';
   const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
@@ -43,11 +42,11 @@ export const EditorModeSwitch = ({
         active={currentMode === 'page'}
         hide={trash && currentMode !== 'page'}
         onClick={() => {
-          setMode(mode => {
-            if (mode[pageMeta.id] !== 'page') {
+          setSetting(setting => {
+            if (setting?.mode !== 'page') {
               toast(t['com.affine.pageMode']());
             }
-            return { ...mode, [pageMeta.id]: 'page' };
+            return { ...setting, mode: 'page' };
           });
         }}
       />
@@ -56,11 +55,11 @@ export const EditorModeSwitch = ({
         active={currentMode === 'edgeless'}
         hide={trash && currentMode !== 'edgeless'}
         onClick={() => {
-          setMode(mode => {
-            if (mode[pageMeta.id] !== 'edgeless') {
-              toast(t['com.affine.edgelessMode']());
+          setSetting(setting => {
+            if (setting?.mode !== 'edgeless') {
+              toast(t['com.affine.pageMode']());
             }
-            return { ...mode, [pageMeta.id]: 'edgeless' };
+            return { ...setting, mode: 'edgeless' };
           });
         }}
       />

apps/web/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx

@@ -18,7 +18,7 @@ import { useAtom } from 'jotai';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-import { workspacePreferredModeAtom } from '../../../../atoms';
+import { pageSettingFamily } from '../../../../atoms';
 import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
 import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
@@ -64,8 +64,8 @@ const PageMenu = () => {
     meta => meta.id === pageId
   );
   assertExists(pageMeta);
-  const [record, set] = useAtom(workspacePreferredModeAtom);
-  const mode = record[pageId] ?? 'page';
+  const [setting, setSetting] = useAtom(pageSettingFamily(pageId));
+  const mode = setting?.mode ?? 'page';
 
   const favorite = pageMeta.favorite ?? false;
   const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
@@ -98,9 +98,8 @@ const PageMenu = () => {
           icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
           data-testid="editor-option-menu-edgeless"
           onClick={() => {
-            set(record => ({
-              ...record,
-              [pageId]: mode === 'page' ? 'edgeless' : 'page',
+            setSetting(setting => ({
+              mode: setting?.mode === 'page' ? 'edgeless' : 'page',
             }));
           }}
         >