refactor: lazy load workspaces (#3091)

(cherry picked from commit 283f0cd263)
2026-02-12 20:38:52 +00:00 · 2023-07-07 22:15:27 +08:00
parent e6530f5017
commit 1908d1a213
45 changed files with 446 additions and 750 deletions
--- a/apps/web/src/adapters/local/index.tsx
+++ b/apps/web/src/adapters/local/index.tsx
@@ -17,7 +17,10 @@ import {
  saveWorkspaceToLocalStorage,
 } from '@affine/workspace/local/crud';
 import { createIndexedDBDownloadProvider } from '@affine/workspace/providers';
-import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
+import {
+  createEmptyBlockSuiteWorkspace,
+  useStaticBlockSuiteWorkspace,
+} from '@affine/workspace/utils';
 import { nanoid } from '@blocksuite/store';

 import {
@@ -75,13 +78,11 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
    Provider: ({ children }) => {
      return <>{children}</>;
    },
-    PageDetail: ({ currentWorkspace, currentPageId, onLoadEditor }) => {
-      const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+    PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
+      const workspace = useStaticBlockSuiteWorkspace(currentWorkspaceId);
+      const page = workspace.getPage(currentPageId);
      if (!page) {
-        throw new PageNotFoundError(
-          currentWorkspace.blockSuiteWorkspace,
-          currentPageId
-        );
+        throw new PageNotFoundError(workspace, currentPageId);
      }
      return (
        <>
@@ -89,7 +90,7 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
            pageId={currentPageId}
            onInit={initEmptyPage}
            onLoad={onLoadEditor}
-            workspace={currentWorkspace}
+            workspace={workspace}
          />
        </>
      );
@@ -105,14 +106,14 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
      );
    },
    NewSettingsDetail: ({
-      currentWorkspace,
+      currentWorkspaceId,
      onDeleteWorkspace,
      onTransformWorkspace,
    }) => {
      return (
        <NewWorkspaceSettingDetail
          onDeleteWorkspace={onDeleteWorkspace}
-          workspace={currentWorkspace}
+          workspaceId={currentWorkspaceId}
          onTransferWorkspace={onTransformWorkspace}
        />
      );
--- a/apps/web/src/atoms/tests/atom.spec.ts
+++ b/apps/web/src/atoms/tests/atom.spec.ts
@@ -3,34 +3,14 @@
 */
 import 'fake-indexeddb/auto';

-import { initEmptyPage } from '@affine/env/blocksuite';
-import type {
-  LocalIndexedDBBackgroundProvider,
-  WorkspaceAdapter,
-} from '@affine/env/workspace';
-import { WorkspaceFlavour, WorkspaceVersion } from '@affine/env/workspace';
-import {
-  rootCurrentWorkspaceIdAtom,
-  rootWorkspacesMetadataAtom,
-  workspaceAdaptersAtom,
-} from '@affine/workspace/atom';
-import { createIndexedDBBackgroundProvider } from '@affine/workspace/providers';
-import {
-  _cleanupBlockSuiteWorkspaceCache,
-  createEmptyBlockSuiteWorkspace,
-} from '@affine/workspace/utils';
-import type { ParagraphBlockModel } from '@blocksuite/blocks/models';
-import type { Page } from '@blocksuite/store';
 import { createStore } from 'jotai';
 import { describe, expect, test } from 'vitest';

-import { WorkspaceAdapters } from '../../adapters/workspace';
 import {
  pageSettingFamily,
  pageSettingsAtom,
  recentPageSettingsAtom,
 } from '../index';
-import { rootCurrentWorkspaceAtom } from '../root';

 describe('page mode atom', () => {
  test('basic', () => {
@@ -63,66 +43,3 @@ describe('page mode atom', () => {
    ]);
  });
 });
-
-describe('currentWorkspace atom', () => {
-  test('should be defined', async () => {
-    const store = createStore();
-    store.set(
-      workspaceAdaptersAtom,
-      WorkspaceAdapters as Record<
-        WorkspaceFlavour,
-        WorkspaceAdapter<WorkspaceFlavour>
-      >
-    );
-    let id: string;
-    {
-      const workspace = createEmptyBlockSuiteWorkspace(
-        'test',
-        WorkspaceFlavour.LOCAL
-      );
-      const page = workspace.createPage({ id: 'page0' });
-      await initEmptyPage(page);
-      const frameId = page.getBlockByFlavour('affine:note').at(0)?.id as string;
-      id = page.addBlock(
-        'affine:paragraph',
-        {
-          text: new page.Text('test 1'),
-        },
-        frameId
-      );
-      const provider = createIndexedDBBackgroundProvider(
-        workspace.id,
-        workspace.doc,
-        {
-          awareness: workspace.awarenessStore.awareness,
-        }
-      ) as LocalIndexedDBBackgroundProvider;
-      provider.connect();
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      provider.disconnect();
-      const workspaceId = await WorkspaceAdapters[
-        WorkspaceFlavour.LOCAL
-      ].CRUD.create(workspace);
-      await store.set(rootWorkspacesMetadataAtom, [
-        {
-          id: workspaceId,
-          flavour: WorkspaceFlavour.LOCAL,
-          version: WorkspaceVersion.SubDoc,
-        },
-      ]);
-      _cleanupBlockSuiteWorkspaceCache();
-    }
-    store.set(
-      rootCurrentWorkspaceIdAtom,
-      (await store.get(rootWorkspacesMetadataAtom))[0].id
-    );
-    const workspace = await store.get(rootCurrentWorkspaceAtom);
-    expect(workspace).toBeDefined();
-    const page = workspace.blockSuiteWorkspace.getPage('page0') as Page;
-    await page.waitForLoaded();
-    expect(page).not.toBeNull();
-    const paragraphBlock = page.getBlockById(id) as ParagraphBlockModel;
-    expect(paragraphBlock).not.toBeNull();
-    expect(paragraphBlock.text.toString()).toBe('test 1');
-  });
-});
--- a/apps/web/src/atoms/index.ts
+++ b/apps/web/src/atoms/index.ts
@@ -10,20 +10,18 @@ export const openCreateWorkspaceModalAtom = atom<CreateWorkspaceMode>(false);
 export const openQuickSearchModalAtom = atom(false);
 export const openOnboardingModalAtom = atom(false);

-export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspace'> & {
+export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspaceId'> & {
  open: boolean;
 };

 export const openSettingModalAtom = atom<SettingAtom>({
  activeTab: 'appearance',
-  workspace: null,
+  workspaceId: null,
  open: false,
 });

 export const openDisableCloudAlertModalAtom = atom(false);

-export { workspacesAtom } from './root';
-
 type PageMode = 'page' | 'edgeless';
 type PageLocalSetting = {
  mode: PageMode;
--- a/apps/web/src/atoms/root.ts
+++ b/apps/web/src/atoms/root.ts
@@ -1,160 +0,0 @@
-//#region async atoms that to load the real workspace data
-import { DebugLogger } from '@affine/debug';
-import type {
-  WorkspaceAdapter,
-  WorkspaceRegistry,
-} from '@affine/env/workspace';
-import type { WorkspaceFlavour } from '@affine/env/workspace';
-import {
-  rootCurrentWorkspaceIdAtom,
-  rootWorkspacesMetadataAtom,
-  workspaceAdaptersAtom,
-} from '@affine/workspace/atom';
-import { assertExists } from '@blocksuite/global/utils';
-import type { ActiveDocProvider } from '@blocksuite/store';
-import { atom } from 'jotai';
-
-import type { AllWorkspace } from '../shared';
-
-const logger = new DebugLogger('web:atoms:root');
-
-/**
- * Fetch all workspaces from the Plugin CRUD
- */
-export const workspacesAtom = atom<Promise<AllWorkspace[]>>(
-  async (get, { signal }) => {
-    const WorkspaceAdapters = get(workspaceAdaptersAtom);
-    const flavours: string[] = Object.values(WorkspaceAdapters).map(
-      plugin => plugin.flavour
-    );
-    const jotaiWorkspaces = (await get(rootWorkspacesMetadataAtom)).filter(
-      workspace => flavours.includes(workspace.flavour)
-    );
-    if (jotaiWorkspaces.some(meta => !('version' in meta))) {
-      // wait until all workspaces have migrated to v2
-      await new Promise((resolve, reject) => {
-        signal.addEventListener('abort', reject);
-        setTimeout(resolve, 1000);
-      }).catch(() => {
-        // do nothing
-      });
-    }
-    const workspaces = await Promise.all(
-      jotaiWorkspaces.map(workspace => {
-        const adapter = WorkspaceAdapters[
-          workspace.flavour
-        ] as WorkspaceAdapter<WorkspaceFlavour>;
-        assertExists(adapter);
-        const { CRUD } = adapter;
-        return CRUD.get(workspace.id).then(workspace => {
-          if (workspace === null) {
-            console.warn(
-              'workspace is null. this should not happen. If you see this error, please report it to the developer.'
-            );
-          }
-          return workspace;
-        });
-      })
-    ).then(workspaces =>
-      workspaces.filter(
-        (workspace): workspace is WorkspaceRegistry['affine-cloud' | 'local'] =>
-          workspace !== null
-      )
-    );
-    const workspaceProviders = workspaces.map(workspace =>
-      workspace.blockSuiteWorkspace.providers.filter(
-        (provider): provider is ActiveDocProvider =>
-          'active' in provider && provider.active
-      )
-    );
-    const promises: Promise<void>[] = [];
-    for (const providers of workspaceProviders) {
-      for (const provider of providers) {
-        provider.sync();
-        promises.push(provider.whenReady);
-      }
-    }
-    // we will wait for all the necessary providers to be ready
-    await Promise.all(promises);
-    logger.info('workspaces', workspaces);
-    return workspaces;
-  }
-);
-
-/**
- * This will throw an error if the workspace is not found,
- * should not be used on the root component,
- * use `rootCurrentWorkspaceIdAtom` instead
- */
-export const rootCurrentWorkspaceAtom = atom<Promise<AllWorkspace>>(
-  async (get, { signal }) => {
-    const WorkspaceAdapters = get(workspaceAdaptersAtom);
-    const metadata = await get(rootWorkspacesMetadataAtom);
-    const targetId = get(rootCurrentWorkspaceIdAtom);
-    if (targetId === null) {
-      throw new Error(
-        'current workspace id is null. this should not happen. If you see this error, please report it to the developer.'
-      );
-    }
-    const targetWorkspace = metadata.find(meta => meta.id === targetId);
-    if (!targetWorkspace) {
-      throw new Error(`cannot find the workspace with id ${targetId}.`);
-    }
-
-    if (!('version' in targetWorkspace)) {
-      // wait until the workspace has migrated to v2
-      await new Promise((resolve, reject) => {
-        signal.addEventListener('abort', reject);
-        setTimeout(resolve, 1000);
-      }).catch(() => {
-        // do nothing
-      });
-    }
-
-    const adapter = WorkspaceAdapters[
-      targetWorkspace.flavour
-    ] as WorkspaceAdapter<WorkspaceFlavour>;
-    assertExists(adapter);
-
-    const workspace = await adapter.CRUD.get(targetWorkspace.id);
-    if (!workspace) {
-      throw new Error(
-        `cannot find the workspace with id ${targetId} in the plugin ${targetWorkspace.flavour}.`
-      );
-    }
-
-    const providers = workspace.blockSuiteWorkspace.providers.filter(
-      (provider): provider is ActiveDocProvider =>
-        'active' in provider && provider.active === true
-    );
-    for (const provider of providers) {
-      provider.sync();
-      // we will wait for the necessary providers to be ready
-      await provider.whenReady;
-    }
-    logger.info('current workspace', workspace);
-    globalThis.currentWorkspace = workspace;
-    globalThis.dispatchEvent(
-      new CustomEvent('affine:workspace:change', {
-        detail: { id: workspace.id },
-      })
-    );
-    return workspace;
-  }
-);
-
-declare global {
-  /**
-   * @internal debug only
-   */
-  // eslint-disable-next-line no-var
-  var currentWorkspace: AllWorkspace | undefined;
-  interface WindowEventMap {
-    'affine:workspace:change': CustomEvent<{ id: string }>;
-  }
-}
-
-// Do not add `rootCurrentWorkspacePageAtom`, this is not needed.
-// It can be derived from `rootCurrentWorkspaceAtom` and `rootCurrentPageIdAtom`
-
-//#endregion
--- a/apps/web/src/components/affine/new-workspace-setting-detail/index.tsx
+++ b/apps/web/src/components/affine/new-workspace-setting-detail/index.tsx
@@ -11,7 +11,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import type { FC } from 'react';

-import type { AffineOfficialWorkspace } from '../../../shared';
+import { useWorkspace } from '../../../hooks/use-workspace';
 import { DeleteLeaveWorkspace } from './delete-leave-workspace';
 import { ExportPanel } from './export';
 import { ProfilePanel } from './profile';
@@ -19,7 +19,7 @@ import { PublishPanel } from './publish';
 import { StoragePanel } from './storage';

 export type WorkspaceSettingDetailProps = {
-  workspace: AffineOfficialWorkspace;
+  workspaceId: string;
  onDeleteWorkspace: (id: string) => Promise<void>;
  onTransferWorkspace: <
    From extends WorkspaceFlavour,
@@ -32,11 +32,12 @@ export type WorkspaceSettingDetailProps = {
 };

 export const WorkspaceSettingDetail: FC<WorkspaceSettingDetailProps> = ({
-  workspace,
+  workspaceId,
  onDeleteWorkspace,
  ...props
 }) => {
  const t = useAFFiNEI18N();
+  const workspace = useWorkspace(workspaceId);
  const [name] = useBlockSuiteWorkspaceName(workspace.blockSuiteWorkspace);

  return (
--- a/apps/web/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/apps/web/src/components/affine/new-workspace-setting-detail/profile.tsx
@@ -64,7 +64,10 @@ export const ProfilePanel: FC<{
            <div className="camera-icon-wrapper">
              <CameraIcon />
            </div>
-            <WorkspaceAvatar size={56} workspace={workspace} />
+            <WorkspaceAvatar
+              size={56}
+              workspace={workspace.blockSuiteWorkspace}
+            />
          </>
        </Upload>
      </div>
--- a/apps/web/src/components/affine/new-workspace-setting-detail/publish.tsx
+++ b/apps/web/src/components/affine/new-workspace-setting-detail/publish.tsx
@@ -18,13 +18,22 @@ import { TmpDisableAffineCloudModal } from '../tmp-disable-affine-cloud-modal';
 import type { WorkspaceSettingDetailProps } from './index';
 import * as style from './style.css';

-export type PublishPanelProps = WorkspaceSettingDetailProps & {
+export type PublishPanelProps = Omit<
+  WorkspaceSettingDetailProps,
+  'workspaceId'
+> & {
  workspace: AffineOfficialWorkspace;
 };
-export type PublishPanelLocalProps = WorkspaceSettingDetailProps & {
+export type PublishPanelLocalProps = Omit<
+  WorkspaceSettingDetailProps,
+  'workspaceId'
+> & {
  workspace: LocalWorkspace;
 };
-export type PublishPanelAffineProps = WorkspaceSettingDetailProps & {
+export type PublishPanelAffineProps = Omit<
+  WorkspaceSettingDetailProps,
+  'workspaceId'
+> & {
  workspace: AffineCloudWorkspace;
 };

--- a/apps/web/src/components/affine/setting-modal/index.tsx
+++ b/apps/web/src/components/affine/setting-modal/index.tsx
@@ -4,14 +4,13 @@ import {
 } from '@affine/component/setting-components';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { ContactWithUsIcon } from '@blocksuite/icons';
-import type { PassiveDocProvider } from '@blocksuite/store';
-import { noop } from 'foxact/noop';
+import { useAtomValue } from 'jotai';
 import type React from 'react';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';

 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
-import { useWorkspaces } from '../../../hooks/use-workspaces';
 import type { AllWorkspace } from '../../../shared';
 import { AccountSetting } from './account-setting';
 import {
@@ -26,70 +25,52 @@ import { WorkspaceSetting } from './workspace-setting';
 type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
 export type SettingProps = {
  activeTab: ActiveTab;
-  workspace: AllWorkspace | null;
+  workspaceId: string | null;
  onSettingClick: (params: {
    activeTab: ActiveTab;
-    workspace: AllWorkspace | null;
+    workspaceId: string | null;
  }) => void;
 };
 export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
  open,
  setOpen,
  activeTab = 'appearance',
-  workspace = null,
+  workspaceId = null,
  onSettingClick,
 }) => {
  const t = useAFFiNEI18N();

-  const workspaces = useWorkspaces();
+  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
  const [currentWorkspace] = useCurrentWorkspace();
  const generalSettingList = useGeneralSettingList();
  const workspaceList = useMemo(() => {
    return workspaces.filter(
      ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
-    ) as AllWorkspace[];
+    );
  }, [workspaces]);

  const onGeneralSettingClick = useCallback(
    (key: GeneralSettingKeys) => {
      onSettingClick({
        activeTab: key,
-        workspace: null,
+        workspaceId: null,
      });
    },
    [onSettingClick]
  );
  const onWorkspaceSettingClick = useCallback(
-    (workspace: AllWorkspace) => {
+    (workspaceId: string) => {
      onSettingClick({
        activeTab: 'workspace',
-        workspace,
+        workspaceId,
      });
    },
    [onSettingClick]
  );
  const onAccountSettingClick = useCallback(() => {
-    onSettingClick({ activeTab: 'account', workspace: null });
+    onSettingClick({ activeTab: 'account', workspaceId: null });
  }, [onSettingClick]);

-  useEffect(() => {
-    if (workspace && workspace !== currentWorkspace) {
-      const providers = workspace.blockSuiteWorkspace.providers.filter(
-        (provider): provider is PassiveDocProvider =>
-          'passive' in provider && provider.passive
-      );
-      providers.forEach(provider => {
-        provider.connect();
-      });
-      return () => {
-        providers.forEach(provider => {
-          provider.disconnect();
-        });
-      };
-    }
-    return noop;
-  }, [currentWorkspace, workspace]);
-
  return (
    <SettingModalBase open={open} setOpen={setOpen}>
      <SettingSidebar
@@ -99,15 +80,15 @@ export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
        workspaceList={workspaceList}
        onWorkspaceSettingClick={onWorkspaceSettingClick}
        selectedGeneralKey={activeTab}
-        selectedWorkspace={workspace}
+        selectedWorkspaceId={workspaceId}
        onAccountSettingClick={onAccountSettingClick}
      />

      <div className={settingContent}>
        <div className="wrapper">
          <div className="content">
-            {activeTab === 'workspace' && workspace ? (
-              <WorkspaceSetting key={workspace.id} workspace={workspace} />
+            {activeTab === 'workspace' && workspaceId ? (
+              <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
            ) : null}
            {generalSettingList.find(v => v.key === activeTab) ? (
              <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
--- a/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -1,6 +1,8 @@
 import { UserAvatar } from '@affine/component/user-avatar';
 import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { useStaticBlockSuiteWorkspace } from '@affine/workspace/utils';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import clsx from 'clsx';

@@ -24,17 +26,17 @@ export const SettingSidebar = ({
  currentWorkspace,
  workspaceList,
  onWorkspaceSettingClick,
-  selectedWorkspace,
+  selectedWorkspaceId,
  selectedGeneralKey,
  onAccountSettingClick,
 }: {
  generalSettingList: GeneralSettingList;
  onGeneralSettingClick: (key: GeneralSettingKeys) => void;
  currentWorkspace: AllWorkspace;
-  workspaceList: AllWorkspace[];
-  onWorkspaceSettingClick: (workspace: AllWorkspace) => void;
+  workspaceList: RootWorkspaceMetadata[];
+  onWorkspaceSettingClick: (workspaceId: string) => void;

-  selectedWorkspace: AllWorkspace | null;
+  selectedWorkspaceId: string | null;
  selectedGeneralKey: string | null;
  onAccountSettingClick: () => void;
 }) => {
@@ -72,12 +74,12 @@ export const SettingSidebar = ({
          return (
            <WorkspaceListItem
              key={workspace.id}
-              workspace={workspace}
+              meta={workspace}
              onClick={() => {
-                onWorkspaceSettingClick(workspace);
+                onWorkspaceSettingClick(workspace.id);
              }}
              isCurrent={workspace.id === currentWorkspace.id}
-              isActive={workspace.id === selectedWorkspace?.id}
+              isActive={workspace.id === selectedWorkspaceId}
            />
          );
        })}
@@ -107,19 +109,18 @@ export const SettingSidebar = ({
 };

 const WorkspaceListItem = ({
-  workspace,
+  meta,
  onClick,
  isCurrent,
  isActive,
 }: {
-  workspace: AllWorkspace;
+  meta: RootWorkspaceMetadata;
  onClick: () => void;
  isCurrent: boolean;
  isActive: boolean;
 }) => {
-  const [workspaceName] = useBlockSuiteWorkspaceName(
-    workspace.blockSuiteWorkspace ?? null
-  );
+  const workspace = useStaticBlockSuiteWorkspace(meta.id);
+  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
  return (
    <div
      className={clsx(sidebarSelectItem, { active: isActive })}
--- a/apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx
+++ b/apps/web/src/components/affine/setting-modal/workspace-setting/index.tsx
@@ -1,16 +1,16 @@
 import { Suspense, useCallback } from 'react';

 import { getUIAdapter } from '../../../../adapters/workspace';
+import { usePassiveWorkspaceEffect } from '../../../../hooks/current/use-current-workspace';
 import { useOnTransformWorkspace } from '../../../../hooks/root/use-on-transform-workspace';
+import { useWorkspace } from '../../../../hooks/use-workspace';
 import { useAppHelper } from '../../../../hooks/use-workspaces';
-import type { AllWorkspace } from '../../../../shared';

-export const WorkspaceSetting = ({
-  workspace,
-}: {
-  workspace: AllWorkspace;
-}) => {
+export const WorkspaceSetting = ({ workspaceId }: { workspaceId: string }) => {
+  const workspace = useWorkspace(workspaceId);
+  usePassiveWorkspaceEffect(workspace.blockSuiteWorkspace);
  const helper = useAppHelper();
+
  const { NewSettingsDetail } = getUIAdapter(workspace.flavour);

  const onDeleteWorkspace = useCallback(
@@ -26,7 +26,7 @@ export const WorkspaceSetting = ({
      <NewSettingsDetail
        onTransformWorkspace={onTransformWorkspace}
        onDeleteWorkspace={onDeleteWorkspace}
-        currentWorkspace={workspace}
+        currentWorkspaceId={workspaceId}
      />
    </Suspense>
  );
--- a/apps/web/src/components/page-detail-editor.tsx
+++ b/apps/web/src/components/page-detail-editor.tsx
@@ -7,7 +7,7 @@ import {
 import { rootBlockHubAtom } from '@affine/workspace/atom';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
-import type { Page } from '@blocksuite/store';
+import type { Page, Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-block-suite-workspace-page-title';
@@ -28,14 +28,13 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { pageSettingFamily } from '../atoms';
 import { contentLayoutAtom } from '../atoms/layout';
 import { useAppSetting } from '../atoms/settings';
-import type { AffineOfficialWorkspace } from '../shared';
 import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import { editor } from './page-detail-editor.css';
 import { pluginContainer } from './page-detail-editor.css';

 export type PageDetailEditorProps = {
  isPublic?: boolean;
-  workspace: AffineOfficialWorkspace;
+  workspace: Workspace;
  pageId: string;
  onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
  onLoad?: (page: Page, editor: EditorContainer) => () => void;
@@ -53,12 +52,11 @@ const EditorWrapper = memo(function EditorWrapper({
    () => Object.values(affinePluginsMap),
    [affinePluginsMap]
  );
-  const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
-  const page = useBlockSuiteWorkspacePage(blockSuiteWorkspace, pageId);
+  const page = useBlockSuiteWorkspacePage(workspace, pageId);
  if (!page) {
-    throw new PageNotFoundError(blockSuiteWorkspace, pageId);
+    throw new PageNotFoundError(workspace, pageId);
  }
-  const meta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
+  const meta = useBlockSuitePageMeta(workspace).find(
    meta => meta.id === pageId
  );
  const pageSettingAtom = pageSettingFamily(pageId);
@@ -77,7 +75,7 @@ const EditorWrapper = memo(function EditorWrapper({
      className={clsx(editor, {
        'full-screen': appSettings?.fullWidthLayout,
      })}
-      key={`${workspace.flavour}-${workspace.id}-${pageId}`}
+      key={`${workspace.id}-${pageId}`}
      mode={isPublic ? 'page' : currentMode}
      page={page}
      onInit={useCallback(
@@ -181,12 +179,11 @@ const LayoutPanel = memo(function LayoutPanel(

 export const PageDetailEditor: FC<PageDetailEditorProps> = props => {
  const { workspace, pageId } = props;
-  const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
-  const page = useBlockSuiteWorkspacePage(blockSuiteWorkspace, pageId);
+  const page = useBlockSuiteWorkspacePage(workspace, pageId);
  if (!page) {
-    throw new PageNotFoundError(blockSuiteWorkspace, pageId);
+    throw new PageNotFoundError(workspace, pageId);
  }
-  const title = useBlockSuiteWorkspacePageTitle(blockSuiteWorkspace, pageId);
+  const title = useBlockSuiteWorkspacePageTitle(workspace, pageId);

  const layout = useAtomValue(contentLayoutAtom);
  const affinePluginsMap = useAtomValue(affinePluginsAtom);
--- a/apps/web/src/components/pure/help-island/index.tsx
+++ b/apps/web/src/components/pure/help-island/index.tsx
@@ -41,7 +41,7 @@ export const HelpIsland = ({
    setOpenSettingModalAtom({
      open: true,
      activeTab: 'about',
-      workspace: null,
+      workspaceId: null,
    });
  }, [setOpenSettingModalAtom]);

--- a/apps/web/src/components/pure/quick-search-modal/config.ts
+++ b/apps/web/src/components/pure/quick-search-modal/config.ts
@@ -1,9 +1,5 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import {
-  DeleteTemporarilyIcon,
-  FolderIcon,
-  SettingsIcon,
-} from '@blocksuite/icons';
+import { DeleteTemporarilyIcon, FolderIcon } from '@blocksuite/icons';
 import type { FC, SVGProps } from 'react';
 import { useMemo } from 'react';

@@ -23,11 +19,11 @@ export const useSwitchToConfig = (
        href: pathGenerator.all(workspaceId),
        icon: FolderIcon,
      },
-      {
-        title: t['Workspace Settings'](),
-        href: pathGenerator.setting(workspaceId),
-        icon: SettingsIcon,
-      },
+      // {
+      //   title: t['Workspace Settings'](),
+      //   href: pathGenerator.setting(workspaceId),
+      //   icon: SettingsIcon,
+      // },
      {
        title: t['Trash'](),
        href: pathGenerator.trash(workspaceId),
--- a/apps/web/src/components/pure/workspace-list-modal/index.tsx
+++ b/apps/web/src/components/pure/workspace-list-modal/index.tsx
@@ -14,6 +14,7 @@ import type {
 } from '@affine/env/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { HelpIcon, ImportIcon, PlusIcon } from '@blocksuite/icons';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { useCallback, useRef } from 'react';
@@ -40,12 +41,12 @@ import {

 interface WorkspaceModalProps {
  disabled?: boolean;
-  workspaces: AllWorkspace[];
+  workspaces: RootWorkspaceMetadata[];
  currentWorkspaceId: AllWorkspace['id'] | null;
  open: boolean;
  onClose: () => void;
-  onClickWorkspace: (workspace: AllWorkspace) => void;
-  onClickWorkspaceSetting: (workspace: AllWorkspace) => void;
+  onClickWorkspace: (workspace: RootWorkspaceMetadata['id']) => void;
+  onClickWorkspaceSetting: (workspace: RootWorkspaceMetadata['id']) => void;
  onNewWorkspace: () => void;
  onAddWorkspace: () => void;
  onMoveWorkspace: (activeId: string, overId: string) => void;
--- a/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx
@@ -57,7 +57,7 @@ export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({
        data-testid="workspace-avatar"
        className={workspaceAvatarStyle}
        size={40}
-        workspace={currentWorkspace}
+        workspace={currentWorkspace?.blockSuiteWorkspace ?? null}
      />
      <StyledSelectorWrapper>
        <StyledWorkspaceName data-testid="workspace-name">
--- a/apps/web/src/components/root-app-sidebar/index.tsx
+++ b/apps/web/src/components/root-app-sidebar/index.tsx
@@ -44,7 +44,6 @@ export type RootAppSidebarProps = {
  paths: {
    all: (workspaceId: string) => string;
    trash: (workspaceId: string) => string;
-    setting: (workspaceId: string) => string;
    shared: (workspaceId: string) => string;
  };
 };
@@ -173,16 +172,6 @@ export const RootAppSidebar = ({
          >
            <span data-testid="all-pages">{t['All pages']()}</span>
          </RouteMenuLinkItem>
-          {!runtimeConfig.enableNewSettingModal && (
-            <RouteMenuLinkItem
-              data-testid="slider-bar-workspace-setting-button"
-              icon={<SettingsIcon />}
-              currentPath={currentPath}
-              path={currentWorkspaceId && paths.setting(currentWorkspaceId)}
-            >
-              <span data-testid="settings">{t['Settings']()}</span>
-            </RouteMenuLinkItem>
-          )}
          {runtimeConfig.enableNewSettingModal ? (
            <MenuItem
              data-testid="slider-bar-workspace-setting-button"
--- a/apps/web/src/components/workspace-header.tsx
+++ b/apps/web/src/components/workspace-header.tsx
@@ -14,12 +14,13 @@ import type { ReactElement } from 'react';
 import { useCallback } from 'react';

 import { useGetPageInfoById } from '../hooks/use-get-page-info';
+import { useWorkspace } from '../hooks/use-workspace';
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
 import { filterContainerStyle } from './filter-container.css';
 import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';

 export function WorkspaceHeader({
-  currentWorkspace,
+  currentWorkspaceId,
  currentEntry,
 }: WorkspaceHeaderProps<WorkspaceFlavour>): ReactElement {
  const setting = useCollectionManager();
@@ -31,6 +32,9 @@ export function WorkspaceHeader({
    },
    [setting]
  );
+
+  const currentWorkspace = useWorkspace(currentWorkspaceId);
+
  const getPageInfoById = useGetPageInfoById();
  if ('subPath' in currentEntry) {
    if (currentEntry.subPath === WorkspaceSubPath.ALL) {
--- a/apps/web/src/hooks/tests/index.spec.tsx
+++ b/apps/web/src/hooks/tests/index.spec.tsx
@@ -3,14 +3,7 @@
 */
 import 'fake-indexeddb/auto';

-import assert from 'node:assert';
-
-import type { WorkspaceAdapter } from '@affine/env/workspace';
-import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
-import {
-  rootCurrentWorkspaceIdAtom,
-  workspaceAdaptersAtom,
-} from '@affine/workspace/atom';
+import { WorkspaceSubPath } from '@affine/env/workspace';
 import type { PageBlockModel } from '@blocksuite/blocks';
 import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
 import { assertExists } from '@blocksuite/global/utils';
@@ -20,18 +13,12 @@ import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
 } from '@toeverything/hooks/use-block-suite-page-meta';
-import { createStore, Provider } from 'jotai';
 import routerMock from 'next-router-mock';
 import { createDynamicRouteParser } from 'next-router-mock/dynamic-routes';
 import type React from 'react';
 import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';

-import { WorkspaceAdapters } from '../../adapters/workspace';
-import { workspacesAtom } from '../../atoms';
-import { rootCurrentWorkspaceAtom } from '../../atoms/root';
 import { BlockSuiteWorkspace } from '../../shared';
-import { useCurrentWorkspace } from '../current/use-current-workspace';
-import { useAppHelper, useWorkspaces } from '../use-workspaces';

 vi.mock(
  '../../components/blocksuite/header/editor-mode-switch/CustomLottie',
@@ -56,28 +43,6 @@ beforeEach(() => {
  localStorage.clear();
 });

-async function getJotaiContext() {
-  const store = createStore();
-  store.set(
-    workspaceAdaptersAtom,
-    WorkspaceAdapters as Record<
-      WorkspaceFlavour,
-      WorkspaceAdapter<WorkspaceFlavour>
-    >
-  );
-  const ProviderWrapper: React.FC<React.PropsWithChildren> =
-    function ProviderWrapper({ children }) {
-      return <Provider store={store}>{children}</Provider>;
-    };
-  const workspaces = await store.get(workspacesAtom);
-  expect(workspaces.length).toBe(1);
-  return {
-    store,
-    ProviderWrapper,
-    initialWorkspaces: workspaces,
-  } as const;
-}
-
 beforeEach(async () => {
  blockSuiteWorkspace = new BlockSuiteWorkspace({ id: 'test' })
    .register(AffineSchemas)
@@ -163,67 +128,3 @@ describe('usePageMetas', async () => {
    expect(result.current[0].title).toBe('test');
  });
 });
-
-describe('useWorkspacesHelper', () => {
-  test('basic', async () => {
-    const { ProviderWrapper, store } = await getJotaiContext();
-    const workspaceHelperHook = renderHook(() => useAppHelper(), {
-      wrapper: ProviderWrapper,
-    });
-    const id = await workspaceHelperHook.result.current.createLocalWorkspace(
-      'test'
-    );
-    const workspaces = await store.get(workspacesAtom);
-    expect(workspaces.length).toBe(2);
-    expect(workspaces[1].id).toBe(id);
-    const workspacesHook = renderHook(() => useWorkspaces(), {
-      wrapper: ProviderWrapper,
-    });
-    store.set(rootCurrentWorkspaceIdAtom, workspacesHook.result.current[1].id);
-    await store.get(rootCurrentWorkspaceAtom);
-    const currentWorkspaceHook = renderHook(() => useCurrentWorkspace(), {
-      wrapper: ProviderWrapper,
-    });
-    currentWorkspaceHook.result.current[1](workspacesHook.result.current[1].id);
-  });
-});
-
-describe('useWorkspaces', () => {
-  test('basic', async () => {
-    const { ProviderWrapper } = await getJotaiContext();
-    const { result } = renderHook(() => useWorkspaces(), {
-      wrapper: ProviderWrapper,
-    });
-    expect(result.current).toEqual([
-      {
-        id: expect.stringContaining(''),
-        flavour: WorkspaceFlavour.LOCAL,
-        blockSuiteWorkspace: expect.anything(),
-      },
-    ]);
-  });
-
-  test('mutation', async () => {
-    const { ProviderWrapper, store } = await getJotaiContext();
-    const { result } = renderHook(() => useAppHelper(), {
-      wrapper: ProviderWrapper,
-    });
-    {
-      const workspaces = await store.get(workspacesAtom);
-      expect(workspaces.length).toEqual(1);
-    }
-    await result.current.createLocalWorkspace('test');
-    {
-      const workspaces = await store.get(workspacesAtom);
-      expect(workspaces.length).toEqual(2);
-    }
-    const { result: result2 } = renderHook(() => useWorkspaces(), {
-      wrapper: ProviderWrapper,
-    });
-    expect(result2.current.length).toEqual(2);
-    const secondWorkspace = result2.current[1];
-    expect(secondWorkspace.flavour).toBe('local');
-    assert(secondWorkspace.flavour === WorkspaceFlavour.LOCAL);
-    expect(secondWorkspace.blockSuiteWorkspace.meta.name).toBe('test');
-  });
-});
--- a/apps/web/src/hooks/current/use-current-workspace.ts
+++ b/apps/web/src/hooks/current/use-current-workspace.ts
@@ -1,26 +1,47 @@
-import { isBrowser } from '@affine/env/constant';
 import {
  rootCurrentPageIdAtom,
  rootCurrentWorkspaceIdAtom,
 } from '@affine/workspace/atom';
-import { useAtom, useAtomValue } from 'jotai';
-import { useCallback } from 'react';
+import { assertExists } from '@blocksuite/global/utils';
+import type { PassiveDocProvider, Workspace } from '@blocksuite/store';
+import { useAtom, useSetAtom } from 'jotai';
+import { useCallback, useEffect } from 'react';

-import { rootCurrentWorkspaceAtom } from '../../atoms/root';
 import type { AllWorkspace } from '../../shared';
+import { useWorkspace } from '../use-workspace';
+
+declare global {
+  /**
+   * @internal debug only
+   */
+  // eslint-disable-next-line no-var
+  var currentWorkspace: AllWorkspace | undefined;
+  interface WindowEventMap {
+    'affine:workspace:change': CustomEvent<{ id: string }>;
+  }
+}

 export function useCurrentWorkspace(): [
  AllWorkspace,
  (id: string | null) => void,
 ] {
-  const currentWorkspace = useAtomValue(rootCurrentWorkspaceAtom);
-  const [, setId] = useAtom(rootCurrentWorkspaceIdAtom);
-  const [, setPageId] = useAtom(rootCurrentPageIdAtom);
+  const [id, setId] = useAtom(rootCurrentWorkspaceIdAtom);
+  assertExists(id);
+  const currentWorkspace = useWorkspace(id);
+  useEffect(() => {
+    globalThis.currentWorkspace = currentWorkspace;
+    globalThis.dispatchEvent(
+      new CustomEvent('affine:workspace:change', {
+        detail: { id: currentWorkspace.id },
+      })
+    );
+  }, [currentWorkspace]);
+  const setPageId = useSetAtom(rootCurrentPageIdAtom);
  return [
    currentWorkspace,
    useCallback(
      (id: string | null) => {
-        if (isBrowser && id) {
+        if (environment.isBrowser && id) {
          localStorage.setItem('last_workspace_id', id);
        }
        setPageId(null);
@@ -30,3 +51,27 @@ export function useCurrentWorkspace(): [
    ),
  ];
 }
+
+const activeWorkspaceWeakMap = new WeakMap<Workspace, boolean>();
+
+export function usePassiveWorkspaceEffect(workspace: Workspace) {
+  useEffect(() => {
+    if (activeWorkspaceWeakMap.get(workspace) === true) {
+      return;
+    }
+    const providers = workspace.providers.filter(
+      (provider): provider is PassiveDocProvider =>
+        'passive' in provider && provider.passive === true
+    );
+    providers.forEach(provider => {
+      provider.connect();
+    });
+    activeWorkspaceWeakMap.set(workspace, true);
+    return () => {
+      providers.forEach(provider => {
+        provider.disconnect();
+      });
+      activeWorkspaceWeakMap.delete(workspace);
+    };
+  }, [workspace]);
+}
--- a/apps/web/src/hooks/use-get-page-info.ts
+++ b/apps/web/src/hooks/use-get-page-info.ts
@@ -4,10 +4,10 @@ import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';

 import { pageSettingsAtom } from '../atoms';
-import { rootCurrentWorkspaceAtom } from '../atoms/root';
+import { useCurrentWorkspace } from './current/use-current-workspace';

 export const useGetPageInfoById = (): GetPageInfoById => {
-  const currentWorkspace = useAtomValue(rootCurrentWorkspaceAtom);
+  const [currentWorkspace] = useCurrentWorkspace();
  const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
  const pageMap = useMemo(
    () => Object.fromEntries(pageMetas.map(page => [page.id, page])),
--- a/apps/web/src/hooks/use-workspace.ts
+++ b/apps/web/src/hooks/use-workspace.ts
@@ -0,0 +1,36 @@
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { useStaticBlockSuiteWorkspace } from '@affine/workspace/utils';
+import { assertExists } from '@blocksuite/global/utils';
+import type { Workspace } from '@blocksuite/store';
+import type { Atom } from 'jotai';
+import { atom, useAtomValue } from 'jotai';
+
+import type { AffineOfficialWorkspace } from '../shared';
+
+const workspaceWeakMap = new WeakMap<
+  Workspace,
+  Atom<Promise<AffineOfficialWorkspace>>
+>();
+
+export function useWorkspace(workspaceId: string): AffineOfficialWorkspace {
+  const blockSuiteWorkspace = useStaticBlockSuiteWorkspace(workspaceId);
+  if (!workspaceWeakMap.has(blockSuiteWorkspace)) {
+    const baseAtom = atom(async get => {
+      const metadata = await get(rootWorkspacesMetadataAtom);
+      const flavour = metadata.find(({ id }) => id === workspaceId)?.flavour;
+      assertExists(flavour);
+      return {
+        id: workspaceId,
+        flavour,
+        blockSuiteWorkspace,
+      };
+    });
+    workspaceWeakMap.set(blockSuiteWorkspace, baseAtom);
+  }
+
+  return useAtomValue(
+    workspaceWeakMap.get(blockSuiteWorkspace) as Atom<
+      Promise<AffineOfficialWorkspace>
+    >
+  );
+}
--- a/apps/web/src/hooks/use-workspaces.ts
+++ b/apps/web/src/hooks/use-workspaces.ts
@@ -2,19 +2,16 @@ import { DebugLogger } from '@affine/debug';
 import { WorkspaceFlavour, WorkspaceVersion } from '@affine/env/workspace';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import { saveWorkspaceToLocalStorage } from '@affine/workspace/local/crud';
-import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
+import {
+  createEmptyBlockSuiteWorkspace,
+  getWorkspace,
+} from '@affine/workspace/utils';
 import { nanoid } from '@blocksuite/store';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';

 import { LocalAdapter } from '../adapters/local';
 import { WorkspaceAdapters } from '../adapters/workspace';
-import { workspacesAtom } from '../atoms';
-import type { AllWorkspace } from '../shared';
-
-export function useWorkspaces(): AllWorkspace[] {
-  return useAtomValue(workspacesAtom);
-}

 const logger = new DebugLogger('use-workspaces');

@@ -22,12 +19,12 @@ const logger = new DebugLogger('use-workspaces');
 * This hook has the permission to all workspaces. Be careful when using it.
 */
 export function useAppHelper() {
-  const workspaces = useWorkspaces();
  const jotaiWorkspaces = useAtomValue(rootWorkspacesMetadataAtom);
  const set = useSetAtom(rootWorkspacesMetadataAtom);
  return {
    addLocalWorkspace: useCallback(
      async (workspaceId: string): Promise<string> => {
+        createEmptyBlockSuiteWorkspace(workspaceId, WorkspaceFlavour.LOCAL);
        saveWorkspaceToLocalStorage(workspaceId);
        await set(workspaces => [
          ...workspaces,
@@ -68,20 +65,20 @@ export function useAppHelper() {
        const targetJotaiWorkspace = jotaiWorkspaces.find(
          ws => ws.id === workspaceId
        );
-        const targetWorkspace = workspaces.find(ws => ws.id === workspaceId);
-        if (!targetJotaiWorkspace || !targetWorkspace) {
+        if (!targetJotaiWorkspace) {
          throw new Error('page cannot be found');
        }

+        const targetWorkspace = getWorkspace(targetJotaiWorkspace.id);
+
        // delete workspace from plugin
-        await WorkspaceAdapters[targetWorkspace.flavour].CRUD.delete(
-          // fixme: type casting
-          targetWorkspace as any
+        await WorkspaceAdapters[targetJotaiWorkspace.flavour].CRUD.delete(
+          targetWorkspace
        );
        // delete workspace from jotai storage
        await set(workspaces => workspaces.filter(ws => ws.id !== workspaceId));
      },
-      [jotaiWorkspaces, set, workspaces]
+      [jotaiWorkspaces, set]
    ),
  };
 }
--- a/apps/web/src/layouts/workspace-layout.tsx
+++ b/apps/web/src/layouts/workspace-layout.tsx
@@ -20,7 +20,6 @@ import {
  rootWorkspacesMetadataAtom,
 } from '@affine/workspace/atom';
 import { assertEquals, assertExists } from '@blocksuite/global/utils';
-import type { PassiveDocProvider } from '@blocksuite/store';
 import { nanoid } from '@blocksuite/store';
 import type { DragEndEvent } from '@dnd-kit/core';
 import {
@@ -55,10 +54,12 @@ import {
  RootAppSidebar,
 } from '../components/root-app-sidebar';
 import { useBlockSuiteMetaHelper } from '../hooks/affine/use-block-suite-meta-helper';
-import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
+import {
+  useCurrentWorkspace,
+  usePassiveWorkspaceEffect,
+} from '../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../hooks/use-router-helper';
 import { useRouterTitle } from '../hooks/use-router-title';
-import { useWorkspaces } from '../hooks/use-workspaces';
 import {
  AllWorkspaceModals,
  CurrentWorkspaceModals,
@@ -96,13 +97,6 @@ export const QuickSearch: FC = () => {
  );
 };

-export const AllWorkspaceContext = ({
-  children,
-}: PropsWithChildren): ReactElement => {
-  useWorkspaces();
-  return <>{children}</>;
-};
-
 declare global {
  // eslint-disable-next-line no-var
  var HALTING_PROBLEM_TIMEOUT: number;
@@ -166,13 +160,11 @@ export const WorkspaceLayout: FC<PropsWithChildren> =
      <>
        {/* load all workspaces is costly, do not block the whole UI */}
        <Suspense fallback={null}>
-          <AllWorkspaceContext>
-            <AllWorkspaceModals />
-            <CurrentWorkspaceContext>
-              {/* fixme(himself65): don't re-render whole modals */}
-              <CurrentWorkspaceModals key={currentWorkspaceId} />
-            </CurrentWorkspaceContext>
-          </AllWorkspaceContext>
+          <AllWorkspaceModals />
+          <CurrentWorkspaceContext>
+            {/* fixme(himself65): don't re-render whole modals */}
+            <CurrentWorkspaceModals key={currentWorkspaceId} />
+          </CurrentWorkspaceContext>
        </Suspense>
        <CurrentWorkspaceContext>
          <Suspense fallback={<WorkspaceFallback />}>
@@ -223,36 +215,24 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
  }
  //#endregion

-  if (currentPageId) {
-    const pageExist =
-      currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
-    if (router.pathname === '/[workspaceId]/[pageId]' && !pageExist) {
-      router.push('/404').catch(console.error);
-    }
-  } else if (
-    router.pathname === '/[workspaceId]/[pageId]' &&
+  //#region check if page is valid
+  if (
    typeof router.query.pageId === 'string' &&
-    router.query.pageId !== currentPageId
+    router.pathname === '/workspace/[workspaceId]/[pageId]' &&
+    currentPageId
  ) {
-    setCurrentPageId(router.query.pageId);
-    jumpToPage(currentWorkspace.id, router.query.pageId).catch(console.error);
+    if (currentPageId !== router.query.pageId) {
+      setCurrentPageId(router.query.pageId);
+    } else {
+      const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+      if (!page) {
+        router.push('/404').catch(console.error);
+      }
+    }
  }
+  //#endregion

-  useEffect(() => {
-    const backgroundProviders =
-      currentWorkspace.blockSuiteWorkspace.providers.filter(
-        (provider): provider is PassiveDocProvider =>
-          'passive' in provider && provider.passive
-      );
-    backgroundProviders.forEach(provider => {
-      provider.connect();
-    });
-    return () => {
-      backgroundProviders.forEach(provider => {
-        provider.disconnect();
-      });
-    };
-  }, [currentWorkspace]);
+  usePassiveWorkspaceEffect(currentWorkspace.blockSuiteWorkspace);

  useEffect(() => {
    const page = currentWorkspace.blockSuiteWorkspace.getPage(
@@ -303,7 +283,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
  const handleOpenSettingModal = useCallback(() => {
    setOpenSettingModalAtom({
      activeTab: 'appearance',
-      workspace: null,
+      workspaceId: null,
      open: true,
    });
  }, [setOpenSettingModalAtom]);
--- a/apps/web/src/pages/404.tsx
+++ b/apps/web/src/pages/404.tsx
@@ -1,10 +1,13 @@
 import { Button, displayFlex, styled } from '@affine/component';
+import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import Head from 'next/head';
 import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import React from 'react';

+import { useRouterHelper } from '../hooks/use-router-helper';
+
 export const StyledContainer = styled('div')(() => {
  return {
    ...displayFlex('center', 'center'),
@@ -26,6 +29,7 @@ export const StyledContainer = styled('div')(() => {
 export const NotfoundPage = () => {
  const t = useAFFiNEI18N();
  const router = useRouter();
+  const { jumpToSubPath } = useRouterHelper(router);
  return (
    <StyledContainer data-testid="notFound">
      <Image alt="404" src="/imgs/invite-error.svg" width={360} height={270} />
@@ -34,7 +38,12 @@ export const NotfoundPage = () => {
      <Button
        shape="round"
        onClick={() => {
-          router.push('/').catch(err => console.error(err));
+          const id = localStorage.getItem('last_workspace_id');
+          if (id) {
+            jumpToSubPath(id, WorkspaceSubPath.ALL).catch(console.error);
+          } else {
+            router.push('/').catch(err => console.error(err));
+          }
        }}
      >
        {t['Back Home']()}
--- a/apps/web/src/pages/index.tsx
+++ b/apps/web/src/pages/index.tsx
@@ -1,22 +1,33 @@
 import { WorkspaceFallback } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { WorkspaceSubPath } from '@affine/env/workspace';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { getWorkspace } from '@affine/workspace/utils';
+import { useAtomValue } from 'jotai';
 import type { NextPage } from 'next';
 import { useRouter } from 'next/router';
 import { Suspense, useEffect } from 'react';

-import { PageLoading } from '../components/pure/loading';
 import { RouteLogic, useRouterHelper } from '../hooks/use-router-helper';
-import { useAppHelper, useWorkspaces } from '../hooks/use-workspaces';
-import { AllWorkspaceContext } from '../layouts/workspace-layout';
+import { useWorkspace } from '../hooks/use-workspace';
+import { useAppHelper } from '../hooks/use-workspaces';
 import { AllWorkspaceModals } from '../providers/modal-provider';

-const logger = new DebugLogger('index-page');
+const logger = new DebugLogger('index:router');
+
+type AllWorkspaceLoaderProps = {
+  id: string;
+};
+
+const WorkspaceLoader = (props: AllWorkspaceLoaderProps): null => {
+  useWorkspace(props.id);
+  return null;
+};

 const IndexPageInner = () => {
  const router = useRouter();
  const { jumpToPage, jumpToSubPath } = useRouterHelper(router);
-  const workspaces = useWorkspaces();
+  const meta = useAtomValue(rootWorkspacesMetadataAtom);
  const helper = useAppHelper();

  useEffect(() => {
@@ -25,15 +36,14 @@ const IndexPageInner = () => {
    }
    const lastId = localStorage.getItem('last_workspace_id');
    const lastPageId = localStorage.getItem('last_page_id');
-    const targetWorkspace =
-      (lastId && workspaces.find(({ id }) => id === lastId)) ||
-      workspaces.at(0);

-    if (targetWorkspace) {
-      const nonTrashPages =
-        targetWorkspace.blockSuiteWorkspace.meta.pageMetas.filter(
-          ({ trash }) => !trash
-        );
+    const target =
+      (lastId && meta.find(({ id }) => id === lastId)) || meta.at(0);
+    if (target) {
+      const targetWorkspace = getWorkspace(target.id);
+      const nonTrashPages = targetWorkspace.meta.pageMetas.filter(
+        ({ trash }) => !trash
+      );
      const pageId =
        nonTrashPages.find(({ id }) => id === lastPageId)?.id ??
        nonTrashPages.at(0)?.id;
@@ -56,38 +66,38 @@ const IndexPageInner = () => {
            console.error(err);
          });
        }, 1000);
-        const dispose =
-          targetWorkspace.blockSuiteWorkspace.slots.pageAdded.once(pageId => {
-            clearTimeout(clearId);
-            jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE).catch(
-              err => {
-                console.error(err);
-              }
-            );
-          });
+        const dispose = targetWorkspace.slots.pageAdded.once(pageId => {
+          clearTimeout(clearId);
+          jumpToPage(targetWorkspace.id, pageId, RouteLogic.REPLACE).catch(
+            err => {
+              console.error(err);
+            }
+          );
+        });
        return () => {
          clearTimeout(clearId);
          dispose.dispose();
        };
      }
    } else {
-      console.warn('No target workspace. This should not happen in production');
+      console.warn('No workspace found');
    }
    return;
-  }, [helper, jumpToPage, jumpToSubPath, router, workspaces]);
+  }, [meta, helper, jumpToPage, jumpToSubPath, router]);

  return (
-    <Suspense fallback={<WorkspaceFallback />}>
-      <AllWorkspaceContext>
-        <AllWorkspaceModals />
-      </AllWorkspaceContext>
-    </Suspense>
+    <>
+      {meta.map(({ id }) => (
+        <WorkspaceLoader key={id} id={id} />
+      ))}
+      <AllWorkspaceModals />
+    </>
  );
 };

 const IndexPage: NextPage = () => {
  return (
-    <Suspense fallback={<PageLoading />}>
+    <Suspense fallback={<WorkspaceFallback />}>
      <IndexPageInner />
    </Suspense>
  );
--- a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -8,7 +8,6 @@ import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
-import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { useAtom, useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import type React from 'react';
@@ -16,7 +15,6 @@ import { useCallback } from 'react';

 import { getUIAdapter } from '../../../adapters/workspace';
 import { pageSettingFamily } from '../../../atoms';
-import { rootCurrentWorkspaceAtom } from '../../../atoms/root';
 import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../../../hooks/use-router-helper';
 import { WorkspaceLayout } from '../../../layouts/workspace-layout';
@@ -65,13 +63,13 @@ const WorkspaceDetail: React.FC = () => {
  return (
    <>
      <Header
-        currentWorkspace={currentWorkspace}
+        currentWorkspaceId={currentWorkspace.id}
        currentEntry={{
          pageId: currentPageId,
        }}
      />
      <PageDetail
-        currentWorkspace={currentWorkspace}
+        currentWorkspaceId={currentWorkspace.id}
        currentPageId={currentPageId}
        onLoadEditor={onLoad}
      />
@@ -81,12 +79,11 @@ const WorkspaceDetail: React.FC = () => {

 const WorkspaceDetailPage: NextPageWithLayout = () => {
  const router = useRouter();
-  const currentWorkspace = useAtomValue(rootCurrentWorkspaceAtom);
+  const [currentWorkspace] = useCurrentWorkspace();
  const currentPageId = useAtomValue(rootCurrentPageIdAtom);
-  const page = useBlockSuiteWorkspacePage(
-    currentWorkspace.blockSuiteWorkspace,
-    currentPageId
-  );
+  const page = currentPageId
+    ? currentWorkspace.blockSuiteWorkspace.getPage(currentPageId)
+    : null;
  if (!router.isReady) {
    return <PageDetailSkeleton key="router-not-ready" />;
  } else if (!currentPageId || !page) {
--- a/apps/web/src/pages/workspace/[workspaceId]/all.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/all.tsx
@@ -45,7 +45,7 @@ const AllPage: NextPageWithLayout = () => {
        <title>{t['All pages']()} - AFFiNE</title>
      </Head>
      <Header
-        currentWorkspace={currentWorkspace}
+        currentWorkspaceId={currentWorkspace.id}
        currentEntry={{
          subPath: WorkspaceSubPath.ALL,
        }}
--- a/apps/web/src/pages/workspace/[workspaceId]/shared.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/shared.tsx
@@ -40,7 +40,7 @@ const SharedPages: NextPageWithLayout = () => {
        <title>{t['Shared Pages']()} - AFFiNE</title>
      </Head>
      <Header
-        currentWorkspace={currentWorkspace}
+        currentWorkspaceId={currentWorkspace.id}
        currentEntry={{
          subPath: WorkspaceSubPath.SHARED,
        }}
--- a/apps/web/src/pages/workspace/[workspaceId]/trash.tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/trash.tsx
@@ -44,7 +44,7 @@ const TrashPage: NextPageWithLayout = () => {
        <title>{t['Trash']()} - AFFiNE</title>
      </Head>
      <Header
-        currentWorkspace={currentWorkspace}
+        currentWorkspaceId={currentWorkspace.id}
        currentEntry={{
          subPath: WorkspaceSubPath.TRASH,
        }}
--- a/apps/web/src/providers/modal-provider.tsx
+++ b/apps/web/src/providers/modal-provider.tsx
@@ -5,7 +5,7 @@ import {
 } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import { arrayMove } from '@dnd-kit/sortable';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useRouter } from 'next/router';
 import type { FC, ReactElement } from 'react';
 import { lazy, Suspense, useCallback, useTransition } from 'react';
@@ -20,8 +20,6 @@ import {
 } from '../atoms';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useRouterHelper } from '../hooks/use-router-helper';
-import { useWorkspaces } from '../hooks/use-workspaces';
-import type { AllWorkspace } from '../shared';

 const SettingModal = lazy(() =>
  import('../components/affine/setting-modal').then(module => ({
@@ -57,16 +55,16 @@ const OnboardingModal = lazy(() =>

 export const Setting: FC = () => {
  const [currentWorkspace] = useCurrentWorkspace();
-  const [{ open, workspace, activeTab }, setOpenSettingModalAtom] =
+  const [{ open, workspaceId, activeTab }, setOpenSettingModalAtom] =
    useAtom(openSettingModalAtom);
  assertExists(currentWorkspace);

  const onSettingClick = useCallback(
    ({
      activeTab,
-      workspace,
-    }: Pick<SettingAtom, 'activeTab' | 'workspace'>) => {
-      setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspace }));
+      workspaceId,
+    }: Pick<SettingAtom, 'activeTab' | 'workspaceId'>) => {
+      setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspaceId }));
    },
    [setOpenSettingModalAtom]
  );
@@ -75,7 +73,7 @@ export const Setting: FC = () => {
    <SettingModal
      open={open}
      activeTab={activeTab}
-      workspace={workspace}
+      workspaceId={workspaceId}
      onSettingClick={onSettingClick}
      setOpen={useCallback(
        open => {
@@ -132,7 +130,7 @@ export const AllWorkspaceModals = (): ReactElement => {

  const router = useRouter();
  const { jumpToSubPath } = useRouterHelper(router);
-  const workspaces = useWorkspaces();
+  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
  const setWorkspaces = useSetAtom(rootWorkspacesMetadataAtom);
  const [currentWorkspaceId, setCurrentWorkspaceId] = useAtom(
    rootCurrentWorkspaceIdAtom
@@ -141,13 +139,13 @@ export const AllWorkspaceModals = (): ReactElement => {
  const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);

  const handleOpenSettingModal = useCallback(
-    (workspace: AllWorkspace) => {
+    (workspaceId: string) => {
      setOpenWorkspacesModal(false);

      setOpenSettingModalAtom({
        open: true,
        activeTab: 'workspace',
-        workspace,
+        workspaceId,
      });
    },
    [setOpenSettingModalAtom, setOpenWorkspacesModal]
@@ -179,10 +177,10 @@ export const AllWorkspaceModals = (): ReactElement => {
            [setWorkspaces, workspaces]
          )}
          onClickWorkspace={useCallback(
-            workspace => {
+            workspaceId => {
              setOpenWorkspacesModal(false);
-              setCurrentWorkspaceId(workspace.id);
-              jumpToSubPath(workspace.id, WorkspaceSubPath.ALL).catch(error => {
+              setCurrentWorkspaceId(workspaceId);
+              jumpToSubPath(workspaceId, WorkspaceSubPath.ALL).catch(error => {
                console.error(error);
              });
            },
--- a/apps/web/src/shared/index.ts
+++ b/apps/web/src/shared/index.ts
@@ -26,14 +26,12 @@ export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<

 export enum WorkspaceSubPath {
  ALL = 'all',
-  SETTING = 'setting',
  TRASH = 'trash',
  SHARED = 'shared',
 }

 export const WorkspaceSubPathName = {
  [WorkspaceSubPath.ALL]: 'All Pages',
-  [WorkspaceSubPath.SETTING]: 'Settings',
  [WorkspaceSubPath.TRASH]: 'Trash',
  [WorkspaceSubPath.SHARED]: 'Shared',
 } satisfies {
@@ -43,17 +41,15 @@ export const WorkspaceSubPathName = {
 export const pathGenerator = {
  all: workspaceId => `/workspace/${workspaceId}/all`,
  trash: workspaceId => `/workspace/${workspaceId}/trash`,
-  setting: workspaceId => `/workspace/${workspaceId}/setting`,
  shared: workspaceId => `/workspace/${workspaceId}/shared`,
 } satisfies {
  [Path in WorkspaceSubPath]: (workspaceId: string) => string;
 };

 export const publicPathGenerator = {
-  all: workspaceId => `/public-workspace/${workspaceId}/all`,
-  trash: workspaceId => `/public-workspace/${workspaceId}/trash`,
-  setting: workspaceId => `/public-workspace/${workspaceId}/setting`,
-  shared: workspaceId => `/public-workspace/${workspaceId}/shared`,
+  all: workspaceId => `/share/${workspaceId}/all`,
+  trash: workspaceId => `/share/${workspaceId}/trash`,
+  shared: workspaceId => `/share/${workspaceId}/shared`,
 } satisfies {
  [Path in WorkspaceSubPath]: (workspaceId: string) => string;
 };