revert: loadWorkspace unexpected behavior (#1172)

apps/web/package.json

@@ -12,7 +12,6 @@
     "@affine/component": "workspace:*",
     "@affine/datacenter": "workspace:*",
     "@affine/i18n": "workspace:*",
-    "@affine/store": "workspace:*",
     "@affine/debug": "workspace:*",
     "@blocksuite/blocks": "0.4.1",
     "@blocksuite/editor": "0.4.1",

apps/web/src/components/enable-workspace-modal/index.tsx

@@ -4,7 +4,7 @@ import { CloseIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react';
 
-import { useDataCenter, useGlobalState } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
 
@@ -20,7 +20,7 @@ export const EnableWorkspaceModal = ({
   const { t } = useTranslation();
   const login = useGlobalState(store => store.login);
   const user = useGlobalState(store => store.user);
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

apps/web/src/components/logout-modal/index.tsx

@@ -2,9 +2,10 @@ import { styled } from '@affine/component';
 import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { useGlobalState } from '@affine/store';
 import { useState } from 'react';
 
+import { useAppState } from '@/providers/app-state-provider';
+
 import { Check, UnCheck } from './icon';
 interface LoginModalProps {
   open: boolean;
@@ -13,7 +14,7 @@ interface LoginModalProps {
 
 export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
   const [localCache, setLocalCache] = useState(true);
-  const blobDataSynced = useGlobalState(store => store.blobDataSynced);
+  const { blobDataSynced } = useAppState();
   const { t } = useTranslation();
 
   return (

apps/web/src/components/message-center-handler/index.tsx

@@ -2,13 +2,13 @@ import { toast } from '@affine/component';
 import { MessageCenter } from '@affine/datacenter';
 import { AffineProvider } from '@affine/datacenter';
 import { useRouter } from 'next/router';
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 
-import { useDataCenter } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 export function MessageCenterHandler({ children }: { children?: ReactNode }) {
   const router = useRouter();
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
   useEffect(() => {
     const instance = MessageCenter.getInstance();
     if (instance) {

apps/web/src/components/page-list/DateCell.tsx

@@ -1,9 +1,10 @@
 import { TableCell } from '@affine/component';
-import type { PageMeta } from '@affine/store';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
 
+import { PageMeta } from '@/providers/app-state-provider';
+
 dayjs.extend(localizedFormat);
 
 export const DateCell = ({

apps/web/src/components/page-list/OperationCell.tsx

@@ -7,7 +7,6 @@ import {
 } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { PageMeta } from '@affine/store';
 import {
   DeleteForeverIcon,
   FavouritedIcon,
@@ -19,6 +18,7 @@ import {
 } from '@blocksuite/icons';
 
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {

apps/web/src/components/page-list/index.tsx

@@ -10,7 +10,6 @@ import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { PageMeta } from '@affine/store';
 import {
   EdgelessIcon,
   FavouritedIcon,
@@ -22,6 +21,7 @@ import React, { useCallback } from 'react';
 
 import DateCell from '@/components/page-list/DateCell';
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useTheme } from '@/providers/ThemeProvider';
 import { useGlobalState } from '@/store/app';
 

apps/web/src/components/quick-search/PublishedResults.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from '@affine/i18n';
-import { PageMeta, useDataCenter } from '@affine/store';
 import { EdgelessIcon, PaperIcon } from '@blocksuite/icons';
 import { Workspace } from '@blocksuite/store';
 import { Command } from 'cmdk';
@@ -7,6 +6,8 @@ import { useRouter } from 'next/router';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import usePageHelper from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
+import { useGlobalState } from '@/store/app';
 
 import { NoResultSVG } from './NoResultSVG';
 import { StyledListItem, StyledNotFound } from './style';
@@ -23,7 +24,7 @@ export const PublishedResults = (props: {
     props;
   const { search } = usePageHelper();
   const [results, setResults] = useState(new Map<string, string | undefined>());
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const router = useRouter();
   const [pageList, setPageList] = useState<PageMeta[]>([]);
   useEffect(() => {

apps/web/src/components/workspace-layout/index.tsx

@@ -1,14 +1,18 @@
-import { useGlobalState } from '@affine/store';
 import { useRouter } from 'next/router';
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren } from 'react';
 
 import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
-import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 
 import { PageLoading } from '../loading';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 
+export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
+  const { workspaceLoaded } = useEnsureWorkspace();
+  return <>{workspaceLoaded ? children : <PageLoading />}</>;
+};
+
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
   const router = useRouter();
 
@@ -31,22 +35,10 @@ export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
 };
 
 export const Layout = ({ children }: PropsWithChildren) => {
-  const { targetWorkspace, exist } = useRouterTargetWorkspace();
-  const router = useRouter();
-  const loadWorkspace = useGlobalState(store => store.loadWorkspace);
-  useEffect(() => {
-    if (!exist) {
-      router.replace('/404');
-    }
-  }, [exist, router]);
-  useEffect(() => {
-    if (exist && targetWorkspace) {
-      loadWorkspace(targetWorkspace.id);
-    }
-  }, [exist, loadWorkspace, targetWorkspace]);
-  if (!targetWorkspace) {
-    return <PageLoading />;
-  }
-  return <WorkspaceLayout>{children}</WorkspaceLayout>;
+  return (
+    <WorkspaceDefender>
+      <WorkspaceLayout>{children}</WorkspaceLayout>
+    </WorkspaceDefender>
+  );
 };
 export default Layout;

apps/web/src/components/workspace-modal/index.tsx

@@ -5,7 +5,7 @@ import { HelpIcon, PlusIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-import { useDataCenter, useGlobalState } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 import { CreateWorkspaceModal } from '../create-workspace';
 import { LoginModal } from '../login-modal';
@@ -34,7 +34,7 @@ interface WorkspaceModalProps {
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const logout = useGlobalState(store => store.logout);
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);

apps/web/src/components/workspace-setting/general/leave/Leave.tsx

@@ -11,6 +11,8 @@ import {
   StyledModalWrapper,
   StyledTextContent,
 } from './style';
+// import { getDataCenter } from '@affine/datacenter';
+// import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;

apps/web/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceModal } from '@/components/workspace-modal';
-import { useDataCenter, useGlobalState } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 import { SelectorWrapper, WorkspaceName } from './styles';
 
@@ -11,7 +11,7 @@ export const WorkspaceSelector = () => {
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
 
   if (dataCenter.workspaces.length === 0) {
     setWorkspaceListShow(true);

apps/web/src/hooks/use-change-page-meta.ts

@@ -1,6 +1,6 @@
-import { PageMeta } from '@affine/store';
 import { useCallback } from 'react';
 
+import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 export type ChangePageMeta = (

apps/web/src/hooks/use-current-page-meta.ts

@@ -1,6 +1,6 @@
-import { PageMeta } from '@affine/store';
 import { useCallback, useEffect, useState } from 'react';
 
+import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 export const useCurrentPageMeta = (): PageMeta | null => {

apps/web/src/hooks/use-ensure-workspace.ts

@@ -0,0 +1,73 @@
+import { assertEquals } from '@blocksuite/global/utils';
+import { useRouter } from 'next/router';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useGlobalState } from '@/store/app';
+
+// todo: refactor with suspense mode
+// It is a fully effective hook
+// Cause it not just ensure workspace loaded, but also have router change.
+export const useEnsureWorkspace = () => {
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
+  const loadWorkspace = useGlobalState(
+    useCallback(store => store.loadWorkspace, [])
+  );
+  const router = useRouter();
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string | null>(
+    typeof router.query.workspaceId === 'string'
+      ? router.query.workspaceId
+      : null
+  );
+
+  // const defaultOutLineWorkspaceId = '99ce7eb7';
+  // console.log(defaultOutLineWorkspaceId);
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    const workspaceId =
+      (router.query.workspaceId as string) || dataCenter.workspaces[0]?.id;
+
+    // If router.query.workspaceId is not in workspace list, jump to 404 page
+    // If workspaceList is empty, we need to create a default workspace but not jump to 404
+    if (
+      workspaceId &&
+      dataCenter.workspaces.length &&
+      dataCenter.workspaces.findIndex(
+        meta => meta.id.toString() === workspaceId
+      ) === -1
+    ) {
+      router.push('/404');
+      return;
+    }
+    // If user is not login and input a custom workspaceId, jump to 404 page
+    // if (
+    //   !user &&
+    //   router.query.workspaceId &&
+    //   router.query.workspaceId !== defaultOutLineWorkspaceId
+    // ) {
+    //   router.push('/404');
+    //   return;
+    // }
+
+    loadWorkspace(workspaceId, abortController.signal).then(unit => {
+      if (!abortController.signal.aborted && unit) {
+        setCurrentWorkspaceId(unit.id);
+        assertEquals(unit.id, workspaceId);
+      }
+    });
+
+    return () => {
+      abortController.abort();
+    };
+  }, [dataCenter, loadWorkspace, router]);
+
+  return {
+    workspaceLoaded: currentWorkspace?.id === currentWorkspaceId,
+    activeWorkspaceId: currentWorkspace?.id ?? router.query.workspaceId,
+  };
+};
+
+export default useEnsureWorkspace;

apps/web/src/hooks/use-load-public-workspace.ts

@@ -0,0 +1,35 @@
+import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+export function useLoadPublicWorkspace(workspaceId: string) {
+  const router = useRouter();
+  const [workspace, setWorkspace] = useState<WorkspaceUnit | null>();
+  const [status, setStatus] = useState<'loading' | 'error' | 'success'>(
+    'loading'
+  );
+
+  useEffect(() => {
+    setStatus('loading');
+
+    const init = async () => {
+      const dataCenter = await getDataCenter();
+
+      dataCenter
+        .loadPublicWorkspace(workspaceId)
+        .then(data => {
+          setWorkspace(data);
+          setStatus('success');
+        })
+        .catch(() => {
+          // if (!cancel) {
+          //   router.push('/404');
+          // }
+          setStatus('error');
+        });
+    };
+    init();
+  }, [router, workspaceId]);
+
+  return { status, workspace };
+}

apps/web/src/hooks/use-members.ts

@@ -1,9 +1,9 @@
 import { Member } from '@affine/datacenter';
 import { useCallback, useEffect, useState } from 'react';
 
-import { useDataCenter, useGlobalState } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 export const useMembers = () => {
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

apps/web/src/hooks/use-page-helper.ts

@@ -1,13 +1,13 @@
 import { WorkspaceUnit } from '@affine/datacenter';
-import { PageMeta } from '@affine/store';
 import { EditorContainer } from '@blocksuite/editor';
 import { uuidv4, Workspace } from '@blocksuite/store';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import type { QueryContent } from '@blocksuite/store/dist/workspace/search';
 import { useRouter } from 'next/router';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 
 import { useChangePageMeta } from '@/hooks/use-change-page-meta';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 
 export type EditorHandlers = {
@@ -48,107 +48,104 @@ export const usePageHelper = (): EditorHandlers => {
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
 
-  return useMemo(
-    () => ({
-      createPage: ({
-        pageId = uuidv4().replaceAll('-', ''),
-        title = '',
-      } = {}) => {
-        return new Promise(resolve => {
-          if (!currentWorkspace) {
-            return resolve(null);
-          }
-          currentWorkspace.blocksuiteWorkspace?.createPage(pageId);
-          currentWorkspace.blocksuiteWorkspace?.signals.pageAdded.once(
-            addedPageId => {
-              currentWorkspace.blocksuiteWorkspace?.setPageMeta(addedPageId, {
-                title,
-              });
-              resolve(addedPageId);
-            }
-          );
-        });
-      },
-      toggleFavoritePage: async pageId => {
-        const pageMeta = getPageMeta(currentWorkspace, pageId);
-        if (!pageMeta) {
-          return Promise.reject('No page');
-        }
-        const favorite = !pageMeta.favorite;
-        changePageMeta(pageMeta.id, {
-          favorite,
-        });
-        return favorite;
-      },
-      toggleDeletePage: async pageId => {
-        const pageMeta = getPageMeta(currentWorkspace, pageId);
-
-        if (!pageMeta) {
-          return Promise.reject('No page');
-        }
-        const trash = !pageMeta.trash;
-
-        changePageMeta(pageMeta.id, {
-          trash,
-          trashDate: +new Date(),
-        });
-        return trash;
-      },
-      search: (query: QueryContent, workspace?: Workspace) => {
-        if (workspace) {
-          return workspace.search(query);
-        }
-        if (currentWorkspace) {
-          if (currentWorkspace.blocksuiteWorkspace) {
-            return currentWorkspace.blocksuiteWorkspace.search(query);
-          }
-        }
-        return new Map();
-      },
-      changePageMode: async (pageId, mode) => {
-        const pageMeta = getPageMeta(currentWorkspace, pageId);
-        if (!pageMeta) {
-          return Promise.reject('No page');
-        }
-
-        editor?.setAttribute('mode', mode as string);
-
-        changePageMeta(pageMeta.id, {
-          mode,
-        });
-        return mode;
-      },
-      permanentlyDeletePage: pageId => {
-        // TODO:  workspace.meta.removePage or workspace.removePage?
-
-        currentWorkspace!.blocksuiteWorkspace?.meta.removePage(pageId);
-      },
-      openPage: (pageId, query = {}, newTab = false) => {
-        pageId = pageId.replace('space:', '');
-
-        if (newTab) {
-          window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
-          return Promise.resolve(true);
-        }
-        return router.push({
-          pathname: `/workspace/${currentWorkspace?.id}/${pageId}`,
-          query,
-        });
-      },
-      getPageMeta: pageId => {
+  return {
+    createPage: ({
+      pageId = uuidv4().replaceAll('-', ''),
+      title = '',
+    } = {}) => {
+      return new Promise(resolve => {
         if (!currentWorkspace) {
-          return null;
+          return resolve(null);
         }
-
-        return (
-          (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
-            page => page.id === pageId
-          ) as PageMeta) || null
+        currentWorkspace.blocksuiteWorkspace?.createPage(pageId);
+        currentWorkspace.blocksuiteWorkspace?.signals.pageAdded.once(
+          addedPageId => {
+            currentWorkspace.blocksuiteWorkspace?.setPageMeta(addedPageId, {
+              title,
+            });
+            resolve(addedPageId);
+          }
         );
-      },
-    }),
-    [changePageMeta, currentWorkspace, editor, router]
-  );
+      });
+    },
+    toggleFavoritePage: async pageId => {
+      const pageMeta = getPageMeta(currentWorkspace, pageId);
+      if (!pageMeta) {
+        return Promise.reject('No page');
+      }
+      const favorite = !pageMeta.favorite;
+      changePageMeta(pageMeta.id, {
+        favorite,
+      });
+      return favorite;
+    },
+    toggleDeletePage: async pageId => {
+      const pageMeta = getPageMeta(currentWorkspace, pageId);
+
+      if (!pageMeta) {
+        return Promise.reject('No page');
+      }
+      const trash = !pageMeta.trash;
+
+      changePageMeta(pageMeta.id, {
+        trash,
+        trashDate: +new Date(),
+      });
+      return trash;
+    },
+    search: (query: QueryContent, workspace?: Workspace) => {
+      if (workspace) {
+        return workspace.search(query);
+      }
+      if (currentWorkspace) {
+        if (currentWorkspace.blocksuiteWorkspace) {
+          return currentWorkspace.blocksuiteWorkspace.search(query);
+        }
+      }
+      return new Map();
+    },
+    changePageMode: async (pageId, mode) => {
+      const pageMeta = getPageMeta(currentWorkspace, pageId);
+      if (!pageMeta) {
+        return Promise.reject('No page');
+      }
+
+      editor?.setAttribute('mode', mode as string);
+
+      changePageMeta(pageMeta.id, {
+        mode,
+      });
+      return mode;
+    },
+    permanentlyDeletePage: pageId => {
+      // TODO:  workspace.meta.removePage or workspace.removePage?
+
+      currentWorkspace!.blocksuiteWorkspace?.meta.removePage(pageId);
+    },
+    openPage: (pageId, query = {}, newTab = false) => {
+      pageId = pageId.replace('space:', '');
+
+      if (newTab) {
+        window.open(`/workspace/${currentWorkspace?.id}/${pageId}`, '_blank');
+        return Promise.resolve(true);
+      }
+      return router.push({
+        pathname: `/workspace/${currentWorkspace?.id}/${pageId}`,
+        query,
+      });
+    },
+    getPageMeta: pageId => {
+      if (!currentWorkspace) {
+        return null;
+      }
+
+      return (
+        (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
+          page => page.id === pageId
+        ) as PageMeta) || null
+      );
+    },
+  };
 };
 
 export default usePageHelper;

apps/web/src/hooks/use-router-target-workspace.ts

@@ -1,26 +0,0 @@
-import { useDataCenter, useDataCenterWorkspace } from '@affine/store';
-import { useRouter } from 'next/router';
-import { useMemo } from 'react';
-
-export function useRouterTargetWorkspace() {
-  const router = useRouter();
-  const dataCenter = useDataCenter();
-  const workspaceId =
-    typeof router.query.workspaceId === 'string'
-      ? router.query.workspaceId
-      : dataCenter.workspaces.at(0)?.id ?? null;
-  const targetWorkspace = useDataCenterWorkspace(workspaceId);
-  const notExist = useMemo(
-    () =>
-      workspaceId &&
-      dataCenter.workspaces.length &&
-      dataCenter.workspaces.findIndex(
-        meta => meta.id.toString() === workspaceId
-      ) === -1,
-    [dataCenter.workspaces, workspaceId]
-  );
-  return {
-    targetWorkspace,
-    exist: !notExist,
-  };
-}

apps/web/src/hooks/use-workspace-helper.ts

@@ -1,10 +1,10 @@
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useCallback } from 'react';
 
-import { useDataCenter, useGlobalState } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 export const useWorkspaceHelper = () => {
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

apps/web/src/pages/_app.tsx

@@ -6,22 +6,24 @@ import '../utils/print-build-info';
 import '@affine/i18n';
 
 import { useTranslation } from '@affine/i18n';
-import { DataCenterPreloader } from '@affine/store';
 import { Logger } from '@toeverything/pathfinder-logger';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 // import AppStateProvider2 from '@/providers/app-state-provider2/provider';
-import type { ReactElement, ReactNode } from 'react';
-import { Suspense } from 'react';
+import { useRouter } from 'next/router';
+import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { Suspense, useEffect } from 'react';
 import React from 'react';
 
 import { PageLoading } from '@/components/loading';
 import { MessageCenterHandler } from '@/components/message-center-handler';
 import ProviderComposer from '@/components/provider-composer';
+import { AppStateProvider } from '@/providers/app-state-provider';
 import ConfirmProvider from '@/providers/ConfirmProvider';
 import { ThemeProvider } from '@/providers/ThemeProvider';
 import { GlobalAppProvider } from '@/store/app';
+import { DataCenterPreloader } from '@/store/app/datacenter';
 import { ModalProvider } from '@/store/globalModal';
 
 export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<
@@ -35,9 +37,16 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+// Page list which do not rely on app state
+const NoNeedAppStatePageList = [
+  '/404',
+  '/public-workspace/[workspaceId]',
+  '/public-workspace/[workspaceId]/[pageId]',
+];
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const getLayout = Component.getLayout || (page => page);
   const { i18n } = useTranslation();
+  const router = useRouter();
 
   React.useEffect(() => {
     document.documentElement.lang = i18n.language;
@@ -56,24 +65,43 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         <title>AFFiNE</title>
       </Head>
       <Logger />
-      <ProviderComposer
-        contexts={[
-          <GlobalAppProvider key="GlobalAppProvider" />,
-          <ThemeProvider key="ThemeProvider" />,
-          <ModalProvider key="ModalProvider" />,
-          <ConfirmProvider key="ConfirmProvider" />,
-        ]}
-      >
-        <Suspense fallback={<PageLoading />}>
-          <DataCenterPreloader>
-            <MessageCenterHandler>
-              {getLayout(<Component {...pageProps} />)}
-            </MessageCenterHandler>
-          </DataCenterPreloader>
-        </Suspense>
-      </ProviderComposer>
+      <GlobalAppProvider key="BlockSuiteProvider">
+        <ProviderComposer
+          contexts={[
+            <ThemeProvider key="ThemeProvider" />,
+            <AppStateProvider key="appStateProvider" />,
+            <ModalProvider key="ModalProvider" />,
+            <ConfirmProvider key="ConfirmProvider" />,
+          ]}
+        >
+          {NoNeedAppStatePageList.includes(router.route) ? (
+            getLayout(<Component {...pageProps} />)
+          ) : (
+            <Suspense fallback={<PageLoading />}>
+              <DataCenterPreloader>
+                <MessageCenterHandler>
+                  <AppDefender>
+                    {getLayout(<Component {...pageProps} />)}
+                  </AppDefender>
+                </MessageCenterHandler>
+              </DataCenterPreloader>
+            </Suspense>
+          )}
+        </ProviderComposer>
+      </GlobalAppProvider>
     </>
   );
 };
 
+const AppDefender = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  useEffect(() => {
+    if (['/index.html', '/'].includes(router.asPath)) {
+      router.replace('/workspace');
+    }
+  }, [router]);
+
+  return <>{children}</>;
+};
+
 export default App;

apps/web/src/pages/index.tsx

@@ -1,15 +1,7 @@
 import type { NextPage } from 'next';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-
-import { PageLoading } from '@/components/loading';
 
 const Home: NextPage = () => {
-  const router = useRouter();
-  useEffect(() => {
-    router.replace('/workspace');
-  }, [router]);
-  return <PageLoading />;
+  return <div title="Home Page"></div>;
 };
 
 export default Home;

apps/web/src/pages/invite/[invite_code].tsx

@@ -11,7 +11,7 @@ import { useEffect, useState } from 'react';
 
 import { PageLoading } from '@/components/loading';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { useDataCenter } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 import inviteError from '../../../public/imgs/invite-error.svg';
 import inviteSuccess from '../../../public/imgs/invite-success.svg';
@@ -21,7 +21,7 @@ export default function DevPage() {
   const router = useRouter();
   const [inviteData, setInviteData] = useState<Permission | null>(null);
   const { acceptInvite } = useWorkspaceHelper();
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
 
   useEffect(() => {
     const init = async () => {

apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx

@@ -2,7 +2,6 @@ import { displayFlex, styled } from '@affine/component';
 import { Breadcrumbs } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { useDataCenterPublicWorkspace } from '@affine/store';
 import { PaperIcon, SearchIcon } from '@blocksuite/icons';
 import dynamic from 'next/dynamic';
 import NextLink from 'next/link';
@@ -11,6 +10,7 @@ import { ReactElement, useEffect, useMemo } from 'react';
 
 import { PageLoading } from '@/components/loading';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
 import { useModal } from '@/store/globalModal';
 
 import type { NextPageWithLayout } from '../..//_app';
@@ -21,17 +21,13 @@ const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
 
 const Page: NextPageWithLayout = () => {
   const router = useRouter();
-  const { workspaceId, pageId } = router.query;
-  const { error, workspace: workspaceUnit } = useDataCenterPublicWorkspace(
-    typeof workspaceId === 'string' ? workspaceId : null
-  );
+  const { workspaceId, pageId } = router.query as Record<string, string>;
+  const { status, workspace: workspaceUnit } =
+    useLoadPublicWorkspace(workspaceId);
   const { triggerQuickSearchModal } = useModal();
   const { t } = useTranslation();
 
   const page = useMemo(() => {
-    if (typeof pageId !== 'string') {
-      return null;
-    }
     if (workspaceUnit?.blocksuiteWorkspace) {
       return workspaceUnit.blocksuiteWorkspace.getPage(pageId);
     }
@@ -50,15 +46,18 @@ const Page: NextPageWithLayout = () => {
   }, [workspace, router, pageId]);
 
   useEffect(() => {
-    if (error) {
+    if (status === 'error') {
       router.push('/404');
     }
-  }, [router, error]);
+  }, [router, status]);
 
-  if (!workspace) {
+  if (status === 'loading') {
     return <PageLoading />;
   }
 
+  if (status === 'error') {
+    return null;
+  }
   return (
     <PageContainer>
       <NavContainer>
@@ -87,7 +86,7 @@ const Page: NextPageWithLayout = () => {
         </SearchButton>
       </NavContainer>
 
-      {page && (
+      {workspace && page && (
         <DynamicBlocksuite
           page={page}
           workspace={workspace}

apps/web/src/pages/public-workspace/[workspaceId]/index.tsx

@@ -1,5 +1,4 @@
 import { Breadcrumbs } from '@affine/component';
-import { PageMeta, useDataCenterPublicWorkspace } from '@affine/store';
 import { SearchIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect, useMemo } from 'react';
@@ -7,6 +6,8 @@ import { ReactElement, useEffect, useMemo } from 'react';
 import { PageLoading } from '@/components/loading';
 import { PageList } from '@/components/page-list';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useModal } from '@/store/globalModal';
 
 import {
@@ -19,10 +20,8 @@ import {
 const All = () => {
   const router = useRouter();
   const { triggerQuickSearchModal } = useModal();
-  const { workspace, error } = useDataCenterPublicWorkspace(
-    typeof router.query.workspaceId === 'string'
-      ? router.query.workspaceId
-      : null
+  const { status, workspace } = useLoadPublicWorkspace(
+    router.query.workspaceId as string
   );
 
   const pageList = useMemo(() => {
@@ -32,15 +31,19 @@ const All = () => {
   const workspaceName = workspace?.blocksuiteWorkspace?.meta.name;
 
   useEffect(() => {
-    if (error) {
+    if (status === 'error') {
       router.push('/404');
     }
-  }, [router, error]);
+  }, [router, status]);
 
-  if (!workspace) {
+  if (status === 'loading') {
     return <PageLoading />;
   }
 
+  if (status === 'error') {
+    return null;
+  }
+
   return (
     <PageContainer>
       <NavContainer>

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -15,7 +15,7 @@ import { EditorHeader } from '@/components/header';
 import MobileModal from '@/components/mobile-modal';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useDataCenter, useGlobalState, useGlobalStateApi } from '@/store/app';
+import { useGlobalState, useGlobalStateApi } from '@/store/app';
 import exampleMarkdown from '@/templates/Welcome-to-AFFiNE-Alpha-Downhills.md';
 
 import type { NextPageWithLayout } from '../..//_app';
@@ -109,7 +109,7 @@ const PageDefender = ({ children }: PropsWithChildren) => {
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const { createPage } = usePageHelper();
 
   useEffect(() => {

apps/web/src/pages/workspace/[workspaceId]/index.tsx

@@ -1,48 +1,44 @@
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { PageLoading } from '@/components/loading';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import usePageHelper from '@/hooks/use-page-helper';
-import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
+import { useGlobalState } from '@/store/app';
 
 const WorkspaceIndex = () => {
   const router = useRouter();
-  const { targetWorkspace, exist } = useRouterTargetWorkspace();
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
   const { createPage } = usePageHelper();
+  const { workspaceLoaded, activeWorkspaceId } = useEnsureWorkspace();
 
   useEffect(() => {
-    if (!exist) {
-      router.push('/404');
-      return;
-    }
-    const abortController = new AbortController();
     const initPage = async () => {
-      if (abortController.signal.aborted) {
-        return;
-      }
-      if (!targetWorkspace) {
+      if (!workspaceLoaded) {
         return;
       }
       const savedPageId =
-        targetWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
+        currentWorkspace?.blocksuiteWorkspace?.meta.pageMetas.find(
           meta => !meta.trash
         )?.id;
       if (savedPageId) {
-        router.replace(`/workspace/${targetWorkspace.id}/${savedPageId}`);
+        router.replace(`/workspace/${activeWorkspaceId}/${savedPageId}`);
         return;
-      } else {
-        const pageId = await createPage();
-        if (abortController.signal.aborted) {
-          return;
-        }
-        router.replace(`/workspace/${targetWorkspace.id}/${pageId}`);
       }
+
+      const pageId = await createPage();
+      router.replace(`/workspace/${activeWorkspaceId}/${pageId}`);
     };
     initPage();
-    return () => {
-      abortController.abort();
-    };
-  }, [targetWorkspace, createPage, router, exist]);
+  }, [
+    currentWorkspace,
+    createPage,
+    router,
+    workspaceLoaded,
+    activeWorkspaceId,
+  ]);
 
   return <PageLoading />;
 };

apps/web/src/pages/workspace/index.tsx

@@ -1,31 +1,23 @@
-import { useGlobalStateApi } from '@affine/store';
 import { useRouter } from 'next/router';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { PageLoading } from '@/components/loading';
-import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { useGlobalState } from '@/store/app';
 
 export const WorkspaceIndex = () => {
   const router = useRouter();
-  const api = useGlobalStateApi();
-  const { targetWorkspace, exist } = useRouterTargetWorkspace();
-  const onceRef = useRef(true);
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
+  const { workspaceLoaded } = useEnsureWorkspace();
+
   useEffect(() => {
-    if (!onceRef.current) {
-      return;
+    if (workspaceLoaded) {
+      router.push(`/workspace/${currentWorkspace?.id}`);
     }
-    onceRef.current = true;
-    if (!exist) {
-      router.push('/404');
-    } else if (targetWorkspace) {
-      api
-        .getState()
-        .loadWorkspace(targetWorkspace.id)
-        .then(() => {
-          router.push(`/workspace/${targetWorkspace.id}`);
-        });
-    }
-  }, [targetWorkspace, exist, router, api]);
+  }, [currentWorkspace, router, workspaceLoaded]);
+
   return <PageLoading />;
 };
 

apps/web/src/providers/ThemeProvider.tsx

@@ -1,4 +1,5 @@
 import {
+  Theme,
   ThemeMode,
   ThemeProviderProps,
   ThemeProviderValue,
@@ -16,15 +17,7 @@ import {
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
 import type { PropsWithChildren } from 'react';
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  useSyncExternalStore,
-} from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 
@@ -42,31 +35,16 @@ export const ThemeProvider = ({
   defaultTheme = 'light',
   children,
 }: PropsWithChildren<ThemeProviderProps>) => {
-  const localStorageThemeMode = useSyncExternalStore<ThemeMode>(
-    useCallback(cb => {
-      localStorageThemeHelper.callback.add(cb);
-      return () => {
-        localStorageThemeHelper.callback.delete(cb);
-      };
-    }, []),
-    useCallback(() => localStorageThemeHelper.get() ?? 'light', []),
-    useCallback(() => defaultTheme, [defaultTheme])
-  );
-  const [mode, setMode] = useState<ThemeMode>(defaultTheme);
-  if (localStorageThemeMode !== mode) {
-    setMode(localStorageThemeMode);
-  }
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+  const [mode, setMode] = useState<ThemeMode>('auto');
   const { mode: editorMode = 'page' } = useCurrentPageMeta() || {};
   const themeStyle =
-    mode === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode);
-  const changeMode = useCallback(
-    (themeMode: ThemeMode) => {
-      themeMode !== mode && setMode(themeMode);
-      // Remember the theme mode which user selected for next time
-      localStorageThemeHelper.set(themeMode);
-    },
-    [mode]
-  );
+    theme === 'light' ? getLightTheme(editorMode) : getDarkTheme(editorMode);
+  const changeMode = (themeMode: ThemeMode) => {
+    themeMode !== mode && setMode(themeMode);
+    // Remember the theme mode which user selected for next time
+    localStorageThemeHelper.set(themeMode);
+  };
 
   // ===================== A temporary solution, just use system theme and not remember the user selected ====================
   useEffect(() => {
@@ -79,9 +57,9 @@ export const ThemeProvider = ({
     });
   }, []);
 
-  // useEffect(() => {
-  //   setTheme(mode === 'auto' ? theme : mode);
-  // }, [mode, setTheme, theme]);
+  useEffect(() => {
+    setTheme(mode === 'auto' ? theme : mode);
+  }, [mode, setTheme, theme]);
   // =====================  ====================
 
   // useEffect(() => {
@@ -115,12 +93,7 @@ export const ThemeProvider = ({
   return (
     // Use MuiThemeProvider is just because some Transitions in Mui components need it
     <MuiThemeProvider theme={muiTheme}>
-      <ThemeContext.Provider
-        value={useMemo(
-          () => ({ mode, changeMode, theme: themeStyle }),
-          [changeMode, mode, themeStyle]
-        )}
-      >
+      <ThemeContext.Provider value={{ mode, changeMode, theme: themeStyle }}>
         <Global
           styles={css`
             :root {

apps/web/src/providers/app-state-provider/Provider.tsx

@@ -0,0 +1,51 @@
+import type { Disposable } from '@blocksuite/global/utils';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { useGlobalState } from '@/store/app';
+
+import { AppStateContext } from './interface';
+
+type AppStateContextProps = PropsWithChildren<Record<string, unknown>>;
+
+export const AppState = createContext<AppStateContext>({} as AppStateContext);
+
+export const useAppState = () => useContext(AppState);
+export const AppStateProvider = ({
+  children,
+}: PropsWithChildren<AppStateContextProps>) => {
+  const currentDataCenterWorkspace = useGlobalState(
+    store => store.currentDataCenterWorkspace
+  );
+  const [blobState, setBlobState] = useState(false);
+
+  useEffect(() => {
+    let syncChangeDisposable: Disposable | undefined;
+    const currentWorkspace = currentDataCenterWorkspace;
+    if (!currentWorkspace) {
+      return;
+    }
+    const getBlobStorage = async () => {
+      const blobStorage = await currentWorkspace?.blocksuiteWorkspace?.blobs;
+      syncChangeDisposable = blobStorage?.signals.onBlobSyncStateChange.on(
+        () => {
+          setBlobState(blobStorage?.uploading);
+        }
+      );
+    };
+    getBlobStorage();
+    return () => {
+      syncChangeDisposable?.dispose();
+    };
+  }, [currentDataCenterWorkspace]);
+
+  return (
+    <AppState.Provider
+      value={{
+        blobDataSynced: blobState,
+      }}
+    >
+      {children}
+    </AppState.Provider>
+  );
+};

apps/web/src/providers/app-state-provider/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export * from './Provider';

apps/web/src/providers/app-state-provider/interface.ts

@@ -0,0 +1,28 @@
+import type { EditorContainer } from '@blocksuite/editor';
+import type {
+  Page as StorePage,
+  PageMeta as StorePageMeta,
+} from '@blocksuite/store';
+
+export interface PageMeta extends StorePageMeta {
+  favorite: boolean;
+  trash: boolean;
+  trashDate: number;
+  updatedDate: number;
+  mode: 'edgeless' | 'page';
+}
+
+export type AppStateValue = {
+  blobDataSynced: boolean;
+};
+
+/**
+ * @deprecated
+ */
+export type AppStateFunction = {
+  // todo: remove this in the future
+};
+
+export type AppStateContext = AppStateValue & AppStateFunction;
+
+export type CreateEditorHandler = (page: StorePage) => EditorContainer | null;

apps/web/src/providers/app-state-provider/utils.ts

@@ -0,0 +1,9 @@
+import { DataCenter } from '@affine/datacenter';
+
+const DEFAULT_WORKSPACE_NAME = 'Demo Workspace';
+
+export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
+  return dataCenter.createWorkspace({
+    name: DEFAULT_WORKSPACE_NAME,
+  });
+};

apps/web/src/store/app/blocksuite/index.ts

@@ -0,0 +1,61 @@
+import { BlockHub } from '@blocksuite/blocks';
+import { EditorContainer } from '@blocksuite/editor';
+import { Page, Workspace } from '@blocksuite/store';
+
+import { GlobalActionsCreator } from '@/store/app';
+
+export interface BlockSuiteState {
+  currentWorkspace: Workspace | null;
+  editor: EditorContainer | null;
+  currentPage: Page | null;
+  blockHub: BlockHub | null;
+}
+
+export const createBlockSuiteState = (): BlockSuiteState => ({
+  currentWorkspace: null,
+  currentPage: null,
+  blockHub: null,
+  editor: null,
+});
+
+export interface BlockSuiteActions {
+  loadPage: (pageId: string) => void;
+  setEditor: (editor: EditorContainer) => void;
+  setWorkspace: (workspace: Workspace) => void;
+  setBlockHub: (blockHub: BlockHub) => void;
+}
+
+export const createBlockSuiteActions: GlobalActionsCreator<
+  BlockSuiteActions
+> = (set, get) => ({
+  setWorkspace: workspace => {
+    set({
+      currentWorkspace: workspace,
+    });
+  },
+  setEditor: editor => {
+    set({
+      editor,
+    });
+  },
+  loadPage: pageId => {
+    const { currentWorkspace } = get();
+    if (currentWorkspace === null) {
+      console.warn('currentWorkspace is null');
+      return;
+    }
+    const page = currentWorkspace.getPage(pageId);
+    if (page === null) {
+      console.warn('cannot find page ', pageId);
+      return;
+    }
+    set({
+      currentPage: page,
+    });
+  },
+  setBlockHub: blockHub => {
+    set({
+      blockHub,
+    });
+  },
+});

apps/web/src/store/app/datacenter/index.tsx

@@ -0,0 +1,142 @@
+import type { DataCenter } from '@affine/datacenter';
+import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
+import { DisposableGroup } from '@blocksuite/global/utils';
+import React, { useCallback, useEffect } from 'react';
+
+import { PageMeta } from '@/providers/app-state-provider';
+import { createDefaultWorkspace } from '@/providers/app-state-provider/utils';
+import {
+  GlobalActionsCreator,
+  useGlobalState,
+  useGlobalStateApi,
+} from '@/store/app';
+
+export type DataCenterState = {
+  readonly dataCenter: DataCenter;
+  readonly dataCenterPromise: Promise<DataCenter>;
+  currentDataCenterWorkspace: WorkspaceUnit | null;
+  dataCenterPageList: PageMeta[];
+};
+
+export type DataCenterActions = {
+  loadWorkspace: (
+    workspaceId: string,
+    signal?: AbortSignal
+  ) => Promise<WorkspaceUnit | null>;
+};
+
+export const createDataCenterState = (): DataCenterState => ({
+  dataCenter: null!,
+
+  dataCenterPromise: null!,
+  currentDataCenterWorkspace: null,
+  dataCenterPageList: [],
+});
+export const createDataCenterActions: GlobalActionsCreator<
+  DataCenterActions
+> = (set, get) => ({
+  loadWorkspace: async (workspaceId, signal) => {
+    const { dataCenter, currentDataCenterWorkspace } = get();
+    if (!dataCenter.workspaces.find(v => v.id.toString() === workspaceId)) {
+      return null;
+    }
+    if (workspaceId === currentDataCenterWorkspace?.id) {
+      return currentDataCenterWorkspace;
+    }
+    const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
+
+    if (signal?.aborted) {
+      // do not update state if aborted
+      return null;
+    }
+
+    let isOwner;
+    if (workspace?.provider === 'local') {
+      // isOwner is useful only in the cloud
+      isOwner = true;
+    } else {
+      const userInfo = get().user; // We must ensure workspace.owner exists, then ensure id same.
+      isOwner = userInfo?.id === workspace?.owner?.id;
+    }
+
+    const pageList =
+      (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? [];
+    if (workspace?.blocksuiteWorkspace) {
+      set({
+        currentWorkspace: workspace.blocksuiteWorkspace,
+      });
+    }
+    set({
+      isOwner,
+    });
+
+    set({
+      currentDataCenterWorkspace: workspace,
+      dataCenterPageList: pageList,
+    });
+
+    return workspace;
+  },
+});
+
+export function DataCenterPreloader({ children }: React.PropsWithChildren) {
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
+  const dataCenterPromise = useGlobalState(
+    useCallback(store => store.dataCenterPromise, [])
+  );
+  const api = useGlobalStateApi();
+  //# region effect for updating workspace page list
+  useEffect(() => {
+    return api.subscribe(
+      store => store.currentDataCenterWorkspace,
+      currentWorkspace => {
+        const disposableGroup = new DisposableGroup();
+        disposableGroup.add(
+          currentWorkspace?.blocksuiteWorkspace?.meta.pagesUpdated.on(() => {
+            if (
+              Array.isArray(
+                currentWorkspace.blocksuiteWorkspace?.meta.pageMetas
+              )
+            ) {
+              api.setState({
+                dataCenterPageList: currentWorkspace.blocksuiteWorkspace?.meta
+                  .pageMetas as PageMeta[],
+              });
+            }
+          })
+        );
+        return () => {
+          disposableGroup.dispose();
+        };
+      }
+    );
+  }, [api]);
+  //# endregion
+
+  if (!dataCenter && !dataCenterPromise) {
+    const promise = getDataCenter();
+    api.setState({ dataCenterPromise: promise });
+    promise.then(async dataCenter => {
+      // Ensure datacenter has at least one workspace
+      if (dataCenter.workspaces.length === 0) {
+        await createDefaultWorkspace(dataCenter);
+      }
+      // set initial state
+      api.setState({
+        dataCenter,
+        currentWorkspace: null,
+        currentDataCenterWorkspace: null,
+        dataCenterPageList: [],
+        user:
+          (await dataCenter.getUserInfo(
+            dataCenter.providers.filter(p => p.id !== 'local')[0]?.id
+          )) || null,
+      });
+    });
+    throw promise;
+  }
+  if (!dataCenter) {
+    throw dataCenterPromise;
+  }
+  return <>{children}</>;
+}

apps/web/src/store/app/index.tsx

@@ -1 +1,89 @@
-export * from '@affine/store';
+import type React from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { createStore, StateCreator, useStore } from 'zustand';
+import { combine, subscribeWithSelector } from 'zustand/middleware';
+import type { UseBoundStore } from 'zustand/react';
+
+import {
+  BlockSuiteActions,
+  BlockSuiteState,
+  createBlockSuiteActions,
+  createBlockSuiteState,
+} from '@/store/app/blocksuite';
+import {
+  createDataCenterActions,
+  createDataCenterState,
+  DataCenterActions,
+  DataCenterState,
+} from '@/store/app/datacenter';
+import {
+  createUserActions,
+  createUserState,
+  UserActions,
+  UserState,
+} from '@/store/app/user';
+
+export type GlobalActionsCreator<Actions, Store = GlobalState> = StateCreator<
+  Store,
+  [['zustand/subscribeWithSelector', unknown]],
+  [],
+  Actions
+>;
+
+export interface GlobalState
+  extends BlockSuiteState,
+    UserState,
+    DataCenterState {}
+
+export interface GlobalActions
+  extends BlockSuiteActions,
+    UserActions,
+    DataCenterActions {}
+
+const create = () =>
+  createStore(
+    subscribeWithSelector(
+      combine<GlobalState, GlobalActions>(
+        {
+          ...createBlockSuiteState(),
+          ...createUserState(),
+          ...createDataCenterState(),
+        },
+        /* deepscan-disable TOO_MANY_ARGS */
+        (set, get, api) => ({
+          ...createBlockSuiteActions(set, get, api),
+          ...createUserActions(set, get, api),
+          ...createDataCenterActions(set, get, api),
+        })
+        /* deepscan-enable TOO_MANY_ARGS */
+      )
+    )
+  );
+type Store = ReturnType<typeof create>;
+
+const GlobalStateContext = createContext<Store | null>(null);
+
+export const useGlobalStateApi = () => {
+  const api = useContext(GlobalStateContext);
+  if (!api) {
+    throw new Error('cannot find modal context');
+  }
+  return api;
+};
+
+export const useGlobalState: UseBoundStore<Store> = ((
+  selector: Parameters<UseBoundStore<Store>>[0],
+  equals: Parameters<UseBoundStore<Store>>[1]
+) => {
+  const api = useGlobalStateApi();
+  return useStore(api, selector, equals);
+}) as any;
+
+export const GlobalAppProvider: React.FC<React.PropsWithChildren> =
+  function ModelProvider({ children }) {
+    return (
+      <GlobalStateContext.Provider value={useMemo(() => create(), [])}>
+        {children}
+      </GlobalStateContext.Provider>
+    );
+  };

apps/web/src/store/app/user/index.ts

@@ -0,0 +1,65 @@
+import { User } from '@affine/datacenter';
+import { DebugLogger } from '@affine/debug';
+
+import { GlobalActionsCreator } from '@/store/app';
+
+export interface UserState {
+  user: User | null;
+  isOwner: boolean;
+}
+
+export interface UserActions {
+  login: () => Promise<User | null>;
+  logout: () => Promise<void>;
+}
+
+export const createUserState = (): UserState => ({
+  // initialized in DataCenterLoader (restore from localStorage)
+  user: null,
+  isOwner: false,
+});
+
+const logger = new DebugLogger('store:user');
+
+export const createUserActions: GlobalActionsCreator<UserActions> = (
+  set,
+  get
+) => {
+  return {
+    login: async () => {
+      const { dataCenter, currentDataCenterWorkspace: workspace } = get();
+      try {
+        await dataCenter.login();
+        const user = (await dataCenter.getUserInfo()) as User;
+
+        if (!user) {
+          // Add ErrorBoundary
+          throw new Error('User info not found');
+        }
+
+        let isOwner;
+        if (workspace?.provider === 'local') {
+          // isOwner is useful only in the cloud
+          isOwner = true;
+        } else {
+          isOwner = user.id === workspace?.owner?.id;
+        }
+
+        set({ user, isOwner });
+
+        logger.debug('login success', user);
+
+        return user;
+      } catch (error) {
+        logger.error('login failed', error);
+        return null; // login failed
+      }
+    },
+    logout: async () => {
+      const { dataCenter } = get();
+      await dataCenter.logout();
+      logger.debug('logout success');
+      set({ user: null });
+    },
+  };
+};