fix: remove pageMode from pageMeta (#1647)

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

@@ -19,9 +19,11 @@ import {
   useTheme as useMuiTheme,
   useTheme,
 } from '@mui/material';
+import { useAtomValue } from 'jotai';
 import type React from 'react';
 import { useMemo } from 'react';
 
+import { workspacePreferredModeAtom } from '../../../../atoms';
 import {
   usePageMeta,
   usePageMetaHelper,
@@ -102,6 +104,7 @@ export const PageList: React.FC<PageListProps> = ({
   const theme = useMuiTheme();
   const matches = useMediaQuery(theme.breakpoints.up('sm'));
   const isTrash = listType === 'trash';
+  const record = useAtomValue(workspacePreferredModeAtom);
   const list = useMemo(
     () => pageList.filter(filter[listType ?? 'all']),
     [pageList, listType]
@@ -141,7 +144,7 @@ export const PageList: React.FC<PageListProps> = ({
                 >
                   <StyledTitleWrapper>
                     <StyledTitleLink>
-                      {pageMeta.mode === 'edgeless' ? (
+                      {record[pageMeta.id] === 'edgeless' ? (
                         <EdgelessIcon />
                       ) : (
                         <PageIcon />

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

@@ -1,11 +1,10 @@
 import { toast } from '@affine/component';
 import { assertExists } from '@blocksuite/store';
+import { useAtomValue, useSetAtom } from 'jotai';
 import type { CSSProperties } from 'react';
 
-import {
-  usePageMeta,
-  usePageMetaHelper,
-} from '../../../../hooks/use-page-meta';
+import { workspacePreferredModeAtom } from '../../../../atoms';
+import { usePageMeta } from '../../../../hooks/use-page-meta';
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { StyledEditorModeSwitch } from './style';
 import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
@@ -22,34 +21,36 @@ export const EditorModeSwitch = ({
   blockSuiteWorkspace,
   pageId,
 }: EditorModeSwitchProps) => {
-  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const currentMode =
+    useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page';
+  const setMode = useSetAtom(workspacePreferredModeAtom);
   const pageMeta = usePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
   assertExists(pageMeta);
-  const { trash, mode = 'page' } = pageMeta;
+  const { trash } = pageMeta;
 
   return (
     <StyledEditorModeSwitch
       style={style}
-      switchLeft={mode === 'page'}
+      switchLeft={currentMode === 'page'}
       showAlone={trash}
     >
       <PageSwitchItem
         data-testid="switch-page-mode-button"
-        active={mode === 'page'}
-        hide={trash && mode !== 'page'}
+        active={currentMode === 'page'}
+        hide={trash && currentMode !== 'page'}
         onClick={() => {
-          setPageMeta(pageId, { mode: 'page' });
+          setMode(mode => ({ ...mode, [pageMeta.id]: 'page' }));
           toast('Page mode');
         }}
       />
       <EdgelessSwitchItem
         data-testid="switch-edgeless-mode-button"
-        active={mode === 'edgeless'}
-        hide={trash && mode !== 'edgeless'}
+        active={currentMode === 'edgeless'}
+        hide={trash && currentMode !== 'edgeless'}
         onClick={() => {
-          setPageMeta(pageId, { mode: 'edgeless' });
+          setMode(mode => ({ ...mode, [pageMeta.id]: 'edgeless' }));
           toast('Edgeless mode');
         }}
       />

apps/web/src/components/page-detail-editor.tsx

@@ -1,13 +1,13 @@
 import type { EditorContainer } from '@blocksuite/editor';
 import type { Page } from '@blocksuite/store';
 import { assertExists } from '@blocksuite/store';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import type React from 'react';
 import { useCallback } from 'react';
 
-import { currentEditorAtom } from '../atoms';
+import { currentEditorAtom, workspacePreferredModeAtom } from '../atoms';
 import { useBlockSuiteWorkspacePageTitle } from '../hooks/use-blocksuite-workspace-page-title';
 import { usePageMeta } from '../hooks/use-page-meta';
 import type { BlockSuiteWorkspace } from '../shared';
@@ -49,6 +49,8 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
   const meta = usePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
+  const currentMode =
+    useAtomValue(workspacePreferredModeAtom)[pageId] ?? 'page';
   const setEditor = useSetAtom(currentEditorAtom);
   assertExists(meta);
   return (
@@ -70,8 +72,7 @@ export const PageDetailEditor: React.FC<PageDetailEditorProps> = ({
         }}
         key={pageId}
         blockSuiteWorkspace={blockSuiteWorkspace}
-        // fixme: remove mode from meta
-        mode={isPublic ? 'page' : meta.mode ?? 'page'}
+        mode={isPublic ? 'page' : currentMode}
         page={page}
         onInit={useCallback(
           (page: Page, editor: Readonly<EditorContainer>) => {