revert: loadWorkspace unexpected behavior (#1172)

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,
+  });
+};