refactor: workspace manager (#5060)

packages/frontend/core/src/_plugin/index.test.tsx

@@ -18,7 +18,7 @@ import { bootstrapPluginSystem } from '../bootstrap/register-plugins';
 async function main() {
   const { setup } = await import('../bootstrap/setup');
   const rootStore = getCurrentStore();
-  await setup(rootStore);
+  setup();
   const { _pluginNestedImportsMap } = createSetup(rootStore);
   const pluginRegisterPromise = bootstrapPluginSystem(rootStore);
   const root = document.getElementById('app');

packages/frontend/core/src/adapters/cloud/ui.tsx

@@ -1,11 +1,7 @@
-import type {
-  WorkspaceFlavour,
-  WorkspaceUISchema,
-} from '@affine/env/workspace';
+import type { WorkspaceUISchema } from '@affine/env/workspace';
 import { lazy } from 'react';
 
-import { useIsWorkspaceOwner } from '../../hooks/affine/use-is-workspace-owner';
-import { NewWorkspaceSettingDetail, Provider } from '../shared';
+import { Provider } from '../shared';
 
 const LoginCard = lazy(() =>
   import('../../components/cloud/login-card').then(({ LoginCard }) => ({
@@ -16,23 +12,4 @@ const LoginCard = lazy(() =>
 export const UI = {
   Provider,
   LoginCard,
-  NewSettingsDetail: ({
-    currentWorkspaceId,
-    onTransformWorkspace,
-    onDeleteLocalWorkspace,
-    onDeleteCloudWorkspace,
-    onLeaveWorkspace,
-  }) => {
-    const isOwner = useIsWorkspaceOwner(currentWorkspaceId);
-    return (
-      <NewWorkspaceSettingDetail
-        onDeleteLocalWorkspace={onDeleteLocalWorkspace}
-        onDeleteCloudWorkspace={onDeleteCloudWorkspace}
-        onLeaveWorkspace={onLeaveWorkspace}
-        workspaceId={currentWorkspaceId}
-        onTransferWorkspace={onTransformWorkspace}
-        isOwner={isOwner}
-      />
-    );
-  },
-} satisfies WorkspaceUISchema<WorkspaceFlavour.AFFINE_CLOUD>;
+} satisfies WorkspaceUISchema;

packages/frontend/core/src/adapters/local/index.tsx

@@ -1,81 +1,17 @@
-import { DebugLogger } from '@affine/debug';
-import { DEFAULT_WORKSPACE_NAME } from '@affine/env/constant';
 import type { WorkspaceAdapter } from '@affine/env/workspace';
 import {
   LoadPriority,
   ReleaseType,
   WorkspaceFlavour,
 } from '@affine/env/workspace';
-import {
-  CRUD,
-  saveWorkspaceToLocalStorage,
-} from '@affine/workspace/local/crud';
-import { getOrCreateWorkspace } from '@affine/workspace/manager';
-import { getCurrentStore } from '@toeverything/infra/atom';
-import { initEmptyPage } from '@toeverything/infra/blocksuite';
-import { buildShowcaseWorkspace } from '@toeverything/infra/blocksuite';
-import { nanoid } from 'nanoid';
 
-import { setPageModeAtom } from '../../atoms';
-import { NewWorkspaceSettingDetail, Provider } from '../shared';
-
-const logger = new DebugLogger('use-create-first-workspace');
+import { Provider } from '../shared';
 
 export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
   releaseType: ReleaseType.STABLE,
   flavour: WorkspaceFlavour.LOCAL,
   loadPriority: LoadPriority.LOW,
-  Events: {
-    'app:access': async () => true,
-    'app:init': () => {
-      const blockSuiteWorkspace = getOrCreateWorkspace(
-        nanoid(),
-        WorkspaceFlavour.LOCAL
-      );
-      blockSuiteWorkspace.meta.setName(DEFAULT_WORKSPACE_NAME);
-      if (runtimeConfig.enablePreloading) {
-        buildShowcaseWorkspace(blockSuiteWorkspace, {
-          store: getCurrentStore(),
-          atoms: {
-            pageMode: setPageModeAtom,
-          },
-        }).catch(err => {
-          logger.error('init page with preloading failed', err);
-        });
-      } else {
-        const page = blockSuiteWorkspace.createPage();
-        blockSuiteWorkspace.setPageMeta(page.id, {
-          jumpOnce: true,
-        });
-        initEmptyPage(page).catch(error => {
-          logger.error('init page with empty failed', error);
-        });
-      }
-      saveWorkspaceToLocalStorage(blockSuiteWorkspace.id);
-      logger.debug('create first workspace');
-      return [blockSuiteWorkspace.id];
-    },
-  },
-  CRUD,
   UI: {
     Provider,
-    NewSettingsDetail: ({
-      currentWorkspaceId,
-      onTransformWorkspace,
-      onDeleteLocalWorkspace,
-      onDeleteCloudWorkspace,
-      onLeaveWorkspace,
-    }) => {
-      return (
-        <NewWorkspaceSettingDetail
-          onDeleteLocalWorkspace={onDeleteLocalWorkspace}
-          onDeleteCloudWorkspace={onDeleteCloudWorkspace}
-          onLeaveWorkspace={onLeaveWorkspace}
-          workspaceId={currentWorkspaceId}
-          onTransferWorkspace={onTransformWorkspace}
-          isOwner={true}
-        />
-      );
-    },
   },
 };

packages/frontend/core/src/adapters/public-cloud/ui.tsx

@@ -1,11 +0,0 @@
-import type { WorkspaceFlavour } from '@affine/env/workspace';
-import { type WorkspaceUISchema } from '@affine/env/workspace';
-
-import { Provider } from '../shared';
-
-export const UI = {
-  Provider,
-  NewSettingsDetail: () => {
-    throw new Error('Not implemented');
-  },
-} satisfies WorkspaceUISchema<WorkspaceFlavour.AFFINE_PUBLIC>;

packages/frontend/core/src/adapters/workspace.ts

@@ -1,6 +1,5 @@
 import { Unreachable } from '@affine/env/constant';
 import type {
-  AppEvents,
   WorkspaceAdapter,
   WorkspaceUISchema,
 } from '@affine/env/workspace';
@@ -9,19 +8,9 @@ import {
   ReleaseType,
   WorkspaceFlavour,
 } from '@affine/env/workspace';
-import { CRUD as CloudCRUD } from '@affine/workspace/affine/crud';
 
 import { UI as CloudUI } from './cloud/ui';
 import { LocalAdapter } from './local';
-import { UI as PublicCloudUI } from './public-cloud/ui';
-
-const unimplemented = () => {
-  throw new Error('Not implemented');
-};
-
-const bypassList = async () => {
-  return [];
-};
 
 export const WorkspaceAdapters = {
   [WorkspaceFlavour.LOCAL]: LocalAdapter,
@@ -29,43 +18,16 @@ export const WorkspaceAdapters = {
     releaseType: ReleaseType.UNRELEASED,
     flavour: WorkspaceFlavour.AFFINE_CLOUD,
     loadPriority: LoadPriority.HIGH,
-    Events: {
-      'app:access': async () => {
-        try {
-          const { getSession } = await import('next-auth/react');
-          const session = await getSession();
-          return !!session;
-        } catch (e) {
-          console.error('failed to get session', e);
-          return false;
-        }
-      },
-    } as Partial<AppEvents>,
-    CRUD: CloudCRUD,
     UI: CloudUI,
   },
-  [WorkspaceFlavour.AFFINE_PUBLIC]: {
-    releaseType: ReleaseType.UNRELEASED,
-    flavour: WorkspaceFlavour.AFFINE_PUBLIC,
-    loadPriority: LoadPriority.LOW,
-    Events: {} as Partial<AppEvents>,
-    // todo: implement this
-    CRUD: {
-      get: unimplemented,
-      list: bypassList,
-      delete: unimplemented,
-      create: unimplemented,
-    },
-    UI: PublicCloudUI,
-  },
 } satisfies {
   [Key in WorkspaceFlavour]: WorkspaceAdapter<Key>;
 };
 
 export function getUIAdapter<Flavour extends WorkspaceFlavour>(
   flavour: Flavour
-): WorkspaceUISchema<Flavour> {
-  const ui = WorkspaceAdapters[flavour].UI as WorkspaceUISchema<Flavour>;
+): WorkspaceUISchema {
+  const ui = WorkspaceAdapters[flavour].UI as WorkspaceUISchema;
   if (!ui) {
     throw new Unreachable();
   }

packages/frontend/core/src/app.tsx

@@ -5,9 +5,9 @@ import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { NotificationCenter } from '@affine/component/notification-center';
 import { WorkspaceFallback } from '@affine/component/workspace';
+import { createI18n, setUpLanguage } from '@affine/i18n';
 import { CacheProvider } from '@emotion/react';
 import { getCurrentStore } from '@toeverything/infra/atom';
-import { use } from 'foxact/use';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { lazy, memo, Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
@@ -41,7 +41,6 @@ async function loadLanguage() {
   if (environment.isBrowser) {
     performanceI18nLogger.info('start');
 
-    const { createI18n, setUpLanguage } = await import('@affine/i18n');
     const i18n = createI18n();
     document.documentElement.lang = i18n.language;
 
@@ -51,12 +50,15 @@ async function loadLanguage() {
   }
 }
 
-const languageLoadingPromise = loadLanguage().catch(console.error);
+let languageLoadingPromise: Promise<void> | null = null;
 
 export const App = memo(function App() {
   performanceRenderLogger.info('App');
 
-  use(languageLoadingPromise);
+  if (!languageLoadingPromise) {
+    languageLoadingPromise = loadLanguage().catch(console.error);
+  }
+
   return (
     <CacheProvider value={cache}>
       <AffineContext store={getCurrentStore()}>

packages/frontend/core/src/atoms/collections.ts

@@ -1,12 +1,18 @@
-import type { CollectionsCRUDAtom } from '@affine/component/page-list';
+import type {
+  CollectionsCRUD,
+  CollectionsCRUDAtom,
+} from '@affine/component/page-list';
 import type { Collection, DeprecatedCollection } from '@affine/env/filter';
+import {
+  currentWorkspaceAtom,
+  waitForCurrentWorkspaceAtom,
+} from '@affine/workspace/atom';
 import { DisposableGroup } from '@blocksuite/global/utils';
 import type { Workspace } from '@blocksuite/store';
-import { currentWorkspaceAtom } from '@toeverything/infra/atom';
 import { type DBSchema, openDB } from 'idb';
 import { atom } from 'jotai';
 import { atomWithObservable } from 'jotai/utils';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 import { getUserSetting } from '../utils/user-setting';
 import { getWorkspaceSetting } from '../utils/workspace-setting';
@@ -95,7 +101,11 @@ type BaseCollectionsDataType = {
 export const pageCollectionBaseAtom =
   atomWithObservable<BaseCollectionsDataType>(
     get => {
-      const currentWorkspacePromise = get(currentWorkspaceAtom);
+      const currentWorkspace = get(currentWorkspaceAtom);
+      if (!currentWorkspace) {
+        return of({ loading: true, collections: [] });
+      }
+
       const session = get(sessionAtom);
       const userId = session?.data?.user.id ?? null;
       const migrateCollectionsFromIdbData = async (
@@ -149,48 +159,44 @@ export const pageCollectionBaseAtom =
 
       return new Observable<BaseCollectionsDataType>(subscriber => {
         const group = new DisposableGroup();
-        currentWorkspacePromise
-          .then(async currentWorkspace => {
-            const workspaceSetting = getWorkspaceSetting(currentWorkspace);
-            migrateCollectionsFromIdbData(currentWorkspace)
-              .then(collections => {
-                if (collections.length) {
-                  workspaceSetting.addCollection(...collections);
-                }
-              })
-              .catch(error => {
-                console.error(error);
-              });
-            migrateCollectionsFromUserData(currentWorkspace)
-              .then(collections => {
-                if (collections.length) {
-                  workspaceSetting.addCollection(...collections);
-                }
-              })
-              .catch(error => {
-                console.error(error);
-              });
-            subscriber.next({
-              loading: false,
-              collections: workspaceSetting.collections,
-            });
-            if (group.disposed) {
-              return;
+        const workspaceSetting = getWorkspaceSetting(
+          currentWorkspace.blockSuiteWorkspace
+        );
+        migrateCollectionsFromIdbData(currentWorkspace.blockSuiteWorkspace)
+          .then(collections => {
+            if (collections.length) {
+              workspaceSetting.addCollection(...collections);
             }
-            const fn = () => {
-              subscriber.next({
-                loading: false,
-                collections: workspaceSetting.collections,
-              });
-            };
-            workspaceSetting.collectionsYArray.observe(fn);
-            group.add(() => {
-              workspaceSetting.collectionsYArray.unobserve(fn);
-            });
           })
           .catch(error => {
-            subscriber.error(error);
+            console.error(error);
           });
+        migrateCollectionsFromUserData(currentWorkspace.blockSuiteWorkspace)
+          .then(collections => {
+            if (collections.length) {
+              workspaceSetting.addCollection(...collections);
+            }
+          })
+          .catch(error => {
+            console.error(error);
+          });
+        subscriber.next({
+          loading: false,
+          collections: workspaceSetting.collections,
+        });
+        if (group.disposed) {
+          return;
+        }
+        const fn = () => {
+          subscriber.next({
+            loading: false,
+            collections: workspaceSetting.collections,
+          });
+        };
+        workspaceSetting.collectionsYArray.observe(fn);
+        group.add(() => {
+          workspaceSetting.collectionsYArray.unobserve(fn);
+        });
 
         return () => {
           group.dispose();
@@ -199,21 +205,27 @@ export const pageCollectionBaseAtom =
     },
     { initialValue: { loading: true, collections: [] } }
   );
-export const collectionsCRUDAtom: CollectionsCRUDAtom = atom(get => {
-  const workspacePromise = get(currentWorkspaceAtom);
+
+export const collectionsCRUDAtom: CollectionsCRUDAtom = atom(async get => {
+  const workspace = await get(waitForCurrentWorkspaceAtom);
   return {
-    addCollection: async (...collections) => {
-      const workspace = await workspacePromise;
-      getWorkspaceSetting(workspace).addCollection(...collections);
+    addCollection: (...collections) => {
+      getWorkspaceSetting(workspace.blockSuiteWorkspace).addCollection(
+        ...collections
+      );
     },
     collections: get(pageCollectionBaseAtom).collections,
-    updateCollection: async (id, updater) => {
-      const workspace = await workspacePromise;
-      getWorkspaceSetting(workspace).updateCollection(id, updater);
+    updateCollection: (id, updater) => {
+      getWorkspaceSetting(workspace.blockSuiteWorkspace).updateCollection(
+        id,
+        updater
+      );
     },
-    deleteCollection: async (info, ...ids) => {
-      const workspace = await workspacePromise;
-      getWorkspaceSetting(workspace).deleteCollection(info, ...ids);
+    deleteCollection: (info, ...ids) => {
+      getWorkspaceSetting(workspace.blockSuiteWorkspace).deleteCollection(
+        info,
+        ...ids
+      );
     },
-  };
+  } satisfies CollectionsCRUD;
 });

packages/frontend/core/src/atoms/index.ts

@@ -14,13 +14,15 @@ export const openOnboardingModalAtom = atom(false);
 export const openSignOutModalAtom = atom(false);
 export const openPaymentDisableAtom = atom(false);
 
-export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspaceId'> & {
+export type SettingAtom = Pick<
+  SettingProps,
+  'activeTab' | 'workspaceMetadata'
+> & {
   open: boolean;
 };
 
 export const openSettingModalAtom = atom<SettingAtom>({
   activeTab: 'appearance',
-  workspaceId: null,
   open: false,
 });
 

packages/frontend/core/src/bootstrap/first-app-data.ts

@@ -0,0 +1,43 @@
+import { DebugLogger } from '@affine/debug';
+import { DEFAULT_WORKSPACE_NAME } from '@affine/env/constant';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { workspaceManager } from '@affine/workspace';
+import { getCurrentStore } from '@toeverything/infra/atom';
+import {
+  buildShowcaseWorkspace,
+  initEmptyPage,
+} from '@toeverything/infra/blocksuite';
+
+import { setPageModeAtom } from '../atoms';
+
+const logger = new DebugLogger('affine:first-app-data');
+
+export async function createFirstAppData() {
+  if (localStorage.getItem('is-first-open') !== null) {
+    return;
+  }
+  localStorage.setItem('is-first-open', 'false');
+  const workspaceId = await workspaceManager.createWorkspace(
+    WorkspaceFlavour.LOCAL,
+    async workspace => {
+      workspace.meta.setName(DEFAULT_WORKSPACE_NAME);
+      if (runtimeConfig.enablePreloading) {
+        await buildShowcaseWorkspace(workspace, {
+          store: getCurrentStore(),
+          atoms: {
+            pageMode: setPageModeAtom,
+          },
+        });
+      } else {
+        const page = workspace.createPage();
+        workspace.setPageMeta(page.id, {
+          jumpOnce: true,
+        });
+        await initEmptyPage(page);
+      }
+      logger.debug('create first workspace');
+    }
+  );
+  console.info('create first workspace', workspaceId);
+  return workspaceId;
+}

packages/frontend/core/src/bootstrap/plugins/setup.ts

@@ -14,11 +14,7 @@ import {
   pluginSettingAtom,
   pluginWindowAtom,
 } from '@toeverything/infra/__internal__/plugin';
-import {
-  contentLayoutAtom,
-  currentPageIdAtom,
-  currentWorkspaceAtom,
-} from '@toeverything/infra/atom';
+import { contentLayoutAtom, currentPageIdAtom } from '@toeverything/infra/atom';
 import { atom } from 'jotai';
 import { Provider } from 'jotai/react';
 import type { createStore } from 'jotai/vanilla';
@@ -149,7 +145,6 @@ function createSetupImpl(rootStore: ReturnType<typeof createStore>) {
     '@blocksuite/inline': import('@blocksuite/inline'),
     '@affine/sdk/entry': {
       rootStore,
-      currentWorkspaceAtom: currentWorkspaceAtom,
       currentPageIdAtom: currentPageIdAtom,
       pushLayoutAtom: pushLayoutAtom,
       deleteLayoutAtom: deleteLayoutAtom,

packages/frontend/core/src/bootstrap/setup.ts

@@ -1,15 +1,7 @@
 import './register-blocksuite-components';
 
 import { setupGlobal } from '@affine/env/global';
-import type { WorkspaceAdapter } from '@affine/env/workspace';
-import type { WorkspaceFlavour } from '@affine/env/workspace';
-import {
-  type RootWorkspaceMetadataV2,
-  rootWorkspacesMetadataAtom,
-  workspaceAdaptersAtom,
-} from '@affine/workspace/atom';
 import * as Sentry from '@sentry/react';
-import type { createStore } from 'jotai/vanilla';
 import { useEffect } from 'react';
 import {
   createRoutesFromChildren,
@@ -18,45 +10,12 @@ import {
   useNavigationType,
 } from 'react-router-dom';
 
-import { WorkspaceAdapters } from '../adapters/workspace';
 import { performanceLogger } from '../shared';
 
 const performanceSetupLogger = performanceLogger.namespace('setup');
 
-export function createFirstAppData(store: ReturnType<typeof createStore>) {
-  const createFirst = (): RootWorkspaceMetadataV2[] => {
-    const Plugins = Object.values(WorkspaceAdapters).sort(
-      (a, b) => a.loadPriority - b.loadPriority
-    );
-
-    return Plugins.flatMap(Plugin => {
-      return Plugin.Events['app:init']?.().map(
-        id =>
-          <RootWorkspaceMetadataV2>{
-            id,
-            flavour: Plugin.flavour,
-          }
-      );
-    }).filter((ids): ids is RootWorkspaceMetadataV2 => !!ids);
-  };
-  if (localStorage.getItem('is-first-open') !== null) {
-    return;
-  }
-  const result = createFirst();
-  console.info('create first workspace', result);
-  localStorage.setItem('is-first-open', 'false');
-  store.set(rootWorkspacesMetadataAtom, result);
-}
-
-export async function setup(store: ReturnType<typeof createStore>) {
+export function setup() {
   performanceSetupLogger.info('start');
-  store.set(
-    workspaceAdaptersAtom,
-    WorkspaceAdapters as Record<
-      WorkspaceFlavour,
-      WorkspaceAdapter<WorkspaceFlavour>
-    >
-  );
 
   performanceSetupLogger.info('setup global');
   setupGlobal();
@@ -88,9 +47,5 @@ export async function setup(store: ReturnType<typeof createStore>) {
     });
   }
 
-  performanceSetupLogger.info('get root workspace meta');
-  // do not read `rootWorkspacesMetadataAtom` before migration
-  await store.get(rootWorkspacesMetadataAtom);
-
   performanceSetupLogger.info('done');
 }

packages/frontend/core/src/commands/affine-help.tsx

@@ -34,7 +34,7 @@ export function registerAffineHelpCommands({
         store.set(openSettingModalAtom, {
           open: true,
           activeTab: 'about',
-          workspaceId: null,
+          workspaceMetadata: null,
         });
       },
     })

packages/frontend/core/src/commands/affine-navigation.tsx

@@ -94,7 +94,6 @@ export function registerAffineNavigationCommands({
       run() {
         store.set(openSettingModalAtom, {
           activeTab: 'appearance',
-          workspaceId: null,
           open: true,
         });
       },

packages/frontend/core/src/components/adapter-worksapce-wrapper.tsx

@@ -1,11 +1,12 @@
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
+import { useAtomValue } from 'jotai';
 import type { FC, PropsWithChildren } from 'react';
 
 import { WorkspaceAdapters } from '../adapters/workspace';
-import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 
 export const AdapterProviderWrapper: FC<PropsWithChildren> = ({ children }) => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
 
   const Provider = WorkspaceAdapters[currentWorkspace.flavour].UI.Provider;
   assertExists(Provider);

packages/frontend/core/src/components/affine/affine-error-boundary/error-basic/info-logger.tsx

@@ -1,8 +1,8 @@
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-} from '@toeverything/infra/atom';
+  currentWorkspaceAtom,
+  workspaceListAtom,
+} from '@affine/workspace/atom';
+import { currentPageIdAtom } from '@toeverything/infra/atom';
 import { useAtomValue } from 'jotai/react';
 import { useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -13,8 +13,8 @@ export interface DumpInfoProps {
 
 export const DumpInfo = (_props: DumpInfoProps) => {
   const location = useLocation();
-  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
-  const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
+  const workspaceList = useAtomValue(workspaceListAtom);
+  const currentWorkspace = useAtomValue(currentWorkspaceAtom);
   const currentPageId = useAtomValue(currentPageIdAtom);
   const path = location.pathname;
   const query = useParams();
@@ -22,10 +22,10 @@ export const DumpInfo = (_props: DumpInfoProps) => {
     console.info('DumpInfo', {
       path,
       query,
-      currentWorkspaceId,
+      currentWorkspaceId: currentWorkspace?.id,
       currentPageId,
-      metadata,
+      workspaceList,
     });
-  }, [path, query, currentWorkspaceId, currentPageId, metadata]);
+  }, [path, query, currentWorkspace, currentPageId, workspaceList]);
   return null;
 };

packages/frontend/core/src/components/affine/auth/user-plan-button.tsx

@@ -20,7 +20,6 @@ const UserPlanButtonWithData = () => {
       setSettingModalAtom({
         open: true,
         activeTab: 'plans',
-        workspaceId: null,
       });
     },
     [setSettingModalAtom]

packages/frontend/core/src/components/affine/awareness/index.tsx

@@ -1,26 +1,33 @@
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
+import { useAtomValue } from 'jotai';
 import { Suspense, useEffect } from 'react';
 
 import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
 import { useCurrentUser } from '../../../hooks/affine/use-current-user';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 
 const SyncAwarenessInnerLoggedIn = () => {
   const currentUser = useCurrentUser();
-  const [{ blockSuiteWorkspace: workspace }] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
 
   useEffect(() => {
-    if (currentUser && workspace) {
-      workspace.awarenessStore.awareness.setLocalStateField('user', {
-        name: currentUser.name,
-        // todo: add avatar?
-      });
+    if (currentUser && currentWorkspace) {
+      currentWorkspace.blockSuiteWorkspace.awarenessStore.awareness.setLocalStateField(
+        'user',
+        {
+          name: currentUser.name,
+          // todo: add avatar?
+        }
+      );
 
       return () => {
-        workspace.awarenessStore.awareness.setLocalStateField('user', null);
+        currentWorkspace.blockSuiteWorkspace.awarenessStore.awareness.setLocalStateField(
+          'user',
+          null
+        );
       };
     }
     return;
-  }, [currentUser, workspace]);
+  }, [currentUser, currentWorkspace]);
 
   return null;
 };

packages/frontend/core/src/components/affine/create-workspace-modal/index.tsx

@@ -1,27 +1,26 @@
 import { Input, toast } from '@affine/component';
-import { Button } from '@affine/component/ui/button';
 import {
   ConfirmModal,
   type ConfirmModalProps,
   Modal,
 } from '@affine/component/ui/modal';
-import { Tooltip } from '@affine/component/ui/tooltip';
 import { DebugLogger } from '@affine/debug';
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { HelpIcon } from '@blocksuite/icons';
+import { workspaceManagerAtom } from '@affine/workspace/atom';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import type {
-  LoadDBFileResult,
-  SelectDBFileLocationResult,
-} from '@toeverything/infra/type';
-import { useSetAtom } from 'jotai';
+import { getCurrentStore } from '@toeverything/infra/atom';
+import {
+  buildShowcaseWorkspace,
+  initEmptyPage,
+} from '@toeverything/infra/blocksuite';
+import type { LoadDBFileResult } from '@toeverything/infra/type';
+import { useAtomValue } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useEffect } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';
 
-import { openDisableCloudAlertModalAtom } from '../../../atoms';
-import { useAppHelper } from '../../../hooks/use-workspaces';
+import { setPageModeAtom } from '../../../atoms';
 import * as style from './index.css';
 
 type CreateWorkspaceStep =
@@ -94,159 +93,14 @@ const NameWorkspaceContent = ({
   );
 };
 
-interface SetDBLocationContentProps {
-  onConfirmLocation: (dir?: string) => void;
-}
-
-const useDefaultDBLocation = () => {
-  const [defaultDBLocation, setDefaultDBLocation] = useState('');
-
-  useEffect(() => {
-    window.apis?.db
-      .getDefaultStorageLocation()
-      .then(dir => {
-        setDefaultDBLocation(dir);
-      })
-      .catch(err => {
-        console.error(err);
-      });
-  }, []);
-
-  return defaultDBLocation;
-};
-
-const SetDBLocationContent = ({
-  onConfirmLocation,
-}: SetDBLocationContentProps) => {
-  const t = useAFFiNEI18N();
-  const defaultDBLocation = useDefaultDBLocation();
-  const [opening, setOpening] = useState(false);
-
-  const handleSelectDBFileLocation = useCallback(() => {
-    if (opening) {
-      return;
-    }
-    setOpening(true);
-    (async function () {
-      const result: SelectDBFileLocationResult =
-        await window.apis?.dialog.selectDBFileLocation();
-      setOpening(false);
-      if (result?.filePath) {
-        onConfirmLocation(result.filePath);
-      } else if (result?.error) {
-        toast(t[result.error]());
-      }
-    })().catch(err => {
-      logger.error(err);
-    });
-  }, [onConfirmLocation, opening, t]);
-
-  return (
-    <div className={style.content}>
-      <div className={style.contentTitle}>
-        {t['com.affine.setDBLocation.title']()}
-      </div>
-      <p>{t['com.affine.setDBLocation.description']()}</p>
-      <div className={style.buttonGroup}>
-        <Button
-          disabled={opening}
-          data-testid="create-workspace-customize-button"
-          type="primary"
-          onClick={handleSelectDBFileLocation}
-        >
-          {t['com.affine.setDBLocation.button.customize']()}
-        </Button>
-        <Tooltip
-          content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
-            location: defaultDBLocation,
-          })}
-        >
-          <Button
-            data-testid="create-workspace-default-location-button"
-            type="primary"
-            onClick={() => {
-              onConfirmLocation();
-            }}
-            icon={<HelpIcon />}
-            iconPosition="end"
-          >
-            {t['com.affine.setDBLocation.button.defaultLocation']()}
-          </Button>
-        </Tooltip>
-      </div>
-    </div>
-  );
-};
-
-interface SetSyncingModeContentProps {
-  mode: CreateWorkspaceMode;
-  onConfirmMode: (enableCloudSyncing: boolean) => void;
-}
-
-const SetSyncingModeContent = ({
-  mode,
-  onConfirmMode,
-}: SetSyncingModeContentProps) => {
-  const t = useAFFiNEI18N();
-  const [enableCloudSyncing, setEnableCloudSyncing] = useState(false);
-  return (
-    <div className={style.content}>
-      <div className={style.contentTitle}>
-        {mode === 'new'
-          ? t['com.affine.setSyncingMode.title.created']()
-          : t['com.affine.setSyncingMode.title.added']()}
-      </div>
-
-      <div className={style.radioGroup}>
-        <label onClick={() => setEnableCloudSyncing(false)}>
-          <input
-            className={style.radio}
-            type="radio"
-            readOnly
-            checked={!enableCloudSyncing}
-          />
-          {t['com.affine.setSyncingMode.deviceOnly']()}
-        </label>
-        <label onClick={() => setEnableCloudSyncing(true)}>
-          <input
-            className={style.radio}
-            type="radio"
-            readOnly
-            checked={enableCloudSyncing}
-          />
-          {t['com.affine.setSyncingMode.cloud']()}
-        </label>
-      </div>
-
-      <div className={style.buttonGroup}>
-        <Button
-          data-testid="create-workspace-continue-button"
-          type="primary"
-          onClick={() => {
-            onConfirmMode(enableCloudSyncing);
-          }}
-        >
-          {t['com.affine.setSyncingMode.button.continue']()}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
 export const CreateWorkspaceModal = ({
   mode,
   onClose,
   onCreate,
 }: ModalProps) => {
-  const { createLocalWorkspace, addLocalWorkspace } = useAppHelper();
   const [step, setStep] = useState<CreateWorkspaceStep>();
-  const [addedId, setAddedId] = useState<string>();
-  const [workspaceName, setWorkspaceName] = useState<string>();
-  const [dbFileLocation, setDBFileLocation] = useState<string>();
-  const setOpenDisableCloudAlertModal = useSetAtom(
-    openDisableCloudAlertModalAtom
-  );
   const t = useAFFiNEI18N();
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
 
   // todo: maybe refactor using xstate?
   useLayoutEffect(() => {
@@ -265,9 +119,8 @@ export const CreateWorkspaceModal = ({
         setStep(undefined);
         const result: LoadDBFileResult = await window.apis.dialog.loadDBFile();
         if (result.workspaceId && !canceled) {
-          setAddedId(result.workspaceId);
-          const newWorkspaceId = await addLocalWorkspace(result.workspaceId);
-          onCreate(newWorkspaceId);
+          workspaceManager._addLocalWorkspace(result.workspaceId);
+          onCreate(result.workspaceId);
         } else if (result.error || result.canceled) {
           if (result.error) {
             toast(t[result.error]());
@@ -285,77 +138,38 @@ export const CreateWorkspaceModal = ({
     return () => {
       canceled = true;
     };
-  }, [addLocalWorkspace, mode, onClose, onCreate, t]);
-
-  const onConfirmEnableCloudSyncing = useCallback(
-    (enableCloudSyncing: boolean) => {
-      (async function () {
-        if (!runtimeConfig.enableCloud && enableCloudSyncing) {
-          setOpenDisableCloudAlertModal(true);
-        } else {
-          let id = addedId;
-          // syncing mode is also the last step
-          if (addedId && mode === 'add') {
-            await addLocalWorkspace(addedId);
-          } else if (mode === 'new' && workspaceName) {
-            id = await createLocalWorkspace(workspaceName);
-            // if dbFileLocation is set, move db file to that location
-            if (dbFileLocation) {
-              await window.apis?.dialog.moveDBFile(id, dbFileLocation);
-            }
-          } else {
-            logger.error('invalid state');
-            return;
-          }
-          if (id) {
-            onCreate(id);
-          }
-        }
-      })().catch(e => {
-        logger.error(e);
-      });
-    },
-    [
-      addLocalWorkspace,
-      addedId,
-      createLocalWorkspace,
-      dbFileLocation,
-      mode,
-      onCreate,
-      setOpenDisableCloudAlertModal,
-      workspaceName,
-    ]
-  );
+  }, [mode, onClose, onCreate, t, workspaceManager]);
 
   const onConfirmName = useAsyncCallback(
     async (name: string) => {
-      setWorkspaceName(name);
       // this will be the last step for web for now
       // fix me later
-      const id = await createLocalWorkspace(name);
+      const id = await workspaceManager.createWorkspace(
+        WorkspaceFlavour.LOCAL,
+        async workspace => {
+          workspace.meta.setName(name);
+          if (runtimeConfig.enablePreloading) {
+            await buildShowcaseWorkspace(workspace, {
+              store: getCurrentStore(),
+              atoms: {
+                pageMode: setPageModeAtom,
+              },
+            });
+          } else {
+            const page = workspace.createPage();
+            workspace.setPageMeta(page.id, {
+              jumpOnce: true,
+            });
+            await initEmptyPage(page);
+          }
+          logger.debug('create first workspace');
+        }
+      );
       onCreate(id);
     },
-    [createLocalWorkspace, onCreate]
+    [onCreate, workspaceManager]
   );
 
-  const setDBLocationNode =
-    step === 'set-db-location' ? (
-      <SetDBLocationContent
-        onConfirmLocation={dir => {
-          setDBFileLocation(dir);
-          setStep('name-workspace');
-        }}
-      />
-    ) : null;
-
-  const setSyncingModeNode =
-    step === 'set-syncing-mode' ? (
-      <SetSyncingModeContent
-        mode={mode}
-        onConfirmMode={onConfirmEnableCloudSyncing}
-      />
-    ) : null;
-
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
@@ -384,8 +198,6 @@ export const CreateWorkspaceModal = ({
       }}
     >
       <div className={style.header}></div>
-      {setDBLocationNode}
-      {setSyncingModeNode}
     </Modal>
   );
 };

packages/frontend/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx

@@ -3,28 +3,28 @@ import {
   ConfirmModal,
   type ConfirmModalProps,
 } from '@affine/component/ui/modal';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import type { WorkspaceMetadata } from '@affine/workspace/metadata';
+import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
 import { useCallback, useState } from 'react';
 
 import * as styles from './style.css';
 
 interface WorkspaceDeleteProps extends ConfirmModalProps {
-  workspace: AffineOfficialWorkspace;
+  workspaceMetadata: WorkspaceMetadata;
 }
 
 export const WorkspaceDeleteModal = ({
-  workspace,
+  workspaceMetadata,
   ...props
 }: WorkspaceDeleteProps) => {
   const { onConfirm } = props;
-  const [workspaceName] = useBlockSuiteWorkspaceName(
-    workspace.blockSuiteWorkspace
-  );
   const [deleteStr, setDeleteStr] = useState<string>('');
+  const info = useWorkspaceInfo(workspaceMetadata);
+  const workspaceName = info?.name ?? UNTITLED_WORKSPACE_NAME;
   const allowDelete = deleteStr === workspaceName;
   const t = useAFFiNEI18N();
 
@@ -46,7 +46,7 @@ export const WorkspaceDeleteModal = ({
       }}
       {...props}
     >
-      {workspace.flavour === WorkspaceFlavour.LOCAL ? (
+      {workspaceMetadata.flavour === WorkspaceFlavour.LOCAL ? (
         <Trans i18nKey="com.affine.workspaceDelete.description">
           Deleting (
           <span className={styles.workspaceName}>

packages/frontend/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx

@@ -1,29 +1,44 @@
+import { pushNotificationAtom } from '@affine/component/notification-center';
 import { SettingRow } from '@affine/component/setting-components';
 import { ConfirmModal } from '@affine/component/ui/modal';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
-import { WorkspaceFlavour } from '@affine/env/workspace';
+import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  currentWorkspaceAtom,
+  workspaceListAtom,
+  workspaceManagerAtom,
+} from '@affine/workspace/atom';
 import { ArrowRightSmallIcon } from '@blocksuite/icons';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';
 
+import { openSettingModalAtom } from '../../../../atoms';
+import {
+  RouteLogic,
+  useNavigateHelper,
+} from '../../../../hooks/use-navigate-helper';
 import type { WorkspaceSettingDetailProps } from '../types';
 import { WorkspaceDeleteModal } from './delete';
 
-export interface DeleteLeaveWorkspaceProps extends WorkspaceSettingDetailProps {
-  workspace: AffineOfficialWorkspace;
-}
+export interface DeleteLeaveWorkspaceProps
+  extends WorkspaceSettingDetailProps {}
 
 export const DeleteLeaveWorkspace = ({
-  workspace,
-  onDeleteCloudWorkspace,
-  onDeleteLocalWorkspace,
-  onLeaveWorkspace,
+  workspaceMetadata,
   isOwner,
 }: DeleteLeaveWorkspaceProps) => {
   const t = useAFFiNEI18N();
+  const { jumpToSubPath, jumpToIndex } = useNavigateHelper();
   // fixme: cloud regression
   const [showDelete, setShowDelete] = useState(false);
   const [showLeave, setShowLeave] = useState(false);
+  const setSettingModal = useSetAtom(openSettingModalAtom);
+
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+  const workspaceList = useAtomValue(workspaceListAtom);
+  const currentWorkspace = useAtomValue(currentWorkspaceAtom);
+  const pushNotification = useSetAtom(pushNotificationAtom);
 
   const onLeaveOrDelete = useCallback(() => {
     if (isOwner) {
@@ -33,18 +48,41 @@ export const DeleteLeaveWorkspace = ({
     }
   }, [isOwner]);
 
-  const onLeaveConfirm = useCallback(() => {
-    return onLeaveWorkspace();
-  }, [onLeaveWorkspace]);
+  const onDeleteConfirm = useAsyncCallback(async () => {
+    setSettingModal(prev => ({ ...prev, open: false, workspaceId: null }));
 
-  const onDeleteConfirm = useCallback(() => {
-    if (workspace.flavour === WorkspaceFlavour.LOCAL) {
-      return onDeleteLocalWorkspace();
+    if (currentWorkspace?.id === workspaceMetadata.id) {
+      const backWorkspace = workspaceList.find(
+        ws => ws.id !== workspaceMetadata.id
+      );
+      // TODO: if there is no workspace, jump to a new page(wait for design)
+      if (backWorkspace) {
+        jumpToSubPath(
+          backWorkspace?.id || '',
+          WorkspaceSubPath.ALL,
+          RouteLogic.REPLACE
+        );
+      } else {
+        jumpToIndex(RouteLogic.REPLACE);
+      }
     }
-    if (workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
-      return onDeleteCloudWorkspace();
-    }
-  }, [onDeleteCloudWorkspace, onDeleteLocalWorkspace, workspace.flavour]);
+
+    await workspaceManager.deleteWorkspace(workspaceMetadata);
+    pushNotification({
+      title: t['Successfully deleted'](),
+      type: 'success',
+    });
+  }, [
+    currentWorkspace?.id,
+    jumpToIndex,
+    jumpToSubPath,
+    pushNotification,
+    setSettingModal,
+    t,
+    workspaceList,
+    workspaceManager,
+    workspaceMetadata,
+  ]);
 
   return (
     <>
@@ -68,13 +106,13 @@ export const DeleteLeaveWorkspace = ({
           onConfirm={onDeleteConfirm}
           open={showDelete}
           onOpenChange={setShowDelete}
-          workspace={workspace}
+          workspaceMetadata={workspaceMetadata}
         />
       ) : (
         <ConfirmModal
           open={showLeave}
           cancelText={t['com.affine.confirmModal.button.cancel']()}
-          onConfirm={onLeaveConfirm}
+          onConfirm={onDeleteConfirm}
           onOpenChange={setShowLeave}
           title={`${t['com.affine.deleteLeaveWorkspace.leave']()}?`}
           description={t['com.affine.deleteLeaveWorkspace.leaveDescription']()}

packages/frontend/core/src/components/affine/new-workspace-setting-detail/enable-cloud.tsx

@@ -0,0 +1,90 @@
+import { SettingRow } from '@affine/component/setting-components';
+import { Button } from '@affine/component/ui/button';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
+import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { Workspace } from '@affine/workspace';
+import { workspaceManagerAtom } from '@affine/workspace/atom';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useState } from 'react';
+
+import { openSettingModalAtom } from '../../../atoms';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
+import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
+import { TmpDisableAffineCloudModal } from '../tmp-disable-affine-cloud-modal';
+import type { WorkspaceSettingDetailProps } from './types';
+
+export interface PublishPanelProps extends WorkspaceSettingDetailProps {
+  workspace: Workspace | null;
+}
+
+export const EnableCloudPanel = ({
+  workspaceMetadata,
+  workspace,
+}: PublishPanelProps) => {
+  const t = useAFFiNEI18N();
+
+  const { openPage } = useNavigateHelper();
+
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+  const workspaceInfo = useWorkspaceInfo(workspaceMetadata);
+  const setSettingModal = useSetAtom(openSettingModalAtom);
+
+  const [open, setOpen] = useState(false);
+
+  const handleEnableCloud = useAsyncCallback(async () => {
+    if (!workspace) {
+      return;
+    }
+    const { id: newId } =
+      await workspaceManager.transformLocalToCloud(workspace);
+    openPage(newId, WorkspaceSubPath.ALL);
+    setOpen(false);
+    setSettingModal(settings => ({
+      ...settings,
+      open: false,
+    }));
+  }, [openPage, setSettingModal, workspace, workspaceManager]);
+
+  if (workspaceMetadata.flavour !== WorkspaceFlavour.LOCAL) {
+    return null;
+  }
+
+  return (
+    <>
+      <SettingRow
+        name={t['Workspace saved locally']({
+          name: workspaceInfo?.name ?? UNTITLED_WORKSPACE_NAME,
+        })}
+        desc={t['Enable cloud hint']()}
+        spreadCol={false}
+        style={{
+          padding: '10px',
+          background: 'var(--affine-background-secondary-color)',
+        }}
+      >
+        <Button
+          data-testid="publish-enable-affine-cloud-button"
+          type="primary"
+          onClick={() => {
+            setOpen(true);
+          }}
+          style={{ marginTop: '12px' }}
+        >
+          {t['Enable AFFiNE Cloud']()}
+        </Button>
+      </SettingRow>
+      {runtimeConfig.enableCloud ? (
+        <EnableAffineCloudModal
+          open={open}
+          onOpenChange={setOpen}
+          onConfirm={handleEnableCloud}
+        />
+      ) : (
+        <TmpDisableAffineCloudModal open={open} onOpenChange={setOpen} />
+      )}
+    </>
+  );
+};

packages/frontend/core/src/components/affine/new-workspace-setting-detail/export.tsx

@@ -1,69 +1,35 @@
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { SettingRow } from '@affine/component/setting-components';
 import { Button } from '@affine/component/ui/button';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { Workspace, WorkspaceMetadata } from '@affine/workspace';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import type { SaveDBFileResult } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
 import { useState } from 'react';
-import type { Doc } from 'yjs';
-import { encodeStateAsUpdate } from 'yjs';
-
-async function syncBlobsToSqliteDb(workspace: AffineOfficialWorkspace) {
-  if (window.apis && environment.isDesktop) {
-    const bs = workspace.blockSuiteWorkspace.blob;
-    const blobsInDb = await window.apis.db.getBlobKeys(workspace.id);
-    const blobsInStorage = await bs.list();
-    const blobsToSync = blobsInStorage.filter(
-      blob => !blobsInDb.includes(blob)
-    );
-
-    await Promise.all(
-      blobsToSync.map(async blobKey => {
-        const blob = await bs.get(blobKey);
-        if (blob) {
-          const bin = new Uint8Array(await blob.arrayBuffer());
-          await window.apis.db.addBlob(workspace.id, blobKey, bin);
-        }
-      })
-    );
-  }
-}
-
-async function syncDocsToSqliteDb(workspace: AffineOfficialWorkspace) {
-  if (window.apis && environment.isDesktop) {
-    const workspaceId = workspace.blockSuiteWorkspace.doc.guid;
-    const syncDoc = async (doc: Doc) => {
-      await window.apis.db.applyDocUpdate(
-        workspace.id,
-        encodeStateAsUpdate(doc),
-        doc.guid === workspaceId ? undefined : doc.guid
-      );
-      await Promise.all([...doc.subdocs].map(subdoc => syncDoc(subdoc)));
-    };
-
-    return syncDoc(workspace.blockSuiteWorkspace.doc);
-  }
-}
 
 interface ExportPanelProps {
-  workspace: AffineOfficialWorkspace;
+  workspaceMetadata: WorkspaceMetadata;
+  workspace: Workspace | null;
 }
 
-export const ExportPanel = ({ workspace }: ExportPanelProps) => {
-  const workspaceId = workspace.id;
+export const ExportPanel = ({
+  workspaceMetadata,
+  workspace,
+}: ExportPanelProps) => {
+  const workspaceId = workspaceMetadata.id;
   const t = useAFFiNEI18N();
-  const [syncing, setSyncing] = useState(false);
+  const [saving, setSaving] = useState(false);
+
   const pushNotification = useSetAtom(pushNotificationAtom);
   const onExport = useAsyncCallback(async () => {
-    if (syncing) {
+    if (saving || !workspace) {
       return;
     }
-    setSyncing(true);
+    setSaving(true);
     try {
-      await syncBlobsToSqliteDb(workspace);
-      await syncDocsToSqliteDb(workspace);
+      await workspace.engine.sync.waitForSynced();
+      await workspace.engine.blob.sync();
       const result: SaveDBFileResult =
         await window.apis?.dialog.saveDBFileAs(workspaceId);
       if (result?.error) {
@@ -81,16 +47,16 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
         message: e.message,
       });
     } finally {
-      setSyncing(false);
+      setSaving(false);
     }
-  }, [pushNotification, syncing, t, workspace, workspaceId]);
+  }, [pushNotification, saving, t, workspace, workspaceId]);
 
   return (
     <SettingRow name={t['Export']()} desc={t['Export Description']()}>
       <Button
         data-testid="export-affine-backup"
         onClick={onExport}
-        disabled={syncing}
+        disabled={saving}
       >
         {t['Export']()}
       </Button>

packages/frontend/core/src/components/affine/new-workspace-setting-detail/index.tsx

@@ -3,47 +3,38 @@ import {
   SettingRow,
   SettingWrapper,
 } from '@affine/component/setting-components';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { useMemo } from 'react';
+import { useWorkspace } from '@toeverything/hooks/use-workspace';
+import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
 
 import { useSelfHosted } from '../../../hooks/affine/use-server-flavor';
-import { useWorkspace } from '../../../hooks/use-workspace';
 import { DeleteLeaveWorkspace } from './delete-leave-workspace';
+import { EnableCloudPanel } from './enable-cloud';
 import { ExportPanel } from './export';
 import { LabelsPanel } from './labels';
 import { MembersPanel } from './members';
 import { ProfilePanel } from './profile';
-import { PublishPanel } from './publish';
 import { StoragePanel } from './storage';
 import type { WorkspaceSettingDetailProps } from './types';
 
 export const WorkspaceSettingDetail = (props: WorkspaceSettingDetailProps) => {
-  const { workspaceId } = props;
   const t = useAFFiNEI18N();
   const isSelfHosted = useSelfHosted();
-  const workspace = useWorkspace(workspaceId);
-  const [name] = useBlockSuiteWorkspaceName(workspace.blockSuiteWorkspace);
+  const workspaceMetadata = props.workspaceMetadata;
 
-  const storageAndExportSetting = useMemo(() => {
-    if (environment.isDesktop) {
-      return (
-        <SettingWrapper title={t['Storage and Export']()}>
-          {runtimeConfig.enableMoveDatabase ? (
-            <StoragePanel workspace={workspace} />
-          ) : null}
-          <ExportPanel workspace={workspace} />
-        </SettingWrapper>
-      );
-    } else {
-      return null;
-    }
-  }, [t, workspace]);
+  // useWorkspace hook is a vary heavy operation here, but we need syncing name and avatar changes here,
+  // we don't have a better way to do this now
+  const workspace = useWorkspace(workspaceMetadata);
+
+  const workspaceInfo = useWorkspaceInfo(workspaceMetadata);
 
   return (
     <>
       <SettingHeader
-        title={t[`Workspace Settings with name`]({ name })}
+        title={t[`Workspace Settings with name`]({
+          name: workspaceInfo?.name ?? UNTITLED_WORKSPACE_NAME,
+        })}
         subtitle={t['com.affine.settings.workspace.description']()}
       />
       <SettingWrapper title={t['Info']()}>
@@ -53,20 +44,26 @@ export const WorkspaceSettingDetail = (props: WorkspaceSettingDetailProps) => {
           spreadCol={false}
         >
           <ProfilePanel workspace={workspace} {...props} />
-          <LabelsPanel workspace={workspace} {...props} />
+          <LabelsPanel {...props} />
         </SettingRow>
       </SettingWrapper>
       <SettingWrapper title={t['com.affine.brand.affineCloud']()}>
-        <PublishPanel workspace={workspace} {...props} />
-        <MembersPanel
-          workspace={workspace}
-          upgradable={!isSelfHosted}
-          {...props}
-        />
+        <EnableCloudPanel workspace={workspace} {...props} />
+        <MembersPanel upgradable={!isSelfHosted} {...props} />
       </SettingWrapper>
-      {storageAndExportSetting}
+      {environment.isDesktop && (
+        <SettingWrapper title={t['Storage and Export']()}>
+          {runtimeConfig.enableMoveDatabase ? (
+            <StoragePanel workspaceMetadata={workspaceMetadata} />
+          ) : null}
+          <ExportPanel
+            workspace={workspace}
+            workspaceMetadata={workspaceMetadata}
+          />
+        </SettingWrapper>
+      )}
       <SettingWrapper>
-        <DeleteLeaveWorkspace workspace={workspace} {...props} />
+        <DeleteLeaveWorkspace {...props} />
       </SettingWrapper>
     </>
   );

packages/frontend/core/src/components/affine/new-workspace-setting-detail/labels.tsx

@@ -1,12 +1,9 @@
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
 import { useMemo } from 'react';
 
 import * as style from './style.css';
 import type { WorkspaceSettingDetailProps } from './types';
 
-export interface LabelsPanelProps extends WorkspaceSettingDetailProps {
-  workspace: AffineOfficialWorkspace;
-}
+export interface LabelsPanelProps extends WorkspaceSettingDetailProps {}
 
 type WorkspaceStatus =
   | 'local'
@@ -38,7 +35,10 @@ const Label = ({ value, background }: LabelProps) => {
     </div>
   );
 };
-export const LabelsPanel = ({ workspace, isOwner }: LabelsPanelProps) => {
+export const LabelsPanel = ({
+  workspaceMetadata,
+  isOwner,
+}: LabelsPanelProps) => {
   const labelMap: LabelMap = useMemo(
     () => ({
       local: {
@@ -74,11 +74,10 @@ export const LabelsPanel = ({ workspace, isOwner }: LabelsPanelProps) => {
   );
   const labelConditions: labelConditionsProps[] = [
     { condition: !isOwner, label: 'joinedWorkspace' },
-    { condition: workspace.flavour === 'local', label: 'local' },
-    { condition: workspace.flavour === 'affine-cloud', label: 'syncCloud' },
+    { condition: workspaceMetadata.flavour === 'local', label: 'local' },
     {
-      condition: workspace.flavour === 'affine-public',
-      label: 'publishedToWeb',
+      condition: workspaceMetadata.flavour === 'affine-cloud',
+      label: 'syncCloud',
     },
     //TODO: add these labels
     // { status==="synced", label: 'availableOffline' }

packages/frontend/core/src/components/affine/new-workspace-setting-detail/members.tsx

@@ -13,7 +13,6 @@ import { Button, IconButton } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
 import { Menu, MenuItem } from '@affine/component/ui/menu';
 import { Tooltip } from '@affine/component/ui/tooltip';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Permission } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -45,7 +44,6 @@ import type { WorkspaceSettingDetailProps } from './types';
 const COUNT_PER_PAGE = 8;
 export interface MembersPanelProps extends WorkspaceSettingDetailProps {
   upgradable: boolean;
-  workspace: AffineOfficialWorkspace;
 }
 type OnRevoke = (memberId: string) => void;
 const MembersPanelLocal = () => {
@@ -62,11 +60,11 @@ const MembersPanelLocal = () => {
 };
 
 export const CloudWorkspaceMembersPanel = ({
-  workspace,
   isOwner,
   upgradable,
+  workspaceMetadata,
 }: MembersPanelProps) => {
-  const workspaceId = workspace.id;
+  const workspaceId = workspaceMetadata.id;
   const memberCount = useMemberCount(workspaceId);
 
   const t = useAFFiNEI18N();
@@ -138,7 +136,6 @@ export const CloudWorkspaceMembersPanel = ({
     setSettingModalAtom({
       open: true,
       activeTab: 'plans',
-      workspaceId: null,
     });
   }, [setSettingModalAtom]);
 
@@ -345,7 +342,7 @@ const MemberItem = ({
 };
 
 export const MembersPanel = (props: MembersPanelProps): ReactElement | null => {
-  if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
+  if (props.workspaceMetadata.flavour === WorkspaceFlavour.LOCAL) {
     return <MembersPanelLocal />;
   }
   return (

packages/frontend/core/src/components/affine/new-workspace-setting-detail/profile.tsx

@@ -2,51 +2,120 @@ import { FlexWrapper, Input, Wrapper } from '@affine/component';
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { Avatar } from '@affine/component/ui/avatar';
 import { Button } from '@affine/component/ui/button';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { Workspace } from '@affine/workspace';
+import { SyncPeerStep } from '@affine/workspace';
 import { CameraIcon } from '@blocksuite/icons';
-import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { useWorkspaceBlobObjectUrl } from '@toeverything/hooks/use-workspace-blob';
+import { useWorkspaceStatus } from '@toeverything/hooks/use-workspace-status';
 import { useSetAtom } from 'jotai';
 import {
   type KeyboardEvent,
   type MouseEvent,
   startTransition,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 
+import { validateAndReduceImage } from '../../../utils/reduce-image';
 import { Upload } from '../../pure/file-upload';
 import * as style from './style.css';
 import type { WorkspaceSettingDetailProps } from './types';
 
 export interface ProfilePanelProps extends WorkspaceSettingDetailProps {
-  workspace: AffineOfficialWorkspace;
+  workspace: Workspace | null;
 }
 
-export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
+export const ProfilePanel = ({ isOwner, workspace }: ProfilePanelProps) => {
   const t = useAFFiNEI18N();
   const pushNotification = useSetAtom(pushNotificationAtom);
 
-  const [workspaceAvatar, update] = useBlockSuiteWorkspaceAvatarUrl(
-    workspace.blockSuiteWorkspace
+  const workspaceIsLoading =
+    useWorkspaceStatus(
+      workspace,
+      status =>
+        !status.engine.sync.local ||
+        status.engine.sync.local?.step <= SyncPeerStep.LoadingRootDoc
+    ) ?? true;
+
+  const [avatarBlob, setAvatarBlob] = useState<string | null>(null);
+  const [name, setName] = useState('');
+
+  const avatarUrl = useWorkspaceBlobObjectUrl(workspace?.meta, avatarBlob);
+
+  useEffect(() => {
+    if (workspace?.blockSuiteWorkspace) {
+      setAvatarBlob(workspace.blockSuiteWorkspace.meta.avatar ?? null);
+      setName(
+        workspace.blockSuiteWorkspace.meta.name ?? UNTITLED_WORKSPACE_NAME
+      );
+      const dispose = workspace.blockSuiteWorkspace.meta.commonFieldsUpdated.on(
+        () => {
+          setAvatarBlob(workspace.blockSuiteWorkspace.meta.avatar ?? null);
+          setName(
+            workspace.blockSuiteWorkspace.meta.name ?? UNTITLED_WORKSPACE_NAME
+          );
+        }
+      );
+      return () => {
+        dispose.dispose();
+      };
+    } else {
+      setAvatarBlob(null);
+      setName(UNTITLED_WORKSPACE_NAME);
+    }
+    return;
+  }, [workspace]);
+
+  const setWorkspaceAvatar = useCallback(
+    async (file: File | null) => {
+      if (!workspace) {
+        return;
+      }
+      if (!file) {
+        workspace.blockSuiteWorkspace.meta.setAvatar('');
+        return;
+      }
+      try {
+        const reducedFile = await validateAndReduceImage(file);
+        const blobs = workspace.blockSuiteWorkspace.blob;
+        const blobId = await blobs.set(reducedFile);
+        workspace.blockSuiteWorkspace.meta.setAvatar(blobId);
+      } catch (error) {
+        console.error(error);
+        throw error;
+      }
+    },
+    [workspace]
   );
 
-  const [name, setName] = useBlockSuiteWorkspaceName(
-    workspace.blockSuiteWorkspace
+  const setWorkspaceName = useCallback(
+    (name: string) => {
+      if (!workspace) {
+        return;
+      }
+      workspace.blockSuiteWorkspace.meta.setName(name);
+    },
+    [workspace]
   );
 
-  const [input, setInput] = useState<string>(name);
+  const [input, setInput] = useState<string>('');
+  useEffect(() => {
+    setInput(name);
+  }, [name]);
 
   const handleUpdateWorkspaceName = useCallback(
     (name: string) => {
-      setName(name);
+      setWorkspaceName(name);
       pushNotification({
         title: t['Update workspace name success'](),
         type: 'success',
       });
     },
-    [pushNotification, setName, t]
+    [pushNotification, setWorkspaceName, t]
   );
 
   const handleSetInput = useCallback((value: string) => {
@@ -68,17 +137,17 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
     handleUpdateWorkspaceName(input);
   }, [handleUpdateWorkspaceName, input]);
 
-  const handleRemoveUserAvatar = useCallback(
+  const handleRemoveUserAvatar = useAsyncCallback(
     async (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
-      await update(null);
+      await setWorkspaceAvatar(null);
     },
-    [update]
+    [setWorkspaceAvatar]
   );
 
   const handleUploadAvatar = useCallback(
     (file: File) => {
-      update(file)
+      setWorkspaceAvatar(file)
         .then(() => {
           pushNotification({
             title: 'Update workspace avatar success',
@@ -93,10 +162,10 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
           });
         });
     },
-    [pushNotification, update]
+    [pushNotification, setWorkspaceAvatar]
   );
 
-  const canAdjustAvatar = workspaceAvatar && isOwner;
+  const canAdjustAvatar = !workspaceIsLoading && avatarUrl && isOwner;
 
   return (
     <div className={style.profileWrapper}>
@@ -108,7 +177,7 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
       >
         <Avatar
           size={56}
-          url={workspaceAvatar}
+          url={avatarUrl}
           name={name}
           colorfulFallback
           hoverIcon={isOwner ? <CameraIcon /> : undefined}
@@ -132,10 +201,10 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
         <div className={style.label}>{t['Workspace Name']()}</div>
         <FlexWrapper alignItems="center" flexGrow="1">
           <Input
-            disabled={!isOwner}
+            disabled={workspaceIsLoading || !isOwner}
             width={280}
             height={32}
-            defaultValue={input}
+            value={input}
             data-testid="workspace-name-input"
             placeholder={t['Workspace Name']()}
             maxLength={64}
@@ -143,7 +212,7 @@ export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
             onChange={handleSetInput}
             onKeyUp={handleKeyUp}
           />
-          {input === workspace.blockSuiteWorkspace.meta.name ? null : (
+          {input === name ? null : (
             <Button
               data-testid="save-workspace-name"
               onClick={handleClick}

packages/frontend/core/src/components/affine/new-workspace-setting-detail/publish.tsx

@@ -1,169 +0,0 @@
-import { FlexWrapper, Input, Switch } from '@affine/component';
-import { SettingRow } from '@affine/component/setting-components';
-import { Button } from '@affine/component/ui/button';
-import { Tooltip } from '@affine/component/ui/tooltip';
-import { Unreachable } from '@affine/env/constant';
-import type {
-  AffineCloudWorkspace,
-  AffinePublicWorkspace,
-  LocalWorkspace,
-} from '@affine/env/workspace';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { noop } from 'foxact/noop';
-import { useEffect, useMemo, useState } from 'react';
-
-import { toast } from '../../../utils';
-import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
-import { TmpDisableAffineCloudModal } from '../tmp-disable-affine-cloud-modal';
-import * as style from './style.css';
-import type { WorkspaceSettingDetailProps } from './types';
-
-export interface PublishPanelProps
-  extends Omit<WorkspaceSettingDetailProps, 'workspaceId'> {
-  workspace: AffineOfficialWorkspace;
-}
-export interface PublishPanelLocalProps
-  extends Omit<WorkspaceSettingDetailProps, 'workspaceId'> {
-  workspace: LocalWorkspace;
-}
-export interface PublishPanelAffineProps
-  extends Omit<WorkspaceSettingDetailProps, 'workspaceId'> {
-  workspace: AffineCloudWorkspace | AffinePublicWorkspace;
-}
-
-const PublishPanelAffine = (props: PublishPanelAffineProps) => {
-  const { workspace } = props;
-  const t = useAFFiNEI18N();
-  // const toggleWorkspacePublish = useToggleWorkspacePublish(workspace);
-  const isPublic = useMemo(() => {
-    return workspace.flavour === WorkspaceFlavour.AFFINE_PUBLIC;
-  }, [workspace]);
-  const [origin, setOrigin] = useState('');
-  const shareUrl = origin + '/public-workspace/' + workspace.id;
-
-  useEffect(() => {
-    setOrigin(
-      typeof window !== 'undefined' && window.location.origin
-        ? window.location.origin
-        : ''
-    );
-  }, []);
-
-  const copyUrl = useAsyncCallback(async () => {
-    await navigator.clipboard.writeText(shareUrl);
-    toast(t['Copied link to clipboard']());
-  }, [shareUrl, t]);
-
-  return (
-    <div style={{ display: 'none' }}>
-      <SettingRow
-        name={t['Publish']()}
-        desc={isPublic ? t['Unpublished hint']() : t['Published hint']()}
-        style={{
-          marginBottom: isPublic ? '12px' : '25px',
-        }}
-      >
-        <Switch checked={isPublic} />
-      </SettingRow>
-      {isPublic ? (
-        <FlexWrapper justifyContent="space-between" marginBottom={25}>
-          <Input value={shareUrl} disabled />
-          <Button
-            onClick={copyUrl}
-            style={{
-              marginLeft: '20px',
-            }}
-          >
-            {t['Copy']()}
-          </Button>
-        </FlexWrapper>
-      ) : null}
-    </div>
-  );
-};
-
-interface FakePublishPanelAffineProps {
-  workspace: AffineOfficialWorkspace;
-}
-
-const FakePublishPanelAffine = (_props: FakePublishPanelAffineProps) => {
-  const t = useAFFiNEI18N();
-
-  return (
-    <Tooltip content={t['com.affine.settings.workspace.publish-tooltip']()}>
-      <div className={style.fakeWrapper}>
-        <SettingRow name={t['Publish']()} desc={t['Unpublished hint']()}>
-          <Switch checked={false} onChange={noop} />
-        </SettingRow>
-      </div>
-    </Tooltip>
-  );
-};
-
-const PublishPanelLocal = ({
-  workspace,
-  onTransferWorkspace,
-}: PublishPanelLocalProps) => {
-  const t = useAFFiNEI18N();
-  const [name] = useBlockSuiteWorkspaceName(workspace.blockSuiteWorkspace);
-
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <SettingRow
-        name={t['Workspace saved locally']({ name })}
-        desc={t['Enable cloud hint']()}
-        spreadCol={false}
-        style={{
-          padding: '10px',
-          background: 'var(--affine-background-secondary-color)',
-        }}
-      >
-        <Button
-          data-testid="publish-enable-affine-cloud-button"
-          type="primary"
-          onClick={() => {
-            setOpen(true);
-          }}
-          style={{ marginTop: '12px' }}
-        >
-          {t['Enable AFFiNE Cloud']()}
-        </Button>
-      </SettingRow>
-      <FakePublishPanelAffine workspace={workspace} />
-      {runtimeConfig.enableCloud ? (
-        <EnableAffineCloudModal
-          open={open}
-          onOpenChange={setOpen}
-          onConfirm={() => {
-            onTransferWorkspace(
-              WorkspaceFlavour.LOCAL,
-              WorkspaceFlavour.AFFINE_CLOUD,
-              workspace
-            );
-            setOpen(false);
-          }}
-        />
-      ) : (
-        <TmpDisableAffineCloudModal open={open} onOpenChange={setOpen} />
-      )}
-    </>
-  );
-};
-
-export const PublishPanel = (props: PublishPanelProps) => {
-  if (
-    props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD ||
-    props.workspace.flavour === WorkspaceFlavour.AFFINE_PUBLIC
-  ) {
-    return <PublishPanelAffine {...props} workspace={props.workspace} />;
-  } else if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
-    return <PublishPanelLocal {...props} workspace={props.workspace} />;
-  }
-  throw new Unreachable();
-};

packages/frontend/core/src/components/affine/new-workspace-setting-detail/storage.tsx

@@ -2,8 +2,8 @@ import { FlexWrapper, toast } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Button } from '@affine/component/ui/button';
 import { Tooltip } from '@affine/component/ui/tooltip';
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 import type { MoveDBFileResult } from '@toeverything/infra/type';
 import { useMemo } from 'react';
 import { useCallback, useEffect, useState } from 'react';
@@ -33,11 +33,11 @@ const useDBFileSecondaryPath = (workspaceId: string) => {
 };
 
 interface StoragePanelProps {
-  workspace: AffineOfficialWorkspace;
+  workspaceMetadata: WorkspaceMetadata;
 }
 
-export const StoragePanel = ({ workspace }: StoragePanelProps) => {
-  const workspaceId = workspace.id;
+export const StoragePanel = ({ workspaceMetadata }: StoragePanelProps) => {
+  const workspaceId = workspaceMetadata.id;
   const t = useAFFiNEI18N();
   const secondaryPath = useDBFileSecondaryPath(workspaceId);
 

packages/frontend/core/src/components/affine/new-workspace-setting-detail/types.ts

@@ -1,20 +1,6 @@
-import type {
-  WorkspaceFlavour,
-  WorkspaceRegistry,
-} from '@affine/env/workspace';
+import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 
 export interface WorkspaceSettingDetailProps {
-  workspaceId: string;
   isOwner: boolean;
-  onDeleteLocalWorkspace: () => void;
-  onDeleteCloudWorkspace: () => void;
-  onLeaveWorkspace: () => void;
-  onTransferWorkspace: <
-    From extends WorkspaceFlavour,
-    To extends WorkspaceFlavour,
-  >(
-    from: From,
-    to: To,
-    workspace: WorkspaceRegistry[From]
-  ) => void;
+  workspaceMetadata: WorkspaceMetadata;
 }

packages/frontend/core/src/components/affine/page-history-modal/data.ts

@@ -5,13 +5,15 @@ import {
   listHistoryQuery,
   recoverDocMutation,
 } from '@affine/graphql';
+import {
+  createAffineCloudBlobStorage,
+  globalBlockSuiteSchema,
+} from '@affine/workspace';
 import {
   useMutateQueryResource,
   useMutation,
   useQueryInfinite,
 } from '@affine/workspace/affine/gql';
-import { createAffineCloudBlobEngine } from '@affine/workspace/blob';
-import { globalBlockSuiteSchema } from '@affine/workspace/manager';
 import { assertEquals } from '@blocksuite/global/utils';
 import { Workspace } from '@blocksuite/store';
 import { usePageMetaHelper } from '@toeverything/hooks/use-block-suite-page-meta';
@@ -107,27 +109,13 @@ const workspaceMap = new Map<string, Workspace>();
 const getOrCreateWorkspace = (workspaceId: string) => {
   let workspace = workspaceMap.get(workspaceId);
   if (!workspace) {
-    const blobEngine = createAffineCloudBlobEngine(workspaceId);
+    const blobStorage = createAffineCloudBlobStorage(workspaceId);
     workspace = new Workspace({
       id: workspaceId,
       providerCreators: [],
       blobStorages: [
         () => ({
-          crud: {
-            async get(key) {
-              return (await blobEngine.get(key)) ?? null;
-            },
-            async set(key, value) {
-              await blobEngine.set(key, value);
-              return key;
-            },
-            async delete(key) {
-              return blobEngine.delete(key);
-            },
-            async list() {
-              return blobEngine.list();
-            },
-          },
+          crud: blobStorage,
         }),
       ],
       schema: globalBlockSuiteSchema,

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -7,6 +7,7 @@ import { Button } from '@affine/component/ui/button';
 import { ConfirmModal, Modal } from '@affine/component/ui/modal';
 import type { PageMode } from '@affine/core/atoms';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import type { Workspace } from '@blocksuite/store';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
@@ -22,7 +23,6 @@ import {
 
 import { currentModeAtom } from '../../../atoms/mode';
 import { pageHistoryModalAtom } from '../../../atoms/page-history';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { StyledEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch/style';
 import {
   EdgelessSwitchItem,
@@ -423,7 +423,7 @@ export const PageHistoryModal = ({
 
 export const GlobalPageHistoryModal = () => {
   const [{ open, pageId }, setState] = useAtom(pageHistoryModalAtom);
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
 
   const handleOpenChange = useCallback(
     (open: boolean) => {

packages/frontend/core/src/components/affine/setting-modal/account-setting/index.tsx

@@ -17,7 +17,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useMutation, useQuery } from '@affine/workspace/affine/gql';
 import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import { validateAndReduceImage } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
 import bytes from 'bytes';
 import { useSetAtom } from 'jotai';
 import {
@@ -37,6 +36,7 @@ import {
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
 import { useSelfHosted } from '../../../../hooks/affine/use-server-flavor';
 import { useUserSubscription } from '../../../../hooks/use-subscription';
+import { validateAndReduceImage } from '../../../../utils/reduce-image';
 import { Upload } from '../../../pure/file-upload';
 import * as style from './style.css';
 
@@ -187,7 +187,6 @@ const StoragePanel = () => {
     setSettingModalAtom({
       open: true,
       activeTab: 'plans',
-      workspaceId: null,
     });
   }, [setSettingModalAtom]);
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -119,7 +119,6 @@ const SubscriptionSettings = () => {
     setOpenSettingModalAtom({
       open: true,
       activeTab: 'plans',
-      workspaceId: null,
     });
   }, [setOpenSettingModalAtom]);
 

packages/frontend/core/src/components/affine/setting-modal/index.tsx

@@ -1,6 +1,7 @@
 import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
 import { Modal, type ModalProps } from '@affine/component/ui/modal';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 import { ContactWithUsIcon } from '@blocksuite/icons';
 import { debounce } from 'lodash-es';
 import { Suspense, useCallback, useLayoutEffect, useRef } from 'react';
@@ -20,16 +21,16 @@ type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
 
 export interface SettingProps extends ModalProps {
   activeTab: ActiveTab;
-  workspaceId: string | null;
+  workspaceMetadata?: WorkspaceMetadata | null;
   onSettingClick: (params: {
     activeTab: ActiveTab;
-    workspaceId: string | null;
+    workspaceMetadata: WorkspaceMetadata | null;
   }) => void;
 }
 
 export const SettingModal = ({
   activeTab = 'appearance',
-  workspaceId = null,
+  workspaceMetadata = null,
   onSettingClick,
   ...modalProps
 }: SettingProps) => {
@@ -75,22 +76,22 @@ export const SettingModal = ({
     (key: GeneralSettingKeys) => {
       onSettingClick({
         activeTab: key,
-        workspaceId: null,
+        workspaceMetadata: null,
       });
     },
     [onSettingClick]
   );
   const onWorkspaceSettingClick = useCallback(
-    (workspaceId: string) => {
+    (workspaceMetadata: WorkspaceMetadata) => {
       onSettingClick({
         activeTab: 'workspace',
-        workspaceId,
+        workspaceMetadata,
       });
     },
     [onSettingClick]
   );
   const onAccountSettingClick = useCallback(() => {
-    onSettingClick({ activeTab: 'account', workspaceId: null });
+    onSettingClick({ activeTab: 'account', workspaceMetadata: null });
   }, [onSettingClick]);
 
   return (
@@ -114,7 +115,7 @@ export const SettingModal = ({
         onGeneralSettingClick={onGeneralSettingClick}
         onWorkspaceSettingClick={onWorkspaceSettingClick}
         selectedGeneralKey={activeTab}
-        selectedWorkspaceId={workspaceId}
+        selectedWorkspaceId={workspaceMetadata?.id ?? null}
         onAccountSettingClick={onAccountSettingClick}
       />
 
@@ -125,9 +126,12 @@ export const SettingModal = ({
       >
         <div ref={modalContentRef} className={style.centerContainer}>
           <div className={style.content}>
-            {activeTab === 'workspace' && workspaceId ? (
+            {activeTab === 'workspace' && workspaceMetadata ? (
               <Suspense fallback={<WorkspaceDetailSkeleton />}>
-                <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
+                <WorkspaceSetting
+                  key={workspaceMetadata.id}
+                  workspaceMetadata={workspaceMetadata}
+                />
               </Suspense>
             ) : null}
             {generalSettingList.some(v => v.key === activeTab) ? (

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -4,22 +4,23 @@ import {
 } from '@affine/component/setting-components';
 import { Avatar } from '@affine/component/ui/avatar';
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { WorkspaceFlavour } from '@affine/env/workspace';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import type { WorkspaceMetadata } from '@affine/workspace';
+import {
+  waitForCurrentWorkspaceAtom,
+  workspaceListAtom,
+} from '@affine/workspace/atom';
 import { Logo1Icon } from '@blocksuite/icons';
-import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
+import { useWorkspaceBlobObjectUrl } from '@toeverything/hooks/use-workspace-blob';
+import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
 import clsx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai/react';
-import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
+import { type ReactElement, Suspense, useCallback } from 'react';
 
 import { authAtom } from '../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
 import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
-import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import { UserPlanButton } from '../../auth/user-plan-button';
 import type {
   GeneralSettingKeys,
@@ -109,7 +110,7 @@ export const SettingSidebar = ({
 }: {
   generalSettingList: GeneralSettingList;
   onGeneralSettingClick: (key: GeneralSettingKeys) => void;
-  onWorkspaceSettingClick: (workspaceId: string) => void;
+  onWorkspaceSettingClick: (workspaceMetadata: WorkspaceMetadata) => void;
   selectedWorkspaceId: string | null;
   selectedGeneralKey: string | null;
   onAccountSettingClick: () => void;
@@ -182,25 +183,20 @@ export const WorkspaceList = ({
   onWorkspaceSettingClick,
   selectedWorkspaceId,
 }: {
-  onWorkspaceSettingClick: (workspaceId: string) => void;
+  onWorkspaceSettingClick: (workspaceMetadata: WorkspaceMetadata) => void;
   selectedWorkspaceId: string | null;
 }) => {
-  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
-  const [currentWorkspace] = useCurrentWorkspace();
-  const workspaceList = useMemo(() => {
-    return workspaces.filter(
-      ({ flavour }) => flavour !== WorkspaceFlavour.AFFINE_PUBLIC
-    );
-  }, [workspaces]);
+  const workspaces = useAtomValue(workspaceListAtom);
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   return (
     <>
-      {workspaceList.map(workspace => {
+      {workspaces.map(workspace => {
         return (
           <Suspense key={workspace.id} fallback={<WorkspaceListItemSkeleton />}>
             <WorkspaceListItem
               meta={workspace}
               onClick={() => {
-                onWorkspaceSettingClick(workspace.id);
+                onWorkspaceSettingClick(workspace);
               }}
               isCurrent={workspace.id === currentWorkspace.id}
               isActive={workspace.id === selectedWorkspaceId}
@@ -218,33 +214,34 @@ const WorkspaceListItem = ({
   isCurrent,
   isActive,
 }: {
-  meta: RootWorkspaceMetadata;
+  meta: WorkspaceMetadata;
   onClick: () => void;
   isCurrent: boolean;
   isActive: boolean;
 }) => {
-  const [workspaceAtom] = getBlockSuiteWorkspaceAtom(meta.id);
-  const workspace = useAtomValue(workspaceAtom);
-  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
-  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
+  const information = useWorkspaceInfo(meta);
+
+  const avatarUrl = useWorkspaceBlobObjectUrl(meta, information?.avatar);
+
+  const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
   return (
     <div
       className={clsx(sidebarSelectItem, { active: isActive })}
-      title={workspaceName}
+      title={name}
       onClick={onClick}
       data-testid="workspace-list-item"
     >
       <Avatar
         size={14}
-        url={workspaceAvatar}
-        name={workspaceName}
+        url={avatarUrl}
+        name={name}
         colorfulFallback
         style={{
           marginRight: '10px',
         }}
       />
-      <span className="setting-name">{workspaceName}</span>
+      <span className="setting-name">{name}</span>
       {isCurrent ? (
         <Tooltip content="Current" side="top">
           <div

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/index.tsx

@@ -1,113 +1,18 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
-import { WorkspaceSubPath } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
-import { useSetAtom } from 'jotai';
-import { useAtomValue } from 'jotai';
-import { useCallback } from 'react';
+import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 
-import { getUIAdapter } from '../../../../adapters/workspace';
-import { openSettingModalAtom } from '../../../../atoms';
-import { useLeaveWorkspace } from '../../../../hooks/affine/use-leave-workspace';
-import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
-import { useOnTransformWorkspace } from '../../../../hooks/root/use-on-transform-workspace';
-import {
-  RouteLogic,
-  useNavigateHelper,
-} from '../../../../hooks/use-navigate-helper';
-import { useWorkspace } from '../../../../hooks/use-workspace';
-import { useAppHelper } from '../../../../hooks/use-workspaces';
-
-export const WorkspaceSetting = ({ workspaceId }: { workspaceId: string }) => {
-  const t = useAFFiNEI18N();
-
-  const { jumpToSubPath, jumpToIndex } = useNavigateHelper();
-  const [currentWorkspace] = useCurrentWorkspace();
-
-  const workspace = useWorkspace(workspaceId);
-  const [workspaceName] = useBlockSuiteWorkspaceName(
-    workspace.blockSuiteWorkspace
-  );
-  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
-  const pushNotification = useSetAtom(pushNotificationAtom);
-
-  const leaveWorkspace = useLeaveWorkspace();
-  const setSettingModal = useSetAtom(openSettingModalAtom);
-  const { deleteWorkspace } = useAppHelper();
-
-  const { NewSettingsDetail } = getUIAdapter(workspace.flavour);
-
-  const closeAndJumpOut = useCallback(() => {
-    setSettingModal(prev => ({ ...prev, open: false, workspaceId: null }));
-
-    if (currentWorkspace.id === workspaceId) {
-      const backWorkspace = workspaces.find(ws => ws.id !== workspaceId);
-      // TODO: if there is no workspace, jump to a new page(wait for design)
-      if (backWorkspace) {
-        jumpToSubPath(
-          backWorkspace?.id || '',
-          WorkspaceSubPath.ALL,
-          RouteLogic.REPLACE
-        );
-      } else {
-        setTimeout(() => {
-          jumpToIndex(RouteLogic.REPLACE);
-        }, 100);
-      }
-    }
-  }, [
-    currentWorkspace.id,
-    jumpToIndex,
-    jumpToSubPath,
-    setSettingModal,
-    workspaceId,
-    workspaces,
-  ]);
-
-  const handleDeleteWorkspace = useAsyncCallback(async () => {
-    closeAndJumpOut();
-    await deleteWorkspace(workspaceId);
-
-    pushNotification({
-      title: t['Successfully deleted'](),
-      type: 'success',
-    });
-  }, [closeAndJumpOut, deleteWorkspace, pushNotification, t, workspaceId]);
-
-  const handleLeaveWorkspace = useAsyncCallback(async () => {
-    closeAndJumpOut();
-    await leaveWorkspace(workspaceId, workspaceName);
-
-    pushNotification({
-      title: 'Successfully leave',
-      type: 'success',
-    });
-  }, [
-    closeAndJumpOut,
-    leaveWorkspace,
-    pushNotification,
-    workspaceId,
-    workspaceName,
-  ]);
-
-  const onTransformWorkspace = useOnTransformWorkspace();
-  // const handleDelete = useCallback(async () => {
-  //   await onDeleteWorkspace();
-  //   toast(t['Successfully deleted'](), {
-  //     portal: document.body,
-  //   });
-  //   onClose();
-  // }, [onClose, onDeleteWorkspace, t, workspace.id]);
+import { NewWorkspaceSettingDetail } from '../../../../adapters/shared';
+import { useIsWorkspaceOwner } from '../../../../hooks/affine/use-is-workspace-owner';
 
+export const WorkspaceSetting = ({
+  workspaceMetadata,
+}: {
+  workspaceMetadata: WorkspaceMetadata;
+}) => {
+  const isOwner = useIsWorkspaceOwner(workspaceMetadata);
   return (
-    <NewSettingsDetail
-      onDeleteCloudWorkspace={handleDeleteWorkspace}
-      onDeleteLocalWorkspace={handleDeleteWorkspace}
-      onLeaveWorkspace={handleLeaveWorkspace}
-      onTransformWorkspace={onTransformWorkspace}
-      currentWorkspaceId={workspaceId}
+    <NewWorkspaceSettingDetail
+      workspaceMetadata={workspaceMetadata}
+      isOwner={isOwner}
     />
   );
 };

packages/frontend/core/src/components/affine/share-page-modal/index.tsx

@@ -1,39 +1,41 @@
-import {
-  type AffineOfficialWorkspace,
-  WorkspaceFlavour,
-} from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import type { Workspace } from '@affine/workspace';
+import { workspaceManagerAtom } from '@affine/workspace/atom';
 import type { Page } from '@blocksuite/store';
-import { useCallback, useState } from 'react';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { useAtomValue } from 'jotai';
+import { useState } from 'react';
 
-import { useOnTransformWorkspace } from '../../../hooks/root/use-on-transform-workspace';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
 import { ShareMenu } from './share-menu';
 
 type SharePageModalProps = {
-  workspace: AffineOfficialWorkspace;
+  workspace: Workspace;
   page: Page;
 };
 
 export const SharePageButton = ({ workspace, page }: SharePageModalProps) => {
-  const onTransformWorkspace = useOnTransformWorkspace();
   const [open, setOpen] = useState(false);
 
-  const handleConfirm = useCallback(() => {
+  const { openPage } = useNavigateHelper();
+
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+
+  const handleConfirm = useAsyncCallback(async () => {
     if (workspace.flavour !== WorkspaceFlavour.LOCAL) {
       return;
     }
-    onTransformWorkspace(
-      WorkspaceFlavour.LOCAL,
-      WorkspaceFlavour.AFFINE_CLOUD,
-      workspace
-    );
+    const { id: newId } =
+      await workspaceManager.transformLocalToCloud(workspace);
+    openPage(newId, page.id);
     setOpen(false);
-  }, [onTransformWorkspace, workspace]);
+  }, [openPage, page.id, workspace, workspaceManager]);
 
   return (
     <>
       <ShareMenu
-        workspace={workspace}
+        workspaceMetadata={workspace.meta}
         currentPage={page}
         onEnableAffineCloud={() => setOpen(true)}
       />

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx

@@ -10,7 +10,10 @@ import * as styles from './index.css';
 import type { ShareMenuProps } from './share-menu';
 import { useSharingUrl } from './use-share-url';
 
-export const ShareExport = ({ workspace, currentPage }: ShareMenuProps) => {
+export const ShareExport = ({
+  workspaceMetadata: workspace,
+  currentPage,
+}: ShareMenuProps) => {
   const t = useAFFiNEI18N();
   const workspaceId = workspace.id;
   const pageId = currentPage.id;

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-menu.tsx

@@ -1,14 +1,9 @@
 import { Button } from '@affine/component/ui/button';
 import { Divider } from '@affine/component/ui/divider';
 import { Menu } from '@affine/component/ui/menu';
-import {
-  type AffineCloudWorkspace,
-  type AffineOfficialWorkspace,
-  type AffinePublicWorkspace,
-  type LocalWorkspace,
-  WorkspaceFlavour,
-} from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { WorkspaceMetadata } from '@affine/workspace';
 import { WebIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 
@@ -17,13 +12,8 @@ import * as styles from './index.css';
 import { ShareExport } from './share-export';
 import { SharePage } from './share-page';
 
-export interface ShareMenuProps<
-  Workspace extends AffineOfficialWorkspace =
-    | AffineCloudWorkspace
-    | LocalWorkspace
-    | AffinePublicWorkspace,
-> {
-  workspace: Workspace;
+export interface ShareMenuProps {
+  workspaceMetadata: WorkspaceMetadata;
   currentPage: Page;
   onEnableAffineCloud: () => void;
 }
@@ -70,7 +60,7 @@ const LocalShareMenu = (props: ShareMenuProps) => {
 const CloudShareMenu = (props: ShareMenuProps) => {
   const t = useAFFiNEI18N();
   const {
-    workspace: { id: workspaceId },
+    workspaceMetadata: { id: workspaceId },
     currentPage,
   } = props;
   const { isSharedPage } = useIsSharedPage(workspaceId, currentPage.id);
@@ -96,9 +86,9 @@ const CloudShareMenu = (props: ShareMenuProps) => {
 };
 
 export const ShareMenu = (props: ShareMenuProps) => {
-  const { workspace } = props;
+  const { workspaceMetadata } = props;
 
-  if (workspace.flavour === WorkspaceFlavour.LOCAL) {
+  if (workspaceMetadata.flavour === WorkspaceFlavour.LOCAL) {
     return <LocalShareMenu {...props} />;
   }
   return <CloudShareMenu {...props} />;

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx

@@ -69,7 +69,7 @@ export const LocalSharePage = (props: ShareMenuProps) => {
 
 export const AffineSharePage = (props: ShareMenuProps) => {
   const {
-    workspace: { id: workspaceId },
+    workspaceMetadata: { id: workspaceId },
     currentPage,
   } = props;
   const pageId = currentPage.id;
@@ -239,9 +239,11 @@ export const AffineSharePage = (props: ShareMenuProps) => {
 };
 
 export const SharePage = (props: ShareMenuProps) => {
-  if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
+  if (props.workspaceMetadata.flavour === WorkspaceFlavour.LOCAL) {
     return <LocalSharePage {...props} />;
-  } else if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
+  } else if (
+    props.workspaceMetadata.flavour === WorkspaceFlavour.AFFINE_CLOUD
+  ) {
     return <AffineSharePage {...props} />;
   }
   throw new Error('Unreachable');

packages/frontend/core/src/components/blocksuite/block-suite-header-title/index.tsx

@@ -1,4 +1,4 @@
-import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
 import {
   useBlockSuitePageMeta,
   usePageMetaHelper,
@@ -18,7 +18,7 @@ import { PageHeaderMenuButton } from './operation-menu';
 import * as styles from './styles.css';
 
 export interface BlockSuiteHeaderTitleProps {
-  workspace: AffineOfficialWorkspace;
+  blockSuiteWorkspace: BlockSuiteWorkspace;
   pageId: string;
   isPublic?: boolean;
   publicMode?: PageMode;
@@ -53,7 +53,7 @@ const EditableTitle = ({
 };
 
 const StableTitle = ({
-  workspace,
+  blockSuiteWorkspace: workspace,
   pageId,
   onRename,
   isPublic,
@@ -61,8 +61,8 @@ const StableTitle = ({
 }: BlockSuiteHeaderTitleProps & {
   onRename?: () => void;
 }) => {
-  const currentPage = workspace.blockSuiteWorkspace.getPage(pageId);
-  const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
+  const currentPage = workspace.getPage(pageId);
+  const pageMeta = useBlockSuitePageMeta(workspace).find(
     meta => meta.id === currentPage?.id
   );
 
@@ -77,7 +77,7 @@ const StableTitle = ({
   return (
     <div className={styles.headerTitleContainer}>
       <EditorModeSwitch
-        blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+        blockSuiteWorkspace={workspace}
         pageId={pageId}
         isPublic={isPublic}
         publicMode={publicMode}
@@ -97,12 +97,12 @@ const StableTitle = ({
 };
 
 const BlockSuiteTitleWithRename = (props: BlockSuiteHeaderTitleProps) => {
-  const { workspace, pageId } = props;
-  const currentPage = workspace.blockSuiteWorkspace.getPage(pageId);
-  const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
+  const { blockSuiteWorkspace: workspace, pageId } = props;
+  const currentPage = workspace.getPage(pageId);
+  const pageMeta = useBlockSuitePageMeta(workspace).find(
     meta => meta.id === currentPage?.id
   );
-  const pageTitleMeta = usePageMetaHelper(workspace.blockSuiteWorkspace);
+  const pageTitleMeta = usePageMetaHelper(workspace);
 
   const [isEditable, setIsEditable] = useState(false);
   const [title, setPageTitle] = useState(pageMeta?.title || 'Untitled');

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -7,6 +7,7 @@ import {
 } from '@affine/component/ui/menu';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import {
   DuplicateIcon,
@@ -18,7 +19,6 @@ import {
   ImportIcon,
   PageIcon,
 } from '@blocksuite/icons';
-import type { PageMeta } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtomValue } from 'jotai';
 import { useCallback, useState } from 'react';
@@ -27,7 +27,6 @@ import { currentModeAtom } from '../../../atoms/mode';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import { useExportPage } from '../../../hooks/affine/use-export-page';
 import { useTrashModalHelper } from '../../../hooks/affine/use-trash-modal-helper';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { toast } from '../../../utils';
 import { PageHistoryModal } from '../../affine/page-history-modal/history-modal';
 import { HeaderDropDownButton } from '../../pure/header-drop-down-button';
@@ -42,16 +41,16 @@ export const PageHeaderMenuButton = ({ rename, pageId }: PageMenuProps) => {
   const t = useAFFiNEI18N();
 
   // fixme(himself65): remove these hooks ASAP
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
   const currentPage = blockSuiteWorkspace.getPage(pageId);
   assertExists(currentPage);
 
   const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
-  ) as PageMeta;
+  );
   const currentMode = useAtomValue(currentModeAtom);
-  const favorite = pageMeta.favorite ?? false;
+  const favorite = pageMeta?.favorite ?? false;
 
   const { togglePageMode, toggleFavorite, duplicate } =
     useBlockSuiteMetaHelper(blockSuiteWorkspace);
@@ -65,12 +64,15 @@ export const PageHeaderMenuButton = ({ rename, pageId }: PageMenuProps) => {
   }, []);
 
   const handleOpenTrashModal = useCallback(() => {
+    if (!pageMeta) {
+      return;
+    }
     setTrashModal({
       open: true,
       pageIds: [pageId],
       pageTitles: [pageMeta.title],
     });
-  }, [pageId, pageMeta.title, setTrashModal]);
+  }, [pageId, pageMeta, setTrashModal]);
 
   const handleFavorite = useCallback(() => {
     toggleFavorite(pageId);
@@ -205,7 +207,7 @@ export const PageHeaderMenuButton = ({ rename, pageId }: PageMenuProps) => {
       />
     </>
   );
-  if (pageMeta.trash) {
+  if (pageMeta?.trash) {
     return null;
   }
   return (

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx

@@ -1,6 +1,5 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { assertExists } from '@blocksuite/global/utils';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties } from 'react';
@@ -44,8 +43,7 @@ export const EditorModeSwitch = ({
   const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
-  assertExists(pageMeta);
-  const { trash } = pageMeta;
+  const trash = pageMeta?.trash ?? false;
 
   const { togglePageMode, switchToEdgelessMode, switchToPageMode } =
     useBlockSuiteMetaHelper(blockSuiteWorkspace);

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -1,10 +1,8 @@
 import './page-detail-editor.css';
 
-import { PageNotFoundError } from '@affine/env/constant';
 import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 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 { pluginEditorAtom } from '@toeverything/infra/__internal__/plugin';
 import { getCurrentStore } from '@toeverything/infra/atom';
@@ -51,10 +49,6 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
   isPublic,
   publishMode,
 }: PageDetailEditorProps & { page: Page }) {
-  const meta = useBlockSuitePageMeta(workspace).find(
-    meta => meta.id === pageId
-  );
-
   const { switchToEdgelessMode, switchToPageMode } =
     useBlockSuiteMetaHelper(workspace);
 
@@ -73,7 +67,6 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
 
   const { appSettings } = useAppSettingHelper();
 
-  assertExists(meta);
   const value = useMemo(() => {
     const fontStyle = fontStyleOptions.find(
       option => option.key === appSettings.fontStyle
@@ -171,9 +164,8 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
   const { workspace, pageId } = props;
   const page = useBlockSuiteWorkspacePage(workspace, pageId);
   if (!page) {
-    throw new PageNotFoundError(workspace, pageId);
+    return null;
   }
-
   return (
     <Suspense>
       <PageDetailEditorMain {...props} page={page} />

packages/frontend/core/src/components/pure/cmdk/data.tsx

@@ -2,21 +2,17 @@ import { commandScore } from '@affine/cmdk';
 import { useCollectionManager } from '@affine/component/page-list';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  currentWorkspaceAtom,
+  waitForCurrentWorkspaceAtom,
+} from '@affine/workspace/atom';
 import { EdgelessIcon, PageIcon, ViewLayersIcon } from '@blocksuite/icons';
 import type { Page, PageMeta } from '@blocksuite/store';
 import {
   useBlockSuitePageMeta,
   usePageMetaHelper,
 } from '@toeverything/hooks/use-block-suite-page-meta';
-import {
-  getWorkspace,
-  waitForWorkspace,
-} from '@toeverything/infra/__internal__/workspace';
-import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-  getCurrentStore,
-} from '@toeverything/infra/atom';
+import { currentPageIdAtom, getCurrentStore } from '@toeverything/infra/atom';
 import {
   type AffineCommand,
   AffineCommandRegistry,
@@ -33,7 +29,6 @@ import {
   recentPageIdsBaseAtom,
 } from '../../../atoms';
 import { collectionsCRUDAtom } from '../../../atoms/collections';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '../../../shared';
 import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
@@ -53,8 +48,8 @@ export const cmdkValueAtom = atom('');
 
 // like currentWorkspaceAtom, but not throw error
 const safeCurrentPageAtom = atom<Promise<Page | undefined>>(async get => {
-  const currentWorkspaceId = get(currentWorkspaceIdAtom);
-  if (!currentWorkspaceId) {
+  const currentWorkspace = get(currentWorkspaceAtom);
+  if (!currentWorkspace) {
     return;
   }
 
@@ -64,9 +59,7 @@ const safeCurrentPageAtom = atom<Promise<Page | undefined>>(async get => {
     return;
   }
 
-  const workspace = getWorkspace(currentWorkspaceId);
-  await waitForWorkspace(workspace);
-  const page = workspace.getPage(currentPageId);
+  const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
 
   if (!page) {
     return;
@@ -132,7 +125,7 @@ export const filteredAffineCommands = atom(async get => {
 });
 
 const useWorkspacePages = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const pages = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
   return pages;
 };
@@ -166,7 +159,7 @@ export const pageToCommand = (
   blockId?: string
 ): CMDKCommand => {
   const pageMode = store.get(pageSettingsAtom)?.[page.id]?.mode;
-  const currentWorkspaceId = store.get(currentWorkspaceIdAtom);
+  const currentWorkspace = store.get(currentWorkspaceAtom);
 
   const title = page.title || t['Untitled']();
   const commandLabel = label || {
@@ -191,18 +184,18 @@ export const pageToCommand = (
     originalValue: title,
     category: category,
     run: () => {
-      if (!currentWorkspaceId) {
+      if (!currentWorkspace) {
         console.error('current workspace not found');
         return;
       }
       if (blockId) {
         return navigationHelper.jumpToPageBlock(
-          currentWorkspaceId,
+          currentWorkspace.id,
           page.id,
           blockId
         );
       }
-      return navigationHelper.jumpToPage(currentWorkspaceId, page.id);
+      return navigationHelper.jumpToPage(currentWorkspace.id, page.id);
     },
     icon: pageMode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />,
     timestamp: page.updatedDate,
@@ -217,7 +210,7 @@ export const usePageCommands = () => {
   const recentPages = useRecentPages();
   const pages = useWorkspacePages();
   const store = getCurrentStore();
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const pageHelper = usePageHelper(workspace.blockSuiteWorkspace);
   const pageMetaHelper = usePageMetaHelper(workspace.blockSuiteWorkspace);
   const query = useAtomValue(cmdkQueryAtom);
@@ -359,7 +352,7 @@ export const collectionToCommand = (
   selectCollection: (id: string) => void,
   t: ReturnType<typeof useAFFiNEI18N>
 ): CMDKCommand => {
-  const currentWorkspaceId = store.get(currentWorkspaceIdAtom);
+  const currentWorkspace = store.get(currentWorkspaceAtom);
   const label = collection.name || t['Untitled']();
   const category = 'affine:collections';
   return {
@@ -377,11 +370,11 @@ export const collectionToCommand = (
     originalValue: label,
     category: category,
     run: () => {
-      if (!currentWorkspaceId) {
+      if (!currentWorkspace) {
         console.error('current workspace not found');
         return;
       }
-      navigationHelper.jumpToSubPath(currentWorkspaceId, WorkspaceSubPath.ALL);
+      navigationHelper.jumpToSubPath(currentWorkspace.id, WorkspaceSubPath.ALL);
       selectCollection(collection.id);
     },
     icon: <ViewLayersIcon />,
@@ -395,7 +388,7 @@ export const useCollectionsCommands = () => {
   const query = useAtomValue(cmdkQueryAtom);
   const navigationHelper = useNavigateHelper();
   const t = useAFFiNEI18N();
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const selectCollection = useCallback(
     (id: string) => {
       navigationHelper.jumpToCollection(workspace.id, id);

packages/frontend/core/src/components/pure/help-island/index.tsx

@@ -40,7 +40,6 @@ export const HelpIsland = () => {
       setOpenSettingModalAtom({
         open: true,
         activeTab: tab,
-        workspaceId: null,
       });
     },
     [setOpenSettingModalAtom]

packages/frontend/core/src/components/pure/trash-page-footer/index.tsx

@@ -3,21 +3,21 @@ import { ConfirmModal } from '@affine/component/ui/modal';
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import { DeleteIcon, ResetIcon } from '@blocksuite/icons';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useAtomValue } from 'jotai';
 import { useCallback, useState } from 'react';
 
 import { useAppSettingHelper } from '../../../hooks/affine/use-app-setting-helper';
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { toast } from '../../../utils';
 import * as styles from './styles.css';
 
 export const TrashPageFooter = ({ pageId }: { pageId: string }) => {
-  // fixme(himself65): remove these hooks ASAP
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
   assertExists(workspace);
   const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
   const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -15,7 +15,6 @@ import { MoreHorizontalIcon, ViewLayersIcon } from '@blocksuite/icons';
 import type { PageMeta, Workspace } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -44,9 +43,9 @@ const CollectionRenderer = ({
   const t = useAFFiNEI18N();
   const dragItemId = getDropItemId('collections', collection.id);
 
-  const removeFromAllowList = useAsyncCallback(
-    async (id: string) => {
-      await setting.updateCollection({
+  const removeFromAllowList = useCallback(
+    (id: string) => {
+      setting.updateCollection({
         ...collection,
         allowList: collection.allowList?.filter(v => v !== id),
       });
@@ -66,9 +65,7 @@ const CollectionRenderer = ({
         } else {
           toast(t['com.affine.collection.addPage.success']());
         }
-        setting.addPage(collection.id, id).catch(err => {
-          console.error(err);
-        });
+        setting.addPage(collection.id, id);
       },
     },
   });
@@ -90,9 +87,9 @@ const CollectionRenderer = ({
   const currentPath = location.pathname.split('?')[0];
   const path = `/workspace/${workspace.id}/collection/${collection.id}`;
 
-  const onRename = useAsyncCallback(
-    async (name: string) => {
-      await setting.updateCollection({
+  const onRename = useCallback(
+    (name: string) => {
+      setting.updateCollection({
         ...collection,
         name,
       });

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -1,12 +1,16 @@
 import { Divider } from '@affine/component/ui/divider';
 import { MenuItem } from '@affine/component/ui/menu';
+import { Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import {
+  workspaceListAtom,
+  workspaceManagerAtom,
+} from '@affine/workspace/atom';
 import { Logo1Icon } from '@blocksuite/icons';
 import { useAtomValue, useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSession } from 'next-auth/react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 
 import {
   authAtom,
@@ -81,9 +85,16 @@ export const UserWithWorkspaceList = ({
     onEventEnd?.();
   }, [onEventEnd, setOpenCreateWorkspaceModal]);
 
-  const workspaces = useAtomValue(rootWorkspacesMetadataAtom, {
-    delay: 0,
-  });
+  const workspaces = useAtomValue(workspaceListAtom);
+
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+
+  // revalidate workspace list when mounted
+  useEffect(() => {
+    workspaceManager.list.revalidate().catch(err => {
+      throw new Unreachable('revlidate should never throw, ' + err);
+    });
+  }, [workspaceManager]);
 
   return (
     <div className={styles.workspaceListWrapper}>

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx

@@ -1,39 +1,29 @@
 import { ScrollableContainer } from '@affine/component';
 import { Divider } from '@affine/component/ui/divider';
 import { WorkspaceList } from '@affine/component/workspace-list';
-import type {
-  AffineCloudWorkspace,
-  LocalWorkspace,
-} from '@affine/env/workspace';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import type { WorkspaceMetadata } from '@affine/workspace';
+import { currentWorkspaceAtom } from '@affine/workspace/atom';
 import type { DragEndEvent } from '@dnd-kit/core';
-import { arrayMove } from '@dnd-kit/sortable';
-import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-} from '@toeverything/infra/atom';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSession } from 'next-auth/react';
-import { startTransition, useCallback, useMemo, useTransition } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import {
   openCreateWorkspaceModalAtom,
   openSettingModalAtom,
 } from '../../../../../atoms';
-import type { AllWorkspace } from '../../../../../shared';
 import { useIsWorkspaceOwner } from '../.././../../../hooks/affine/use-is-workspace-owner';
 import { useNavigateHelper } from '../.././../../../hooks/use-navigate-helper';
 import * as styles from './index.css';
 interface WorkspaceModalProps {
   disabled?: boolean;
-  workspaces: (AffineCloudWorkspace | LocalWorkspace)[];
-  currentWorkspaceId: AllWorkspace['id'] | null;
-  onClickWorkspace: (workspace: RootWorkspaceMetadata['id']) => void;
-  onClickWorkspaceSetting: (workspace: RootWorkspaceMetadata['id']) => void;
+  workspaces: WorkspaceMetadata[];
+  currentWorkspaceId?: string | null;
+  onClickWorkspace: (workspaceMetadata: WorkspaceMetadata) => void;
+  onClickWorkspaceSetting: (workspaceMetadata: WorkspaceMetadata) => void;
   onNewWorkspace: () => void;
   onAddWorkspace: () => void;
   onDragEnd: (event: DragEndEvent) => void;
@@ -102,22 +92,14 @@ export const AFFiNEWorkspaceList = ({
   workspaces,
   onEventEnd,
 }: {
-  workspaces: RootWorkspaceMetadata[];
+  workspaces: WorkspaceMetadata[];
   onEventEnd?: () => void;
 }) => {
   const setOpenCreateWorkspaceModal = useSetAtom(openCreateWorkspaceModalAtom);
 
   const { jumpToSubPath } = useNavigateHelper();
 
-  const setWorkspaces = useSetAtom(rootWorkspacesMetadataAtom);
-
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useAtom(
-    currentWorkspaceIdAtom
-  );
-
-  const setCurrentPageId = useSetAtom(currentPageIdAtom);
-
-  const [, startCloseTransition] = useTransition();
+  const currentWorkspace = useAtomValue(currentWorkspaceAtom);
 
   const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
 
@@ -130,7 +112,7 @@ export const AFFiNEWorkspaceList = ({
     () =>
       workspaces.filter(
         ({ flavour }) => flavour === WorkspaceFlavour.AFFINE_CLOUD
-      ) as (AffineCloudWorkspace | LocalWorkspace)[],
+      ) as WorkspaceMetadata[],
     [workspaces]
   );
 
@@ -138,44 +120,37 @@ export const AFFiNEWorkspaceList = ({
     () =>
       workspaces.filter(
         ({ flavour }) => flavour === WorkspaceFlavour.LOCAL
-      ) as (AffineCloudWorkspace | LocalWorkspace)[],
+      ) as WorkspaceMetadata[],
     [workspaces]
   );
 
   const onClickWorkspaceSetting = useCallback(
-    (workspaceId: string) => {
+    (workspaceMetadata: WorkspaceMetadata) => {
       setOpenSettingModalAtom({
         open: true,
         activeTab: 'workspace',
-        workspaceId,
+        workspaceMetadata,
       });
       onEventEnd?.();
     },
     [onEventEnd, setOpenSettingModalAtom]
   );
 
-  const onMoveWorkspace = useCallback(
-    (activeId: string, overId: string) => {
-      const oldIndex = workspaces.findIndex(w => w.id === activeId);
-
-      const newIndex = workspaces.findIndex(w => w.id === overId);
-      startTransition(() => {
-        setWorkspaces(workspaces => arrayMove(workspaces, oldIndex, newIndex));
-      });
-    },
-    [setWorkspaces, workspaces]
-  );
+  const onMoveWorkspace = useCallback((_activeId: string, _overId: string) => {
+    // TODO: order
+    // const oldIndex = workspaces.findIndex(w => w.id === activeId);
+    // const newIndex = workspaces.findIndex(w => w.id === overId);
+    // startTransition(() => {
+    //   setWorkspaces(workspaces => arrayMove(workspaces, oldIndex, newIndex));
+    // });
+  }, []);
 
   const onClickWorkspace = useCallback(
-    (workspaceId: string) => {
-      startCloseTransition(() => {
-        setCurrentWorkspaceId(workspaceId);
-        setCurrentPageId(null);
-        jumpToSubPath(workspaceId, WorkspaceSubPath.ALL);
-      });
+    (workspaceMetadata: WorkspaceMetadata) => {
+      jumpToSubPath(workspaceMetadata.id, WorkspaceSubPath.ALL);
       onEventEnd?.();
     },
-    [jumpToSubPath, onEventEnd, setCurrentPageId, setCurrentWorkspaceId]
+    [jumpToSubPath, onEventEnd]
   );
 
   const onDragEnd = useCallback(
@@ -211,7 +186,7 @@ export const AFFiNEWorkspaceList = ({
             onClickWorkspaceSetting={onClickWorkspaceSetting}
             onNewWorkspace={onNewWorkspace}
             onAddWorkspace={onAddWorkspace}
-            currentWorkspaceId={currentWorkspaceId}
+            currentWorkspaceId={currentWorkspace?.id}
             onDragEnd={onDragEnd}
           />
           {localWorkspaces.length > 0 && cloudWorkspaces.length > 0 ? (
@@ -225,7 +200,7 @@ export const AFFiNEWorkspaceList = ({
         onClickWorkspaceSetting={onClickWorkspaceSetting}
         onNewWorkspace={onNewWorkspace}
         onAddWorkspace={onAddWorkspace}
-        currentWorkspaceId={currentWorkspaceId}
+        currentWorkspaceId={currentWorkspace?.id}
         onDragEnd={onDragEnd}
       />
     </ScrollableContainer>

packages/frontend/core/src/components/pure/workspace-slider-bar/workspace-card/index.tsx

@@ -1,12 +1,10 @@
 import { Avatar } from '@affine/component/ui/avatar';
 import { Loading } from '@affine/component/ui/loading';
 import { Tooltip } from '@affine/component/ui/tooltip';
-import { useCurrentSyncEngine } from '@affine/core/hooks/current/use-current-sync-engine';
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
-import {
-  type SyncEngineStatus,
-  SyncEngineStep,
-} from '@affine/workspace/providers';
+import { type SyncEngineStatus, SyncEngineStep } from '@affine/workspace';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import {
   CloudWorkspaceIcon,
   InformationFillDuotoneIcon,
@@ -14,8 +12,9 @@ import {
   NoNetworkIcon,
   UnsyncIcon,
 } from '@blocksuite/icons';
-import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
-import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useWorkspaceBlobObjectUrl } from '@toeverything/hooks/use-workspace-blob';
+import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
+import { useAtomValue } from 'jotai';
 import { debounce } from 'lodash-es';
 import {
   forwardRef,
@@ -27,7 +26,6 @@ import {
 } from 'react';
 
 import { useSystemOnline } from '../../../../hooks/use-system-online';
-import type { AllWorkspace } from '../../../../shared';
 import {
   StyledSelectorContainer,
   StyledSelectorWrapper,
@@ -87,21 +85,18 @@ const OfflineStatus = () => {
   );
 };
 
-const WorkspaceStatus = ({
-  currentWorkspace,
-}: {
-  currentWorkspace: AllWorkspace;
-}) => {
+const WorkspaceStatus = () => {
   const isOnline = useSystemOnline();
 
   const [syncEngineStatus, setSyncEngineStatus] =
     useState<SyncEngineStatus | null>(null);
 
-  const syncEngine = useCurrentSyncEngine();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
 
+  // debounce sync engine status
   useEffect(() => {
-    setSyncEngineStatus(syncEngine?.status ?? null);
-    const disposable = syncEngine?.onStatusChange.on(
+    setSyncEngineStatus(currentWorkspace.engine.sync.status);
+    const disposable = currentWorkspace.engine.sync.onStatusChange.on(
       debounce(status => {
         setSyncEngineStatus(status);
       }, 500)
@@ -109,7 +104,7 @@ const WorkspaceStatus = ({
     return () => {
       disposable?.dispose();
     };
-  }, [syncEngine]);
+  }, [currentWorkspace]);
 
   const content = useMemo(() => {
     // TODO: add i18n
@@ -162,17 +157,18 @@ const WorkspaceStatus = ({
 
 export const WorkspaceCard = forwardRef<
   HTMLDivElement,
-  {
-    currentWorkspace: AllWorkspace;
-  } & HTMLAttributes<HTMLDivElement>
->(({ currentWorkspace, ...props }, ref) => {
-  const [name] = useBlockSuiteWorkspaceName(
-    currentWorkspace.blockSuiteWorkspace
+  HTMLAttributes<HTMLDivElement>
+>(({ ...props }, ref) => {
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+
+  const information = useWorkspaceInfo(currentWorkspace.meta);
+
+  const avatarUrl = useWorkspaceBlobObjectUrl(
+    currentWorkspace.meta,
+    information?.avatar
   );
 
-  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(
-    currentWorkspace.blockSuiteWorkspace
-  );
+  const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
 
   return (
     <StyledSelectorContainer
@@ -186,7 +182,7 @@ export const WorkspaceCard = forwardRef<
       <Avatar
         data-testid="workspace-avatar"
         size={40}
-        url={workspaceAvatar}
+        url={avatarUrl}
         name={name}
         colorfulFallback
       />
@@ -194,7 +190,7 @@ export const WorkspaceCard = forwardRef<
         <StyledWorkspaceName data-testid="workspace-name">
           {name}
         </StyledWorkspaceName>
-        <WorkspaceStatus currentWorkspace={currentWorkspace} />
+        <WorkspaceStatus />
       </StyledSelectorWrapper>
     </StyledSelectorContainer>
   );

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -22,6 +22,7 @@ import { Menu } from '@affine/component/ui/menu';
 import { collectionsCRUDAtom } from '@affine/core/atoms/collections';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { Workspace } from '@affine/workspace';
 import { FolderIcon, SettingsIcon } from '@blocksuite/icons';
 import { type Page } from '@blocksuite/store';
 import { useDroppable } from '@dnd-kit/core';
@@ -40,7 +41,6 @@ import { getDropItemId } from '../../hooks/affine/use-sidebar-drag';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
 import { useRegisterBrowserHistoryCommands } from '../../hooks/use-browser-history-commands';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
-import type { AllWorkspace } from '../../shared';
 import { CollectionsList } from '../pure/workspace-slider-bar/collections';
 import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
 import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';
@@ -53,7 +53,7 @@ export type RootAppSidebarProps = {
   isPublicWorkspace: boolean;
   onOpenQuickSearchModal: () => void;
   onOpenSettingModal: () => void;
-  currentWorkspace: AllWorkspace;
+  currentWorkspace: Workspace;
   openPage: (pageId: string) => void;
   createPage: () => Page;
   currentPath: string;
@@ -185,9 +185,9 @@ export const RootAppSidebar = ({
   });
   const handleCreateCollection = useCallback(() => {
     open('')
-      .then(async name => {
+      .then(name => {
         const id = nanoid();
-        await setting.createCollection(createEmptyCollection(id, { name }));
+        setting.createCollection(createEmptyCollection(id, { name }));
         navigateHelper.jumpToCollection(blockSuiteWorkspace.id, id);
       })
       .catch(err => {
@@ -230,7 +230,6 @@ export const RootAppSidebar = ({
           }}
         >
           <WorkspaceCard
-            currentWorkspace={currentWorkspace}
             onClick={useCallback(() => {
               setOpenUserWorkspaceList(true);
             }, [setOpenUserWorkspaceList])}

packages/frontend/core/src/components/top-tip.tsx

@@ -1,17 +1,18 @@
 import { BrowserWarning } from '@affine/component/affine-banner';
 import { LocalDemoTips } from '@affine/component/affine-banner';
-import {
-  type AffineOfficialWorkspace,
-  WorkspaceFlavour,
-} from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useSetAtom } from 'jotai';
+import type { Workspace } from '@affine/workspace';
+import { workspaceManagerAtom } from '@affine/workspace/atom';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useState } from 'react';
 
 import { authAtom } from '../atoms';
 import { useCurrentLoginStatus } from '../hooks/affine/use-current-login-status';
-import { useOnTransformWorkspace } from '../hooks/root/use-on-transform-workspace';
+import { useNavigateHelper } from '../hooks/use-navigate-helper';
+import { WorkspaceSubPath } from '../shared';
 import { EnableAffineCloudModal } from './affine/enable-affine-cloud-modal';
 
 const minimumChromeVersion = 106;
@@ -57,9 +58,11 @@ const OSWarningMessage = () => {
 };
 
 export const TopTip = ({
+  pageId,
   workspace,
 }: {
-  workspace: AffineOfficialWorkspace;
+  pageId?: string;
+  workspace: Workspace;
 }) => {
   const loginStatus = useCurrentLoginStatus();
   const isLoggedIn = loginStatus === 'authenticated';
@@ -73,18 +76,18 @@ export const TopTip = ({
     setAuthModal({ openModal: true, state: 'signIn' });
   }, [setAuthModal]);
 
-  const onTransformWorkspace = useOnTransformWorkspace();
-  const handleConfirm = useCallback(() => {
+  const { openPage } = useNavigateHelper();
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+  const handleConfirm = useAsyncCallback(async () => {
     if (workspace.flavour !== WorkspaceFlavour.LOCAL) {
       return;
     }
-    onTransformWorkspace(
-      WorkspaceFlavour.LOCAL,
-      WorkspaceFlavour.AFFINE_CLOUD,
-      workspace
-    );
+    // TODO: we need to transform local to cloud
+    const { id: newId } =
+      await workspaceManager.transformLocalToCloud(workspace);
+    openPage(newId, pageId || WorkspaceSubPath.ALL);
     setOpen(false);
-  }, [onTransformWorkspace, workspace]);
+  }, [openPage, pageId, workspace, workspaceManager]);
 
   if (
     showLocalDemoTips &&

packages/frontend/core/src/components/workspace-upgrade/upgrade-hooks.ts

@@ -1,122 +0,0 @@
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
-import { getOrCreateWorkspace } from '@affine/workspace/manager';
-import type { Workspace } from '@blocksuite/store';
-import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
-import { getCurrentStore } from '@toeverything/infra/atom';
-import type { MigrationPoint } from '@toeverything/infra/blocksuite';
-import {
-  migrateLocalBlobStorage,
-  migrateWorkspace,
-} from '@toeverything/infra/blocksuite';
-import { nanoid } from 'nanoid';
-import { useState } from 'react';
-import { applyUpdate, Doc as YDoc, encodeStateAsUpdate } from 'yjs';
-
-import { WorkspaceAdapters } from '../../adapters/workspace';
-import { useCurrentSyncEngine } from '../../hooks/current/use-current-sync-engine';
-import { useCurrentWorkspace } from '../../hooks/current/use-current-workspace';
-
-export type UpgradeState = 'pending' | 'upgrading' | 'done' | 'error';
-
-function applyDoc(target: YDoc, result: YDoc) {
-  applyUpdate(target, encodeStateAsUpdate(result));
-  for (const targetSubDoc of target.subdocs.values()) {
-    const resultSubDocs = Array.from(result.subdocs.values());
-    const resultSubDoc = resultSubDocs.find(
-      item => item.guid === targetSubDoc.guid
-    );
-    if (resultSubDoc) {
-      applyDoc(targetSubDoc, resultSubDoc);
-    }
-  }
-}
-
-export function useUpgradeWorkspace(migration: MigrationPoint) {
-  const [state, setState] = useState<UpgradeState>('pending');
-  const [error, setError] = useState<Error | null>(null);
-  const [newWorkspaceId, setNewWorkspaceId] = useState<string | null>(null);
-
-  const [workspace] = useCurrentWorkspace();
-  const syncEngine = useCurrentSyncEngine();
-  const rootStore = getCurrentStore();
-
-  const upgradeWorkspace = useAsyncCallback(async () => {
-    setState('upgrading');
-    setError(null);
-    try {
-      // Migration need to wait for root doc and all subdocs loaded.
-      await syncEngine?.waitForSynced();
-
-      // Clone a new doc to prevent change events.
-      const clonedDoc = new YDoc({
-        guid: workspace.blockSuiteWorkspace.doc.guid,
-      });
-      applyDoc(clonedDoc, workspace.blockSuiteWorkspace.doc);
-      const schema = workspace.blockSuiteWorkspace.schema;
-      let newWorkspace: Workspace | null = null;
-
-      const resultDoc = await migrateWorkspace(migration, {
-        doc: clonedDoc,
-        schema,
-        createWorkspace: () => {
-          // Migrate to subdoc version need to create a new workspace.
-          // It will only happened for old local workspace.
-          newWorkspace = getOrCreateWorkspace(nanoid(), WorkspaceFlavour.LOCAL);
-          return Promise.resolve(newWorkspace);
-        },
-      });
-
-      if (newWorkspace) {
-        const localMetaString =
-          localStorage.getItem('jotai-workspaces') ?? '[]';
-        const localMetadataList = JSON.parse(
-          localMetaString
-        ) as RootWorkspaceMetadata[];
-        const currentLocalMetadata = localMetadataList.find(
-          item => item.id === workspace.id
-        );
-        const flavour = currentLocalMetadata?.flavour ?? WorkspaceFlavour.LOCAL;
-
-        // Legacy logic moved from `setup.ts`.
-        // It works well before, should be refactor or remove in the future.
-        const adapter = WorkspaceAdapters[flavour];
-        const newId = await adapter.CRUD.create(newWorkspace);
-        const [workspaceAtom] = getBlockSuiteWorkspaceAtom(newId);
-        await rootStore.get(workspaceAtom); // Trigger provider sync to persist data.
-
-        await adapter.CRUD.delete(workspace.blockSuiteWorkspace);
-        await migrateLocalBlobStorage(workspace.id, newId);
-        setNewWorkspaceId(newId);
-
-        const index = localMetadataList.findIndex(
-          meta => meta.id === workspace.id
-        );
-        localMetadataList[index] = {
-          ...currentLocalMetadata,
-          id: newId,
-          flavour,
-        };
-        localStorage.setItem(
-          'jotai-workspaces',
-          JSON.stringify(localMetadataList)
-        );
-        localStorage.setItem('last_workspace_id', newId);
-        localStorage.removeItem('last_page_id');
-      } else {
-        applyDoc(workspace.blockSuiteWorkspace.doc, resultDoc);
-      }
-
-      await syncEngine?.waitForSynced();
-
-      setState('done');
-    } catch (e: any) {
-      console.error(e);
-      setError(e);
-      setState('error');
-    }
-  }, [rootStore, workspace, syncEngine, migration]);
-
-  return [state, error, upgradeWorkspace, newWorkspaceId] as const;
-}

packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx

@@ -1,90 +1,84 @@
 import { AffineShapeIcon } from '@affine/component/page-list'; // TODO: import from page-list temporarily, need to defined common svg icon/images management.
 import { Button } from '@affine/component/ui/button';
+import { WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import type { MigrationPoint } from '@toeverything/infra/blocksuite';
-import { useCallback, useMemo } from 'react';
+import {
+  waitForCurrentWorkspaceAtom,
+  workspaceManagerAtom,
+} from '@affine/workspace/atom';
+import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { useWorkspaceStatus } from '@toeverything/hooks/use-workspace-status';
+import { useAtomValue } from 'jotai';
+import { useState } from 'react';
 
-import { pathGenerator } from '../../shared';
+import { useNavigateHelper } from '../../hooks/use-navigate-helper';
 import * as styles from './upgrade.css';
-import { type UpgradeState, useUpgradeWorkspace } from './upgrade-hooks';
 import { ArrowCircleIcon, HeartBreakIcon } from './upgrade-icon';
 
-const UPGRADE_TIPS_KEYS = {
-  pending: 'com.affine.upgrade.tips.normal',
-  upgrading: 'com.affine.upgrade.tips.normal',
-  done: 'com.affine.upgrade.tips.done',
-  error: 'com.affine.upgrade.tips.error',
-} as const;
-
-const BUTTON_TEXT_KEYS = {
-  pending: 'com.affine.upgrade.button-text.pending',
-  upgrading: 'com.affine.upgrade.button-text.upgrading',
-  done: 'com.affine.upgrade.button-text.done',
-  error: 'com.affine.upgrade.button-text.error',
-} as const;
-
-function UpgradeIcon({ upgradeState }: { upgradeState: UpgradeState }) {
-  if (upgradeState === 'error') {
-    return <HeartBreakIcon />;
-  }
-  return (
-    <ArrowCircleIcon
-      className={upgradeState === 'upgrading' ? styles.loadingIcon : undefined}
-    />
-  );
-}
-
-interface WorkspaceUpgradeProps {
-  migration: MigrationPoint;
-}
-
 /**
  * TODO: Help info is not implemented yet.
  */
-export const WorkspaceUpgrade = function WorkspaceUpgrade(
-  props: WorkspaceUpgradeProps
-) {
-  const [upgradeState, error, upgradeWorkspace, newWorkspaceId] =
-    useUpgradeWorkspace(props.migration);
+export const WorkspaceUpgrade = function WorkspaceUpgrade() {
+  const [error, setError] = useState<string | null>(null);
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+  const upgradeStatus = useWorkspaceStatus(currentWorkspace, s => s.upgrade);
+  const { openPage } = useNavigateHelper();
   const t = useAFFiNEI18N();
 
-  const refreshPage = useCallback(() => {
-    window.location.reload();
-  }, []);
+  const onButtonClick = useAsyncCallback(async () => {
+    if (upgradeStatus?.upgrading) {
+      return;
+    }
 
-  const onButtonClick = useMemo(() => {
-    if (upgradeState === 'done') {
+    try {
+      const newWorkspaceId =
+        await currentWorkspace.upgrade.upgrade(workspaceManager);
       if (newWorkspaceId) {
-        return () => {
-          window.location.replace(pathGenerator.all(newWorkspaceId));
-        };
+        openPage(newWorkspaceId, WorkspaceSubPath.ALL);
+      } else {
+        // blocksuite may enter an incorrect state, reload to reset it.
+        location.reload();
       }
-
-      return refreshPage;
+    } catch (error) {
+      setError(error instanceof Error ? error.message : '' + error);
     }
-
-    if (upgradeState === 'pending') {
-      return upgradeWorkspace;
-    }
-
-    return undefined;
-  }, [upgradeState, upgradeWorkspace, refreshPage, newWorkspaceId]);
+  }, [
+    upgradeStatus?.upgrading,
+    currentWorkspace.upgrade,
+    workspaceManager,
+    openPage,
+  ]);
 
   return (
     <div className={styles.layout}>
       <div className={styles.upgradeBox}>
         <AffineShapeIcon width={180} height={180} />
         <p className={styles.upgradeTips}>
-          {error ? error.message : t[UPGRADE_TIPS_KEYS[upgradeState]]()}
+          {error ? error : t['com.affine.upgrade.tips.normal']()}
         </p>
         <Button
           data-testid="upgrade-workspace-button"
           onClick={onButtonClick}
           size="extraLarge"
-          icon={<UpgradeIcon upgradeState={upgradeState} />}
-          type={upgradeState === 'error' ? 'error' : 'default'}
+          icon={
+            error ? (
+              <HeartBreakIcon />
+            ) : (
+              <ArrowCircleIcon
+                className={
+                  upgradeStatus?.upgrading ? styles.loadingIcon : undefined
+                }
+              />
+            )
+          }
+          type={error ? 'error' : 'default'}
         >
-          {t[BUTTON_TEXT_KEYS[upgradeState]]()}
+          {error
+            ? t['com.affine.upgrade.button-text.error']()
+            : upgradeStatus?.upgrading
+              ? t['com.affine.upgrade.button-text.upgrading']()
+              : t['com.affine.upgrade.button-text.pending']()}
         </Button>
       </div>
     </div>

packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx

@@ -4,16 +4,17 @@ import {
   FavoriteTag,
 } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import type { PageMeta } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useAtomValue } from 'jotai';
 import { useCallback, useMemo } from 'react';
 
 import { usePageHelper } from '../../components/blocksuite/block-suite-page-list/utils';
-import { useCurrentWorkspace } from '../current/use-current-workspace';
 import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
 
 export const useAllPageListConfig = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const workspace = currentWorkspace.blockSuiteWorkspace;
   const pageMetas = useBlockSuitePageMeta(workspace);
   const { isPreferredEdgeless } = usePageHelper(workspace);

packages/frontend/core/src/hooks/affine/use-is-workspace-owner.ts

@@ -1,13 +1,23 @@
+import { WorkspaceFlavour } from '@affine/env/workspace';
 import { getIsOwnerQuery } from '@affine/graphql';
 import { useQueryImmutable } from '@affine/workspace/affine/gql';
+import type { WorkspaceMetadata } from '@affine/workspace/metadata';
 
-export function useIsWorkspaceOwner(workspaceId: string) {
-  const { data } = useQueryImmutable({
-    query: getIsOwnerQuery,
-    variables: {
-      workspaceId,
-    },
-  });
+export function useIsWorkspaceOwner(workspaceMetadata: WorkspaceMetadata) {
+  const { data } = useQueryImmutable(
+    workspaceMetadata.flavour !== WorkspaceFlavour.LOCAL
+      ? {
+          query: getIsOwnerQuery,
+          variables: {
+            workspaceId: workspaceMetadata.id,
+          },
+        }
+      : undefined
+  );
+
+  if (workspaceMetadata.flavour === WorkspaceFlavour.LOCAL) {
+    return true;
+  }
 
   return data.isOwner;
 }

packages/frontend/core/src/hooks/affine/use-leave-workspace.ts

@@ -1,26 +0,0 @@
-import { leaveWorkspaceMutation } from '@affine/graphql';
-import { useMutation } from '@affine/workspace/affine/gql';
-import { useCallback } from 'react';
-
-import { useAppHelper } from '../use-workspaces';
-
-export function useLeaveWorkspace() {
-  const { deleteWorkspaceMeta } = useAppHelper();
-
-  const { trigger: leaveWorkspace } = useMutation({
-    mutation: leaveWorkspaceMutation,
-  });
-
-  return useCallback(
-    async (workspaceId: string, workspaceName: string) => {
-      deleteWorkspaceMeta(workspaceId);
-
-      await leaveWorkspace({
-        workspaceId,
-        workspaceName,
-        sendLeaveMail: true,
-      });
-    },
-    [deleteWorkspaceMeta, leaveWorkspace]
-  );
-}

packages/frontend/core/src/hooks/affine/use-register-blocksuite-editor-commands.tsx

@@ -1,6 +1,7 @@
 import { toast } from '@affine/component';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import { EdgelessIcon, HistoryIcon, PageIcon } from '@blocksuite/icons';
 import { usePageMetaHelper } from '@toeverything/hooks/use-block-suite-page-meta';
@@ -8,11 +9,10 @@ import {
   PreconditionStrategy,
   registerAffineCommand,
 } from '@toeverything/infra/command';
-import { useSetAtom } from 'jotai';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useEffect } from 'react';
 
 import { pageHistoryModalAtom } from '../../atoms/page-history';
-import { useCurrentWorkspace } from '../current/use-current-workspace';
 import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
 import { useExportPage } from './use-export-page';
 import { useTrashModalHelper } from './use-trash-modal-helper';
@@ -22,7 +22,7 @@ export function useRegisterBlocksuiteEditorCommands(
   mode: 'page' | 'edgeless'
 ) {
   const t = useAFFiNEI18N();
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
   const { getPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
   const currentPage = blockSuiteWorkspace.getPage(pageId);

packages/frontend/core/src/hooks/affine/use-sidebar-drag.ts

@@ -1,11 +1,12 @@
 import { toast } from '@affine/component';
 import type { DraggableTitleCellData } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core';
 import { usePageMetaHelper } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useAtomValue } from 'jotai';
 import { useCallback } from 'react';
 
-import { useCurrentWorkspace } from '../current/use-current-workspace';
 import { useBlockSuiteMetaHelper } from './use-block-suite-meta-helper';
 import { useTrashModalHelper } from './use-trash-modal-helper';
 
@@ -68,7 +69,7 @@ export function getDragItemId(
 
 export const useSidebarDrag = () => {
   const t = useAFFiNEI18N();
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const workspace = currentWorkspace.blockSuiteWorkspace;
   const { setTrashModal } = useTrashModalHelper(workspace);
   const { addToFavorite, removeFromFavorite } =

packages/frontend/core/src/hooks/current/use-current-page.ts

@@ -1,12 +1,14 @@
-import {
-  currentPageIdAtom,
-  currentWorkspaceAtom,
-} from '@toeverything/infra/atom';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
+import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
+import { currentPageIdAtom } from '@toeverything/infra/atom';
 import { useAtomValue } from 'jotai';
 
 export const useCurrentPage = () => {
   const currentPageId = useAtomValue(currentPageIdAtom);
-  const currentWorkspace = useAtomValue(currentWorkspaceAtom);
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
 
-  return currentPageId ? currentWorkspace.getPage(currentPageId) : null;
+  return useBlockSuiteWorkspacePage(
+    currentWorkspace?.blockSuiteWorkspace,
+    currentPageId
+  );
 };

packages/frontend/core/src/hooks/current/use-current-sync-engine.ts

@@ -1,33 +0,0 @@
-import type { SyncEngine, SyncEngineStatus } from '@affine/workspace/providers';
-import { useEffect, useState } from 'react';
-
-import { useCurrentWorkspace } from './use-current-workspace';
-
-export function useCurrentSyncEngine(): SyncEngine | undefined {
-  const [workspace] = useCurrentWorkspace();
-  // FIXME: This is a hack to get the sync engine, we need refactor this in the future.
-  const syncEngine = (
-    workspace.blockSuiteWorkspace.providers[0] as { engine?: SyncEngine }
-  )?.engine;
-
-  return syncEngine;
-}
-
-export function useCurrentSyncEngineStatus(): SyncEngineStatus | undefined {
-  const syncEngine = useCurrentSyncEngine();
-  const [status, setStatus] = useState<SyncEngineStatus>();
-
-  useEffect(() => {
-    if (syncEngine) {
-      setStatus(syncEngine.status);
-      return syncEngine.onStatusChange.on(status => {
-        setStatus(status);
-      }).dispose;
-    } else {
-      setStatus(undefined);
-    }
-    return;
-  }, [syncEngine]);
-
-  return status;
-}

packages/frontend/core/src/hooks/current/use-current-workspace.ts

@@ -1,54 +0,0 @@
-import { assertExists } from '@blocksuite/global/utils';
-import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-} from '@toeverything/infra/atom';
-import { useAtom, useSetAtom } from 'jotai';
-import { useCallback, useEffect } from 'react';
-
-import type { AllWorkspace } from '../../shared';
-import { useWorkspace, useWorkspaceEffect } 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 [id, setId] = useAtom(currentWorkspaceIdAtom);
-  assertExists(id);
-  const currentWorkspace = useWorkspace(id);
-  // when you call current workspace, effect is always called
-  useWorkspaceEffect(currentWorkspace.id);
-  useEffect(() => {
-    globalThis.currentWorkspace = currentWorkspace;
-    globalThis.dispatchEvent(
-      new CustomEvent('affine:workspace:change', {
-        detail: { id: currentWorkspace.id },
-      })
-    );
-  }, [currentWorkspace]);
-  const setPageId = useSetAtom(currentPageIdAtom);
-  return [
-    currentWorkspace,
-    useCallback(
-      (id: string | null) => {
-        if (environment.isBrowser && id) {
-          localStorage.setItem('last_workspace_id', id);
-        }
-        setPageId(null);
-        setId(id);
-      },
-      [setId, setPageId]
-    ),
-  ];
-}

packages/frontend/core/src/hooks/root/use-on-transform-workspace.ts

@@ -1,90 +0,0 @@
-import { pushNotificationAtom } from '@affine/component/notification-center';
-import type { WorkspaceRegistry } from '@affine/env/workspace';
-import type { WorkspaceFlavour } from '@affine/env/workspace';
-import { WorkspaceSubPath } from '@affine/env/workspace';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import {
-  rootWorkspacesMetadataAtom,
-  workspaceAdaptersAtom,
-} from '@affine/workspace/atom';
-import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import { currentPageIdAtom } from '@toeverything/infra/atom';
-import { WorkspaceVersion } from '@toeverything/infra/blocksuite';
-import { useAtomValue, useSetAtom } from 'jotai';
-
-import { openSettingModalAtom } from '../../atoms';
-import { useNavigateHelper } from '../use-navigate-helper';
-
-export function useOnTransformWorkspace() {
-  const t = useAFFiNEI18N();
-  const setSettingModal = useSetAtom(openSettingModalAtom);
-  const WorkspaceAdapters = useAtomValue(workspaceAdaptersAtom);
-  const setMetadata = useSetAtom(rootWorkspacesMetadataAtom);
-  const { openPage } = useNavigateHelper();
-  const currentPageId = useAtomValue(currentPageIdAtom);
-  const pushNotification = useSetAtom(pushNotificationAtom);
-
-  return useAsyncCallback(
-    async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
-      from: From,
-      to: To,
-      workspace: WorkspaceRegistry[From]
-    ): Promise<void> => {
-      // create first, then delete, in case of failure
-      const newId = await WorkspaceAdapters[to].CRUD.create(
-        workspace.blockSuiteWorkspace
-      );
-      await WorkspaceAdapters[from].CRUD.delete(workspace.blockSuiteWorkspace);
-      setMetadata(workspaces => {
-        const idx = workspaces.findIndex(ws => ws.id === workspace.id);
-        workspaces.splice(idx, 1, {
-          id: newId,
-          flavour: to,
-          version: WorkspaceVersion.SubDoc,
-        });
-        return [...workspaces];
-      }, newId);
-      // fixme(himself65): setting modal could still open and open the non-exist workspace
-      setSettingModal(settings => ({
-        ...settings,
-        open: false,
-      }));
-      window.dispatchEvent(
-        new CustomEvent('affine-workspace:transform', {
-          detail: {
-            from,
-            to,
-            oldId: workspace.id,
-            newId: newId,
-          },
-        })
-      );
-      openPage(newId, currentPageId ?? WorkspaceSubPath.ALL);
-      pushNotification({
-        title: t['Successfully enabled AFFiNE Cloud'](),
-        type: 'success',
-      });
-    },
-    [
-      WorkspaceAdapters,
-      setMetadata,
-      setSettingModal,
-      openPage,
-      currentPageId,
-      pushNotification,
-      t,
-    ]
-  );
-}
-
-declare global {
-  // global Events
-  interface WindowEventMap {
-    'affine-workspace:transform': CustomEvent<{
-      from: WorkspaceFlavour;
-      to: WorkspaceFlavour;
-      oldId: string;
-      newId: string;
-    }>;
-  }
-}

packages/frontend/core/src/hooks/use-register-workspace-commands.ts

@@ -1,5 +1,6 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useAtom, useStore } from 'jotai';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
+import { useAtom, useAtomValue, useStore } from 'jotai';
 import { useTheme } from 'next-themes';
 import { useEffect } from 'react';
 
@@ -14,14 +15,13 @@ import {
 } from '../commands';
 import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
 import { useLanguageHelper } from './affine/use-language-helper';
-import { useCurrentWorkspace } from './current/use-current-workspace';
 import { useNavigateHelper } from './use-navigate-helper';
 
 export function useRegisterWorkspaceCommands() {
   const store = useStore();
   const t = useAFFiNEI18N();
   const theme = useTheme();
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const languageHelper = useLanguageHelper();
   const pageHelper = usePageHelper(currentWorkspace.blockSuiteWorkspace);
   const navigationHelper = useNavigateHelper();

packages/frontend/core/src/hooks/use-workspace-blob.ts

@@ -1,58 +0,0 @@
-import { DebugLogger } from '@affine/debug';
-import type { BlobManager } from '@blocksuite/store';
-import { useEffect, useMemo, useRef, useState } from 'react';
-
-import type { BlockSuiteWorkspace } from '../shared';
-
-const logger = new DebugLogger('useWorkspaceBlob');
-
-export function useWorkspaceBlob(
-  blockSuiteWorkspace: BlockSuiteWorkspace
-): BlobManager {
-  return useMemo(() => blockSuiteWorkspace.blob, [blockSuiteWorkspace.blob]);
-}
-
-export function useWorkspaceBlobImage(
-  key: string | null,
-  blockSuiteWorkspace: BlockSuiteWorkspace
-) {
-  const blobManager = useWorkspaceBlob(blockSuiteWorkspace);
-  const [blob, setBlob] = useState<Blob | null>(null);
-  useEffect(() => {
-    const controller = new AbortController();
-    if (key === null) {
-      setBlob(null);
-      return;
-    }
-    blobManager
-      ?.get(key)
-      .then(blob => {
-        if (controller.signal.aborted) {
-          return;
-        }
-        if (blob) {
-          setBlob(blob);
-        }
-      })
-      .catch(err => {
-        logger.error('Failed to get blob', err);
-      });
-    return () => {
-      controller.abort();
-    };
-  }, [blobManager, key]);
-  const [url, setUrl] = useState<string | null>(null);
-  const ref = useRef<string | null>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      URL.revokeObjectURL(ref.current);
-    }
-    if (blob) {
-      const url = URL.createObjectURL(blob);
-      setUrl(url);
-      ref.current = url;
-    }
-  }, [blob]);
-  return url;
-}

packages/frontend/core/src/hooks/use-workspace.ts

@@ -1,53 +0,0 @@
-import {
-  type AffineOfficialWorkspace,
-  WorkspaceFlavour,
-} from '@affine/env/workspace';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import type { Workspace } from '@blocksuite/store';
-import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
-import type { Atom } from 'jotai';
-import { atom, useAtomValue } from 'jotai';
-
-const workspaceWeakMap = new WeakMap<
-  Workspace,
-  Atom<Promise<AffineOfficialWorkspace>>
->();
-
-// workspace effect is the side effect like connect to the server/indexeddb,
-//  this will save the workspace updates permanently.
-export function useWorkspaceEffect(workspaceId: string): void {
-  const [, effectAtom] = getBlockSuiteWorkspaceAtom(workspaceId);
-  useAtomValue(effectAtom);
-}
-
-// todo(himself65): remove this hook
-export function useWorkspace(workspaceId: string): AffineOfficialWorkspace {
-  const [workspaceAtom] = getBlockSuiteWorkspaceAtom(workspaceId);
-  const workspace = useAtomValue(workspaceAtom);
-  if (!workspaceWeakMap.has(workspace)) {
-    const baseAtom = atom(async get => {
-      const metadataList = await get(rootWorkspacesMetadataAtom);
-      const flavour = metadataList.find(({ id }) => id === workspaceId)
-        ?.flavour;
-
-      if (!flavour) {
-        // when last workspace is removed, we may encounter this warning. it should be fine
-        console.warn(
-          'workspace not found in rootWorkspacesMetadataAtom, maybe it is removed',
-          workspaceId
-        );
-      }
-
-      return {
-        id: workspaceId,
-        flavour: flavour ?? WorkspaceFlavour.LOCAL,
-        blockSuiteWorkspace: workspace,
-      };
-    });
-    workspaceWeakMap.set(workspace, baseAtom);
-  }
-
-  return useAtomValue(
-    workspaceWeakMap.get(workspace) as Atom<Promise<AffineOfficialWorkspace>>
-  );
-}

packages/frontend/core/src/hooks/use-workspaces.ts

@@ -1,122 +0,0 @@
-import { DebugLogger } from '@affine/debug';
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { saveWorkspaceToLocalStorage } from '@affine/workspace/local/crud';
-import { getOrCreateWorkspace } from '@affine/workspace/manager';
-import { getWorkspace } from '@toeverything/infra/__internal__/workspace';
-import { getCurrentStore } from '@toeverything/infra/atom';
-import {
-  buildShowcaseWorkspace,
-  WorkspaceVersion,
-} from '@toeverything/infra/blocksuite';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { nanoid } from 'nanoid';
-import { useCallback } from 'react';
-
-import { LocalAdapter } from '../adapters/local';
-import { WorkspaceAdapters } from '../adapters/workspace';
-import { setPageModeAtom } from '../atoms';
-
-const logger = new DebugLogger('use-workspaces');
-
-/**
- * This hook has the permission to all workspaces. Be careful when using it.
- */
-export function useAppHelper() {
-  const jotaiWorkspaces = useAtomValue(rootWorkspacesMetadataAtom);
-  const set = useSetAtom(rootWorkspacesMetadataAtom);
-  return {
-    addLocalWorkspace: useCallback(
-      async (workspaceId: string): Promise<string> => {
-        getOrCreateWorkspace(workspaceId, WorkspaceFlavour.LOCAL);
-        saveWorkspaceToLocalStorage(workspaceId);
-        set(workspaces => [
-          ...workspaces,
-          {
-            id: workspaceId,
-            flavour: WorkspaceFlavour.LOCAL,
-            version: WorkspaceVersion.DatabaseV3,
-          },
-        ]);
-        logger.debug('imported local workspace', workspaceId);
-        return workspaceId;
-      },
-      [set]
-    ),
-    addCloudWorkspace: useCallback(
-      (workspaceId: string) => {
-        getOrCreateWorkspace(workspaceId, WorkspaceFlavour.AFFINE_CLOUD);
-        set(workspaces => [
-          ...workspaces,
-          {
-            id: workspaceId,
-            flavour: WorkspaceFlavour.AFFINE_CLOUD,
-            version: WorkspaceVersion.DatabaseV3,
-          },
-        ]);
-        logger.debug('imported cloud workspace', workspaceId);
-      },
-      [set]
-    ),
-    createLocalWorkspace: useCallback(
-      async (name: string): Promise<string> => {
-        const blockSuiteWorkspace = getOrCreateWorkspace(
-          nanoid(),
-          WorkspaceFlavour.LOCAL
-        );
-        blockSuiteWorkspace.meta.setName(name);
-        const id = await LocalAdapter.CRUD.create(blockSuiteWorkspace);
-        {
-          // this is hack, because CRUD doesn't return the workspace
-          const blockSuiteWorkspace = getOrCreateWorkspace(
-            id,
-            WorkspaceFlavour.LOCAL
-          );
-          await buildShowcaseWorkspace(blockSuiteWorkspace, {
-            store: getCurrentStore(),
-            atoms: {
-              pageMode: setPageModeAtom,
-            },
-          });
-        }
-        set(workspaces => [
-          ...workspaces,
-          {
-            id,
-            flavour: WorkspaceFlavour.LOCAL,
-            version: WorkspaceVersion.DatabaseV3,
-          },
-        ]);
-        logger.debug('created local workspace', id);
-        return id;
-      },
-      [set]
-    ),
-    deleteWorkspace: useCallback(
-      async (workspaceId: string) => {
-        const targetJotaiWorkspace = jotaiWorkspaces.find(
-          ws => ws.id === workspaceId
-        );
-        if (!targetJotaiWorkspace) {
-          throw new Error('page cannot be found');
-        }
-
-        const targetWorkspace = getWorkspace(targetJotaiWorkspace.id);
-
-        // delete workspace from plugin
-        await WorkspaceAdapters[targetJotaiWorkspace.flavour].CRUD.delete(
-          targetWorkspace
-        );
-        // delete workspace from jotai storage
-        set(workspaces => workspaces.filter(ws => ws.id !== workspaceId));
-      },
-      [jotaiWorkspaces, set]
-    ),
-    deleteWorkspaceMeta: useCallback(
-      (workspaceId: string) => {
-        set(workspaces => workspaces.filter(ws => ws.id !== workspaceId));
-      },
-      [set]
-    ),
-  };
-}

packages/frontend/core/src/index.tsx

@@ -2,23 +2,23 @@ import './polyfill/ses-lockdown';
 import './polyfill/intl-segmenter';
 import './polyfill/request-idle-callback';
 
-import { WorkspaceFallback } from '@affine/component/workspace';
 import { assertExists } from '@blocksuite/global/utils';
 import { getCurrentStore } from '@toeverything/infra/atom';
-import { StrictMode, Suspense } from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
+import { App } from './app';
 import { bootstrapPluginSystem } from './bootstrap/register-plugins';
+import { setup } from './bootstrap/setup';
 import { performanceLogger } from './shared';
 
 const performanceMainLogger = performanceLogger.namespace('main');
-async function main() {
+function main() {
   performanceMainLogger.info('start');
-  const { setup } = await import('./bootstrap/setup');
 
   const rootStore = getCurrentStore();
   performanceMainLogger.info('setup start');
-  await setup(rootStore);
+  setup();
   performanceMainLogger.info('setup done');
 
   bootstrapPluginSystem(rootStore).catch(err => {
@@ -26,20 +26,19 @@ async function main() {
   });
 
   performanceMainLogger.info('import app');
-  const { App } = await import('./app');
   const root = document.getElementById('app');
   assertExists(root);
 
   performanceMainLogger.info('render app');
   createRoot(root).render(
     <StrictMode>
-      <Suspense fallback={<WorkspaceFallback key="AppLoading" />}>
-        <App />
-      </Suspense>
+      <App />
     </StrictMode>
   );
 }
 
-main().catch(err => {
+try {
+  main();
+} catch (err) {
   console.error('Failed to bootstrap app', err);
-});
+}

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -7,8 +7,7 @@ import {
   PageListDragOverlay,
 } from '@affine/component/page-list';
 import { MainContainer, WorkspaceFallback } from '@affine/component/workspace';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { getBlobEngine } from '@affine/workspace/manager';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import {
   DndContext,
@@ -20,8 +19,7 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
-import type { MigrationPoint } from '@toeverything/infra/blocksuite';
+import { useWorkspaceStatus } from '@toeverything/hooks/use-workspace-status';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { PropsWithChildren, ReactNode } from 'react';
 import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
@@ -37,7 +35,6 @@ import { RootAppSidebar } from '../components/root-app-sidebar';
 import { WorkspaceUpgrade } from '../components/workspace-upgrade';
 import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';
 import { useSidebarDrag } from '../hooks/affine/use-sidebar-drag';
-import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { useRegisterWorkspaceCommands } from '../hooks/use-register-workspace-commands';
 import {
@@ -57,11 +54,11 @@ export const QuickSearch = () => {
     openQuickSearchModalAtom
   );
 
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { pageId } = useParams();
-  const blockSuiteWorkspace = currentWorkspace?.blockSuiteWorkspace;
+  const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
   const pageMeta = useBlockSuitePageMeta(
-    currentWorkspace?.blockSuiteWorkspace
+    currentWorkspace.blockSuiteWorkspace
   ).find(meta => meta.id === pageId);
 
   if (!blockSuiteWorkspace) {
@@ -77,89 +74,25 @@ export const QuickSearch = () => {
   );
 };
 
-export const CurrentWorkspaceContext = ({
+export const WorkspaceLayout = function WorkspaceLayout({
   children,
-}: PropsWithChildren): ReactNode => {
-  const workspaceId = useAtomValue(currentWorkspaceIdAtom);
-  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
-  const exist = metadata.find(m => m.id === workspaceId);
-  if (metadata.length === 0) {
-    return <WorkspaceFallback key="no-workspace" />;
-  }
-  if (!workspaceId) {
-    return <WorkspaceFallback key="finding-workspace-id" />;
-  }
-  if (!exist) {
-    return <WorkspaceFallback key="workspace-not-found" />;
-  }
-  return children;
-};
-
-type WorkspaceLayoutProps = {
-  migration?: MigrationPoint;
-};
-
-const useSyncWorkspaceBlob = () => {
-  // temporary solution for sync blob
-
-  const [currentWorkspace] = useCurrentWorkspace();
-
-  useEffect(() => {
-    const blobEngine = getBlobEngine(currentWorkspace.blockSuiteWorkspace);
-    let stopped = false;
-    function sync() {
-      if (stopped) {
-        return;
-      }
-
-      blobEngine
-        ?.sync()
-        .catch(error => {
-          console.error('sync blob error', error);
-        })
-        .finally(() => {
-          // sync every 1 minute
-          setTimeout(sync, 60000);
-        });
-    }
-
-    // after currentWorkspace changed, wait 1 second to start sync
-    setTimeout(sync, 1000);
-
-    return () => {
-      stopped = true;
-    };
-  }, [currentWorkspace]);
-};
-
-export const WorkspaceLayout = function WorkspacesSuspense({
-  children,
-  migration,
-}: PropsWithChildren<WorkspaceLayoutProps>) {
-  useSyncWorkspaceBlob();
+}: PropsWithChildren) {
   return (
     <AdapterProviderWrapper>
-      <CurrentWorkspaceContext>
-        {/* load all workspaces is costly, do not block the whole UI */}
-        <Suspense>
-          <AllWorkspaceModals />
-          <CurrentWorkspaceModals />
-        </Suspense>
-        <Suspense fallback={<WorkspaceFallback />}>
-          <WorkspaceLayoutInner migration={migration}>
-            {children}
-          </WorkspaceLayoutInner>
-        </Suspense>
-      </CurrentWorkspaceContext>
+      {/* load all workspaces is costly, do not block the whole UI */}
+      <Suspense>
+        <AllWorkspaceModals />
+        <CurrentWorkspaceModals />
+      </Suspense>
+      <Suspense fallback={<WorkspaceFallback />}>
+        <WorkspaceLayoutInner>{children}</WorkspaceLayoutInner>
+      </Suspense>
     </AdapterProviderWrapper>
   );
 };
 
-export const WorkspaceLayoutInner = ({
-  children,
-  migration,
-}: PropsWithChildren<WorkspaceLayoutProps>) => {
-  const [currentWorkspace] = useCurrentWorkspace();
+export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { openPage } = useNavigateHelper();
   const pageHelper = usePageHelper(currentWorkspace.blockSuiteWorkspace);
 
@@ -200,7 +133,6 @@ export const WorkspaceLayoutInner = ({
   const handleOpenSettingModal = useCallback(() => {
     setOpenSettingModalAtom({
       activeTab: 'appearance',
-      workspaceId: null,
       open: true,
     });
   }, [setOpenSettingModalAtom]);
@@ -224,6 +156,8 @@ export const WorkspaceLayoutInner = ({
   // todo: refactor this that the root layout do not need to check route state
   const isInPageDetail = !!pageId;
 
+  const upgradeStatus = useWorkspaceStatus(currentWorkspace, s => s.upgrade);
+
   return (
     <>
       {/* This DndContext is used for drag page from all-pages list into a folder in sidebar */}
@@ -256,8 +190,8 @@ export const WorkspaceLayoutInner = ({
             padding={appSettings.clientBorder}
           >
             <Suspense>
-              {migration ? (
-                <WorkspaceUpgrade migration={migration} />
+              {upgradeStatus?.needUpgrade || upgradeStatus?.upgrading ? (
+                <WorkspaceUpgrade />
               ) : (
                 children
               )}

packages/frontend/core/src/pages/404.tsx

@@ -9,7 +9,7 @@ import { SignOutModal } from '../components/affine/sign-out-modal';
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
 import { signOutCloud } from '../utils/cloud-utils';
 
-export const Component = (): ReactElement => {
+export const PageNotFound = (): ReactElement => {
   const { data: session } = useSession();
   const { jumpToIndex } = useNavigateHelper();
   const [open, setOpen] = useState(false);
@@ -52,3 +52,5 @@ export const Component = (): ReactElement => {
     </>
   );
 };
+
+export const Component = PageNotFound;

packages/frontend/core/src/pages/index.tsx

@@ -1,13 +1,12 @@
 import { Menu } from '@affine/component/ui/menu';
-import { DebugLogger } from '@affine/debug';
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { getWorkspace } from '@toeverything/infra/__internal__/workspace';
-import { getCurrentStore } from '@toeverything/infra/atom';
-import { lazy } from 'react';
-import type { LoaderFunction } from 'react-router-dom';
-import { redirect } from 'react-router-dom';
+import { workspaceListAtom } from '@affine/workspace/atom';
+import { useAtomValue } from 'jotai';
+import { lazy, useEffect } from 'react';
 
+import { createFirstAppData } from '../bootstrap/first-app-data';
 import { UserWithWorkspaceList } from '../components/pure/workspace-slider-bar/user-with-workspace-list';
+import { useNavigateHelper } from '../hooks/use-navigate-helper';
+import { WorkspaceSubPath } from '../shared';
 
 const AllWorkspaceModals = lazy(() =>
   import('../providers/modal-provider').then(({ AllWorkspaceModals }) => ({
@@ -15,44 +14,27 @@ const AllWorkspaceModals = lazy(() =>
   }))
 );
 
-const logger = new DebugLogger('index-page');
-
-export const loader: LoaderFunction = async () => {
-  const rootStore = getCurrentStore();
-  const { createFirstAppData } = await import('../bootstrap/setup');
-  createFirstAppData(rootStore);
-  const meta = await rootStore.get(rootWorkspacesMetadataAtom);
-  const lastId = localStorage.getItem('last_workspace_id');
-  const lastPageId = localStorage.getItem('last_page_id');
-  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 helloWorldPage = nonTrashPages.find(({ jumpOnce }) => jumpOnce)?.id;
-    const pageId =
-      nonTrashPages.find(({ id }) => id === lastPageId)?.id ??
-      nonTrashPages.at(0)?.id;
-    if (helloWorldPage) {
-      logger.debug(
-        'Found target workspace. Jump to hello world page',
-        helloWorldPage
-      );
-      return redirect(`/workspace/${targetWorkspace.id}/${helloWorldPage}`);
-    } else if (pageId) {
-      logger.debug('Found target workspace. Jump to page', pageId);
-      return redirect(`/workspace/${targetWorkspace.id}/${pageId}`);
-    } else {
-      logger.debug('Found target workspace. Jump to all page');
-      return redirect(`/workspace/${targetWorkspace.id}/all`);
-    }
-  }
-  return null;
-};
-
 export const Component = () => {
+  const list = useAtomValue(workspaceListAtom);
+  const { openPage } = useNavigateHelper();
+
+  useEffect(() => {
+    if (list.length === 0) {
+      return;
+    }
+
+    // open last workspace
+    const lastId = localStorage.getItem('last_workspace_id');
+    const openWorkspace = list.find(w => w.id === lastId) ?? list[0];
+    openPage(openWorkspace.id, WorkspaceSubPath.ALL);
+  }, [list, openPage]);
+
+  useEffect(() => {
+    createFirstAppData().catch(err => {
+      console.error('Failed to create first app data', err);
+    });
+  }, []);
+
   // TODO: We need a no workspace page
   return (
     <>

packages/frontend/core/src/pages/invite.tsx

@@ -14,7 +14,6 @@ import { authAtom } from '../atoms';
 import { setOnceSignedInEventAtom } from '../atoms/event';
 import { useCurrentLoginStatus } from '../hooks/affine/use-current-login-status';
 import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper';
-import { useAppHelper } from '../hooks/use-workspaces';
 
 export const loader: LoaderFunction = async args => {
   const inviteId = args.params.inviteId || '';
@@ -49,7 +48,6 @@ export const loader: LoaderFunction = async args => {
 export const Component = () => {
   const loginStatus = useCurrentLoginStatus();
   const { jumpToSignIn } = useNavigateHelper();
-  const { addCloudWorkspace } = useAppHelper();
   const { jumpToSubPath } = useNavigateHelper();
 
   const setOnceSignedInEvent = useSetAtom(setOnceSignedInEventAtom);
@@ -61,13 +59,12 @@ export const Component = () => {
   };
 
   const openWorkspace = useCallback(() => {
-    addCloudWorkspace(inviteInfo.workspace.id);
     jumpToSubPath(
       inviteInfo.workspace.id,
       WorkspaceSubPath.ALL,
       RouteLogic.REPLACE
     );
-  }, [addCloudWorkspace, inviteInfo.workspace.id, jumpToSubPath]);
+  }, [inviteInfo.workspace.id, jumpToSubPath]);
 
   useEffect(() => {
     if (loginStatus === 'unauthenticated') {

packages/frontend/core/src/pages/share/share-detail-page.tsx

@@ -1,11 +1,13 @@
 import { MainContainer } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
-import { WorkspaceFlavour } from '@affine/env/workspace';
-import type { CloudDoc } from '@affine/workspace/affine/download';
-import { downloadBinaryFromCloud } from '@affine/workspace/affine/download';
-import { getOrCreateWorkspace } from '@affine/workspace/manager';
+import { fetchWithTraceReport } from '@affine/graphql';
+import {
+  createAffineCloudBlobStorage,
+  createStaticBlobStorage,
+  globalBlockSuiteSchema,
+} from '@affine/workspace';
 import { assertExists } from '@blocksuite/global/utils';
-import type { Page } from '@blocksuite/store';
+import { type Page, Workspace } from '@blocksuite/store';
 import { noop } from 'foxact/noop';
 import type { ReactElement } from 'react';
 import { useCallback } from 'react';
@@ -24,6 +26,36 @@ import { PageDetailEditor } from '../../components/page-detail-editor';
 import { SharePageNotFoundError } from '../../components/share-page-not-found-error';
 import { ShareHeader } from './share-header';
 
+type DocPublishMode = 'edgeless' | 'page';
+
+export type CloudDoc = {
+  arrayBuffer: ArrayBuffer;
+  publishMode: DocPublishMode;
+};
+
+export async function downloadBinaryFromCloud(
+  rootGuid: string,
+  pageGuid: string
+): Promise<CloudDoc | null> {
+  const response = await fetchWithTraceReport(
+    runtimeConfig.serverUrlPrefix +
+      `/api/workspaces/${rootGuid}/docs/${pageGuid}`,
+    {
+      priority: 'high',
+    }
+  );
+  if (response.ok) {
+    const publishMode = (response.headers.get('publish-mode') ||
+      'page') as DocPublishMode;
+    const arrayBuffer = await response.arrayBuffer();
+
+    // return both arrayBuffer and publish mode
+    return { arrayBuffer, publishMode };
+  }
+
+  return null;
+}
+
 type LoaderData = {
   page: Page;
   publishMode: PageMode;
@@ -49,10 +81,18 @@ export const loader: LoaderFunction = async ({ params }) => {
   if (!workspaceId || !pageId) {
     return redirect('/404');
   }
-  const workspace = getOrCreateWorkspace(
-    workspaceId,
-    WorkspaceFlavour.AFFINE_PUBLIC
-  );
+  const workspace = new Workspace({
+    id: workspaceId,
+    blobStorages: [
+      () => ({
+        crud: createAffineCloudBlobStorage(workspaceId),
+      }),
+      () => ({
+        crud: createStaticBlobStorage(),
+      }),
+    ],
+    schema: globalBlockSuiteSchema,
+  });
   // download root workspace
   {
     const response = await downloadBinaryFromCloud(workspaceId, workspaceId);
@@ -84,9 +124,9 @@ export const Component = (): ReactElement => {
     <AppContainer>
       <MainContainer>
         <ShareHeader
-          workspace={page.workspace}
           pageId={page.id}
           publishMode={publishMode}
+          blockSuiteWorkspace={page.workspace}
         />
         <PageDetailEditor
           isPublic

packages/frontend/core/src/pages/share/share-header.tsx

@@ -1,30 +1,27 @@
-import type { Workspace } from '@blocksuite/store';
+import type { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
 
 import type { PageMode } from '../../atoms';
 import { BlockSuiteHeaderTitle } from '../../components/blocksuite/block-suite-header-title';
 import ShareHeaderLeftItem from '../../components/cloud/share-header-left-item';
 import ShareHeaderRightItem from '../../components/cloud/share-header-right-item';
 import { Header } from '../../components/pure/header';
-import { useWorkspace } from '../../hooks/use-workspace';
 
 export function ShareHeader({
-  workspace,
   pageId,
   publishMode,
+  blockSuiteWorkspace,
 }: {
-  workspace: Workspace;
   pageId: string;
   publishMode: PageMode;
+  blockSuiteWorkspace: BlockSuiteWorkspace;
 }) {
-  const currentWorkspace = useWorkspace(workspace.id);
-
   return (
     <Header
       isFloat={publishMode === 'edgeless'}
       left={<ShareHeaderLeftItem />}
       center={
         <BlockSuiteHeaderTitle
-          workspace={currentWorkspace}
+          blockSuiteWorkspace={blockSuiteWorkspace}
           pageId={pageId}
           isPublic={true}
           publicMode={publishMode}
@@ -32,7 +29,7 @@ export function ShareHeader({
       }
       right={
         <ShareHeaderRightItem
-          workspaceId={workspace.id}
+          workspaceId={blockSuiteWorkspace.id}
           pageId={pageId}
           publishMode={publishMode}
         />

packages/frontend/core/src/pages/workspace/all-page/all-page-filter.tsx

@@ -4,32 +4,32 @@ import {
   useCollectionManager,
 } from '@affine/component/page-list';
 import type { Collection, Filter } from '@affine/env/filter';
-import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
+import { useAtomValue } from 'jotai';
 import { useCallback } from 'react';
 
 import { collectionsCRUDAtom } from '../../../atoms/collections';
 import { filterContainerStyle } from '../../../components/filter-container.css';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
-import { useWorkspace } from '../../../hooks/use-workspace';
 
-export const FilterContainer = ({ workspaceId }: { workspaceId: string }) => {
-  const currentWorkspace = useWorkspace(workspaceId);
+export const FilterContainer = () => {
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const navigateHelper = useNavigateHelper();
   const setting = useCollectionManager(collectionsCRUDAtom);
   const saveToCollection = useCallback(
-    async (collection: Collection) => {
-      await setting.createCollection({
+    (collection: Collection) => {
+      setting.createCollection({
         ...collection,
         filterList: setting.currentCollection.filterList,
       });
-      navigateHelper.jumpToCollection(workspaceId, collection.id);
+      navigateHelper.jumpToCollection(currentWorkspace.id, collection.id);
     },
-    [setting, navigateHelper, workspaceId]
+    [setting, navigateHelper, currentWorkspace.id]
   );
 
-  const onFilterChange = useAsyncCallback(
-    async (filterList: Filter[]) => {
-      await setting.updateCollection({
+  const onFilterChange = useCallback(
+    (filterList: Filter[]) => {
+      setting.updateCollection({
         ...setting.currentCollection,
         filterList,
       });

packages/frontend/core/src/pages/workspace/all-page/all-page.tsx

@@ -9,10 +9,9 @@ import {
   useCollectionManager,
   VirtualizedPageList,
 } from '@affine/component/page-list';
-import { WorkspaceFlavour } from '@affine/env/workspace';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { assertExists } from '@blocksuite/global/utils';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import {
   CloseIcon,
   DeleteIcon,
@@ -21,18 +20,16 @@ import {
 } from '@blocksuite/icons';
 import type { PageMeta, Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
-import { getCurrentStore } from '@toeverything/infra/atom';
 import clsx from 'clsx';
+import { useAtomValue, useSetAtom } from 'jotai';
 import {
   type PropsWithChildren,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import type { LoaderFunction } from 'react-router-dom';
-import { redirect } from 'react-router-dom';
 import { NIL } from 'uuid';
 
 import { collectionsCRUDAtom } from '../../../atoms/collections';
@@ -45,32 +42,13 @@ import { useAllPageListConfig } from '../../../hooks/affine/use-all-page-list-co
 import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
 import { useDeleteCollectionInfo } from '../../../hooks/affine/use-delete-collection-info';
 import { useTrashModalHelper } from '../../../hooks/affine/use-trash-modal-helper';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { performanceRenderLogger } from '../../../shared';
 import { EmptyPageList } from '../page-list-empty';
 import { useFilteredPageMetas } from '../pages';
 import * as styles from './all-page.css';
 import { FilterContainer } from './all-page-filter';
 
-export const loader: LoaderFunction = async args => {
-  const rootStore = getCurrentStore();
-  const workspaceId = args.params.workspaceId;
-  assertExists(workspaceId);
-  const [workspaceAtom] = getBlockSuiteWorkspaceAtom(workspaceId);
-  const workspace = await rootStore.get(workspaceAtom);
-  for (const pageId of workspace.pages.keys()) {
-    const page = workspace.getPage(pageId);
-    if (page && page.meta.jumpOnce) {
-      workspace.meta.setPageMeta(page.id, {
-        jumpOnce: false,
-      });
-      return redirect(`/workspace/${workspace.id}/${page.id}`);
-    }
-  }
-  rootStore.set(currentCollectionAtom, NIL);
-  return null;
-};
-
 const PageListHeader = () => {
   const t = useAFFiNEI18N();
   const setting = useCollectionManager(collectionsCRUDAtom);
@@ -100,7 +78,7 @@ const PageListHeader = () => {
 };
 
 const usePageOperationsRenderer = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { setTrashModal } = useTrashModalHelper(
     currentWorkspace.blockSuiteWorkspace
   );
@@ -155,7 +133,7 @@ const PageListFloatingToolbar = ({
   selectedIds: string[];
   onClose: () => void;
 }) => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { setTrashModal } = useTrashModalHelper(
     currentWorkspace.blockSuiteWorkspace
   );
@@ -206,7 +184,7 @@ const NewPageButton = ({
   className?: string;
   size?: 'small' | 'default';
 }>) => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { importFile, createEdgeless, createPage } = usePageHelper(
     currentWorkspace.blockSuiteWorkspace
   );
@@ -263,14 +241,14 @@ const AllPageHeader = ({
         }
         center={<WorkspaceModeFilterTab />}
       />
-      <FilterContainer workspaceId={workspace.id} />
+      <FilterContainer />
     </>
   );
 };
 
 // even though it is called all page, it is also being used for collection route as well
 export const AllPage = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const { isPreferredEdgeless } = usePageHelper(
     currentWorkspace.blockSuiteWorkspace
   );
@@ -300,12 +278,10 @@ export const AllPage = () => {
 
   return (
     <div className={styles.root}>
-      {currentWorkspace.flavour !== WorkspaceFlavour.AFFINE_PUBLIC ? (
-        <AllPageHeader
-          workspace={currentWorkspace.blockSuiteWorkspace}
-          showCreateNew={!hideHeaderCreateNewPage}
-        />
-      ) : null}
+      <AllPageHeader
+        workspace={currentWorkspace.blockSuiteWorkspace}
+        showCreateNew={!hideHeaderCreateNewPage}
+      />
       {filteredPageMetas.length > 0 ? (
         <>
           <VirtualizedPageList
@@ -345,5 +321,35 @@ export const AllPage = () => {
 export const Component = () => {
   performanceRenderLogger.info('AllPage');
 
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const currentCollection = useSetAtom(currentCollectionAtom);
+  const navigateHelper = useNavigateHelper();
+
+  useEffect(() => {
+    function checkJumpOnce() {
+      for (const [pageId] of currentWorkspace.blockSuiteWorkspace.pages) {
+        const page = currentWorkspace.blockSuiteWorkspace.getPage(pageId);
+        if (page && page.meta.jumpOnce) {
+          currentWorkspace.blockSuiteWorkspace.meta.setPageMeta(page.id, {
+            jumpOnce: false,
+          });
+          navigateHelper.jumpToPage(currentWorkspace.id, pageId);
+        }
+      }
+    }
+    checkJumpOnce();
+    return currentWorkspace.blockSuiteWorkspace.slots.pagesUpdated.on(
+      checkJumpOnce
+    ).dispose;
+  }, [
+    currentWorkspace.blockSuiteWorkspace,
+    currentWorkspace.id,
+    navigateHelper,
+  ]);
+
+  useEffect(() => {
+    currentCollection(NIL);
+  }, [currentCollection]);
+
   return <AllPage />;
 };

packages/frontend/core/src/pages/workspace/collection.tsx

@@ -13,6 +13,7 @@ import { WindowsAppControls } from '@affine/core/components/pure/header/windows-
 import type { Collection } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import {
   CloseIcon,
   FilterIcon,
@@ -31,7 +32,6 @@ import {
   pageCollectionBaseAtom,
 } from '../../atoms/collections';
 import { useAllPageListConfig } from '../../hooks/affine/use-all-page-list-config';
-import { useCurrentWorkspace } from '../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '../../shared';
 import { getWorkspaceSetting } from '../../utils/workspace-setting';
@@ -51,7 +51,7 @@ export const Component = function CollectionPage() {
   const { collections, loading } = useAtomValue(pageCollectionBaseAtom);
   const navigate = useNavigateHelper();
   const params = useParams();
-  const [workspace] = useCurrentWorkspace();
+  const workspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const collection = collections.find(v => v.id === params.collectionId);
   const pushNotification = useSetAtom(pushNotificationAtom);
   useEffect(() => {
@@ -102,11 +102,11 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
   const { node, open } = useEditCollection(useAllPageListConfig());
   const openPageEdit = useAsyncCallback(async () => {
     const ret = await open({ ...collection }, 'page');
-    await updateCollection(ret);
+    updateCollection(ret);
   }, [open, collection, updateCollection]);
   const openRuleEdit = useAsyncCallback(async () => {
     const ret = await open({ ...collection }, 'rule');
-    await updateCollection(ret);
+    updateCollection(ret);
   }, [collection, open, updateCollection]);
   const [showTips, setShowTips] = useState(false);
   useEffect(() => {

packages/frontend/core/src/pages/workspace/detail-page/detail-page-header.tsx

@@ -4,7 +4,7 @@ import {
   appSidebarOpenAtom,
   SidebarSwitch,
 } from '@affine/component/app-sidebar';
-import type { AllWorkspace } from '@affine/core/shared';
+import type { Workspace } from '@affine/workspace';
 import { RightSidebarIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -106,7 +106,7 @@ export function DetailPageHeader({
   showSidebarSwitch = true,
 }: {
   page: Page;
-  workspace: AllWorkspace;
+  workspace: Workspace;
   showSidebarSwitch?: boolean;
 }) {
   const leftSidebarOpen = useAtomValue(appSidebarOpenAtom);
@@ -117,7 +117,10 @@ export function DetailPageHeader({
     <Header className={styles.mainHeader}>
       <SidebarSwitch show={!leftSidebarOpen} />
       {!leftSidebarOpen ? <HeaderDivider /> : null}
-      <BlockSuiteHeaderTitle pageId={page.id} workspace={workspace} />
+      <BlockSuiteHeaderTitle
+        pageId={page.id}
+        blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+      />
       <div className={styles.spacer} />
       {page ? <SharePageButton workspace={workspace} page={page} /> : null}
       <RightHeader showSidebarSwitch={showSidebarSwitch} />

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -5,17 +5,13 @@ import {
 } from '@affine/component/page-list';
 import { ResizePanel } from '@affine/component/resize-panel';
 import { WorkspaceSubPath } from '@affine/env/workspace';
-import { globalBlockSuiteSchema } from '@affine/workspace/manager';
-import { SyncEngineStep } from '@affine/workspace/providers';
-import { assertExists } from '@blocksuite/global/utils';
+import { globalBlockSuiteSchema, SyncEngineStep } from '@affine/workspace';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Page, Workspace } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
-import {
-  appSettingAtom,
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-} from '@toeverything/infra/atom';
+import { useWorkspaceStatus } from '@toeverything/hooks/use-workspace-status';
+import { appSettingAtom, currentPageIdAtom } from '@toeverything/infra/atom';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
   type ReactElement,
@@ -24,7 +20,7 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { type LoaderFunction, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import type { Map as YMap } from 'yjs';
 
 import { setPageModeAtom } from '../../../atoms';
@@ -37,13 +33,9 @@ import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { TrashPageFooter } from '../../../components/pure/trash-page-footer';
 import { TopTip } from '../../../components/top-tip';
 import { useRegisterBlocksuiteEditorCommands } from '../../../hooks/affine/use-register-blocksuite-editor-commands';
-import {
-  useCurrentSyncEngine,
-  useCurrentSyncEngineStatus,
-} from '../../../hooks/current/use-current-sync-engine';
-import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { performanceRenderLogger } from '../../../shared';
+import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
 import { DetailPageHeader, RightSidebarHeader } from './detail-page-header';
 import {
@@ -112,11 +104,7 @@ const DetailPageLayout = ({
 const DetailPageImpl = ({ page }: { page: Page }) => {
   const currentPageId = page.id;
   const { openPage, jumpToSubPath } = useNavigateHelper();
-  const [currentWorkspace] = useCurrentWorkspace();
-  assertExists(
-    currentWorkspace,
-    'current workspace is null when rendering detail'
-  );
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
 
   const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
@@ -186,7 +174,7 @@ const DetailPageImpl = ({ page }: { page: Page }) => {
               workspace={currentWorkspace}
               showSidebarSwitch={!isInTrash}
             />
-            <TopTip workspace={currentWorkspace} />
+            <TopTip pageId={currentPageId} workspace={currentWorkspace} />
           </>
         }
         main={
@@ -231,31 +219,23 @@ const useSafePage = (workspace: Workspace, pageId: string) => {
 };
 
 export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
-  const [currentWorkspace] = useCurrentWorkspace();
-  const currentSyncEngineStatus = useCurrentSyncEngineStatus();
-  const currentSyncEngine = useCurrentSyncEngine();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const currentSyncEngineStep = useWorkspaceStatus(
+    currentWorkspace,
+    s => s.engine.sync.step
+  );
 
   // set sync engine priority target
   useEffect(() => {
-    currentSyncEngine?.setPriorityRule(id => id.endsWith(pageId));
-  }, [pageId, currentSyncEngine, currentWorkspace]);
+    currentWorkspace.setPriorityRule(id => id.endsWith(pageId));
+  }, [pageId, currentWorkspace]);
 
   const page = useSafePage(currentWorkspace?.blockSuiteWorkspace, pageId);
 
-  const navigate = useNavigateHelper();
-
-  // if sync engine has been synced and the page is null, wait 1s and jump to 404 page.
-  useEffect(() => {
-    if (currentSyncEngineStatus?.step === SyncEngineStep.Synced && !page) {
-      const timeout = setTimeout(() => {
-        navigate.jumpTo404();
-      }, 1000);
-      return () => {
-        clearTimeout(timeout);
-      };
-    }
-    return;
-  }, [currentSyncEngineStatus, navigate, page]);
+  // if sync engine has been synced and the page is null, show 404 page.
+  if (currentSyncEngineStep === SyncEngineStep.Synced && !page) {
+    return <PageNotFound />;
+  }
 
   if (!page) {
     return <PageDetailSkeleton key="current-page-is-null" />;
@@ -270,27 +250,18 @@ export const DetailPage = ({ pageId }: { pageId: string }): ReactElement => {
   return <DetailPageImpl page={page} />;
 };
 
-export const loader: LoaderFunction = async () => {
-  return null;
-};
-
 export const Component = () => {
   performanceRenderLogger.info('DetailPage');
 
-  const setCurrentWorkspaceId = useSetAtom(currentWorkspaceIdAtom);
   const setCurrentPageId = useSetAtom(currentPageIdAtom);
   const params = useParams();
 
   useEffect(() => {
-    if (params.workspaceId) {
-      localStorage.setItem('last_workspace_id', params.workspaceId);
-      setCurrentWorkspaceId(params.workspaceId);
-    }
     if (params.pageId) {
       localStorage.setItem('last_page_id', params.pageId);
       setCurrentPageId(params.pageId);
     }
-  }, [params, setCurrentPageId, setCurrentWorkspaceId]);
+  }, [params, setCurrentPageId]);
 
   const pageId = params.pageId;
 

packages/frontend/core/src/pages/workspace/index.tsx

@@ -1,88 +1,88 @@
-import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
+import { WorkspaceFallback } from '@affine/component/workspace';
+import { type Workspace } from '@affine/workspace';
 import {
-  currentPageIdAtom,
-  currentWorkspaceIdAtom,
-  getCurrentStore,
-} from '@toeverything/infra/atom';
-import type { MigrationPoint } from '@toeverything/infra/blocksuite';
-import {
-  checkWorkspaceCompatibility,
-  fixWorkspaceVersion,
-  guidCompatibilityFix,
-} from '@toeverything/infra/blocksuite';
-import { useSetAtom } from 'jotai';
-import { type ReactElement, useEffect } from 'react';
-import {
-  type LoaderFunction,
-  Outlet,
-  redirect,
-  useLoaderData,
-  useParams,
-} from 'react-router-dom';
+  currentWorkspaceAtom,
+  workspaceListAtom,
+  workspaceListLoadingStatusAtom,
+  workspaceManagerAtom,
+} from '@affine/workspace/atom';
+import { useWorkspace } from '@toeverything/hooks/use-workspace';
+import { useAtom, useAtomValue } from 'jotai';
+import { type ReactElement, Suspense, useEffect, useMemo } from 'react';
+import { Outlet, useParams } from 'react-router-dom';
 
 import { AffineErrorBoundary } from '../../components/affine/affine-error-boundary';
 import { WorkspaceLayout } from '../../layouts/workspace-layout';
-import { performanceLogger, performanceRenderLogger } from '../../shared';
+import { performanceRenderLogger } from '../../shared';
+import { PageNotFound } from '../404';
 
-const workspaceLoaderLogger = performanceLogger.namespace('workspace_loader');
-
-export const loader: LoaderFunction = async args => {
-  workspaceLoaderLogger.info('start');
-
-  const rootStore = getCurrentStore();
-
-  if (args.params.workspaceId) {
-    localStorage.setItem('last_workspace_id', args.params.workspaceId);
-    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
+declare global {
+  /**
+   * @internal debug only
+   */
+  // eslint-disable-next-line no-var
+  var currentWorkspace: Workspace | undefined;
+  interface WindowEventMap {
+    'affine:workspace:change': CustomEvent<{ id: string }>;
   }
-
-  const meta = await rootStore.get(rootWorkspacesMetadataAtom);
-  workspaceLoaderLogger.info('meta loaded');
-
-  const currentMetadata = meta.find(({ id }) => id === args.params.workspaceId);
-  if (!currentMetadata) {
-    return redirect('/404');
-  }
-
-  if (args.params.pageId) {
-    localStorage.setItem('last_page_id', args.params.pageId);
-    rootStore.set(currentPageIdAtom, args.params.pageId);
-  } else {
-    rootStore.set(currentPageIdAtom, null);
-  }
-
-  const [workspaceAtom] = getBlockSuiteWorkspaceAtom(currentMetadata.id);
-  workspaceLoaderLogger.info('get cloud workspace atom');
-
-  const workspace = await rootStore.get(workspaceAtom);
-  workspaceLoaderLogger.info('workspace loaded');
-
-  guidCompatibilityFix(workspace.doc);
-  fixWorkspaceVersion(workspace.doc);
-  return checkWorkspaceCompatibility(workspace);
-};
+}
 
 export const Component = (): ReactElement => {
   performanceRenderLogger.info('WorkspaceLayout');
 
-  const setCurrentWorkspaceId = useSetAtom(currentWorkspaceIdAtom);
+  const [
+    _ /* read this atom here to make sure children refresh when currentWorkspace changed */,
+    setCurrentWorkspace,
+  ] = useAtom(currentWorkspaceAtom);
 
   const params = useParams();
 
-  useEffect(() => {
-    if (params.workspaceId) {
-      localStorage.setItem('last_workspace_id', params.workspaceId);
-      setCurrentWorkspaceId(params.workspaceId);
-    }
-  }, [params, setCurrentWorkspaceId]);
+  const list = useAtomValue(workspaceListAtom);
+  const listLoading = useAtomValue(workspaceListLoadingStatusAtom);
+  const workspaceManager = useAtomValue(workspaceManagerAtom);
+
+  const meta = useMemo(() => {
+    return list.find(({ id }) => id === params.workspaceId);
+  }, [list, params.workspaceId]);
+
+  const workspace = useWorkspace(meta);
+
+  useEffect(() => {
+    if (!workspace) {
+      setCurrentWorkspace(null);
+      return undefined;
+    }
+    setCurrentWorkspace(workspace ?? null);
+
+    // for debug purpose
+    window.currentWorkspace = workspace;
+    window.dispatchEvent(
+      new CustomEvent('affine:workspace:change', {
+        detail: {
+          id: workspace.id,
+        },
+      })
+    );
+
+    localStorage.setItem('last_workspace_id', workspace.id);
+  }, [setCurrentWorkspace, meta, workspaceManager, workspace]);
+
+  // if listLoading is false, we can show 404 page, otherwise we should show loading page.
+  if (listLoading === false && meta === undefined) {
+    return <PageNotFound />;
+  }
+
+  if (!workspace) {
+    return <WorkspaceFallback key="workspaceLoading" />;
+  }
 
-  const migration = useLoaderData() as MigrationPoint | undefined;
   return (
-    <AffineErrorBoundary key={params.workspaceId} height="100vh">
-      <WorkspaceLayout migration={migration}>
-        <Outlet />
-      </WorkspaceLayout>
-    </AffineErrorBoundary>
+    <Suspense fallback={<WorkspaceFallback key="workspaceFallback" />}>
+      <AffineErrorBoundary height="100vh">
+        <WorkspaceLayout>
+          <Outlet />
+        </WorkspaceLayout>
+      </AffineErrorBoundary>
+    </Suspense>
   );
 };

packages/frontend/core/src/pages/workspace/trash-page.tsx

@@ -5,11 +5,13 @@ import {
   VirtualizedPageList,
 } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { waitForCurrentWorkspaceAtom } from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import { DeleteIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { getCurrentStore } from '@toeverything/infra/atom';
+import { useAtomValue } from 'jotai';
 import { useCallback } from 'react';
 import { type LoaderFunction } from 'react-router-dom';
 import { NIL } from 'uuid';
@@ -18,7 +20,6 @@ import { usePageHelper } from '../../components/blocksuite/block-suite-page-list
 import { Header } from '../../components/pure/header';
 import { WindowsAppControls } from '../../components/pure/header/windows-app-controls';
 import { useBlockSuiteMetaHelper } from '../../hooks/affine/use-block-suite-meta-helper';
-import { useCurrentWorkspace } from '../../hooks/current/use-current-workspace';
 import { EmptyPageList } from './page-list-empty';
 import { useFilteredPageMetas } from './pages';
 import * as styles from './trash-page.css';
@@ -56,7 +57,7 @@ export const loader: LoaderFunction = async () => {
 };
 
 export const TrashPage = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   // todo(himself65): refactor to plugin
   const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
   assertExists(blockSuiteWorkspace);

packages/frontend/core/src/providers/modal-provider.tsx

@@ -1,7 +1,12 @@
-import { WorkspaceSubPath } from '@affine/env/workspace';
+import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
+import {
+  currentWorkspaceAtom,
+  waitForCurrentWorkspaceAtom,
+  workspaceListAtom,
+} from '@affine/workspace/atom';
 import { assertExists } from '@blocksuite/global/utils';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import type { ReactElement } from 'react';
 import { lazy, Suspense, useCallback } from 'react';
 
@@ -14,7 +19,6 @@ import {
   openSignOutModalAtom,
 } from '../atoms';
 import { PaymentDisableModal } from '../components/affine/payment-disable';
-import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { signOutCloud } from '../utils/cloud-utils';
 
@@ -56,33 +60,43 @@ const SignOutModal = lazy(() =>
 );
 
 export const Setting = () => {
-  const [currentWorkspace] = useCurrentWorkspace();
-  const [{ open, workspaceId, activeTab }, setOpenSettingModalAtom] =
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
+  const [{ open, workspaceMetadata, activeTab }, setOpenSettingModalAtom] =
     useAtom(openSettingModalAtom);
   assertExists(currentWorkspace);
 
   const onSettingClick = useCallback(
     ({
       activeTab,
-      workspaceId,
-    }: Pick<SettingAtom, 'activeTab' | 'workspaceId'>) => {
-      setOpenSettingModalAtom(prev => ({ ...prev, activeTab, workspaceId }));
+      workspaceMetadata,
+    }: Pick<SettingAtom, 'activeTab' | 'workspaceMetadata'>) => {
+      setOpenSettingModalAtom(prev => ({
+        ...prev,
+        activeTab,
+        workspaceMetadata,
+      }));
     },
     [setOpenSettingModalAtom]
   );
 
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpenSettingModalAtom(prev => ({ ...prev, open }));
+    },
+    [setOpenSettingModalAtom]
+  );
+
+  if (!open) {
+    return null;
+  }
+
   return (
     <SettingModal
       open={open}
       activeTab={activeTab}
-      workspaceId={workspaceId}
+      workspaceMetadata={workspaceMetadata}
       onSettingClick={onSettingClick}
-      onOpenChange={useCallback(
-        (open: boolean) => {
-          setOpenSettingModalAtom(prev => ({ ...prev, open }));
-        },
-        [setOpenSettingModalAtom]
-      )}
+      onOpenChange={onOpenChange}
     />
   );
 };
@@ -128,7 +142,7 @@ export const AuthModal = (): ReactElement => {
 };
 
 export function CurrentWorkspaceModals() {
-  const [currentWorkspace] = useCurrentWorkspace();
+  const currentWorkspace = useAtomValue(waitForCurrentWorkspaceAtom);
   const [openDisableCloudAlertModal, setOpenDisableCloudAlertModal] = useAtom(
     openDisableCloudAlertModalAtom
   );
@@ -152,14 +166,25 @@ export function CurrentWorkspaceModals() {
 }
 
 export const SignOutConfirmModal = () => {
-  const { jumpToIndex } = useNavigateHelper();
+  const { openPage } = useNavigateHelper();
   const [open, setOpen] = useAtom(openSignOutModalAtom);
+  const currentWorkspace = useAtomValue(currentWorkspaceAtom);
+  const workspaceList = useAtomValue(workspaceListAtom);
 
   const onConfirm = useAsyncCallback(async () => {
     setOpen(false);
     await signOutCloud();
-    jumpToIndex();
-  }, [jumpToIndex, setOpen]);
+
+    // if current workspace is affine cloud, switch to local workspace
+    if (currentWorkspace?.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
+      const localWorkspace = workspaceList.find(
+        w => w.flavour === WorkspaceFlavour.LOCAL
+      );
+      if (localWorkspace) {
+        openPage(localWorkspace.id, WorkspaceSubPath.ALL);
+      }
+    }
+  }, [currentWorkspace?.flavour, openPage, setOpen, workspaceList]);
 
   return (
     <SignOutModal open={open} onOpenChange={setOpen} onConfirm={onConfirm} />

packages/frontend/core/src/providers/session-provider.tsx

@@ -2,7 +2,7 @@ import '@toeverything/hooks/use-affine-ipc-renderer';
 
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { refreshRootMetadataAtom } from '@affine/workspace/atom';
+import { CLOUD_WORKSPACE_CHANGED_BROADCAST_CHANNEL_KEY } from '@affine/workspace';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 import { useAtom, useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
@@ -22,14 +22,15 @@ const SessionDefence = (props: PropsWithChildren) => {
   const prevSession = useRef<ReturnType<typeof useSession>>();
   const [sessionInAtom, setSession] = useAtom(sessionAtom);
   const pushNotification = useSetAtom(pushNotificationAtom);
-  const refreshMetadata = useSetAtom(refreshRootMetadataAtom);
   const onceSignedInEvents = useOnceSignedInEvents();
   const t = useAFFiNEI18N();
 
   const refreshAfterSignedInEvents = useAsyncCallback(async () => {
     await onceSignedInEvents();
-    refreshMetadata();
-  }, [onceSignedInEvents, refreshMetadata]);
+    new BroadcastChannel(
+      CLOUD_WORKSPACE_CHANGED_BROADCAST_CHANNEL_KEY
+    ).postMessage(1);
+  }, [onceSignedInEvents]);
 
   useEffect(() => {
     if (sessionInAtom !== session && session.status === 'authenticated') {

packages/frontend/core/src/shared/index.ts

@@ -1,11 +1,8 @@
 import { DebugLogger } from '@affine/debug';
-import type { WorkspaceRegistry } from '@affine/env/workspace';
 import { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
 
 export { BlockSuiteWorkspace };
 
-export type AllWorkspace = WorkspaceRegistry[keyof WorkspaceRegistry];
-
 export enum WorkspaceSubPath {
   ALL = 'all',
   TRASH = 'trash',

packages/frontend/core/src/utils/cloud-utils.tsx

@@ -4,11 +4,9 @@ import {
   TRACE_ID_BYTES,
   traceReporter,
 } from '@affine/graphql';
-import { refreshRootMetadataAtom } from '@affine/workspace/atom';
-import { getCurrentStore } from '@toeverything/infra/atom';
+import { CLOUD_WORKSPACE_CHANGED_BROADCAST_CHANNEL_KEY } from '@affine/workspace';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { signIn, signOut } from 'next-auth/react';
-import { startTransition } from 'react';
 
 type TraceParams = {
   startTime: string;
@@ -91,10 +89,9 @@ export const signOutCloud: typeof signOut = async options => {
   })
     .then(result => {
       if (result) {
-        startTransition(() => {
-          localStorage.removeItem('last_workspace_id');
-          getCurrentStore().set(refreshRootMetadataAtom);
-        });
+        new BroadcastChannel(
+          CLOUD_WORKSPACE_CHANGED_BROADCAST_CHANNEL_KEY
+        ).postMessage(1);
       }
       return onResolveHandleTrace(result, traceParams);
     })

packages/frontend/core/src/utils/reduce-image.ts

@@ -0,0 +1,42 @@
+import reduce from 'image-blob-reduce';
+
+// validate and reduce image size and return as file
+export const validateAndReduceImage = async (file: File): Promise<File> => {
+  // Declare a new async function that wraps the decode logic
+  const decodeAndReduceImage = async (): Promise<Blob> => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.src = url;
+
+    await img.decode().catch(() => {
+      URL.revokeObjectURL(url);
+      throw new Error('Image could not be decoded');
+    });
+
+    img.onload = img.onerror = () => {
+      URL.revokeObjectURL(url);
+    };
+
+    const sizeInMB = file.size / (1024 * 1024);
+    if (sizeInMB > 10 || img.width > 4000 || img.height > 4000) {
+      // Compress the file to less than 10MB
+      const compressedImg = await reduce().toBlob(file, {
+        max: 4000,
+        unsharpAmount: 80,
+        unsharpRadius: 0.6,
+        unsharpThreshold: 2,
+      });
+      return compressedImg;
+    }
+
+    return file;
+  };
+
+  try {
+    const reducedBlob = await decodeAndReduceImage();
+
+    return new File([reducedBlob], file.name, { type: file.type });
+  } catch (error) {
+    throw new Error('Image could not be reduce :' + error);
+  }
+};