refactor(core): refactor atom to use di (#5831)

To support multiple instances, this PR removes some atoms and implements them using the new DI system. removed atom - `pageSettingsAtom` - `currentPageIdAtom` - `currentModeAtom`
2026-07-22 20:46:38 +08:00 · 2024-02-27 03:50:53 +00:00
parent 0dabb08217
commit ad9b0303c4
60 changed files with 602 additions and 626 deletions
@@ -1,11 +1,9 @@
-import { WorkspaceListService } from '@toeverything/infra';
-import { useService } from '@toeverything/infra/di';
+import { Page, WorkspaceListService } from '@toeverything/infra';
+import { useService, useServiceOptional } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
-import { useAtomValue } from 'jotai/react';
 import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';

-import { currentPageIdAtom } from '../../../../atoms/mode';
 import { CurrentWorkspaceService } from '../../../../modules/workspace/current-workspace';

 export interface DumpInfoProps {
@@ -18,7 +16,7 @@ export const DumpInfo = (_props: DumpInfoProps) => {
  const currentWorkspace = useLiveData(
    useService(CurrentWorkspaceService).currentWorkspace
  );
-  const currentPageId = useAtomValue(currentPageIdAtom);
+  const currentPage = useServiceOptional(Page);
  const path = location.pathname;
  const query = useParams();
  useEffect(() => {
@@ -26,9 +24,9 @@ export const DumpInfo = (_props: DumpInfoProps) => {
      path,
      query,
      currentWorkspaceId: currentWorkspace?.id,
-      currentPageId,
+      currentPageId: currentPage?.id,
      workspaceList,
    });
-  }, [path, query, currentWorkspace, currentPageId, workspaceList]);
+  }, [path, query, currentWorkspace, workspaceList, currentPage?.id]);
  return null;
 };
@@ -4,11 +4,7 @@ import {
  type ConfirmModalProps,
  Modal,
 } from '@affine/component/ui/modal';
-import {
-  authAtom,
-  openDisableCloudAlertModalAtom,
-  setPageModeAtom,
-} from '@affine/core/atoms';
+import { authAtom, openDisableCloudAlertModalAtom } from '@affine/core/atoms';
 import { useCurrentLoginStatus } from '@affine/core/hooks/affine/use-current-login-status';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { DebugLogger } from '@affine/debug';
@@ -17,11 +13,7 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { _addLocalWorkspace } from '@affine/workspace-impl';
 import { WorkspaceManager } from '@toeverything/infra';
-import { getCurrentStore } from '@toeverything/infra/atom';
-import {
-  buildShowcaseWorkspace,
-  initEmptyPage,
-} from '@toeverything/infra/blocksuite';
+import { buildShowcaseWorkspace, initEmptyPage } from '@toeverything/infra';
 import { useService } from '@toeverything/infra/di';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
@@ -234,28 +226,27 @@ export const CreateWorkspaceModal = ({
    async (name: string, workspaceFlavour: WorkspaceFlavour) => {
      // this will be the last step for web for now
      // fix me later
-      const { id } = await workspaceManager.createWorkspace(
-        workspaceFlavour,
-        async workspace => {
-          workspace.meta.setName(name);
-          if (runtimeConfig.enablePreloading) {
-            await buildShowcaseWorkspace(workspace, {
-              store: getCurrentStore(),
-              atoms: {
-                pageMode: setPageModeAtom,
-              },
-            });
-          } else {
+      if (runtimeConfig.enablePreloading) {
+        const { id } = await buildShowcaseWorkspace(
+          workspaceManager,
+          workspaceFlavour,
+          name
+        );
+        onCreate(id);
+      } else {
+        const { id } = await workspaceManager.createWorkspace(
+          workspaceFlavour,
+          async workspace => {
+            workspace.meta.setName(name);
            const page = workspace.createPage();
            workspace.setPageMeta(page.id, {
              jumpOnce: true,
            });
            initEmptyPage(page);
          }
-          logger.debug('create first workspace');
-        }
-      );
-      onCreate(id);
+        );
+        onCreate(id);
+      }
    },
    [onCreate, workspaceManager]
  );
@@ -2,7 +2,7 @@ import { Loading, Scrollable } from '@affine/component';
 import { EditorLoading } from '@affine/component/page-detail-skeleton';
 import { Button, IconButton } from '@affine/component/ui/button';
 import { ConfirmModal, Modal } from '@affine/component/ui/modal';
-import { openSettingModalAtom, type PageMode } from '@affine/core/atoms';
+import { openSettingModalAtom } from '@affine/core/atoms';
 import { useIsWorkspaceOwner } from '@affine/core/hooks/affine/use-is-workspace-owner';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useBlockSuiteWorkspacePageTitle } from '@affine/core/hooks/use-block-suite-workspace-page-title';
@@ -10,15 +10,13 @@ import { useWorkspaceQuota } from '@affine/core/hooks/use-workspace-quota';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, ToggleCollapseIcon } from '@blocksuite/icons';
-import {
-  type Page,
-  type Workspace as BlockSuiteWorkspace,
-} from '@blocksuite/store';
+import type { Page as BlockSuitePage } from '@blocksuite/store';
+import { type Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
-import { Workspace } from '@toeverything/infra';
+import { Page, type PageMode, Workspace } from '@toeverything/infra';
 import { useService } from '@toeverything/infra/di';
-import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { atom, useAtom, useSetAtom } from 'jotai';
 import {
  Fragment,
  type PropsWithChildren,
@@ -30,7 +28,6 @@ import {
 } from 'react';
 import { encodeStateAsUpdate } from 'yjs';

-import { currentModeAtom } from '../../../atoms/mode';
 import { pageHistoryModalAtom } from '../../../atoms/page-history';
 import { timestampToLocalTime } from '../../../utils';
 import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
@@ -93,7 +90,7 @@ const ModalContainer = ({

 interface HistoryEditorPreviewProps {
  ts?: string;
-  snapshotPage?: Page;
+  snapshotPage?: BlockSuitePage;
  mode: PageMode;
  onModeChange: (mode: PageMode) => void;
  title: string;
@@ -450,8 +447,8 @@ const PageHistoryManager = ({
    [activeVersion, onClose, onRestore, snapshotPage]
  );

-  const defaultPreviewPageMode = useAtomValue(currentModeAtom);
-  const [mode, setMode] = useState<PageMode>(defaultPreviewPageMode);
+  const page = useService(Page);
+  const [mode, setMode] = useState<PageMode>(page.mode.value);

  const title = useBlockSuiteWorkspacePageTitle(workspace, pageId);

@@ -4,9 +4,9 @@ import { ExportMenuItems } from '@affine/core/components/page-list';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { LinkIcon } from '@blocksuite/icons';
-import { useAtomValue } from 'jotai';
+import { Page, useLiveData } from '@toeverything/infra';
+import { useService } from '@toeverything/infra/di';

-import { currentModeAtom } from '../../../../atoms/mode';
 import { useExportPage } from '../../../../hooks/affine/use-export-page';
 import * as styles from './index.css';
 import type { ShareMenuProps } from './share-menu';
@@ -17,6 +17,7 @@ export const ShareExport = ({
  currentPage,
 }: ShareMenuProps) => {
  const t = useAFFiNEI18N();
+  const page = useService(Page);
  const workspaceId = workspace.id;
  const pageId = currentPage.id;
  const { sharingUrl, onClickCopyLink } = useSharingUrl({
@@ -25,7 +26,7 @@ export const ShareExport = ({
    urlType: 'workspace',
  });
  const exportHandler = useExportPage(currentPage);
-  const currentMode = useAtomValue(currentModeAtom);
+  const currentMode = useLiveData(page.mode);

  return (
    <>
@@ -8,14 +8,14 @@ import {
 import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { Button } from '@affine/component/ui/button';
 import { Menu, MenuItem, MenuTrigger } from '@affine/component/ui/menu';
-import type { PageMode } from '@affine/core/atoms';
-import { currentModeAtom } from '@affine/core/atoms/mode';
 import { useIsSharedPage } from '@affine/core/hooks/affine/use-is-shared-page';
 import { useServerBaseUrl } from '@affine/core/hooks/affine/use-server-config';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
-import { useAtomValue } from 'jotai';
+import { useService } from '@toeverything/infra';
+import { useLiveData } from '@toeverything/infra';
+import { Page, type PageMode } from '@toeverything/infra';
 import { useMemo, useState } from 'react';
 import { useCallback } from 'react';

@@ -56,6 +56,7 @@ export const AffineSharePage = (props: ShareMenuProps) => {
    currentPage,
  } = props;
  const pageId = currentPage.id;
+  const page = useService(Page);
  const [showDisable, setShowDisable] = useState(false);
  const {
    isSharedPage,
@@ -64,14 +65,15 @@ export const AffineSharePage = (props: ShareMenuProps) => {
    currentShareMode,
    disableShare,
  } = useIsSharedPage(workspaceId, currentPage.id);
-  const currentPageMode = useAtomValue(currentModeAtom);
+
+  const currentPageMode = useLiveData(page.mode);

  const defaultMode = useMemo(() => {
    if (isSharedPage) {
      // if it's a shared page, use the share mode
      return currentShareMode;
    }
-    // default to current page mode
+    // default to  page mode
    return currentPageMode;
  }, [currentPageMode, currentShareMode, isSharedPage]);
  const [mode, setMode] = useState<PageMode>(defaultMode);
@@ -1,4 +1,3 @@
-import type { PageMode } from '@affine/core/atoms';
 import type { BlockElement } from '@blocksuite/lit';
 import type {
  AffineEditorContainer,
@@ -6,6 +5,7 @@ import type {
  EdgelessEditor,
 } from '@blocksuite/presets';
 import { type Page, Slot } from '@blocksuite/store';
+import type { PageMode } from '@toeverything/infra';
 import clsx from 'clsx';
 import type React from 'react';
 import {
@@ -6,7 +6,6 @@ import {
  MenuSeparator,
 } from '@affine/component/ui/menu';
 import { openHistoryTipsModalAtom } from '@affine/core/atoms';
-import { currentModeAtom } from '@affine/core/atoms/mode';
 import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
 import { Export, MoveToTrash } from '@affine/core/components/page-list';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
@@ -26,8 +25,8 @@ import {
  ImportIcon,
  PageIcon,
 } from '@blocksuite/icons';
-import { useService, Workspace } from '@toeverything/infra';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { Page, useLiveData, useService, Workspace } from '@toeverything/infra';
+import { useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';

 import { HeaderDropDownButton } from '../../../pure/header-drop-down-button';
@@ -55,12 +54,12 @@ export const PageHeaderMenuButton = ({
  const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
    meta => meta.id === pageId
  );
-  const currentMode = useAtomValue(currentModeAtom);
+  const page = useService(Page);
+  const currentMode = useLiveData(page.mode);

  const { favorite, toggleFavorite } = useFavorite(pageId);

-  const { togglePageMode, duplicate } =
-    useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const { duplicate } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
  const { importFile } = usePageHelper(blockSuiteWorkspace);
  const { setTrashModal } = useTrashModalHelper(blockSuiteWorkspace);

@@ -86,13 +85,13 @@ export const PageHeaderMenuButton = ({
  }, [pageId, pageMeta, setTrashModal]);

  const handleSwitchMode = useCallback(() => {
-    togglePageMode(pageId);
+    page.toggleMode();
    toast(
      currentMode === 'page'
        ? t['com.affine.toastMessage.edgelessMode']()
        : t['com.affine.toastMessage.pageMode']()
    );
-  }, [currentMode, pageId, t, togglePageMode]);
+  }, [currentMode, page, t]);
  const menuItemStyle = {
    padding: '4px 12px',
    transition: 'all 0.3s',
@@ -1,13 +1,15 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useAtomValue } from 'jotai';
+import {
+  Page,
+  type PageMode,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
 import type { CSSProperties } from 'react';
 import { useCallback, useEffect } from 'react';

-import type { PageMode } from '../../../atoms';
-import { currentModeAtom } from '../../../atoms/mode';
-import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';
 import { toast } from '../../../utils';
 import { StyledEditorModeSwitch, StyledKeyboardItem } from './style';
@@ -44,10 +46,9 @@ export const EditorModeSwitch = ({
    meta => meta.id === pageId
  );
  const trash = pageMeta?.trash ?? false;
+  const page = useService(Page);

-  const { togglePageMode, switchToEdgelessMode, switchToPageMode } =
-    useBlockSuiteMetaHelper(blockSuiteWorkspace);
-  const currentMode = useAtomValue(currentModeAtom);
+  const currentMode = useLiveData(page.mode);

  useEffect(() => {
    if (trash || isPublic) {
@@ -56,7 +57,7 @@ export const EditorModeSwitch = ({
    const keydown = (e: KeyboardEvent) => {
      if (e.code === 'KeyS' && e.altKey) {
        e.preventDefault();
-        togglePageMode(pageId);
+        page.toggleMode();
        toast(
          currentMode === 'page'
            ? t['com.affine.toastMessage.edgelessMode']()
@@ -67,23 +68,23 @@ export const EditorModeSwitch = ({
    document.addEventListener('keydown', keydown, { capture: true });
    return () =>
      document.removeEventListener('keydown', keydown, { capture: true });
-  }, [currentMode, isPublic, pageId, t, togglePageMode, trash]);
+  }, [currentMode, isPublic, page, pageId, t, trash]);

  const onSwitchToPageMode = useCallback(() => {
    if (currentMode === 'page' || isPublic) {
      return;
    }
-    switchToPageMode(pageId);
+    page.setMode('page');
    toast(t['com.affine.toastMessage.pageMode']());
-  }, [currentMode, isPublic, pageId, switchToPageMode, t]);
+  }, [currentMode, isPublic, page, t]);

  const onSwitchToEdgelessMode = useCallback(() => {
    if (currentMode === 'edgeless' || isPublic) {
      return;
    }
-    switchToEdgelessMode(pageId);
+    page.setMode('edgeless');
    toast(t['com.affine.toastMessage.edgelessMode']());
-  }, [currentMode, isPublic, pageId, switchToEdgelessMode, t]);
+  }, [currentMode, isPublic, page, t]);

  const shouldHide = useCallback(
    (mode: PageMode) =>
@@ -3,36 +3,35 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { usePageMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useBlockSuiteWorkspaceHelper } from '@affine/core/hooks/use-block-suite-workspace-helper';
 import { WorkspaceSubPath } from '@affine/core/shared';
-import { initEmptyPage } from '@toeverything/infra/blocksuite';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useService } from '@toeverything/infra';
+import { PageRecordList } from '@toeverything/infra';
+import { initEmptyPage } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';

-import { pageSettingsAtom, setPageModeAtom } from '../../../atoms';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import type { BlockSuiteWorkspace } from '../../../shared';

 export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
  const { openPage, jumpToSubPath } = useNavigateHelper();
  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
-  const pageSettings = useAtomValue(pageSettingsAtom);
  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const pageRecordList = useService(PageRecordList);

  const isPreferredEdgeless = useCallback(
-    (pageId: string) => pageSettings[pageId]?.mode === 'edgeless',
-    [pageSettings]
+    (pageId: string) =>
+      pageRecordList.record(pageId).value?.mode.value === 'edgeless',
+    [pageRecordList]
  );

-  const setPageMode = useSetAtom(setPageModeAtom);
-
  const createPageAndOpen = useCallback(
    (mode?: 'page' | 'edgeless') => {
      const page = createPage();
      initEmptyPage(page);
-      setPageMode(page.id, mode || 'page');
+      pageRecordList.record(page.id).value?.setMode(mode || 'page');
      openPage(blockSuiteWorkspace.id, page.id);
      return page;
    },
-    [blockSuiteWorkspace.id, createPage, openPage, setPageMode]
+    [blockSuiteWorkspace.id, createPage, openPage, pageRecordList]
  );

  const createEdgelessAndOpen = useCallback(() => {
@@ -89,17 +88,17 @@ export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {

  return useMemo(() => {
    return {
+      isPreferredEdgeless,
      createPage: createPageAndOpen,
      createEdgeless: createEdgelessAndOpen,
      importFile: importFileAndOpen,
-      isPreferredEdgeless: isPreferredEdgeless,
      createLinkedPage: createLinkedPageAndOpen,
    };
  }, [
+    isPreferredEdgeless,
    createEdgelessAndOpen,
    createLinkedPageAndOpen,
    createPageAndOpen,
    importFileAndOpen,
-    isPreferredEdgeless,
  ]);
 };
@@ -1,7 +1,7 @@
-import type { PageMode } from '@affine/core/atoms';
-import { useCurrentLoginStatus } from '@affine/core/hooks/affine/use-current-login-status';
+import type { PageMode } from '@toeverything/infra';
 import { useState } from 'react';

+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import { AuthenticatedItem } from './authenticated-item';
 import { PresentButton } from './present';
 import * as styles from './styles.css';
@@ -4,15 +4,20 @@ import { useActiveBlocksuiteEditor } from '@affine/core/hooks/use-block-suite-ed
 import { useBlockSuiteWorkspacePage } from '@affine/core/hooks/use-block-suite-workspace-page';
 import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { Page, Workspace } from '@blocksuite/store';
+import type { Workspace } from '@blocksuite/store';
+import type { Page as BlockSuitePage } from '@blocksuite/store';
+import {
+  Page,
+  type PageMode,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
 import { fontStyleOptions } from '@toeverything/infra/atom';
 import clsx from 'clsx';
-import { useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
 import { memo, Suspense, useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';

-import { type PageMode, pageSettingFamily } from '../atoms';
 import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';
 import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import * as styles from './page-detail-editor.css';
@@ -23,7 +28,7 @@ declare global {
 }

 export type OnLoadEditor = (
-  page: Page,
+  page: BlockSuitePage,
  editor: AffineEditorContainer
 ) => () => void;

@@ -41,23 +46,19 @@ function useRouterHash() {

 const PageDetailEditorMain = memo(function PageDetailEditorMain({
  page,
-  pageId,
  onLoad,
  isPublic,
  publishMode,
-}: PageDetailEditorProps & { page: Page }) {
-  const pageSettingAtom = pageSettingFamily(pageId);
-  const pageSetting = useAtomValue(pageSettingAtom);
-
+}: PageDetailEditorProps & { page: BlockSuitePage }) {
+  const currentMode = useLiveData(useService(Page).mode);
  const mode = useMemo(() => {
-    const currentMode = pageSetting.mode;
    const shareMode = publishMode || currentMode;

    if (isPublic) {
      return shareMode;
    }
    return currentMode;
-  }, [isPublic, publishMode, pageSetting.mode]);
+  }, [isPublic, publishMode, currentMode]);

  const { appSettings } = useAppSettingHelper();

@@ -1,4 +1,3 @@
-import { currentPageIdAtom } from '@affine/core/atoms/mode';
 import { useCollectionManager } from '@affine/core/components/page-list';
 import {
  useBlockSuitePageMeta,
@@ -16,19 +15,24 @@ import {
  TodayIcon,
  ViewLayersIcon,
 } from '@blocksuite/icons';
-import { type PageMeta } from '@blocksuite/store';
-import { useService, Workspace } from '@toeverything/infra';
-import { getCurrentStore } from '@toeverything/infra/atom';
+import type { PageMeta } from '@blocksuite/store';
+import {
+  Page,
+  PageRecordList,
+  useLiveData,
+  Workspace,
+} from '@toeverything/infra';
 import {
  type AffineCommand,
  AffineCommandRegistry,
  type CommandCategory,
  PreconditionStrategy,
 } from '@toeverything/infra/command';
+import { useService, useServiceOptional } from '@toeverything/infra/di';
 import { atom, useAtomValue } from 'jotai';
 import { useCallback, useEffect, useMemo, useState } from 'react';

-import { pageSettingsAtom, recentPageIdsBaseAtom } from '../../../atoms';
+import { recentPageIdsBaseAtom } from '../../../atoms';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
 import { filterSortAndGroupCommands } from './filter-commands';
@@ -96,7 +100,6 @@ const useRecentPages = () => {
 export const pageToCommand = (
  category: CommandCategory,
  page: PageMeta,
-  store: ReturnType<typeof getCurrentStore>,
  navigationHelper: ReturnType<typeof useNavigateHelper>,
  getPageTitle: ReturnType<typeof useGetBlockSuiteWorkspacePageTitle>,
  isPageJournal: (pageId: string) => boolean,
@@ -105,7 +108,8 @@ export const pageToCommand = (
  subTitle?: string,
  blockId?: string
 ): CMDKCommand => {
-  const pageMode = store.get(pageSettingsAtom)?.[page.id]?.mode;
+  const pageMode = workspace.services.get(PageRecordList).record(page.id).value
+    ?.mode.value;

  const title = getPageTitle(page.id) || t['Untitled']();
  const commandLabel = {
@@ -147,7 +151,6 @@ export const pageToCommand = (
 export const usePageCommands = () => {
  const recentPages = useRecentPages();
  const pages = useWorkspacePages();
-  const store = getCurrentStore();
  const workspace = useService(Workspace);
  const pageHelper = usePageHelper(workspace.blockSuiteWorkspace);
  const pageMetaHelper = usePageMetaHelper(workspace.blockSuiteWorkspace);
@@ -185,7 +188,6 @@ export const usePageCommands = () => {
        return pageToCommand(
          'affine:recent',
          page,
-          store,
          navigationHelper,
          getPageTitle,
          isPageJournal,
@@ -207,9 +209,7 @@ export const usePageCommands = () => {
      });

      results = pages.map(page => {
-        const pageMode = store.get(pageSettingsAtom)?.[page.id]?.mode;
-        const category =
-          pageMode === 'edgeless' ? 'affine:edgeless' : 'affine:pages';
+        const category = 'affine:pages';

        const subTitle = resultValues.find(
          result => result.space === page.id
@@ -220,7 +220,6 @@ export const usePageCommands = () => {
        const command = pageToCommand(
          category,
          page,
-          store,
          navigationHelper,
          getPageTitle,
          isPageJournal,
@@ -288,7 +287,6 @@ export const usePageCommands = () => {
    searchTime,
    query,
    recentPages,
-    store,
    navigationHelper,
    getPageTitle,
    isPageJournal,
@@ -367,11 +365,9 @@ export const useCollectionsCommands = () => {
 export const useCMDKCommandGroups = () => {
  const pageCommands = usePageCommands();
  const collectionCommands = useCollectionsCommands();
-  const currentPageId = useAtomValue(currentPageIdAtom);
-  const pageSettings = useAtomValue(pageSettingsAtom);
-  const currentPageMode = currentPageId
-    ? pageSettings[currentPageId]?.mode
-    : undefined;
+
+  const currentPage = useServiceOptional(Page);
+  const currentPageMode = useLiveData(currentPage?.mode);
  const affineCommands = useMemo(() => {
    return getAllCommand({
      pageMode: currentPageMode,
@@ -1,13 +1,12 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
+import { useLiveData, useServiceOptional } from '@toeverything/infra';
+import { Page } from '@toeverything/infra';
 import { useSetAtom } from 'jotai/react';
-import { useAtomValue } from 'jotai/react';
 import { useCallback, useState } from 'react';
-import { useParams } from 'react-router-dom';

 import { openSettingModalAtom } from '../../../atoms';
-import { currentModeAtom } from '../../../atoms/mode';
 import type { SettingProps } from '../../affine/setting-modal';
 import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import {
@@ -29,7 +28,9 @@ type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts';
 const showList = environment.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST;

 export const HelpIsland = () => {
-  const mode = useAtomValue(currentModeAtom);
+  const page = useServiceOptional(Page);
+  const pageId = page?.id;
+  const mode = useLiveData(page?.mode);
  const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
  const [spread, setShowSpread] = useState(false);
  const t = useAFFiNEI18N();
@@ -53,8 +54,6 @@ export const HelpIsland = () => {
    [openSettingModal]
  );

-  const { pageId } = useParams();
-
  return (
    <StyledIsland
      spread={spread}
@@ -5,11 +5,10 @@ import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { PageMeta, Workspace } from '@blocksuite/store';
 import { useDraggable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { useAtomValue } from 'jotai/index';
+import { PageRecordList, useLiveData, useService } from '@toeverything/infra';
 import React, { useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';

-import { pageSettingFamily } from '../../../../atoms';
 import { getDragItemId } from '../../../../hooks/affine/use-sidebar-drag';
 import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
 import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
@@ -37,12 +36,13 @@ export const Page = ({

  const pageId = page.id;
  const active = params.pageId === pageId;
-  const setting = useAtomValue(pageSettingFamily(pageId));
+  const pageRecord = useLiveData(useService(PageRecordList).record(pageId));
+  const pageMode = useLiveData(pageRecord?.mode);
  const dragItemId = getDragItemId('collectionPage', pageId);

  const icon = useMemo(() => {
-    return setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
-  }, [setting?.mode]);
+    return pageMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
+  }, [pageMode]);

  const { jumpToPage } = useNavigateHelper();
  const clickPage = useCallback(() => {
@@ -4,11 +4,10 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { type PageMeta, type Workspace } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { useAtomValue } from 'jotai/react';
+import { PageRecordList, useLiveData, useService } from '@toeverything/infra';
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';

-import { pageSettingFamily } from '../../../../atoms';
 import * as styles from '../favorite/styles.css';
 import { PostfixItem } from './postfix-item';
 export interface ReferencePageProps {
@@ -28,10 +27,11 @@ export const ReferencePage = ({
  const params = useParams();
  const active = params.pageId === pageId;

-  const setting = useAtomValue(pageSettingFamily(pageId));
+  const pageRecord = useLiveData(useService(PageRecordList).record(pageId));
+  const pageMode = useLiveData(pageRecord?.mode);
  const icon = useMemo(() => {
-    return setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
-  }, [setting?.mode]);
+    return pageMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
+  }, [pageMode]);

  const references = useBlockSuitePageReferences(workspace, pageId);
  const referencesToShow = useMemo(() => {
@@ -4,11 +4,12 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import { useDraggable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { useAtomValue } from 'jotai/index';
+import { useService } from '@toeverything/infra';
+import { useLiveData } from '@toeverything/infra';
+import { PageRecordList } from '@toeverything/infra';
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';

-import { pageSettingFamily } from '../../../../atoms';
 import { getDragItemId } from '../../../../hooks/affine/use-sidebar-drag';
 import { DragMenuItemOverlay } from '../components/drag-menu-item-overlay';
 import { PostfixItem } from '../components/postfix-item';
@@ -28,11 +29,12 @@ export const FavouritePage = ({
  const params = useParams();
  const active = params.pageId === pageId;
  const dragItemId = getDragItemId('favouritePage', pageId);
+  const pageRecord = useLiveData(useService(PageRecordList).record(pageId));
+  const pageMode = useLiveData(pageRecord?.mode);

-  const setting = useAtomValue(pageSettingFamily(pageId));
  const icon = useMemo(() => {
-    return setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
-  }, [setting?.mode]);
+    return pageMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
+  }, [pageMode]);

  const references = useBlockSuitePageReferences(workspace, pageId);
  const referencesToShow = useMemo(() => {
@@ -1,5 +1,4 @@
 import { MenuItem } from '@affine/component/app-sidebar';
-import { currentPageIdAtom } from '@affine/core/atoms/mode';
 import {
  useJournalInfoHelper,
  useJournalRouteHelper,
@@ -7,7 +6,7 @@ import {
 import type { BlockSuiteWorkspace } from '@affine/core/shared';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { TodayIcon, TomorrowIcon, YesterdayIcon } from '@blocksuite/icons';
-import { useAtomValue } from 'jotai';
+import { Page, useServiceOptional } from '@toeverything/infra';
 import { useParams } from 'react-router-dom';

 interface AppSidebarJournalButtonProps {
@@ -18,11 +17,11 @@ export const AppSidebarJournalButton = ({
  workspace,
 }: AppSidebarJournalButtonProps) => {
  const t = useAFFiNEI18N();
-  const currentPageId = useAtomValue(currentPageIdAtom);
+  const currentPage = useServiceOptional(Page);
  const { openToday } = useJournalRouteHelper(workspace);
  const { journalDate, isJournal } = useJournalInfoHelper(
    workspace,
-    currentPageId
+    currentPage?.id
  );
  const params = useParams();
  const isJournalActive = isJournal && !!params.pageId;