feat(core): support creating cloud workspaces to different servers (#9006)

packages/common/infra/src/modules/workspace/services/transform.ts

@@ -23,14 +23,15 @@ export class WorkspaceTransformService extends Service {
    */
   transformLocalToCloud = async (
     local: Workspace,
-    accountId: string
+    accountId: string,
+    flavour: string
   ): Promise<WorkspaceMetadata> => {
     assertEquals(local.flavour, 'local');
 
     const localDocStorage = local.engine.doc.storage.behavior;
 
     const newMetadata = await this.factory.create(
-      'affine-cloud',
+      flavour,
       async (docCollection, blobStorage, docStorage) => {
         const rootDocBinary = await localDocStorage.doc.get(
           local.docCollection.doc.guid

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

@@ -62,7 +62,7 @@ export function registerAffineCreationCommands({
       run() {
         track.$.cmdk.workspace.createWorkspace();
 
-        globalDialogService.open('create-workspace', undefined);
+        globalDialogService.open('create-workspace', {});
       },
     })
   );

packages/frontend/core/src/components/hooks/affine/use-enable-cloud.tsx

@@ -1,5 +1,5 @@
 import { notify, useConfirmModal } from '@affine/component';
-import { AuthService } from '@affine/core/modules/cloud';
+import { AuthService, ServersService } from '@affine/core/modules/cloud';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
 import { useI18n } from '@affine/i18n';
 import type { Workspace } from '@toeverything/infra';
@@ -22,6 +22,7 @@ interface ConfirmEnableCloudOptions {
    */
   onFinished?: () => void;
   openPageId?: string;
+  serverId?: string;
 }
 type ConfirmEnableArgs = [Workspace, ConfirmEnableCloudOptions | undefined];
 
@@ -33,6 +34,9 @@ export const useEnableCloud = () => {
   const globalDialogService = useService(GlobalDialogService);
   const { openConfirmModal, closeConfirmModal } = useConfirmModal();
   const workspacesService = useService(WorkspacesService);
+  const serversService = useService(ServersService);
+  const serverList = useLiveData(serversService.servers$);
+
   const { jumpToPage } = useNavigateHelper();
 
   const enableCloud = useCallback(
@@ -42,7 +46,8 @@ export const useEnableCloud = () => {
         if (!account) return;
         const { id: newId } = await workspacesService.transformLocalToCloud(
           ws,
-          account.id
+          account.id,
+          'affine-cloud'
         );
         jumpToPage(newId, options?.openPageId || 'all');
         options?.onSuccess?.();
@@ -56,9 +61,13 @@ export const useEnableCloud = () => {
     [account, jumpToPage, t, workspacesService]
   );
 
-  const openSignIn = useCallback(() => {
+  const openSignIn = useCallback(
-    globalDialogService.open('sign-in', {});
+    () =>
-  }, [globalDialogService]);
+      globalDialogService.open('sign-in', {
+        step: 'signIn',
+      }),
+    [globalDialogService]
+  );
 
   const signInOrEnableCloud = useCallback(
     async (...args: ConfirmEnableArgs) => {
@@ -76,13 +85,22 @@ export const useEnableCloud = () => {
 
   const confirmEnableCloud = useCallback(
     (ws: Workspace, options?: ConfirmEnableCloudOptions) => {
-      const { onSuccess, onFinished } = options ?? {};
+      const { onSuccess, onFinished, serverId, openPageId } = options ?? {};
 
       const closeOnSuccess = () => {
         closeConfirmModal();
         onSuccess?.();
       };
 
+      if (serverList.length > 1) {
+        globalDialogService.open('enable-cloud', {
+          workspaceId: ws.id,
+          serverId,
+          openPageId,
+        });
+        return;
+      }
+
       openConfirmModal(
         {
           title: t['Enable AFFiNE Cloud'](),
@@ -110,7 +128,15 @@ export const useEnableCloud = () => {
         }
       );
     },
-    [closeConfirmModal, loginStatus, openConfirmModal, signInOrEnableCloud, t]
+    [
+      closeConfirmModal,
+      globalDialogService,
+      loginStatus,
+      openConfirmModal,
+      serverList.length,
+      signInOrEnableCloud,
+      t,
+    ]
   );
 
   return confirmEnableCloud;

packages/frontend/core/src/components/server-selector/index.tsx

@@ -0,0 +1,40 @@
+import { Menu, MenuItem, type MenuProps, MenuTrigger } from '@affine/component';
+import type { Server } from '@affine/core/modules/cloud';
+import { useMemo } from 'react';
+
+import { triggerStyle } from './style.css';
+
+export const ServerSelector = ({
+  servers,
+  selectedSeverName,
+  onSelect,
+  contentOptions,
+}: {
+  servers: Server[];
+  selectedSeverName: string;
+  onSelect: (server: Server) => void;
+  contentOptions?: MenuProps['contentOptions'];
+}) => {
+  const menuItems = useMemo(() => {
+    return servers.map(server => (
+      <MenuItem key={server.id} onSelect={() => onSelect(server)}>
+        {server.config$.value.serverName} ({server.baseUrl})
+      </MenuItem>
+    ));
+  }, [servers, onSelect]);
+
+  return (
+    <Menu
+      items={menuItems}
+      contentOptions={{
+        ...contentOptions,
+        style: {
+          ...contentOptions?.style,
+          width: 'var(--radix-dropdown-menu-trigger-width)',
+        },
+      }}
+    >
+      <MenuTrigger className={triggerStyle}>{selectedSeverName}</MenuTrigger>
+    </Menu>
+  );
+};

packages/frontend/core/src/components/server-selector/style.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const triggerStyle = style({
+  width: '100%',
+});

packages/frontend/core/src/components/sign-in/index.tsx

@@ -24,12 +24,18 @@ export interface SignInState {
 export const SignInPanel = ({
   onClose,
   server: initialServerBaseUrl,
+  initStep,
 }: {
   onClose: () => void;
   server?: string;
+  initStep?: SignInStep | undefined;
 }) => {
   const [state, setState] = useState<SignInState>({
-    step: initialServerBaseUrl ? 'addSelfhosted' : 'signIn',
+    step: initStep
+      ? initStep
+      : initialServerBaseUrl
+        ? 'addSelfhosted'
+        : 'signIn',
     initialServerBaseUrl: initialServerBaseUrl,
   });
 

packages/frontend/core/src/components/workspace-selector/enable-cloud/enable-cloud.css.ts

@@ -0,0 +1,38 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  gap: '20px',
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+});
+
+export const title = style({
+  fontSize: cssVar('fontH6'),
+  fontWeight: 600,
+  lineHeight: '26px',
+});
+
+export const description = style({
+  fontSize: cssVar('fontBase'),
+  fontWeight: 400,
+  lineHeight: '24px',
+  color: cssVar('textSecondaryColor'),
+});
+
+export const serverSelector = style({
+  width: '100%',
+});
+
+export const button = style({
+  width: '100%',
+});

packages/frontend/core/src/components/workspace-selector/enable-cloud/enable-cloud.tsx

@@ -0,0 +1,38 @@
+import type { Server } from '@affine/core/modules/cloud';
+import { CloudWorkspaceIcon } from '@blocksuite/icons/rc';
+
+import { ServerSelector } from '../../server-selector';
+import * as styles from './enable-cloud.css';
+
+export const CustomServerEnableCloud = ({
+  serverList,
+  selectedServer,
+  setSelectedServer,
+  title,
+  description,
+}: {
+  serverList: Server[];
+  selectedServer: Server;
+  title?: string;
+  description?: string;
+  setSelectedServer: (server: Server) => void;
+}) => {
+  return (
+    <div className={styles.root}>
+      <CloudWorkspaceIcon width={'36px'} height={'36px'} />
+      <div className={styles.textContainer}>
+        {title ? <div className={styles.title}>{title}</div> : null}
+        {description ? (
+          <div className={styles.description}>{description}</div>
+        ) : null}
+      </div>
+      <div className={styles.serverSelector}>
+        <ServerSelector
+          servers={serverList}
+          selectedSeverName={`${selectedServer.config$.value.serverName} (${selectedServer.baseUrl})`}
+          onSelect={setSelectedServer}
+        />
+      </div>
+    </div>
+  );
+};

packages/frontend/core/src/components/workspace-selector/enable-cloud/index.ts

@@ -0,0 +1 @@
+export * from './enable-cloud';

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-server/index.css.ts

@@ -0,0 +1,23 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+export const ItemContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: '8px 14px',
+  gap: '14px',
+  cursor: 'pointer',
+  borderRadius: '8px',
+  transition: 'background-color 0.2s',
+  fontSize: '24px',
+  color: cssVar('iconSecondary'),
+});
+export const ItemText = style({
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  color: cssVar('textSecondaryColor'),
+  fontWeight: 400,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/add-server/index.tsx

@@ -0,0 +1,37 @@
+import { MenuItem } from '@affine/component/ui/menu';
+import { useI18n } from '@affine/i18n';
+import { PlusIcon } from '@blocksuite/icons/rc';
+import {
+  FeatureFlagService,
+  useLiveData,
+  useService,
+} from '@toeverything/infra';
+
+import * as styles from './index.css';
+
+export const AddServer = ({ onAddServer }: { onAddServer?: () => void }) => {
+  const t = useI18n();
+  const featureFlagService = useService(FeatureFlagService);
+  const enableMultipleServer = useLiveData(
+    featureFlagService.flags.enable_multiple_cloud_servers.$
+  );
+
+  if (!enableMultipleServer) {
+    return null;
+  }
+  return (
+    <div>
+      <MenuItem
+        block={true}
+        prefixIcon={<PlusIcon />}
+        onClick={onAddServer}
+        data-testid="new-server"
+        className={styles.ItemContainer}
+      >
+        <div className={styles.ItemText}>
+          {t['com.affine.workspaceList.addServer']()}
+        </div>
+      </MenuItem>
+    </div>
+  );
+};

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/index.tsx

@@ -14,10 +14,9 @@ import {
 } from '@toeverything/infra';
 import { useCallback } from 'react';
 
-import { useCatchEventCallback } from '../../hooks/use-catch-event-hook';
+import { AddServer } from './add-server';
 import { AddWorkspace } from './add-workspace';
 import * as styles from './index.css';
-import { UserAccountItem } from './user-account';
 import { AFFiNEWorkspaceList } from './workspace-list';
 
 export const SignInItem = () => {
@@ -90,7 +89,7 @@ const UserWithWorkspaceListInner = ({
       return openSignInModal();
     }
     track.$.navigationPanel.workspaceList.createWorkspace();
-    globalDialogService.open('create-workspace', undefined, payload => {
+    globalDialogService.open('create-workspace', {}, payload => {
       if (payload) {
         onCreatedWorkspace?.(payload);
       }
@@ -117,28 +116,15 @@ const UserWithWorkspaceListInner = ({
     onEventEnd?.();
   }, [globalDialogService, onCreatedWorkspace, onEventEnd]);
 
+  const onAddServer = useCallback(() => {
+    globalDialogService.open('sign-in', { step: 'addSelfhosted' });
+  }, [globalDialogService]);
+
   const workspaceManager = useService(WorkspacesService);
   const workspaces = useLiveData(workspaceManager.list.workspaces$);
 
-  const onOpenPricingPlan = useCatchEventCallback(() => {
-    globalDialogService.open('setting', {
-      activeTab: 'plans',
-      scrollAnchor: 'cloudPricingPlan',
-    });
-  }, [globalDialogService]);
-
   return (
     <div className={styles.workspaceListWrapper}>
-      {isAuthenticated ? (
-        <UserAccountItem
-          email={session.session.account.email ?? 'Unknown User'}
-          onEventEnd={onEventEnd}
-          onClick={onOpenPricingPlan}
-        />
-      ) : (
-        <SignInItem />
-      )}
-      <Divider size="thinner" />
       <AFFiNEWorkspaceList
         onEventEnd={onEventEnd}
         onClickWorkspace={onClickWorkspace}
@@ -150,6 +136,7 @@ const UserWithWorkspaceListInner = ({
         onAddWorkspace={onAddWorkspace}
         onNewWorkspace={onNewWorkspace}
       />
+      <AddServer onAddServer={onAddServer} />
     </div>
   );
 };

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 export const workspaceListsWrapper = style({
   display: 'flex',
@@ -15,11 +16,19 @@ export const workspaceListWrapper = style({
 export const workspaceServer = style({
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'center',
   gap: 4,
-  padding: '0px 12px',
+  paddingLeft: '12px',
+  marginBottom: '4px',
 });
 
+export const workspaceServerContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  color: cssVarV2('text/secondary'),
+  gap: 4,
+  width: '100%',
+  overflow: 'hidden',
+});
 export const workspaceServerName = style({
   display: 'flex',
   alignItems: 'center',
@@ -27,10 +36,19 @@ export const workspaceServerName = style({
   fontWeight: 500,
   fontSize: cssVar('fontXs'),
   lineHeight: '20px',
-  color: cssVar('textSecondaryColor'),
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+export const account = style({
+  fontSize: cssVar('fontXs'),
+  overflow: 'hidden',
+  width: '100%',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 export const workspaceTypeIcon = style({
-  color: cssVar('iconSecondary'),
+  color: cssVarV2('icon/primary'),
+  fontSize: '16px',
 });
 export const scrollbar = style({
   width: '4px',
@@ -39,3 +57,25 @@ export const workspaceCard = style({
   height: '44px',
   padding: '0 12px',
 });
+
+export const ItemContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  padding: '8px 14px',
+  gap: '14px',
+  cursor: 'pointer',
+  borderRadius: '8px',
+  transition: 'background-color 0.2s',
+  fontSize: '24px',
+  color: cssVarV2('icon/secondary'),
+});
+export const ItemText = style({
+  fontSize: cssVar('fontSm'),
+  lineHeight: '22px',
+  color: cssVarV2('text/secondary'),
+  fontWeight: 400,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});

packages/frontend/core/src/components/workspace-selector/user-with-workspace-list/workspace-list/index.tsx

@@ -11,11 +11,14 @@ import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-he
 import type { Server } from '@affine/core/modules/cloud';
 import { AuthService, ServersService } from '@affine/core/modules/cloud';
 import { GlobalDialogService } from '@affine/core/modules/dialogs';
+import { ServerDeploymentType } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
 import {
   CloudWorkspaceIcon,
   LocalWorkspaceIcon,
   MoreHorizontalIcon,
+  PlusIcon,
+  TeamWorkspaceIcon,
 } from '@blocksuite/icons/rc';
 import type { WorkspaceMetadata } from '@toeverything/infra';
 import {
@@ -54,6 +57,7 @@ const CloudWorkSpaceList = ({
   onClickWorkspaceSetting?: (workspaceMetadata: WorkspaceMetadata) => void;
   onClickEnableCloud?: (meta: WorkspaceMetadata) => void;
 }) => {
+  const t = useI18n();
   const globalContextService = useService(GlobalContextService);
   const globalDialogService = useService(GlobalDialogService);
   const serverName = useLiveData(server.config$.selector(c => c.serverName));
@@ -67,6 +71,8 @@ const CloudWorkSpaceList = ({
     globalContextService.globalContext.workspaceFlavour.$
   );
 
+  const serverType = server.config$.value.type;
+
   const handleDeleteServer = useCallback(() => {
     serversService.removeServer(server.id);
 
@@ -94,18 +100,38 @@ const CloudWorkSpaceList = ({
     });
   }, [globalDialogService, server.baseUrl]);
 
+  const onNewWorkspace = useCallback(() => {
+    globalDialogService.open(
+      'create-workspace',
+      {
+        serverId: server.id,
+        forcedCloud: true,
+      },
+      payload => {
+        if (payload) {
+          navigateHelper.openPage(payload.metadata.id, 'all');
+        }
+      }
+    );
+  }, [globalDialogService, navigateHelper, server.id]);
+
   return (
     <div className={styles.workspaceListWrapper}>
       <div className={styles.workspaceServer}>
-        <div className={styles.workspaceServerName}>
+        <div className={styles.workspaceServerContent}>
-          <CloudWorkspaceIcon
+          <div className={styles.workspaceServerName}>
-            width={14}
+            {serverType === ServerDeploymentType.Affine ? (
-            height={14}
+              <CloudWorkspaceIcon className={styles.workspaceTypeIcon} />
-            className={styles.workspaceTypeIcon}
+            ) : (
-          />
+              <TeamWorkspaceIcon className={styles.workspaceTypeIcon} />
-          {serverName}&nbsp;-&nbsp;
+            )}
-          {account ? account.email : 'Not signed in'}
+            <div className={styles.account}>{serverName}</div>
+          </div>
+          <div className={styles.account}>
+            {account ? account.email : 'Not signed in'}
+          </div>
         </div>
+
         <Menu
           items={[
             server.id !== 'affine-cloud' && (
@@ -125,7 +151,9 @@ const CloudWorkSpaceList = ({
             ),
           ]}
         >
-          <IconButton icon={<MoreHorizontalIcon />} />
+          <div>
+            <IconButton icon={<MoreHorizontalIcon />} />
+          </div>
         </Menu>
       </div>
       <WorkspaceList
@@ -134,6 +162,16 @@ const CloudWorkSpaceList = ({
         onSettingClick={onClickWorkspaceSetting}
         onEnableCloudClick={onClickEnableCloud}
       />
+      <MenuItem
+        block={true}
+        prefixIcon={<PlusIcon />}
+        onClick={onNewWorkspace}
+        className={styles.ItemContainer}
+      >
+        <div className={styles.ItemText}>
+          {t['com.affine.workspaceList.addWorkspace.create']()}
+        </div>
+      </MenuItem>
     </div>
   );
 };

packages/frontend/core/src/desktop/dialogs/create-workspace/index.tsx

@@ -23,6 +23,8 @@ import * as styles from './dialog.css';
 
 interface NameWorkspaceContentProps extends ConfirmModalProps {
   loading: boolean;
+  forcedCloud?: boolean;
+  serverId?: string;
   onConfirmName: (
     name: string,
     workspaceFlavour: string,
@@ -33,15 +35,14 @@ interface NameWorkspaceContentProps extends ConfirmModalProps {
 const NameWorkspaceContent = ({
   loading,
   onConfirmName,
+  forcedCloud,
+  serverId,
   ...props
 }: NameWorkspaceContentProps) => {
   const t = useI18n();
   const [workspaceName, setWorkspaceName] = useState('');
-  const featureFlagService = useService(FeatureFlagService);
+
-  const enableLocalWorkspace = useLiveData(
+  const [enable, setEnable] = useState(!!forcedCloud);
-    featureFlagService.flags.enable_local_workspace.$
-  );
-  const [enable, setEnable] = useState(!enableLocalWorkspace);
   const session = useService(AuthService).session;
   const loginStatus = useLiveData(session.status$);
 
@@ -62,8 +63,8 @@ const NameWorkspaceContent = ({
   );
 
   const handleCreateWorkspace = useCallback(() => {
-    onConfirmName(workspaceName, enable ? 'affine-cloud' : 'local');
+    onConfirmName(workspaceName, enable ? serverId || 'affine-cloud' : 'local');
-  }, [enable, onConfirmName, workspaceName]);
+  }, [enable, onConfirmName, serverId, workspaceName]);
 
   const onEnter = useCallback(() => {
     if (workspaceName) {
@@ -120,7 +121,7 @@ const NameWorkspaceContent = ({
               <Switch
                 checked={enable}
                 onChange={onSwitchChange}
-                disabled={!enableLocalWorkspace}
+                disabled={forcedCloud}
               />
             </div>
             <div className={styles.cardDescription}>
@@ -131,7 +132,7 @@ const NameWorkspaceContent = ({
             <CloudSvg />
           </div>
         </div>
-        {!enableLocalWorkspace ? (
+        {forcedCloud ? (
           <a
             className={styles.cloudTips}
             href={BUILD_CONFIG.downloadUrl}
@@ -147,9 +148,15 @@ const NameWorkspaceContent = ({
 };
 
 export const CreateWorkspaceDialog = ({
+  forcedCloud,
+  serverId,
   close,
 }: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['create-workspace']>) => {
   const workspacesService = useService(WorkspacesService);
+  const featureFlagService = useService(FeatureFlagService);
+  const enableLocalWorkspace = useLiveData(
+    featureFlagService.flags.enable_local_workspace.$
+  );
   const [loading, setLoading] = useState(false);
 
   const onConfirmName = useAsyncCallback(
@@ -185,6 +192,8 @@ export const CreateWorkspaceDialog = ({
     <NameWorkspaceContent
       loading={loading}
       open
+      serverId={serverId}
+      forcedCloud={forcedCloud || !enableLocalWorkspace}
       onOpenChange={onOpenChange}
       onConfirmName={onConfirmName}
     />

packages/frontend/core/src/desktop/dialogs/enable-cloud/dialog.css.ts

@@ -0,0 +1,86 @@
+import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const dialogContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: cssVarV2('text/primary'),
+  padding: '16px',
+});
+
+export const mainIcon = style({
+  width: 36,
+  height: 36,
+  color: cssVarV2('icon/primary'),
+});
+
+export const mainTitle = style({
+  fontSize: '18px',
+  lineHeight: '26px',
+  textAlign: 'center',
+  marginTop: '16px',
+  fontWeight: 600,
+});
+
+export const desc = style({
+  textAlign: 'center',
+  color: cssVarV2('text/secondary'),
+  marginBottom: '20px',
+});
+
+export const mainButton = style({
+  width: '100%',
+  fontSize: '14px',
+  height: '42px',
+});
+
+export const modal = style({
+  maxWidth: '352px',
+});
+
+export const workspaceSelector = style({
+  margin: '0 -16px',
+  width: 'calc(100% + 32px)',
+  border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
+  padding: '0 16px',
+});
+
+export const root = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: '100%',
+  gap: '20px',
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+});
+
+export const title = style({
+  fontSize: cssVar('fontH6'),
+  fontWeight: 600,
+  lineHeight: '26px',
+});
+
+export const description = style({
+  fontSize: cssVar('fontBase'),
+  fontWeight: 400,
+  lineHeight: '24px',
+  color: cssVar('textSecondaryColor'),
+});
+
+export const serverSelector = style({
+  width: '100%',
+});
+
+export const button = style({
+  width: '100%',
+  marginTop: '20px',
+});

packages/frontend/core/src/desktop/dialogs/enable-cloud/index.tsx

@@ -0,0 +1,169 @@
+import { Button, Modal, notify } from '@affine/component';
+import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
+import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
+import { ServerSelector } from '@affine/core/components/server-selector';
+import {
+  AuthService,
+  type Server,
+  ServersService,
+} from '@affine/core/modules/cloud';
+import {
+  type DialogComponentProps,
+  type GLOBAL_DIALOG_SCHEMA,
+  GlobalDialogService,
+} from '@affine/core/modules/dialogs';
+import { useI18n } from '@affine/i18n';
+import { CloudWorkspaceIcon } from '@blocksuite/icons/rc';
+import {
+  FrameworkScope,
+  useLiveData,
+  useService,
+  WorkspacesService,
+} from '@toeverything/infra';
+import { useCallback, useState } from 'react';
+
+import * as styles from './dialog.css';
+
+const Dialog = ({
+  workspaceId,
+  close,
+  selectedServer,
+  setSelectedServer,
+  serverList,
+  openPageId,
+}: {
+  workspaceId: string;
+  serverList: Server[];
+  selectedServer: Server;
+  setSelectedServer: (server: Server) => void;
+  openPageId?: string;
+  serverId?: string;
+  close?: () => void;
+}) => {
+  const t = useI18n();
+  const authService = useService(AuthService);
+  const account = useLiveData(authService.session.account$);
+  const loginStatus = useLiveData(useService(AuthService).session.status$);
+  const globalDialogService = useService(GlobalDialogService);
+  const workspacesService = useService(WorkspacesService);
+  const workspaceMeta = useLiveData(
+    workspacesService.list.workspace$(workspaceId)
+  );
+  const { workspace } = workspaceMeta
+    ? workspacesService.open({ metadata: workspaceMeta })
+    : { workspace: undefined };
+
+  const { jumpToPage } = useNavigateHelper();
+
+  const enableCloud = useCallback(async () => {
+    try {
+      if (!workspace) return;
+      if (!account) return;
+
+      const { id: newId } = await workspacesService.transformLocalToCloud(
+        workspace,
+        account.id,
+        selectedServer.id
+      );
+      jumpToPage(newId, openPageId || 'all');
+      close?.();
+    } catch (e) {
+      console.error(e);
+      notify.error({
+        title: t['com.affine.workspace.enable-cloud.failed'](),
+      });
+    }
+  }, [
+    workspace,
+    account,
+    workspacesService,
+    selectedServer.id,
+    jumpToPage,
+    openPageId,
+    close,
+    t,
+  ]);
+
+  const openSignIn = useCallback(() => {
+    globalDialogService.open('sign-in', {
+      server: selectedServer.baseUrl,
+    });
+  }, [globalDialogService, selectedServer.baseUrl]);
+
+  const signInOrEnableCloud = useAsyncCallback(async () => {
+    // not logged in, open login modal
+    if (loginStatus === 'unauthenticated') {
+      openSignIn();
+    }
+
+    if (loginStatus === 'authenticated') {
+      await enableCloud();
+    }
+  }, [enableCloud, loginStatus, openSignIn]);
+  return (
+    <div className={styles.root}>
+      <CloudWorkspaceIcon width={'36px'} height={'36px'} />
+      <div className={styles.textContainer}>
+        <div className={styles.title}>
+          {t['com.affine.enableAffineCloudModal.custom-server.title']({
+            workspaceName: workspace?.name$.value || 'untitled',
+          })}
+        </div>
+        <div className={styles.description}>
+          {t['com.affine.enableAffineCloudModal.custom-server.description']()}
+        </div>
+      </div>
+      <div className={styles.serverSelector}>
+        <ServerSelector
+          servers={serverList}
+          selectedSeverName={`${selectedServer.config$.value.serverName} (${selectedServer.baseUrl})`}
+          onSelect={setSelectedServer}
+        />
+      </div>
+
+      <Button
+        className={styles.button}
+        onClick={signInOrEnableCloud}
+        size="extraLarge"
+        variant="primary"
+      >
+        {t['com.affine.enableAffineCloudModal.custom-server.enable']()}
+      </Button>
+    </div>
+  );
+};
+
+export const EnableCloudDialog = ({
+  workspaceId,
+  openPageId,
+  serverId,
+  close,
+}: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['enable-cloud']>) => {
+  const serversService = useService(ServersService);
+  const serverList = useLiveData(serversService.servers$);
+  const [selectedServer, setSelectedServer] = useState<Server>(serverList[0]);
+
+  return (
+    <Modal
+      open
+      modal={true}
+      persistent
+      contentOptions={{
+        className: styles.modal,
+      }}
+      onOpenChange={() => close()}
+    >
+      <FrameworkScope key={selectedServer.id} scope={selectedServer.scope}>
+        <Dialog
+          workspaceId={workspaceId}
+          openPageId={openPageId}
+          serverId={serverId}
+          close={close}
+          serverList={serverList}
+          selectedServer={selectedServer}
+          setSelectedServer={setSelectedServer}
+        />
+      </FrameworkScope>
+    </Modal>
+  );
+};

packages/frontend/core/src/desktop/dialogs/index.tsx

@@ -11,6 +11,7 @@ import { ChangePasswordDialog } from './change-password';
 import { CollectionEditorDialog } from './collection-editor';
 import { CreateWorkspaceDialog } from './create-workspace';
 import { DocInfoDialog } from './doc-info';
+import { EnableCloudDialog } from './enable-cloud';
 import { ImportDialog } from './import';
 import { ImportTemplateDialog } from './import-template';
 import { ImportWorkspaceDialog } from './import-workspace';
@@ -30,6 +31,7 @@ const GLOBAL_DIALOGS = {
   'sign-in': SignInDialog,
   'change-password': ChangePasswordDialog,
   'verify-email': VerifyEmailDialog,
+  'enable-cloud': EnableCloudDialog,
 } satisfies {
   [key in keyof GLOBAL_DIALOG_SCHEMA]?: React.FC<
     DialogComponentProps<GLOBAL_DIALOG_SCHEMA[key]>

packages/frontend/core/src/desktop/dialogs/sign-in/index.tsx

@@ -1,5 +1,5 @@
 import { Modal } from '@affine/component';
-import { SignInPanel } from '@affine/core/components/sign-in';
+import { SignInPanel, type SignInStep } from '@affine/core/components/sign-in';
 import type {
   DialogComponentProps,
   GLOBAL_DIALOG_SCHEMA,
@@ -7,6 +7,7 @@ import type {
 export const SignInDialog = ({
   close,
   server: initialServerBaseUrl,
+  step,
 }: DialogComponentProps<GLOBAL_DIALOG_SCHEMA['sign-in']>) => {
   return (
     <Modal
@@ -19,7 +20,11 @@ export const SignInDialog = ({
         style: { padding: '44px 40px 20px' },
       }}
     >
-      <SignInPanel onClose={close} server={initialServerBaseUrl} />
+      <SignInPanel
+        onClose={close}
+        server={initialServerBaseUrl}
+        initStep={step as SignInStep}
+      />
     </Modal>
   );
 };

packages/frontend/core/src/modules/dialogs/constant.ts

@@ -14,7 +14,7 @@ export type SettingTab =
   | `workspace:${'preference' | 'properties'}`;
 
 export type GLOBAL_DIALOG_SCHEMA = {
-  'create-workspace': () => {
+  'create-workspace': (props: { serverId?: string; forcedCloud?: boolean }) => {
     metadata: WorkspaceMetadata;
     defaultDocId?: string;
   };
@@ -31,9 +31,14 @@ export type GLOBAL_DIALOG_SCHEMA = {
     workspaceMetadata?: WorkspaceMetadata | null;
     scrollAnchor?: string;
   }) => void;
-  'sign-in': (props: { server?: string; step?: 'sign-in' }) => void;
+  'sign-in': (props: { server?: string; step?: string }) => void;
   'change-password': (props: { server?: string }) => void;
   'verify-email': (props: { server?: string; changeEmail?: boolean }) => void;
+  'enable-cloud': (props: {
+    workspaceId: string;
+    openPageId?: string;
+    serverId?: string;
+  }) => boolean;
 };
 
 export type WORKSPACE_DIALOG_SCHEMA = {

packages/frontend/i18n/src/i18n-completenesses.json

@@ -20,5 +20,5 @@
   "sv-SE": 4,
   "ur": 3,
   "zh-Hans": 99,
-  "zh-Hant": 99
+  "zh-Hant": 98
 }

packages/frontend/i18n/src/resources/en.json

@@ -473,6 +473,9 @@
   "com.affine.empty.tags.title": "Tag management",
   "com.affine.emptyDesc": "There's no doc here yet",
   "com.affine.enableAffineCloudModal.button.cancel": "Cancel",
+  "com.affine.enableAffineCloudModal.custom-server.title": "Enable Cloud for {{workspaceName}}",
+  "com.affine.enableAffineCloudModal.custom-server.description": "Choose an instance.",
+  "com.affine.enableAffineCloudModal.custom-server.enable": "Enable Cloud",
   "com.affine.error.hide-error": "Hide error",
   "com.affine.error.no-page-root.title": "Doc content is missing",
   "com.affine.error.refetch": "Refetch",
@@ -1432,6 +1435,7 @@
   "com.affine.workspaceList.addWorkspace.create-cloud": "Create cloud workspace",
   "com.affine.workspaceList.workspaceListType.cloud": "Cloud sync",
   "com.affine.workspaceList.workspaceListType.local": "Local storage",
+  "com.affine.workspaceList.addServer": "Add Server",
   "com.affine.workspaceSubPath.all": "All docs",
   "com.affine.workspaceSubPath.trash": "Trash",
   "com.affine.workspaceSubPath.trash.empty-description": "Deleted docs will appear here.",

tests/affine-cloud/e2e/login.spec.ts

@@ -9,7 +9,6 @@ import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
 import { clickUserInfoCard } from '@affine-test/kit/utils/setting';
 import {
   clickSideBarAllPageButton,
-  clickSideBarCurrentWorkspaceBanner,
   clickSideBarSettingButton,
   clickSideBarUseAvatar,
 } from '@affine-test/kit/utils/sidebar';
@@ -19,8 +18,7 @@ import { expect } from '@playwright/test';
 test('can open login modal in workspace list', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
-  await clickSideBarCurrentWorkspaceBanner(page);
+  await page.getByTestId('sidebar-user-avatar').click({
-  await page.getByTestId('cloud-signin-button').click({
     delay: 200,
   });
   await expect(page.getByTestId('auth-modal')).toBeVisible();

tests/kit/utils/cloud.ts

@@ -4,10 +4,7 @@ import {
   waitForAllPagesLoad,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
-import {
+import { clickSideBarSettingButton } from '@affine-test/kit/utils/sidebar';
-  clickSideBarCurrentWorkspaceBanner,
-  clickSideBarSettingButton,
-} from '@affine-test/kit/utils/sidebar';
 import { faker } from '@faker-js/faker';
 import { hash } from '@node-rs/argon2';
 import type { BrowserContext, Cookie, Page } from '@playwright/test';
@@ -239,8 +236,7 @@ export async function loginUser(
     await waitForEditorLoad(page);
   }
 
-  await clickSideBarCurrentWorkspaceBanner(page);
+  await page.getByTestId('sidebar-user-avatar').click({
-  await page.getByTestId('cloud-signin-button').click({
     delay: 200,
   });
   await loginUserDirectly(page, user, config);