feat: add page setting atom (#2725)

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',
             }));
           }}
         >