refactor(core): initial multiple servers infra (#8745)

This is the initial refactoring of affine to support multiple servers, but many more changes are needed to make multi-server actually work.

packages/frontend/core/src/mobile/components/user-plan-tag/index.tsx

@@ -1,7 +1,4 @@
-import {
-  ServerConfigService,
-  SubscriptionService,
-} from '@affine/core/modules/cloud';
+import { ServerService, SubscriptionService } from '@affine/core/modules/cloud';
 import { SubscriptionPlan } from '@affine/graphql';
 import { useLiveData, useServices } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -13,12 +10,12 @@ export const UserPlanTag = forwardRef<
   HTMLDivElement,
   HTMLProps<HTMLDivElement>
 >(function UserPlanTag({ className, ...attrs }, ref) {
-  const { serverConfigService, subscriptionService } = useServices({
-    ServerConfigService,
+  const { serverService, subscriptionService } = useServices({
+    ServerService,
     SubscriptionService,
   });
   const hasPayment = useLiveData(
-    serverConfigService.serverConfig.features$.map(r => r?.payment)
+    serverService.server.features$.map(r => r?.payment)
   );
   const plan = useLiveData(
     subscriptionService.subscription.pro$.map(subscription =>

packages/frontend/core/src/mobile/dialogs/setting/user-usage/index.tsx

@@ -1,7 +1,7 @@
 import { Skeleton } from '@affine/component';
 import {
   AuthService,
-  ServerConfigService,
+  ServerService,
   UserCopilotQuotaService,
   UserQuotaService,
 } from '@affine/core/modules/cloud';
@@ -71,10 +71,8 @@ const Loading = () => {
 };
 
 const UsagePanel = () => {
-  const serverConfigService = useService(ServerConfigService);
-  const serverFeatures = useLiveData(
-    serverConfigService.serverConfig.features$
-  );
+  const serverService = useService(ServerService);
+  const serverFeatures = useLiveData(serverService.server.features$);
 
   return (
     <SettingGroup title="Storage" contentStyle={{ padding: '10px 16px' }}>

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

@@ -0,0 +1,40 @@
+import { NotificationCenter } from '@affine/component';
+import { DefaultServerService } from '@affine/core/modules/cloud';
+import { FrameworkScope, useService } from '@toeverything/infra';
+import { useEffect, useState } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import { GlobalDialogs } from '../../dialogs';
+import { MobileSignInModal } from '../../views/sign-in/modal';
+
+export const RootWrapper = () => {
+  const defaultServerService = useService(DefaultServerService);
+  const [isServerReady, setIsServerReady] = useState(false);
+
+  useEffect(() => {
+    if (isServerReady) {
+      return;
+    }
+    const abortController = new AbortController();
+    defaultServerService.server
+      .waitForConfigRevalidation(abortController.signal)
+      .then(() => {
+        setIsServerReady(true);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+    return () => {
+      abortController.abort();
+    };
+  }, [defaultServerService, isServerReady]);
+
+  return (
+    <FrameworkScope scope={defaultServerService.server.scope}>
+      <GlobalDialogs />
+      <NotificationCenter />
+      <MobileSignInModal />
+      <Outlet />
+    </FrameworkScope>
+  );
+};

packages/frontend/core/src/mobile/router.tsx

@@ -1,18 +1,15 @@
-import { NotificationCenter } from '@affine/component';
 import { NavigateContext } from '@affine/core/components/hooks/use-navigate-helper';
 import { wrapCreateBrowserRouter } from '@sentry/react';
 import { useEffect, useState } from 'react';
 import type { RouteObject } from 'react-router-dom';
 import {
   createBrowserRouter as reactRouterCreateBrowserRouter,
-  Outlet,
   redirect,
   // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   useNavigate,
 } from 'react-router-dom';
 
-import { GlobalDialogs } from './dialogs';
-import { MobileSignInModal } from './views/sign-in/modal';
+import { RootWrapper } from './pages/root';
 
 function RootRouter() {
   const navigate = useNavigate();
@@ -25,10 +22,7 @@ function RootRouter() {
   return (
     ready && (
       <NavigateContext.Provider value={navigate}>
-        <GlobalDialogs />
-        <NotificationCenter />
-        <MobileSignInModal />
-        <Outlet />
+        <RootWrapper />
       </NavigateContext.Provider>
     )
   );