refactor(infra): directory structure (#4615)

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

@@ -0,0 +1,53 @@
+import { assertExists } from '@blocksuite/global/utils';
+import {
+  getCurrentStore,
+  loadedPluginNameAtom,
+} from '@toeverything/infra/atom';
+import { use } from 'foxact/use';
+import { useAtomValue } from 'jotai';
+import { Provider } from 'jotai/react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { createSetup } from '../bootstrap/plugins/setup';
+import { bootstrapPluginSystem } from '../bootstrap/register-plugins';
+
+async function main() {
+  const { setup } = await import('../bootstrap/setup');
+  const rootStore = getCurrentStore();
+  await setup(rootStore);
+  const { _pluginNestedImportsMap } = createSetup(rootStore);
+  const pluginRegisterPromise = bootstrapPluginSystem(rootStore);
+  const root = document.getElementById('app');
+  assertExists(root);
+
+  const App = () => {
+    use(pluginRegisterPromise);
+    const plugins = useAtomValue(loadedPluginNameAtom);
+    _pluginNestedImportsMap.forEach(value => {
+      const exports = value.get('index.js');
+      assertExists(exports);
+      assertExists(exports?.get('entry'));
+    });
+    return (
+      <div>
+        <div data-plugins-load-status="success">
+          Successfully loaded plugins:
+        </div>
+        {plugins.map(plugin => {
+          return <div key={plugin}>{plugin}</div>;
+        })}
+      </div>
+    );
+  };
+
+  createRoot(root).render(
+    <StrictMode>
+      <Provider store={rootStore}>
+        <App />
+      </Provider>
+    </StrictMode>
+  );
+}
+
+await main();

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

@@ -0,0 +1,93 @@
+import { PageNotFoundError } from '@affine/env/constant';
+import type {
+  WorkspaceFlavour,
+  WorkspaceUISchema,
+} from '@affine/env/workspace';
+import { initEmptyPage } from '@toeverything/infra/blocksuite';
+import { lazy, useCallback } from 'react';
+
+import type { OnLoadEditor } from '../../components/page-detail-editor';
+import { useCurrentUser } from '../../hooks/affine/use-current-user';
+import { useIsWorkspaceOwner } from '../../hooks/affine/use-is-workspace-owner';
+import { useWorkspace } from '../../hooks/use-workspace';
+import {
+  BlockSuitePageList,
+  NewWorkspaceSettingDetail,
+  PageDetailEditor,
+  Provider,
+  WorkspaceHeader,
+} from '../shared';
+
+const LoginCard = lazy(() =>
+  import('../../components/cloud/login-card').then(({ LoginCard }) => ({
+    default: LoginCard,
+  }))
+);
+
+export const UI = {
+  Provider,
+  LoginCard,
+  Header: WorkspaceHeader,
+  PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
+    const workspace = useWorkspace(currentWorkspaceId);
+    const page = workspace.blockSuiteWorkspace.getPage(currentPageId);
+    if (!page) {
+      throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
+    }
+    // this should be safe because we are under cloud workspace adapter
+    const currentUser = useCurrentUser();
+    const onLoad = useCallback<OnLoadEditor>(
+      (...args) => {
+        const dispose = onLoadEditor(...args);
+        workspace.blockSuiteWorkspace.awarenessStore.awareness.setLocalStateField(
+          'user',
+          {
+            name: currentUser.name,
+          }
+        );
+        return dispose;
+      },
+      [currentUser, workspace, onLoadEditor]
+    );
+
+    return (
+      <>
+        <PageDetailEditor
+          pageId={currentPageId}
+          onInit={useCallback(async page => initEmptyPage(page), [])}
+          onLoad={onLoad}
+          workspace={workspace.blockSuiteWorkspace}
+        />
+      </>
+    );
+  },
+  PageList: ({ blockSuiteWorkspace, onOpenPage, collection }) => {
+    return (
+      <BlockSuitePageList
+        listType="all"
+        collection={collection}
+        onOpenPage={onOpenPage}
+        blockSuiteWorkspace={blockSuiteWorkspace}
+      />
+    );
+  },
+  NewSettingsDetail: ({
+    currentWorkspaceId,
+    onTransformWorkspace,
+    onDeleteLocalWorkspace,
+    onDeleteCloudWorkspace,
+    onLeaveWorkspace,
+  }) => {
+    const isOwner = useIsWorkspaceOwner(currentWorkspaceId);
+    return (
+      <NewWorkspaceSettingDetail
+        onDeleteLocalWorkspace={onDeleteLocalWorkspace}
+        onDeleteCloudWorkspace={onDeleteCloudWorkspace}
+        onLeaveWorkspace={onLeaveWorkspace}
+        workspaceId={currentWorkspaceId}
+        onTransferWorkspace={onTransformWorkspace}
+        isOwner={isOwner}
+      />
+    );
+  },
+} satisfies WorkspaceUISchema<WorkspaceFlavour.AFFINE_CLOUD>;

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

@@ -0,0 +1,137 @@
+import { DebugLogger } from '@affine/debug';
+import {
+  DEFAULT_WORKSPACE_NAME,
+  PageNotFoundError,
+} from '@affine/env/constant';
+import type { LocalIndexedDBDownloadProvider } from '@affine/env/workspace';
+import type { WorkspaceAdapter } from '@affine/env/workspace';
+import {
+  LoadPriority,
+  ReleaseType,
+  WorkspaceFlavour,
+} from '@affine/env/workspace';
+import {
+  CRUD,
+  saveWorkspaceToLocalStorage,
+} from '@affine/workspace/local/crud';
+import {
+  getOrCreateWorkspace,
+  globalBlockSuiteSchema,
+} from '@affine/workspace/manager';
+import { createIndexedDBDownloadProvider } from '@affine/workspace/providers';
+import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
+import { getCurrentStore } from '@toeverything/infra/atom';
+import { initEmptyPage } from '@toeverything/infra/blocksuite';
+import { buildShowcaseWorkspace } from '@toeverything/infra/blocksuite';
+import { useAtomValue } from 'jotai';
+import { nanoid } from 'nanoid';
+import { useCallback } from 'react';
+
+import { setPageModeAtom } from '../../atoms';
+import {
+  BlockSuitePageList,
+  NewWorkspaceSettingDetail,
+  PageDetailEditor,
+  Provider,
+  WorkspaceHeader,
+} from '../shared';
+
+const logger = new DebugLogger('use-create-first-workspace');
+
+export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
+  releaseType: ReleaseType.STABLE,
+  flavour: WorkspaceFlavour.LOCAL,
+  loadPriority: LoadPriority.LOW,
+  Events: {
+    'app:access': async () => true,
+    'app:init': () => {
+      const blockSuiteWorkspace = getOrCreateWorkspace(
+        nanoid(),
+        WorkspaceFlavour.LOCAL
+      );
+      blockSuiteWorkspace.meta.setName(DEFAULT_WORKSPACE_NAME);
+      if (runtimeConfig.enablePreloading) {
+        buildShowcaseWorkspace(blockSuiteWorkspace, {
+          schema: globalBlockSuiteSchema,
+          store: getCurrentStore(),
+          atoms: {
+            pageMode: setPageModeAtom,
+          },
+        }).catch(err => {
+          logger.error('init page with preloading failed', err);
+        });
+      } else {
+        const page = blockSuiteWorkspace.createPage();
+        blockSuiteWorkspace.setPageMeta(page.id, {
+          jumpOnce: true,
+        });
+        initEmptyPage(page).catch(error => {
+          logger.error('init page with empty failed', error);
+        });
+      }
+      const provider = createIndexedDBDownloadProvider(
+        blockSuiteWorkspace.id,
+        blockSuiteWorkspace.doc,
+        {
+          awareness: blockSuiteWorkspace.awarenessStore.awareness,
+        }
+      ) as LocalIndexedDBDownloadProvider;
+      provider.sync();
+      provider.whenReady.catch(console.error);
+      saveWorkspaceToLocalStorage(blockSuiteWorkspace.id);
+      logger.debug('create first workspace');
+      return [blockSuiteWorkspace.id];
+    },
+  },
+  CRUD,
+  UI: {
+    Header: WorkspaceHeader,
+    Provider,
+    PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
+      const [workspaceAtom] = getBlockSuiteWorkspaceAtom(currentWorkspaceId);
+      const workspace = useAtomValue(workspaceAtom);
+      const page = workspace.getPage(currentPageId);
+      if (!page) {
+        throw new PageNotFoundError(workspace, currentPageId);
+      }
+      return (
+        <>
+          <PageDetailEditor
+            pageId={currentPageId}
+            onInit={useCallback(async page => initEmptyPage(page), [])}
+            onLoad={onLoadEditor}
+            workspace={workspace}
+          />
+        </>
+      );
+    },
+    PageList: ({ blockSuiteWorkspace, onOpenPage, collection }) => {
+      return (
+        <BlockSuitePageList
+          listType="all"
+          collection={collection}
+          onOpenPage={onOpenPage}
+          blockSuiteWorkspace={blockSuiteWorkspace}
+        />
+      );
+    },
+    NewSettingsDetail: ({
+      currentWorkspaceId,
+      onTransformWorkspace,
+      onDeleteLocalWorkspace,
+      onDeleteCloudWorkspace,
+      onLeaveWorkspace,
+    }) => {
+      return (
+        <NewWorkspaceSettingDetail
+          onDeleteLocalWorkspace={onDeleteLocalWorkspace}
+          onDeleteCloudWorkspace={onDeleteCloudWorkspace}
+          onLeaveWorkspace={onLeaveWorkspace}
+          workspaceId={currentWorkspaceId}
+          onTransferWorkspace={onTransformWorkspace}
+          isOwner={true}
+        />
+      );
+    },
+  },
+};

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

@@ -0,0 +1,45 @@
+import { PageNotFoundError } from '@affine/env/constant';
+import type { WorkspaceFlavour } from '@affine/env/workspace';
+import { type WorkspaceUISchema } from '@affine/env/workspace';
+import { initEmptyPage } from '@toeverything/infra/blocksuite';
+import { useCallback } from 'react';
+
+import { useWorkspace } from '../../hooks/use-workspace';
+import { BlockSuitePageList, PageDetailEditor, Provider } from '../shared';
+
+export const UI = {
+  Provider,
+  Header: () => {
+    return null;
+  },
+  PageDetail: ({ currentWorkspaceId, currentPageId, onLoadEditor }) => {
+    const workspace = useWorkspace(currentWorkspaceId);
+    const page = workspace.blockSuiteWorkspace.getPage(currentPageId);
+    if (!page) {
+      throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
+    }
+    return (
+      <>
+        <PageDetailEditor
+          pageId={currentPageId}
+          onInit={useCallback(async page => initEmptyPage(page), [])}
+          onLoad={onLoadEditor}
+          workspace={workspace.blockSuiteWorkspace}
+        />
+      </>
+    );
+  },
+  PageList: ({ blockSuiteWorkspace, onOpenPage, collection }) => {
+    return (
+      <BlockSuitePageList
+        listType="all"
+        collection={collection}
+        onOpenPage={onOpenPage}
+        blockSuiteWorkspace={blockSuiteWorkspace}
+      />
+    );
+  },
+  NewSettingsDetail: () => {
+    throw new Error('Not implemented');
+  },
+} satisfies WorkspaceUISchema<WorkspaceFlavour.AFFINE_PUBLIC>;

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

@@ -0,0 +1,35 @@
+import { lazy } from 'react';
+
+export const Provider = lazy(() =>
+  import('../components/cloud/provider').then(({ Provider }) => ({
+    default: Provider,
+  }))
+);
+
+export const NewWorkspaceSettingDetail = lazy(() =>
+  import('../components/affine/new-workspace-setting-detail').then(
+    ({ WorkspaceSettingDetail }) => ({
+      default: WorkspaceSettingDetail,
+    })
+  )
+);
+
+export const BlockSuitePageList = lazy(() =>
+  import('../components/blocksuite/block-suite-page-list').then(
+    ({ BlockSuitePageList }) => ({
+      default: BlockSuitePageList,
+    })
+  )
+);
+
+export const PageDetailEditor = lazy(() =>
+  import('../components/page-detail-editor').then(({ PageDetailEditor }) => ({
+    default: PageDetailEditor,
+  }))
+);
+
+export const WorkspaceHeader = lazy(() =>
+  import('../components/workspace-header').then(({ WorkspaceHeader }) => ({
+    default: WorkspaceHeader,
+  }))
+);

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

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

packages/frontend/core/src/app.tsx

@@ -0,0 +1,67 @@
+import '@affine/component/theme/global.css';
+import '@affine/component/theme/theme.css';
+import '@toeverything/components/style.css';
+
+import { AffineContext } from '@affine/component/context';
+import { NotificationCenter } from '@affine/component/notification-center';
+import { WorkspaceFallback } from '@affine/component/workspace';
+import { CacheProvider } from '@emotion/react';
+import { getCurrentStore } from '@toeverything/infra/atom';
+import { use } from 'foxact/use';
+import type { PropsWithChildren, ReactElement } from 'react';
+import { lazy, memo, Suspense } from 'react';
+import { RouterProvider } from 'react-router-dom';
+
+import { CloudSessionProvider } from './providers/session-provider';
+import { router } from './router';
+import createEmotionCache from './utils/create-emotion-cache';
+
+const cache = createEmotionCache();
+
+const DevTools = lazy(() =>
+  import('jotai-devtools').then(m => ({ default: m.DevTools }))
+);
+
+const DebugProvider = ({ children }: PropsWithChildren): ReactElement => {
+  return (
+    <>
+      <Suspense>{process.env.DEBUG_JOTAI === 'true' && <DevTools />}</Suspense>
+      {children}
+    </>
+  );
+};
+
+const future = {
+  v7_startTransition: true,
+} as const;
+
+async function loadLanguage() {
+  if (environment.isBrowser) {
+    const { createI18n, setUpLanguage } = await import('@affine/i18n');
+    const i18n = createI18n();
+    document.documentElement.lang = i18n.language;
+    await setUpLanguage(i18n);
+  }
+}
+
+const languageLoadingPromise = loadLanguage().catch(console.error);
+
+export const App = memo(function App() {
+  use(languageLoadingPromise);
+  return (
+    <CacheProvider value={cache}>
+      <AffineContext store={getCurrentStore()}>
+        <CloudSessionProvider>
+          <DebugProvider>
+            {runtimeConfig.enableNotificationCenter && <NotificationCenter />}
+            <RouterProvider
+              fallbackElement={<WorkspaceFallback key="RouterFallback" />}
+              router={router}
+              future={future}
+            />
+          </DebugProvider>
+        </CloudSessionProvider>
+      </AffineContext>
+    </CacheProvider>
+  );
+});

packages/frontend/core/src/atoms/__tests__/atom.spec.ts

@@ -0,0 +1,37 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import 'fake-indexeddb/auto';
+
+import { createStore } from 'jotai';
+import { describe, expect, test } from 'vitest';
+
+import {
+  pageSettingFamily,
+  pageSettingsAtom,
+  recentPageIdsBaseAtom,
+} from '../index';
+
+describe('page mode atom', () => {
+  test('basic', () => {
+    const store = createStore();
+    const page0SettingAtom = pageSettingFamily('page0');
+    store.set(page0SettingAtom, {
+      mode: 'page',
+    });
+
+    expect(store.get(pageSettingsAtom)).toEqual({
+      page0: {
+        mode: 'page',
+      },
+    });
+
+    expect(store.get(recentPageIdsBaseAtom)).toEqual(['page0']);
+
+    const page1SettingAtom = pageSettingFamily('page1');
+    store.set(page1SettingAtom, {
+      mode: 'edgeless',
+    });
+    expect(store.get(recentPageIdsBaseAtom)).toEqual(['page1', 'page0']);
+  });
+});

packages/frontend/core/src/atoms/cloud-user.ts

@@ -0,0 +1,4 @@
+import { atom } from 'jotai';
+import type { SessionContextValue } from 'next-auth/react';
+
+export const sessionAtom = atom<SessionContextValue<true> | null>(null);

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

@@ -0,0 +1,5 @@
+import { atom } from 'jotai/vanilla';
+
+export const appHeaderAtom = atom<HTMLDivElement | null>(null);
+
+export const mainContainerAtom = atom<HTMLDivElement | null>(null);

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

@@ -0,0 +1,25 @@
+import { atom, useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+export type OnceSignedInEvent = () => void;
+
+export const onceSignedInEventsAtom = atom<OnceSignedInEvent[]>([]);
+
+export const setOnceSignedInEventAtom = atom(
+  null,
+  (get, set, event: OnceSignedInEvent) => {
+    set(onceSignedInEventsAtom, [...get(onceSignedInEventsAtom), event]);
+  }
+);
+
+export const useOnceSignedInEvents = () => {
+  const [events, setEvents] = useAtom(onceSignedInEventsAtom);
+  return useCallback(async () => {
+    try {
+      await Promise.all(events.map(event => event()));
+    } catch (err) {
+      console.error('Error executing one of the events:', err);
+    }
+    setEvents([]);
+  }, [events, setEvents]);
+};

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

@@ -0,0 +1,91 @@
+// these atoms cannot be moved to @affine/jotai since they use atoms from @affine/component
+import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
+import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+
+export type Guide = {
+  // should show quick search tips
+  quickSearchTips: boolean;
+  // should show change log
+  changeLog: boolean;
+  // should show recording tips
+  onBoarding: boolean;
+  // should show download client tips
+  downloadClientTip: boolean;
+};
+
+const guidePrimitiveAtom = atomWithStorage<Guide>('helper-guide', {
+  quickSearchTips: true,
+  changeLog: true,
+  onBoarding: true,
+  downloadClientTip: true,
+});
+
+export const guideQuickSearchTipsAtom = atom<
+  Guide['quickSearchTips'],
+  [open: boolean],
+  void
+>(
+  get => {
+    const open = get(appSidebarOpenAtom);
+    const guide = get(guidePrimitiveAtom);
+    // only show the tips when the sidebar is closed
+    return guide.quickSearchTips && open === false;
+  },
+  (_, set, open) => {
+    set(guidePrimitiveAtom, tips => ({
+      ...tips,
+      quickSearchTips: open,
+    }));
+  }
+);
+
+export const guideChangeLogAtom = atom<
+  Guide['changeLog'],
+  [open: boolean],
+  void
+>(
+  get => {
+    return get(guidePrimitiveAtom).changeLog;
+  },
+  (_, set, open) => {
+    set(guidePrimitiveAtom, tips => ({
+      ...tips,
+      changeLog: open,
+    }));
+  }
+);
+export const guideOnboardingAtom = atom<
+  Guide['onBoarding'],
+  [open: boolean],
+  void
+>(
+  get => {
+    return get(guidePrimitiveAtom).onBoarding;
+  },
+  (_, set, open) => {
+    set(guidePrimitiveAtom, tips => ({
+      ...tips,
+      onBoarding: open,
+    }));
+  }
+);
+
+export const guideDownloadClientTipAtom = atom<
+  Guide['downloadClientTip'],
+  [open: boolean],
+  void
+>(
+  get => {
+    if (environment.isDesktop) {
+      return false;
+    }
+    return get(guidePrimitiveAtom).downloadClientTip;
+  },
+  (_, set, open) => {
+    set(guidePrimitiveAtom, tips => ({
+      ...tips,
+      downloadClientTip: open,
+    }));
+  }
+);

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

@@ -0,0 +1,106 @@
+import { useAtom } from 'jotai';
+import { atomWithStorage, createJSONStorage } from 'jotai/utils';
+import { useCallback } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useNavigate } from 'react-router-dom';
+
+import { router } from '../router';
+
+export type History = {
+  stack: string[];
+  current: number;
+  skip: boolean;
+};
+
+export const MAX_HISTORY = 50;
+
+const historyBaseAtom = atomWithStorage<History>(
+  'router-history',
+  {
+    stack: [],
+    current: 0,
+    skip: false,
+  },
+  createJSONStorage(() => sessionStorage)
+);
+
+historyBaseAtom.onMount = set => {
+  const unsubscribe = router.subscribe(state => {
+    set(prev => {
+      const url = state.location.pathname;
+
+      // if stack top is the same as current, skip
+      if (prev.stack[prev.current] === url) {
+        return prev;
+      }
+
+      if (prev.skip) {
+        return {
+          stack: [...prev.stack],
+          current: prev.current,
+          skip: false,
+        };
+      } else {
+        if (prev.current < prev.stack.length - 1) {
+          const newStack = prev.stack.slice(0, prev.current);
+          newStack.push(url);
+          if (newStack.length > MAX_HISTORY) {
+            newStack.shift();
+          }
+          return {
+            stack: newStack,
+            current: newStack.length - 1,
+            skip: false,
+          };
+        } else {
+          const newStack = [...prev.stack, url];
+          if (newStack.length > MAX_HISTORY) {
+            newStack.shift();
+          }
+          return {
+            stack: newStack,
+            current: newStack.length - 1,
+            skip: false,
+          };
+        }
+      }
+    });
+  });
+  return () => {
+    unsubscribe();
+  };
+};
+
+export function useHistoryAtom() {
+  const navigate = useNavigate();
+  const [base, setBase] = useAtom(historyBaseAtom);
+  return [
+    base,
+    useCallback(
+      (forward: boolean) => {
+        setBase(prev => {
+          if (forward) {
+            const target = Math.min(prev.stack.length - 1, prev.current + 1);
+            const url = prev.stack[target];
+            navigate(url);
+            return {
+              ...prev,
+              current: target,
+              skip: true,
+            };
+          } else {
+            const target = Math.max(0, prev.current - 1);
+            const url = prev.stack[target];
+            navigate(url);
+            return {
+              ...prev,
+              current: target,
+              skip: true,
+            };
+          }
+        });
+      },
+      [setBase, navigate]
+    ),
+  ] as const;
+}

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

@@ -0,0 +1,105 @@
+import type { PrimitiveAtom } from 'jotai';
+import { atom } from 'jotai';
+import { atomFamily, atomWithStorage } from 'jotai/utils';
+import type { AtomFamily } from 'jotai/vanilla/utils/atomFamily';
+
+import type { AuthProps } from '../components/affine/auth';
+import type { CreateWorkspaceMode } from '../components/affine/create-workspace-modal';
+import type { SettingProps } from '../components/affine/setting-modal';
+// modal atoms
+export const openWorkspacesModalAtom = atom(false);
+export const openCreateWorkspaceModalAtom = atom<CreateWorkspaceMode>(false);
+export const openQuickSearchModalAtom = atom(false);
+export const openOnboardingModalAtom = atom(false);
+export const openSignOutModalAtom = atom(false);
+
+export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspaceId'> & {
+  open: boolean;
+};
+
+export const openSettingModalAtom = atom<SettingAtom>({
+  activeTab: 'appearance',
+  workspaceId: null,
+  open: false,
+});
+
+export type AuthAtom = {
+  openModal: boolean;
+  state: AuthProps['state'];
+  email?: string;
+  emailType?: AuthProps['emailType'];
+};
+
+export const authAtom = atom<AuthAtom>({
+  openModal: false,
+  state: 'signIn',
+  email: '',
+  emailType: 'changeEmail',
+});
+
+export const openDisableCloudAlertModalAtom = atom(false);
+
+type PageMode = 'page' | 'edgeless';
+type PageLocalSetting = {
+  mode: PageMode;
+};
+
+const pageSettingsBaseAtom = atomWithStorage(
+  'pageSettings',
+  {} as Record<string, PageLocalSetting>
+);
+
+// readonly atom by design
+export const pageSettingsAtom = atom(get => get(pageSettingsBaseAtom));
+
+export const recentPageIdsBaseAtom = atomWithStorage<string[]>(
+  'recentPageSettings',
+  []
+);
+
+const defaultPageSetting = {
+  mode: 'page',
+} satisfies PageLocalSetting;
+
+export const pageSettingFamily: AtomFamily<
+  string,
+  PrimitiveAtom<PageLocalSetting>
+> = atomFamily((pageId: string) =>
+  atom(
+    get =>
+      get(pageSettingsBaseAtom)[pageId] ?? {
+        ...defaultPageSetting,
+      },
+    (get, set, patch) => {
+      // fixme: this does not work when page reload,
+      // since atomWithStorage is async
+      set(recentPageIdsBaseAtom, ids => {
+        // pick 3 recent page ids
+        return [...new Set([pageId, ...ids]).values()].slice(0, 3);
+      });
+      const prevSetting = {
+        ...defaultPageSetting,
+        ...get(pageSettingsBaseAtom)[pageId],
+      };
+      set(pageSettingsBaseAtom, settings => ({
+        ...settings,
+        [pageId]: {
+          ...prevSetting,
+          ...(typeof patch === 'function' ? patch(prevSetting) : patch),
+        },
+      }));
+    }
+  )
+);
+
+export const setPageModeAtom = atom(
+  void 0,
+  (_, set, pageId: string, mode: PageMode) => {
+    set(pageSettingFamily(pageId), { mode });
+  }
+);
+
+export type PageModeOption = 'all' | 'page' | 'edgeless';
+export const allPageModeSelectAtom = atom<PageModeOption>('all');
+
+export const openWorkspaceListModalAtom = atom(false);

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

@@ -0,0 +1,12 @@
+import { currentPageIdAtom } from '@toeverything/infra/atom';
+import { atom } from 'jotai/vanilla';
+
+import { pageSettingFamily } from './index';
+
+export const currentModeAtom = atom<'page' | 'edgeless'>(get => {
+  const pageId = get(currentPageIdAtom);
+  if (!pageId) {
+    return 'page';
+  }
+  return get(pageSettingFamily(pageId)).mode;
+});

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

@@ -0,0 +1,81 @@
+import { atom, useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+
+export type DateFormats =
+  | 'MM/dd/YYYY'
+  | 'dd/MM/YYYY'
+  | 'YYYY-MM-dd'
+  | 'YYYY.MM.dd'
+  | 'YYYY/MM/dd'
+  | 'dd-MMM-YYYY'
+  | 'dd MMMM YYYY';
+
+export type AppSetting = {
+  clientBorder: boolean;
+  fullWidthLayout: boolean;
+  windowFrameStyle: 'frameless' | 'NativeTitleBar';
+  fontStyle: FontFamily;
+  dateFormat: DateFormats;
+  startWeekOnMonday: boolean;
+  enableBlurBackground: boolean;
+  enableNoisyBackground: boolean;
+  autoCheckUpdate: boolean;
+  autoDownloadUpdate: boolean;
+};
+export const windowFrameStyleOptions: AppSetting['windowFrameStyle'][] = [
+  'frameless',
+  'NativeTitleBar',
+];
+
+export const dateFormatOptions: DateFormats[] = [
+  'MM/dd/YYYY',
+  'dd/MM/YYYY',
+  'YYYY-MM-dd',
+  'YYYY.MM.dd',
+  'YYYY/MM/dd',
+  'dd-MMM-YYYY',
+  'dd MMMM YYYY',
+];
+
+export type FontFamily = 'Sans' | 'Serif' | 'Mono';
+
+export const fontStyleOptions = [
+  { key: 'Sans', value: 'var(--affine-font-sans-family)' },
+  { key: 'Serif', value: 'var(--affine-font-serif-family)' },
+  { key: 'Mono', value: 'var(--affine-font-mono-family)' },
+] satisfies {
+  key: FontFamily;
+  value: string;
+}[];
+
+const appSettingBaseAtom = atomWithStorage<AppSetting>('affine-settings', {
+  clientBorder: environment.isDesktop && globalThis.platform !== 'win32',
+  fullWidthLayout: false,
+  windowFrameStyle: 'frameless',
+  fontStyle: 'Sans',
+  dateFormat: dateFormatOptions[0],
+  startWeekOnMonday: false,
+  enableBlurBackground: true,
+  enableNoisyBackground: true,
+  autoCheckUpdate: true,
+  autoDownloadUpdate: true,
+});
+
+type SetStateAction<Value> = Value | ((prev: Value) => Value);
+
+export const appSettingAtom = atom<
+  AppSetting,
+  [SetStateAction<Partial<AppSetting>>],
+  void
+>(
+  get => get(appSettingBaseAtom),
+  (get, set, apply) => {
+    const prev = get(appSettingBaseAtom);
+    const next = typeof apply === 'function' ? apply(prev) : apply;
+    set(appSettingBaseAtom, { ...prev, ...next });
+  }
+);
+
+export const useAppSetting = () => {
+  return useAtom(appSettingAtom);
+};

packages/frontend/core/src/atoms/trash-modal.ts

@@ -0,0 +1,13 @@
+import { atom } from 'jotai';
+
+export type TrashModal = {
+  open: boolean;
+  pageId: string;
+  pageTitle: string;
+};
+
+export const trashModalAtom = atom<TrashModal>({
+  open: false,
+  pageId: '',
+  pageTitle: '',
+});

packages/frontend/core/src/bootstrap/plugins/endowments/fercher.ts

@@ -0,0 +1,86 @@
+export interface FetchOptions {
+  fetch?: typeof fetch;
+  signal?: AbortSignal;
+
+  normalizeURL?(url: string): string;
+
+  /**
+   * Virtualize a url
+   * @param url URL to be rewrite
+   * @param direction Direction of this rewrite.
+   * 'in' means the url is from the outside world and should be virtualized.
+   * 'out' means the url is from the inside world and should be de-virtualized to fetch the real target.
+   */
+  rewriteURL?(url: string, direction: 'in' | 'out'): string;
+
+  replaceRequest?(request: Request): Request | PromiseLike<Request>;
+
+  replaceResponse?(response: Response): Response | PromiseLike<Response>;
+
+  canConnect?(url: string): boolean | PromiseLike<boolean>;
+}
+
+export function createFetch(options: FetchOptions) {
+  const {
+    fetch: _fetch = fetch,
+    signal,
+    rewriteURL,
+    replaceRequest,
+    replaceResponse,
+    canConnect,
+    normalizeURL,
+  } = options;
+
+  return async function fetch(input: RequestInfo, init?: RequestInit) {
+    let request = new Request(input, {
+      ...init,
+      signal: getMergedSignal(init?.signal, signal) || null,
+    });
+
+    if (normalizeURL) request = new Request(normalizeURL(request.url), request);
+    if (canConnect && !(await canConnect(request.url)))
+      throw new TypeError('Failed to fetch');
+    if (rewriteURL)
+      request = new Request(rewriteURL(request.url, 'out'), request);
+    if (replaceRequest) request = await replaceRequest(request);
+
+    let response = await _fetch(request);
+
+    if (rewriteURL) {
+      const { url, redirected, type } = response;
+      // Note: Response constructor does not allow us to set the url of a response.
+      //       we have to define the own property on it. This is not a good simulation.
+      //       To prevent get the original url by Response.prototype.[[get url]].call(response)
+      //       we copy a response and set it's url to empty.
+      response = new Response(response.body, response);
+      Object.defineProperties(response, {
+        url: { value: url, configurable: true },
+        redirected: { value: redirected, configurable: true },
+        type: { value: type, configurable: true },
+      });
+      Object.defineProperty(response, 'url', {
+        configurable: true,
+        value: rewriteURL(url, 'in'),
+      });
+    }
+    if (replaceResponse) response = await replaceResponse(response);
+    return response;
+  };
+}
+
+function getMergedSignal(
+  signal: AbortSignal | undefined | null,
+  signal2: AbortSignal | undefined | null
+) {
+  if (!signal) return signal2;
+  if (!signal2) return signal;
+
+  const abortController = new AbortController();
+  signal.addEventListener('abort', () => abortController.abort(), {
+    once: true,
+  });
+  signal2.addEventListener('abort', () => abortController.abort(), {
+    once: true,
+  });
+  return abortController.signal;
+}

packages/frontend/core/src/bootstrap/plugins/endowments/timer.ts

@@ -0,0 +1,110 @@
+type Handler = (...args: any[]) => void;
+
+export interface Timers {
+  setTimeout: (handler: Handler, timeout?: number, ...args: any[]) => number;
+  clearTimeout: (handle: number) => void;
+  setInterval: (handler: Handler, timeout?: number, ...args: any[]) => number;
+  clearInterval: (handle: number) => void;
+  requestAnimationFrame: (callback: Handler) => number;
+  cancelAnimationFrame: (handle: number) => void;
+  requestIdleCallback?: typeof window.requestIdleCallback | undefined;
+  cancelIdleCallback?: typeof window.cancelIdleCallback | undefined;
+  queueMicrotask: typeof window.queueMicrotask;
+}
+
+export function createTimers(
+  abortSignal: AbortSignal,
+  originalTimes: Timers = {
+    requestAnimationFrame,
+    cancelAnimationFrame,
+    requestIdleCallback:
+      typeof requestIdleCallback === 'function'
+        ? requestIdleCallback
+        : undefined,
+    cancelIdleCallback:
+      typeof cancelIdleCallback === 'function' ? cancelIdleCallback : undefined,
+    setTimeout,
+    clearTimeout,
+    setInterval,
+    clearInterval,
+    queueMicrotask,
+  }
+): Timers {
+  const {
+    requestAnimationFrame: _requestAnimationFrame,
+    cancelAnimationFrame: _cancelAnimationFrame,
+    setInterval: _setInterval,
+    clearInterval: _clearInterval,
+    setTimeout: _setTimeout,
+    clearTimeout: _clearTimeout,
+    cancelIdleCallback: _cancelIdleCallback,
+    requestIdleCallback: _requestIdleCallback,
+    queueMicrotask: _queueMicrotask,
+  } = originalTimes;
+
+  const interval_timer_id: number[] = [];
+  const idle_id: number[] = [];
+  const raf_id: number[] = [];
+
+  abortSignal.addEventListener(
+    'abort',
+    () => {
+      raf_id.forEach(_cancelAnimationFrame);
+      interval_timer_id.forEach(_clearInterval);
+      _cancelIdleCallback && idle_id.forEach(_cancelIdleCallback);
+    },
+    { once: true }
+  );
+
+  return {
+    // id is a positive number, it never repeats.
+    requestAnimationFrame(callback) {
+      raf_id[raf_id.length] = _requestAnimationFrame(callback);
+      return raf_id.length;
+    },
+    cancelAnimationFrame(handle) {
+      const id = raf_id[handle - 1];
+      if (!id) return;
+      _cancelAnimationFrame(id);
+    },
+    setInterval(handler, timeout) {
+      interval_timer_id[interval_timer_id.length] = (_setInterval as any)(
+        handler,
+        timeout
+      );
+      return interval_timer_id.length;
+    },
+    clearInterval(id) {
+      if (!id) return;
+      const handle = interval_timer_id[id - 1];
+      if (!handle) return;
+      _clearInterval(handle);
+    },
+    setTimeout(handler, timeout) {
+      idle_id[idle_id.length] = (_setTimeout as any)(handler, timeout);
+      return idle_id.length;
+    },
+    clearTimeout(id) {
+      if (!id) return;
+      const handle = idle_id[id - 1];
+      if (!handle) return;
+      _clearTimeout(handle);
+    },
+    requestIdleCallback: _requestIdleCallback
+      ? function requestIdleCallback(callback, options) {
+          idle_id[idle_id.length] = _requestIdleCallback(callback, options);
+          return idle_id.length;
+        }
+      : undefined,
+    cancelIdleCallback: _cancelIdleCallback
+      ? function cancelIdleCallback(handle) {
+          const id = idle_id[handle - 1];
+          if (!id) return;
+          _cancelIdleCallback(id);
+        }
+      : undefined,
+    queueMicrotask(callback) {
+      _queueMicrotask(() => abortSignal.aborted || callback());
+    },
+  };
+}

packages/frontend/core/src/bootstrap/plugins/setup-imports-map.ts

@@ -0,0 +1,22 @@
+type ExportsPromiseOrExports =
+  | Promise<{ [key: string]: any }>
+  | { [key: string]: any };
+
+export async function setupImportsMap(
+  map: Map<string, Map<string, any>>,
+  imports: Record<string, ExportsPromiseOrExports>
+) {
+  for (const [key, value] of Object.entries(imports)) {
+    let module: { [key: string]: any };
+    if (value instanceof Promise) {
+      module = await value;
+    } else {
+      module = value;
+    }
+    const moduleMap = new Map();
+    map.set(key, moduleMap);
+    for (const [exportName, exportValue] of Object.entries(module)) {
+      moduleMap.set(exportName, exportValue);
+    }
+  }
+}

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

@@ -0,0 +1,584 @@
+import { DebugLogger } from '@affine/debug';
+import type {
+  CallbackMap,
+  ExpectedLayout,
+  LayoutNode,
+  PluginContext,
+} from '@affine/sdk/entry';
+import { AffineFormatBarWidget } from '@blocksuite/blocks';
+import { assertExists } from '@blocksuite/global/utils';
+import {
+  addCleanup,
+  pluginEditorAtom,
+  pluginHeaderItemAtom,
+  pluginSettingAtom,
+  pluginWindowAtom,
+} from '@toeverything/infra/__internal__/plugin';
+import {
+  contentLayoutAtom,
+  currentPageIdAtom,
+  currentWorkspaceAtom,
+} from '@toeverything/infra/atom';
+import { atom } from 'jotai';
+import { Provider } from 'jotai/react';
+import type { createStore } from 'jotai/vanilla';
+import { createElement, type PropsWithChildren } from 'react';
+
+import { createFetch } from './endowments/fercher';
+import { createTimers } from './endowments/timer';
+import { setupImportsMap } from './setup-imports-map';
+
+// DO NOT REMOVE INVISIBLE CHARACTERS
+const dynamicImportKey = '$h‍_import';
+
+const permissionLogger = new DebugLogger('plugins:permission');
+const importLogger = new DebugLogger('plugins:import');
+const entryLogger = new DebugLogger('plugins:entry');
+
+const pushLayoutAtom = atom<
+  null,
+  // fixme: check plugin name here
+  [
+    pluginName: string,
+    create: (root: HTMLElement) => () => void,
+    options:
+      | {
+          maxWidth: (number | undefined)[];
+        }
+      | undefined,
+  ],
+  void
+>(null, (_, set, pluginName, callback, options) => {
+  set(pluginWindowAtom, items => ({
+    ...items,
+    [pluginName]: callback,
+  }));
+  set(contentLayoutAtom, layout => {
+    if (layout === 'editor') {
+      return {
+        direction: 'horizontal',
+        first: 'editor',
+        second: pluginName,
+        splitPercentage: 70,
+        maxWidth: options?.maxWidth,
+      };
+    } else {
+      return {
+        direction: 'horizontal',
+        first: 'editor',
+        splitPercentage: 70,
+        second: {
+          direction: 'horizontal',
+          first: pluginName,
+          second: layout.second,
+          splitPercentage: 50,
+        },
+      } satisfies ExpectedLayout;
+    }
+  });
+  addCleanup(pluginName, () => {
+    set(deleteLayoutAtom, pluginName);
+  });
+});
+
+const deleteLayoutAtom = atom<null, [string], void>(null, (_, set, id) => {
+  set(pluginWindowAtom, items => {
+    const newItems = { ...items };
+    delete newItems[id];
+    return newItems;
+  });
+  const removeLayout = (layout: LayoutNode): LayoutNode | string => {
+    if (typeof layout === 'string') {
+      return layout;
+    }
+    if (layout.first === id) {
+      return layout.second;
+    } else if (layout.second === id) {
+      return layout.first;
+    } else {
+      return {
+        ...layout,
+        second: removeLayout(layout.second),
+      };
+    }
+  };
+
+  set(contentLayoutAtom, layout => {
+    if (layout === 'editor') {
+      return 'editor';
+    } else {
+      return removeLayout(layout) as ExpectedLayout;
+    }
+  });
+});
+
+const setupWeakMap = new WeakMap<
+  ReturnType<typeof createStore>,
+  ReturnType<typeof createSetupImpl>
+>();
+
+export function createSetup(rootStore: ReturnType<typeof createStore>) {
+  if (setupWeakMap.has(rootStore)) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return setupWeakMap.get(rootStore)!;
+  }
+  const setup = createSetupImpl(rootStore);
+  setupWeakMap.set(rootStore, setup);
+  return setup;
+}
+
+function createSetupImpl(rootStore: ReturnType<typeof createStore>) {
+  // clean up plugin windows when switching to other pages
+  rootStore.sub(currentPageIdAtom, () => {
+    rootStore.set(contentLayoutAtom, 'editor');
+  });
+
+  // module -> importName -> updater[]
+  const _rootImportsMap = new Map<string, Map<string, any>>();
+  const rootImportsMapSetupPromise = setupImportsMap(_rootImportsMap, {
+    react: import('react'),
+    'react/jsx-runtime': import('react/jsx-runtime'),
+    'react-dom': import('react-dom'),
+    'react-dom/client': import('react-dom/client'),
+    jotai: import('jotai'),
+    'jotai/utils': import('jotai/utils'),
+    swr: import('swr'),
+    '@affine/component': import('@affine/component'),
+    '@blocksuite/icons': import('@blocksuite/icons'),
+    '@blocksuite/blocks': import('@blocksuite/blocks'),
+    '@affine/sdk/entry': {
+      rootStore,
+      currentWorkspaceAtom: currentWorkspaceAtom,
+      currentPageIdAtom: currentPageIdAtom,
+      pushLayoutAtom: pushLayoutAtom,
+      deleteLayoutAtom: deleteLayoutAtom,
+    },
+    '@blocksuite/global/utils': import('@blocksuite/global/utils'),
+    '@toeverything/infra/atom': import('@toeverything/infra/atom'),
+    '@toeverything/components/button': import(
+      '@toeverything/components/button'
+    ),
+    '@toeverything/components/tooltip': import(
+      '@toeverything/components/tooltip'
+    ),
+  });
+
+  // pluginName -> module -> importName -> updater[]
+  const _pluginNestedImportsMap = new Map<
+    string,
+    Map<string, Map<string, any>>
+  >();
+
+  const pluginImportsFunctionMap = new Map<
+    string,
+    (newUpdaters: [string, [string, ((val: any) => void)[]][]][]) => void
+  >();
+  const createImports = (pluginName: string) => {
+    if (pluginImportsFunctionMap.has(pluginName)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return pluginImportsFunctionMap.get(pluginName)!;
+    }
+    const imports = (
+      newUpdaters: [string, [string, ((val: any) => void)[]][]][]
+    ) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const currentImportMap = _pluginNestedImportsMap.get(pluginName)!;
+      importLogger.debug('currentImportMap', pluginName, currentImportMap);
+
+      for (const [module, moduleUpdaters] of newUpdaters) {
+        importLogger.debug('imports module', module, moduleUpdaters);
+        let moduleImports = _rootImportsMap.get(module);
+        if (!moduleImports) {
+          moduleImports = currentImportMap.get(module);
+        }
+        if (moduleImports) {
+          for (const [importName, importUpdaters] of moduleUpdaters) {
+            const updateImport = (value: any) => {
+              for (const importUpdater of importUpdaters) {
+                importUpdater(value);
+              }
+            };
+            if (moduleImports.has(importName)) {
+              const val = moduleImports.get(importName);
+              updateImport(val);
+            }
+          }
+        } else {
+          console.error(
+            'cannot find module in plugin import map',
+            module,
+            currentImportMap,
+            _pluginNestedImportsMap
+          );
+        }
+      }
+    };
+    pluginImportsFunctionMap.set(pluginName, imports);
+    return imports;
+  };
+
+  const abortController = new AbortController();
+
+  const pluginFetch = createFetch({});
+  const timer = createTimers(abortController.signal);
+
+  const sharedGlobalThis = Object.assign(Object.create(null), timer, {
+    Object: globalThis.Object,
+    fetch: pluginFetch,
+    ReadableStream: globalThis.ReadableStream,
+    Symbol: globalThis.Symbol,
+    Error: globalThis.Error,
+    TypeError: globalThis.TypeError,
+    RangeError: globalThis.RangeError,
+    console: globalThis.console,
+    crypto: globalThis.crypto,
+  });
+
+  const dynamicImportMap = new Map<
+    string,
+    (moduleName: string) => Promise<any>
+  >();
+
+  const createOrGetDynamicImport = (baseUrl: string, pluginName: string) => {
+    if (dynamicImportMap.has(pluginName)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return dynamicImportMap.get(pluginName)!;
+    }
+    const dynamicImport = async (moduleName: string): Promise<any> => {
+      const codeUrl = `${baseUrl}/${moduleName}`;
+      const analysisUrl = `${baseUrl}/${moduleName}.json`;
+      const response = await fetch(codeUrl);
+      const analysisResponse = await fetch(analysisUrl);
+      const analysis = await analysisResponse.json();
+      const exports = analysis.exports as string[];
+      const code = await response.text();
+      const moduleCompartment = new Compartment(
+        createOrGetGlobalThis(
+          pluginName,
+          // use singleton here to avoid infinite loop
+          createOrGetDynamicImport(pluginName, baseUrl)
+        )
+      );
+      const entryPoint = moduleCompartment.evaluate(code, {
+        __evadeHtmlCommentTest__: true,
+      });
+      const moduleExports = {} as Record<string, any>;
+      const setVarProxy = new Proxy(
+        {},
+        {
+          get(_, p: string): any {
+            return (newValue: any) => {
+              moduleExports[p] = newValue;
+            };
+          },
+        }
+      );
+      entryPoint({
+        imports: createImports(pluginName),
+        liveVar: setVarProxy,
+        onceVar: setVarProxy,
+      });
+      importLogger.debug('import', moduleName, exports, moduleExports);
+      return moduleExports;
+    };
+    dynamicImportMap.set(pluginName, dynamicImport);
+    return dynamicImport;
+  };
+
+  const globalThisMap = new Map<string, any>();
+
+  const createOrGetGlobalThis = (
+    pluginName: string,
+    dynamicImport: (moduleName: string) => Promise<any>
+  ) => {
+    if (globalThisMap.has(pluginName)) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      return globalThisMap.get(pluginName)!;
+    }
+    const pluginGlobalThis = Object.assign(
+      Object.create(null),
+      sharedGlobalThis,
+      {
+        // fixme: vite build output bundle will have this, we should remove it
+        process: Object.freeze({
+          env: {
+            NODE_ENV: process.env.NODE_ENV,
+          },
+        }),
+        // dynamic import function
+        [dynamicImportKey]: dynamicImport,
+        // UNSAFE: React will read `window` and `document`
+        window: new Proxy(
+          {},
+          {
+            get(_, key) {
+              permissionLogger.debug(`${pluginName} is accessing window`, key);
+              if (sharedGlobalThis[key]) return sharedGlobalThis[key];
+              const result = Reflect.get(window, key);
+              if (typeof result === 'function') {
+                if (result === ShadowRoot) {
+                  return result;
+                }
+                return function (...args: any[]) {
+                  permissionLogger.debug(
+                    `${pluginName} is calling window`,
+                    key,
+                    args
+                  );
+                  return result.apply(window, args);
+                };
+              }
+              permissionLogger.debug('window', key, result);
+              return result;
+            },
+          }
+        ),
+        document: new Proxy(
+          {},
+          {
+            get(_, key) {
+              permissionLogger.debug(
+                `${pluginName} is accessing document`,
+                key
+              );
+              if (sharedGlobalThis[key]) return sharedGlobalThis[key];
+              const result = Reflect.get(document, key);
+              if (typeof result === 'function') {
+                return function (...args: any[]) {
+                  permissionLogger.debug(
+                    `${pluginName} is calling window`,
+                    key,
+                    args
+                  );
+                  return result.apply(document, args);
+                };
+              }
+              permissionLogger.debug('document', key, result);
+              return result;
+            },
+          }
+        ),
+        navigator: globalThis.navigator,
+
+        MouseEvent: globalThis.MouseEvent,
+        KeyboardEvent: globalThis.KeyboardEvent,
+        CustomEvent: globalThis.CustomEvent,
+
+        // copilot uses these
+        Date: globalThis.Date,
+        Math: globalThis.Math,
+        URL: globalThis.URL,
+        URLSearchParams: globalThis.URLSearchParams,
+        Headers: globalThis.Headers,
+        TextEncoder: globalThis.TextEncoder,
+        TextDecoder: globalThis.TextDecoder,
+        Request: globalThis.Request,
+
+        // image-preview uses these
+        Blob: globalThis.Blob,
+        ClipboardItem: globalThis.ClipboardItem,
+
+        // vue uses these
+        Element: globalThis.Element,
+        SVGElement: globalThis.SVGElement,
+
+        // fixme: use our own db api
+        indexedDB: globalThis.indexedDB,
+        IDBRequest: globalThis.IDBRequest,
+        IDBDatabase: globalThis.IDBDatabase,
+        IDBCursorWithValue: globalThis.IDBCursorWithValue,
+        IDBFactory: globalThis.IDBFactory,
+        IDBKeyRange: globalThis.IDBKeyRange,
+        IDBOpenDBRequest: globalThis.IDBOpenDBRequest,
+        IDBTransaction: globalThis.IDBTransaction,
+        IDBObjectStore: globalThis.IDBObjectStore,
+        IDBIndex: globalThis.IDBIndex,
+        IDBCursor: globalThis.IDBCursor,
+        IDBVersionChangeEvent: globalThis.IDBVersionChangeEvent,
+      }
+    );
+    pluginGlobalThis.global = pluginGlobalThis;
+    globalThisMap.set(pluginName, pluginGlobalThis);
+    return pluginGlobalThis;
+  };
+
+  const setupPluginCode = async (
+    baseUrl: string,
+    pluginName: string,
+    filename: string
+  ) => {
+    await rootImportsMapSetupPromise;
+    if (!_pluginNestedImportsMap.has(pluginName)) {
+      _pluginNestedImportsMap.set(pluginName, new Map());
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const currentImportMap = _pluginNestedImportsMap.get(pluginName)!;
+    const isMissingPackage = (name: string) =>
+      _rootImportsMap.has(name) && !currentImportMap.has(name);
+
+    const bundleAnalysis = await fetch(`${baseUrl}/${filename}.json`).then(
+      res => res.json()
+    );
+    const moduleExports = bundleAnalysis.exports as Record<string, [string]>;
+    const moduleImports = bundleAnalysis.imports as string[];
+    const moduleReexports = bundleAnalysis.reexports as Record<
+      string,
+      [localName: string, exportedName: string][]
+    >;
+    await Promise.all(
+      moduleImports.map(name => {
+        if (isMissingPackage(name)) {
+          return Promise.resolve();
+        } else {
+          importLogger.debug('missing package', name);
+          return setupPluginCode(baseUrl, pluginName, name);
+        }
+      })
+    );
+    const code = await fetch(
+      `${baseUrl}/${filename.replace(/^\.\//, '')}`
+    ).then(res => res.text());
+    importLogger.debug('evaluating', filename);
+    const moduleCompartment = new Compartment(
+      createOrGetGlobalThis(
+        pluginName,
+        // use singleton here to avoid infinite loop
+        createOrGetDynamicImport(baseUrl, pluginName)
+      )
+    );
+    const entryPoint = moduleCompartment.evaluate(code, {
+      __evadeHtmlCommentTest__: true,
+    });
+    const moduleExportsMap = new Map<string, any>();
+    const setVarProxy = new Proxy(
+      {},
+      {
+        get(_, p: string): any {
+          return (newValue: any) => {
+            moduleExportsMap.set(p, newValue);
+          };
+        },
+      }
+    );
+    currentImportMap.set(filename, moduleExportsMap);
+    entryPoint({
+      imports: createImports(pluginName),
+      liveVar: setVarProxy,
+      onceVar: setVarProxy,
+    });
+
+    for (const [newExport, [originalExport]] of Object.entries(moduleExports)) {
+      if (newExport === originalExport) continue;
+      const value = moduleExportsMap.get(originalExport);
+      moduleExportsMap.set(newExport, value);
+      moduleExportsMap.delete(originalExport);
+    }
+
+    for (const [name, reexports] of Object.entries(moduleReexports)) {
+      const targetExports = currentImportMap.get(filename);
+      const moduleExports = currentImportMap.get(name);
+      assertExists(targetExports);
+      assertExists(moduleExports);
+      for (const [exportedName, localName] of reexports) {
+        const exportedValue: any = moduleExports.get(exportedName);
+        assertExists(exportedValue);
+        targetExports.set(localName, exportedValue);
+      }
+    }
+  };
+
+  const PluginProvider = ({ children }: PropsWithChildren) =>
+    createElement(
+      Provider,
+      {
+        store: rootStore,
+      },
+      children
+    );
+
+  const evaluatePluginEntry = (pluginName: string) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const currentImportMap = _pluginNestedImportsMap.get(pluginName)!;
+    const pluginExports = currentImportMap.get('index.js');
+    assertExists(pluginExports);
+    const entryFunction = pluginExports.get('entry');
+    const cleanup = entryFunction(<PluginContext>{
+      register: (part, callback) => {
+        entryLogger.info(`Registering ${pluginName} to ${part}`);
+        if (part === 'headerItem') {
+          rootStore.set(pluginHeaderItemAtom, items => ({
+            ...items,
+            [pluginName]: callback as CallbackMap['headerItem'],
+          }));
+          addCleanup(pluginName, () => {
+            rootStore.set(pluginHeaderItemAtom, items => {
+              const newItems = { ...items };
+              delete newItems[pluginName];
+              return newItems;
+            });
+          });
+        } else if (part === 'editor') {
+          rootStore.set(pluginEditorAtom, items => ({
+            ...items,
+            [pluginName]: callback as CallbackMap['editor'],
+          }));
+          addCleanup(pluginName, () => {
+            rootStore.set(pluginEditorAtom, items => {
+              const newItems = { ...items };
+              delete newItems[pluginName];
+              return newItems;
+            });
+          });
+        } else if (part === 'setting') {
+          rootStore.set(pluginSettingAtom, items => ({
+            ...items,
+            [pluginName]: callback as CallbackMap['setting'],
+          }));
+          addCleanup(pluginName, () => {
+            rootStore.set(pluginSettingAtom, items => {
+              const newItems = { ...items };
+              delete newItems[pluginName];
+              return newItems;
+            });
+          });
+        } else if (part === 'formatBar') {
+          const register = (widget: AffineFormatBarWidget) => {
+            const div = document.createElement('div');
+            const root = widget.root;
+            const cleanup = (callback as CallbackMap['formatBar'])(
+              div,
+              widget.page,
+              () => {
+                return root.selection.value;
+              }
+            );
+            addCleanup(pluginName, () => {
+              AffineFormatBarWidget.customElements.delete(register);
+              cleanup();
+            });
+            return div;
+          };
+          AffineFormatBarWidget.customElements.add(register);
+        } else {
+          throw new Error(`Unknown part: ${part}`);
+        }
+      },
+      utils: {
+        PluginProvider,
+      },
+    });
+    if (typeof cleanup !== 'function') {
+      throw new Error('Plugin entry must return a function');
+    }
+    addCleanup(pluginName, cleanup);
+  };
+  return {
+    _rootImportsMap,
+    _pluginNestedImportsMap,
+    createImports,
+    createOrGetDynamicImport,
+    setupPluginCode,
+    evaluatePluginEntry,
+    createOrGetGlobalThis,
+  };
+}

packages/frontend/core/src/bootstrap/register-plugins.ts

@@ -0,0 +1,134 @@
+import { DebugLogger } from '@affine/debug';
+import {
+  builtinPluginPaths,
+  enabledPluginAtom,
+  invokeCleanup,
+  pluginPackageJson,
+} from '@toeverything/infra/__internal__/plugin';
+import {
+  getCurrentStore,
+  loadedPluginNameAtom,
+} from '@toeverything/infra/atom';
+import { packageJsonOutputSchema } from '@toeverything/infra/type';
+import type { z } from 'zod';
+
+import { createSetup } from './plugins/setup';
+
+const logger = new DebugLogger('register-plugins');
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __pluginPackageJson__: unknown[];
+}
+
+Object.defineProperty(globalThis, '__pluginPackageJson__', {
+  get() {
+    return getCurrentStore().get(pluginPackageJson);
+  },
+});
+
+export async function bootstrapPluginSystem(
+  rootStore: ReturnType<typeof getCurrentStore>
+) {
+  const { evaluatePluginEntry, setupPluginCode } = createSetup(rootStore);
+  rootStore.sub(enabledPluginAtom, () => {
+    const added = new Set<string>();
+    const removed = new Set<string>();
+    const enabledPlugin = new Set(rootStore.get(enabledPluginAtom));
+    enabledPlugin.forEach(pluginName => {
+      if (!enabledPluginSet.has(pluginName)) {
+        added.add(pluginName);
+      }
+    });
+    enabledPluginSet.forEach(pluginName => {
+      if (!enabledPlugin.has(pluginName)) {
+        removed.add(pluginName);
+      }
+    });
+    // update plugins
+    enabledPluginSet.clear();
+    enabledPlugin.forEach(pluginName => {
+      enabledPluginSet.add(pluginName);
+    });
+    added.forEach(pluginName => {
+      evaluatePluginEntry(pluginName);
+    });
+    removed.forEach(pluginName => {
+      invokeCleanup(pluginName);
+    });
+  });
+  const enabledPluginSet = new Set(rootStore.get(enabledPluginAtom));
+  const loadedAssets = new Set<string>();
+
+  // we will load all plugins in parallel from builtinPlugins
+  return Promise.all(
+    [...builtinPluginPaths].map(url => {
+      return fetch(`${url}/package.json`)
+        .then(async res => {
+          const packageJson = (await res.json()) as z.infer<
+            typeof packageJsonOutputSchema
+          >;
+          packageJsonOutputSchema.parse(packageJson);
+          const {
+            name: pluginName,
+            affinePlugin: {
+              release,
+              entry: { core },
+              assets,
+            },
+          } = packageJson;
+          rootStore.set(pluginPackageJson, json => [...json, packageJson]);
+          logger.debug(`registering plugin ${pluginName}`);
+          logger.debug(`package.json: ${packageJson}`);
+          if (!release && !runtimeConfig.enablePlugin) {
+            return Promise.resolve();
+          }
+          const baseURL = url;
+          const entryURL = `${baseURL}/${core}`;
+          rootStore.set(loadedPluginNameAtom, prev => [...prev, pluginName]);
+          await setupPluginCode(baseURL, pluginName, core);
+          console.log(`prepareImports for ${pluginName} done`);
+          await fetch(entryURL).then(async () => {
+            if (assets.length > 0) {
+              await Promise.all(
+                assets.map(async (asset: string) => {
+                  const loadedAssetName = `${pluginName}_${asset}`;
+                  // todo(himself65): add assets into shadow dom
+                  if (loadedAssets.has(loadedAssetName)) {
+                    return Promise.resolve();
+                  }
+                  if (asset.endsWith('.css')) {
+                    loadedAssets.add(loadedAssetName);
+                    const res = await fetch(`${baseURL}/${asset}`);
+                    if (res.ok) {
+                      // todo: how to put css file into sandbox?
+                      return res.text().then(text => {
+                        const style = document.createElement('style');
+                        style.setAttribute('plugin-id', pluginName);
+                        style.textContent = text;
+                        document.head.appendChild(style);
+                      });
+                    }
+                    return null;
+                  } else {
+                    return Promise.resolve();
+                  }
+                })
+              );
+            }
+            if (!enabledPluginSet.has(pluginName)) {
+              logger.debug(`plugin ${pluginName} is not enabled`);
+            } else {
+              logger.debug(`plugin ${pluginName} is enabled`);
+              evaluatePluginEntry(pluginName);
+            }
+          });
+        })
+        .catch(e => {
+          console.error(`error when fetch plugin from ${url}`, e);
+        });
+    })
+  ).then(() => {
+    console.info('All plugins loaded');
+  });
+}

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

@@ -0,0 +1,166 @@
+import { setupGlobal } from '@affine/env/global';
+import type { WorkspaceAdapter } from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import {
+  type RootWorkspaceMetadataV2,
+  rootWorkspacesMetadataAtom,
+  workspaceAdaptersAtom,
+} from '@affine/workspace/atom';
+import {
+  getOrCreateWorkspace,
+  globalBlockSuiteSchema,
+} from '@affine/workspace/manager';
+import { assertExists } from '@blocksuite/global/utils';
+import {
+  migrateLocalBlobStorage,
+  migrateWorkspace,
+  WorkspaceVersion,
+} from '@toeverything/infra/blocksuite';
+import { downloadBinary, overwriteBinary } from '@toeverything/y-indexeddb';
+import type { createStore } from 'jotai/vanilla';
+import { nanoid } from 'nanoid';
+import { applyUpdate, Doc as YDoc, encodeStateAsUpdate } from 'yjs';
+
+import { WorkspaceAdapters } from '../adapters/workspace';
+
+async function tryMigration() {
+  const value = localStorage.getItem('jotai-workspaces');
+  if (value) {
+    try {
+      const metadata = JSON.parse(value) as RootWorkspaceMetadata[];
+      const promises: Promise<void>[] = [];
+      const newMetadata = [...metadata];
+      metadata.forEach(oldMeta => {
+        if (oldMeta.flavour === WorkspaceFlavour.LOCAL) {
+          let doc: YDoc;
+          const options = {
+            getCurrentRootDoc: async () => {
+              doc = new YDoc({
+                guid: oldMeta.id,
+              });
+              const downloadWorkspace = async (doc: YDoc): Promise<void> => {
+                const binary = await downloadBinary(doc.guid);
+                if (binary) {
+                  applyUpdate(doc, binary);
+                }
+                await Promise.all(
+                  [...doc.subdocs.values()].map(subdoc =>
+                    downloadWorkspace(subdoc)
+                  )
+                );
+              };
+              await downloadWorkspace(doc);
+              return doc;
+            },
+            createWorkspace: async () =>
+              getOrCreateWorkspace(nanoid(), WorkspaceFlavour.LOCAL),
+            getSchema: () => globalBlockSuiteSchema,
+          };
+          promises.push(
+            migrateWorkspace(
+              'version' in oldMeta ? oldMeta.version : undefined,
+              options
+            ).then(async status => {
+              if (typeof status !== 'boolean') {
+                const adapter = WorkspaceAdapters[oldMeta.flavour];
+                const oldWorkspace = await adapter.CRUD.get(oldMeta.id);
+                const newId = await adapter.CRUD.create(status);
+                assertExists(
+                  oldWorkspace,
+                  'workspace should exist after migrate'
+                );
+                await adapter.CRUD.delete(oldWorkspace.blockSuiteWorkspace);
+                const index = newMetadata.findIndex(
+                  meta => meta.id === oldMeta.id
+                );
+                newMetadata[index] = {
+                  ...oldMeta,
+                  id: newId,
+                  version: WorkspaceVersion.Surface,
+                };
+                await migrateLocalBlobStorage(status.id, newId);
+                console.log('workspace migrated', oldMeta.id, newId);
+              } else if (status) {
+                const index = newMetadata.findIndex(
+                  meta => meta.id === oldMeta.id
+                );
+                newMetadata[index] = {
+                  ...oldMeta,
+                  version: WorkspaceVersion.Surface,
+                };
+                const overWrite = async (doc: YDoc): Promise<void> => {
+                  await overwriteBinary(doc.guid, encodeStateAsUpdate(doc));
+                  return Promise.all(
+                    [...doc.subdocs.values()].map(subdoc => overWrite(subdoc))
+                  ).then();
+                };
+                await overWrite(doc);
+                console.log('workspace migrated', oldMeta.id);
+              }
+            })
+          );
+        }
+      });
+
+      await Promise.all(promises)
+        .then(() => {
+          console.log('migration done');
+        })
+        .catch(e => {
+          console.error('migration failed', e);
+        })
+        .finally(() => {
+          localStorage.setItem('jotai-workspaces', JSON.stringify(newMetadata));
+          window.dispatchEvent(new CustomEvent('migration-done'));
+          window.$migrationDone = true;
+        });
+    } catch (e) {
+      console.error('error when migrating data', e);
+    }
+  }
+}
+
+export function createFirstAppData(store: ReturnType<typeof createStore>) {
+  const createFirst = (): RootWorkspaceMetadataV2[] => {
+    const Plugins = Object.values(WorkspaceAdapters).sort(
+      (a, b) => a.loadPriority - b.loadPriority
+    );
+
+    return Plugins.flatMap(Plugin => {
+      return Plugin.Events['app:init']?.().map(
+        id =>
+          <RootWorkspaceMetadataV2>{
+            id,
+            flavour: Plugin.flavour,
+            version: WorkspaceVersion.DatabaseV3,
+          }
+      );
+    }).filter((ids): ids is RootWorkspaceMetadataV2 => !!ids);
+  };
+  if (localStorage.getItem('is-first-open') !== null) {
+    return;
+  }
+  const result = createFirst();
+  console.info('create first workspace', result);
+  localStorage.setItem('is-first-open', 'false');
+  store.set(rootWorkspacesMetadataAtom, result);
+}
+
+export async function setup(store: ReturnType<typeof createStore>) {
+  store.set(
+    workspaceAdaptersAtom,
+    WorkspaceAdapters as Record<
+      WorkspaceFlavour,
+      WorkspaceAdapter<WorkspaceFlavour>
+    >
+  );
+
+  console.log('setup global');
+  setupGlobal();
+
+  await tryMigration();
+  // do not read `rootWorkspacesMetadataAtom` before migration
+  await store.get(rootWorkspacesMetadataAtom);
+  console.log('setup done');
+}

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

@@ -0,0 +1,78 @@
+import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ImportIcon, PlusIcon } from '@blocksuite/icons';
+import { registerAffineCommand } from '@toeverything/infra/command';
+import type { createStore } from 'jotai';
+
+import { openCreateWorkspaceModalAtom } from '../atoms';
+import type { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
+
+export function registerAffineCreationCommands({
+  store,
+  pageHelper,
+  t,
+}: {
+  t: ReturnType<typeof useAFFiNEI18N>;
+  store: ReturnType<typeof createStore>;
+  pageHelper: ReturnType<typeof usePageHelper>;
+}) {
+  const unsubs: Array<() => void> = [];
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:new-page',
+      category: 'affine:creation',
+      label: t['com.affine.cmdk.affine.new-page'],
+      icon: <PlusIcon />,
+      keyBinding: environment.isDesktop
+        ? {
+            binding: '$mod+N',
+            skipRegister: true,
+          }
+        : undefined,
+      run() {
+        pageHelper.createPage();
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:new-edgeless-page',
+      category: 'affine:creation',
+      icon: <PlusIcon />,
+      label: t['com.affine.cmdk.affine.new-edgeless-page'],
+      run() {
+        pageHelper.createEdgeless();
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:new-workspace',
+      category: 'affine:creation',
+      icon: <PlusIcon />,
+      label: t['com.affine.cmdk.affine.new-workspace'],
+      run() {
+        store.set(openCreateWorkspaceModalAtom, 'new');
+      },
+    })
+  );
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:import-workspace',
+      category: 'affine:creation',
+      icon: <ImportIcon />,
+      label: t['com.affine.cmdk.affine.import-workspace'],
+      preconditionStrategy: () => {
+        return environment.isDesktop;
+      },
+      run() {
+        store.set(openCreateWorkspaceModalAtom, 'add');
+      },
+    })
+  );
+
+  return () => {
+    unsubs.forEach(unsub => unsub());
+  };
+}

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

@@ -0,0 +1,58 @@
+import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ContactWithUsIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
+import { registerAffineCommand } from '@toeverything/infra/command';
+import type { createStore } from 'jotai';
+
+import { openOnboardingModalAtom, openSettingModalAtom } from '../atoms';
+
+export function registerAffineHelpCommands({
+  t,
+  store,
+}: {
+  t: ReturnType<typeof useAFFiNEI18N>;
+  store: ReturnType<typeof createStore>;
+}) {
+  const unsubs: Array<() => void> = [];
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:help-whats-new',
+      category: 'affine:help',
+      icon: <NewIcon />,
+      label: () => t['com.affine.cmdk.affine.whats-new'](),
+      run() {
+        window.open(runtimeConfig.changelogUrl, '_blank');
+      },
+    })
+  );
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:help-contact-us',
+      category: 'affine:help',
+      icon: <ContactWithUsIcon />,
+      label: () => t['com.affine.cmdk.affine.contact-us'](),
+      run() {
+        store.set(openSettingModalAtom, {
+          open: true,
+          activeTab: 'about',
+          workspaceId: null,
+        });
+      },
+    })
+  );
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:help-getting-started',
+      category: 'affine:help',
+      icon: <UserGuideIcon />,
+      label: () => t['com.affine.cmdk.affine.getting-started'](),
+      preconditionStrategy: () => environment.isDesktop,
+      run() {
+        store.set(openOnboardingModalAtom, true);
+      },
+    })
+  );
+
+  return () => {
+    unsubs.forEach(unsub => unsub());
+  };
+}

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

@@ -0,0 +1,40 @@
+import { appSidebarOpenAtom } from '@affine/component/app-sidebar';
+import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SidebarIcon } from '@blocksuite/icons';
+import { registerAffineCommand } from '@toeverything/infra/command';
+import type { createStore } from 'jotai';
+
+export function registerAffineLayoutCommands({
+  t,
+  store,
+}: {
+  t: ReturnType<typeof useAFFiNEI18N>;
+  store: ReturnType<typeof createStore>;
+}) {
+  const unsubs: Array<() => void> = [];
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:toggle-left-sidebar',
+      category: 'affine:layout',
+      icon: <SidebarIcon />,
+      label: () => {
+        const open = store.get(appSidebarOpenAtom);
+        return t[
+          open
+            ? 'com.affine.cmdk.affine.left-sidebar.collapse'
+            : 'com.affine.cmdk.affine.left-sidebar.expand'
+        ]();
+      },
+      keyBinding: {
+        binding: '$mod+/',
+      },
+      run() {
+        store.set(appSidebarOpenAtom, v => !v);
+      },
+    })
+  );
+
+  return () => {
+    unsubs.forEach(unsub => unsub());
+  };
+}

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

@@ -0,0 +1,120 @@
+import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ArrowRightBigIcon } from '@blocksuite/icons';
+import type { Workspace } from '@blocksuite/store';
+import { registerAffineCommand } from '@toeverything/infra/command';
+import type { createStore } from 'jotai';
+
+import {
+  openSettingModalAtom,
+  openWorkspaceListModalAtom,
+  type PageModeOption,
+} from '../atoms';
+import type { useNavigateHelper } from '../hooks/use-navigate-helper';
+import { WorkspaceSubPath } from '../shared';
+
+export function registerAffineNavigationCommands({
+  t,
+  store,
+  workspace,
+  navigationHelper,
+  pageListMode,
+  setPageListMode,
+}: {
+  t: ReturnType<typeof useAFFiNEI18N>;
+  store: ReturnType<typeof createStore>;
+  navigationHelper: ReturnType<typeof useNavigateHelper>;
+  pageListMode: PageModeOption;
+  setPageListMode: React.Dispatch<React.SetStateAction<PageModeOption>>;
+  workspace: Workspace;
+}) {
+  const unsubs: Array<() => void> = [];
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:goto-all-pages',
+      category: 'affine:navigation',
+      icon: <ArrowRightBigIcon />,
+      label: () => t['com.affine.cmdk.affine.navigation.goto-all-pages'](),
+      run() {
+        navigationHelper.jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
+        setPageListMode('all');
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:goto-page-list',
+      category: 'affine:navigation',
+      icon: <ArrowRightBigIcon />,
+      preconditionStrategy: () => {
+        return pageListMode !== 'page';
+      },
+      label: () => t['com.affine.cmdk.affine.navigation.goto-page-list'](),
+      run() {
+        navigationHelper.jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
+        setPageListMode('page');
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:goto-edgeless-list',
+      category: 'affine:navigation',
+      icon: <ArrowRightBigIcon />,
+      preconditionStrategy: () => {
+        return pageListMode !== 'edgeless';
+      },
+      label: () => t['com.affine.cmdk.affine.navigation.goto-edgeless-list'](),
+      run() {
+        navigationHelper.jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
+        setPageListMode('edgeless');
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:goto-workspace',
+      category: 'affine:navigation',
+      icon: <ArrowRightBigIcon />,
+      label: () => t['com.affine.cmdk.affine.navigation.goto-workspace'](),
+      run() {
+        store.set(openWorkspaceListModalAtom, true);
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:open-settings',
+      category: 'affine:navigation',
+      icon: <ArrowRightBigIcon />,
+      label: () => t['com.affine.cmdk.affine.navigation.open-settings'](),
+      run() {
+        store.set(openSettingModalAtom, {
+          activeTab: 'appearance',
+          workspaceId: null,
+          open: true,
+        });
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:goto-trash',
+      category: 'affine:navigation',
+      icon: <ArrowRightBigIcon />,
+      label: () => t['com.affine.cmdk.affine.navigation.goto-trash'](),
+      run() {
+        navigationHelper.jumpToSubPath(workspace.id, WorkspaceSubPath.TRASH);
+        setPageListMode('all');
+      },
+    })
+  );
+
+  return () => {
+    unsubs.forEach(unsub => unsub());
+  };
+}

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

@@ -0,0 +1,341 @@
+import { Trans } from '@affine/i18n';
+import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { SettingsIcon } from '@blocksuite/icons';
+import {
+  PreconditionStrategy,
+  registerAffineCommand,
+} from '@toeverything/infra/command';
+import { type createStore, useAtomValue } from 'jotai';
+import type { useTheme } from 'next-themes';
+
+import { openQuickSearchModalAtom } from '../atoms';
+import { appSettingAtom } from '../atoms/settings';
+import type { useLanguageHelper } from '../hooks/affine/use-language-helper';
+
+// todo - find a better way to abstract the following translations components
+const ClientBorderStyleLabel = () => {
+  const { clientBorder } = useAtomValue(appSettingAtom);
+  return (
+    <Trans
+      i18nKey="com.affine.cmdk.affine.client-border-style.to"
+      values={{
+        state: clientBorder ? 'OFF' : 'ON',
+      }}
+    >
+      Change Client Border Style to
+      <strong>state</strong>
+    </Trans>
+  );
+};
+
+const FullWidthLayoutLabel = () => {
+  const { fullWidthLayout } = useAtomValue(appSettingAtom);
+  return (
+    <Trans
+      i18nKey="com.affine.cmdk.affine.full-width-layout.to"
+      values={{
+        state: fullWidthLayout ? 'OFF' : 'ON',
+      }}
+    >
+      Change Full Width Layout to
+      <strong>state</strong>
+    </Trans>
+  );
+};
+
+const NoisyBackgroundLabel = () => {
+  const { enableNoisyBackground } = useAtomValue(appSettingAtom);
+  return (
+    <Trans
+      i18nKey="com.affine.cmdk.affine.noise-background-on-the-sidebar.to"
+      values={{
+        state: enableNoisyBackground ? 'OFF' : 'ON',
+      }}
+    >
+      Change Noise Background On The Sidebar to <strong>state</strong>
+    </Trans>
+  );
+};
+
+const BlurBackgroundLabel = () => {
+  const { enableBlurBackground } = useAtomValue(appSettingAtom);
+  return (
+    <Trans
+      i18nKey="com.affine.cmdk.affine.translucent-ui-on-the-sidebar.to"
+      values={{
+        state: enableBlurBackground ? 'OFF' : 'ON',
+      }}
+    >
+      Change Translucent UI On The Sidebar to <strong>state</strong>
+    </Trans>
+  );
+};
+
+export function registerAffineSettingsCommands({
+  t,
+  store,
+  theme,
+  languageHelper,
+}: {
+  t: ReturnType<typeof useAFFiNEI18N>;
+  store: ReturnType<typeof createStore>;
+  theme: ReturnType<typeof useTheme>;
+  languageHelper: ReturnType<typeof useLanguageHelper>;
+}) {
+  const unsubs: Array<() => void> = [];
+  const { onSelect, languagesList, currentLanguage } = languageHelper;
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:show-quick-search',
+      preconditionStrategy: PreconditionStrategy.Never,
+      category: 'affine:general',
+      keyBinding: {
+        binding: '$mod+K',
+      },
+      icon: <SettingsIcon />,
+      run() {
+        const quickSearchModalState = store.get(openQuickSearchModalAtom);
+        store.set(openQuickSearchModalAtom, !quickSearchModalState);
+      },
+    })
+  );
+
+  // color schemes
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:change-color-scheme-to-auto',
+      label: (
+        <Trans
+          i18nKey="com.affine.cmdk.affine.color-scheme.to"
+          values={{ colour: 'Auto' }}
+        >
+          Change Colour Scheme to <strong>colour</strong>
+        </Trans>
+      ),
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () => theme.theme !== 'system',
+      run() {
+        theme.setTheme('system');
+      },
+    })
+  );
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:change-color-scheme-to-dark',
+      label: (
+        <Trans
+          i18nKey="com.affine.cmdk.affine.color-scheme.to"
+          values={{ colour: 'Dark' }}
+        >
+          Change Colour Scheme to <strong>colour</strong>
+        </Trans>
+      ),
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () => theme.theme !== 'dark',
+      run() {
+        theme.setTheme('dark');
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:change-color-scheme-to-light',
+      label: (
+        <Trans
+          i18nKey="com.affine.cmdk.affine.color-scheme.to"
+          values={{ colour: 'Light' }}
+        >
+          Change Colour Scheme to <strong>colour</strong>
+        </Trans>
+      ),
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () => theme.theme !== 'light',
+      run() {
+        theme.setTheme('light');
+      },
+    })
+  );
+
+  //Font styles
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:change-font-style-to-sans',
+      label: (
+        <Trans
+          i18nKey="com.affine.cmdk.affine.font-style.to"
+          values={{
+            fontFamily: t['com.affine.appearanceSettings.fontStyle.sans'](),
+          }}
+        >
+          Change Font Style to <strong>fontFamily</strong>
+        </Trans>
+      ),
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () =>
+        store.get(appSettingAtom).fontStyle !== 'Sans',
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          fontStyle: 'Sans',
+        }));
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:change-font-style-to-serif',
+      label: (
+        <Trans
+          i18nKey="com.affine.cmdk.affine.font-style.to"
+          values={{
+            fontFamily: t['com.affine.appearanceSettings.fontStyle.serif'](),
+          }}
+        >
+          Change Font Style to
+          <strong style={{ fontFamily: 'var(--affine-font-serif-family)' }}>
+            fontFamily
+          </strong>
+        </Trans>
+      ),
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () =>
+        store.get(appSettingAtom).fontStyle !== 'Serif',
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          fontStyle: 'Serif',
+        }));
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:change-font-style-to-mono',
+      label: (
+        <Trans
+          i18nKey="com.affine.cmdk.affine.font-style.to"
+          values={{
+            fontFamily: t['com.affine.appearanceSettings.fontStyle.mono'](),
+          }}
+        >
+          Change Font Style to
+          <strong style={{ fontFamily: 'var(--affine-font-mono-family)' }}>
+            fontFamily
+          </strong>
+        </Trans>
+      ),
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () =>
+        store.get(appSettingAtom).fontStyle !== 'Mono',
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          fontStyle: 'Mono',
+        }));
+      },
+    })
+  );
+
+  //Display Language
+  languagesList.forEach(language => {
+    unsubs.push(
+      registerAffineCommand({
+        id: `affine:change-display-language-to-${language.name}`,
+        label: (
+          <Trans
+            i18nKey="com.affine.cmdk.affine.display-language.to"
+            values={{
+              language: language.originalName,
+            }}
+          >
+            Change Display Language to
+            <strong>language</strong>
+          </Trans>
+        ),
+        category: 'affine:settings',
+        icon: <SettingsIcon />,
+        preconditionStrategy: () => currentLanguage?.tag !== language.tag,
+        run() {
+          onSelect(language.tag);
+        },
+      })
+    );
+  });
+
+  //Layout Style
+  unsubs.push(
+    registerAffineCommand({
+      id: `affine:change-client-border-style`,
+      label: <ClientBorderStyleLabel />,
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () => environment.isDesktop,
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          clientBorder: !prev.clientBorder,
+        }));
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: `affine:change-full-width-layout`,
+      label: <FullWidthLayoutLabel />,
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          fullWidthLayout: !prev.fullWidthLayout,
+        }));
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: `affine:change-noise-background-on-the-sidebar`,
+      label: <NoisyBackgroundLabel />,
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () => environment.isDesktop,
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          enableNoisyBackground: !prev.enableNoisyBackground,
+        }));
+      },
+    })
+  );
+
+  unsubs.push(
+    registerAffineCommand({
+      id: `affine:change-translucent-ui-on-the-sidebar`,
+      label: <BlurBackgroundLabel />,
+      category: 'affine:settings',
+      icon: <SettingsIcon />,
+      preconditionStrategy: () => environment.isDesktop,
+      run() {
+        store.set(appSettingAtom, prev => ({
+          ...prev,
+          enableBlurBackground: !prev.enableBlurBackground,
+        }));
+      },
+    })
+  );
+
+  return () => {
+    unsubs.forEach(unsub => unsub());
+  };
+}

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

@@ -0,0 +1,35 @@
+import { updateReadyAtom } from '@affine/component/app-sidebar/app-updater-button';
+import type { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ResetIcon } from '@blocksuite/icons';
+import { registerAffineCommand } from '@toeverything/infra/command';
+import type { createStore } from 'jotai';
+
+export function registerAffineUpdatesCommands({
+  t,
+  store,
+}: {
+  t: ReturnType<typeof useAFFiNEI18N>;
+  store: ReturnType<typeof createStore>;
+}) {
+  const unsubs: Array<() => void> = [];
+
+  unsubs.push(
+    registerAffineCommand({
+      id: 'affine:restart-to-upgrade',
+      category: 'affine:updates',
+      icon: <ResetIcon />,
+      label: () => t['com.affine.cmdk.affine.restart-to-upgrade'](),
+      preconditionStrategy: () => !!store.get(updateReadyAtom),
+      run() {
+        window.apis?.updater.quitAndInstall().catch(err => {
+          // TODO: add error toast here
+          console.error(err);
+        });
+      },
+    })
+  );
+
+  return () => {
+    unsubs.forEach(unsub => unsub());
+  };
+}

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

@@ -0,0 +1,6 @@
+export * from './affine-creation';
+export * from './affine-help';
+export * from './affine-layout';
+export * from './affine-navigation';
+export * from './affine-settings';
+export * from './affine-updates';

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

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

packages/frontend/core/src/components/affine/README.md

@@ -0,0 +1,19 @@
+# Affine Official Workspace Component
+
+This component need specific configuration to work properly.
+
+## Configuration
+
+### SWR
+
+Each component use SWR to fetch data from the API. You need to provide a configuration to SWR to make it work.
+
+```tsx
+const Wrapper = () => {
+  return (
+    <AffineSWRConfigProvider>
+      <Component />
+    </AffineSWRConfigProvider>
+  );
+};
+```

packages/frontend/core/src/components/affine/affine-error-eoundary.tsx

@@ -0,0 +1,114 @@
+import type {
+  QueryParamError,
+  Unreachable,
+  WorkspaceNotFoundError,
+} from '@affine/env/constant';
+import { PageNotFoundError } from '@affine/env/constant';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import {
+  currentPageIdAtom,
+  currentWorkspaceIdAtom,
+  getCurrentStore,
+} from '@toeverything/infra/atom';
+import { useAtomValue } from 'jotai/react';
+import { Provider } from 'jotai/react';
+import type { ErrorInfo, ReactElement, ReactNode } from 'react';
+import type React from 'react';
+import { Component } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+export type AffineErrorBoundaryProps = React.PropsWithChildren;
+
+type AffineError =
+  | QueryParamError
+  | Unreachable
+  | WorkspaceNotFoundError
+  | PageNotFoundError
+  | Error;
+
+interface AffineErrorBoundaryState {
+  error: AffineError | null;
+}
+
+export const DumpInfo = () => {
+  const location = useLocation();
+  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
+  const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
+  const currentPageId = useAtomValue(currentPageIdAtom);
+  const path = location.pathname;
+  const query = useParams();
+  return (
+    <>
+      <div>
+        Please copy the following information and send it to the developer.
+      </div>
+      <div
+        style={{
+          border: '1px solid red',
+        }}
+      >
+        <div>path: {path}</div>
+        <div>query: {JSON.stringify(query)}</div>
+        <div>currentWorkspaceId: {currentWorkspaceId}</div>
+        <div>currentPageId: {currentPageId}</div>
+        <div>metadata: {JSON.stringify(metadata)}</div>
+      </div>
+    </>
+  );
+};
+
+export class AffineErrorBoundary extends Component<
+  AffineErrorBoundaryProps,
+  AffineErrorBoundaryState
+> {
+  public override state: AffineErrorBoundaryState = {
+    error: null,
+  };
+
+  public static getDerivedStateFromError(
+    error: AffineError
+  ): AffineErrorBoundaryState {
+    return { error };
+  }
+
+  public override componentDidCatch(error: AffineError, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public override render(): ReactNode {
+    if (this.state.error) {
+      let errorDetail: ReactElement | null = null;
+      const error = this.state.error;
+      if (error instanceof PageNotFoundError) {
+        errorDetail = (
+          <>
+            <h1>Sorry.. there was an error</h1>
+            <>
+              <span> Page error </span>
+              <span>
+                Cannot find page {error.pageId} in workspace{' '}
+                {error.workspace.id}
+              </span>
+            </>
+          </>
+        );
+      } else {
+        errorDetail = (
+          <>
+            <h1>Sorry.. there was an error</h1>
+            {error.message ?? error.toString()}
+          </>
+        );
+      }
+      return (
+        <>
+          {errorDetail}
+          <Provider key="JotaiProvider" store={getCurrentStore()}>
+            <DumpInfo />
+          </Provider>
+        </>
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/frontend/core/src/components/affine/any-error-boundary/index.tsx

@@ -0,0 +1,11 @@
+import type { ReactElement } from 'react';
+import type { FallbackProps } from 'react-error-boundary';
+
+export const AnyErrorBoundary = (props: FallbackProps): ReactElement => {
+  return (
+    <div>
+      <p>Something went wrong:</p>
+      <p>{props.error.toString()}</p>
+    </div>
+  );
+};

packages/frontend/core/src/components/affine/app-container.tsx

@@ -0,0 +1,22 @@
+import {
+  AppContainer as AppContainerWithoutSettings,
+  type WorkspaceRootProps,
+} from '@affine/component/workspace';
+
+import { useAppSetting } from '../../atoms/settings';
+
+export const AppContainer = (props: WorkspaceRootProps) => {
+  const [appSettings] = useAppSetting();
+
+  return (
+    <AppContainerWithoutSettings
+      useNoisyBackground={appSettings.enableNoisyBackground}
+      useBlurBackground={
+        appSettings.enableBlurBackground &&
+        environment.isDesktop &&
+        environment.isMacOs
+      }
+      {...props}
+    />
+  );
+};

packages/frontend/core/src/components/affine/auth/after-sign-in-send-email.tsx

@@ -0,0 +1,100 @@
+import {
+  AuthContent,
+  BackButton,
+  CountDownRender,
+  ModalHeader,
+} from '@affine/component/auth-components';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { useCallback } from 'react';
+
+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
+import type { AuthPanelProps } from './index';
+import * as style from './style.css';
+import { useAuth } from './use-auth';
+import { Captcha, useCaptcha } from './use-captcha';
+
+export const AfterSignInSendEmail = ({
+  setAuthState,
+  email,
+  onSignedIn,
+}: AuthPanelProps) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+  const [verifyToken, challenge] = useCaptcha();
+
+  const { resendCountDown, allowSendEmail, signIn } = useAuth();
+  if (loginStatus === 'authenticated') {
+    onSignedIn?.();
+  }
+
+  const onResendClick = useCallback(async () => {
+    if (verifyToken) {
+      await signIn(email, verifyToken, challenge);
+    }
+  }, [challenge, email, signIn, verifyToken]);
+
+  return (
+    <>
+      <ModalHeader
+        title={t['com.affine.auth.sign.in']()}
+        subTitle={t['com.affine.auth.sign.in.sent.email.subtitle']()}
+      />
+      <AuthContent style={{ height: 100 }}>
+        {t['com.affine.auth.sign.sent.email.message.start']()}
+        <a href={`mailto:${email}`}>{email}</a>
+        {t['com.affine.auth.sign.sent.email.message.end']()}
+      </AuthContent>
+
+      <div className={style.resendWrapper}>
+        {allowSendEmail ? (
+          <>
+            <Captcha />
+            <Button
+              style={!verifyToken ? { cursor: 'not-allowed' } : {}}
+              disabled={!verifyToken}
+              type="plain"
+              size="large"
+              onClick={onResendClick}
+            >
+              {t['com.affine.auth.sign.auth.code.resend.hint']()}
+            </Button>
+          </>
+        ) : (
+          <>
+            <span className="resend-code-hint">
+              {t['com.affine.auth.sign.auth.code.on.resend.hint']()}
+            </span>
+            <CountDownRender
+              className={style.resendCountdown}
+              timeLeft={resendCountDown}
+            />
+          </>
+        )}
+      </div>
+
+      <div className={style.authMessage} style={{ marginTop: 20 }}>
+        {/*prettier-ignore*/}
+        <Trans i18nKey="com.affine.auth.sign.auth.code.message.password">
+          If you haven&apos;t received the email, please check your spam folder.
+          Or <span
+            className="link"
+            data-testid='sign-in-with-password'
+            onClick={useCallback(() => {
+              setAuthState('signInWithPassword');
+            }, [setAuthState])}
+          >
+            sign in with password
+          </span> instead.
+        </Trans>
+      </div>
+
+      <BackButton
+        onClick={useCallback(() => {
+          setAuthState('signIn');
+        }, [setAuthState])}
+      />
+    </>
+  );
+};

packages/frontend/core/src/components/affine/auth/after-sign-up-send-email.tsx

@@ -0,0 +1,88 @@
+import {
+  AuthContent,
+  BackButton,
+  CountDownRender,
+  ModalHeader,
+} from '@affine/component/auth-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { type FC, useCallback } from 'react';
+
+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
+import type { AuthPanelProps } from './index';
+import * as style from './style.css';
+import { useAuth } from './use-auth';
+import { Captcha, useCaptcha } from './use-captcha';
+
+export const AfterSignUpSendEmail: FC<AuthPanelProps> = ({
+  setAuthState,
+  email,
+  onSignedIn,
+}) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+  const [verifyToken, challenge] = useCaptcha();
+
+  const { resendCountDown, allowSendEmail, signUp } = useAuth();
+
+  if (loginStatus === 'authenticated') {
+    onSignedIn?.();
+  }
+
+  const onResendClick = useCallback(async () => {
+    if (verifyToken) {
+      await signUp(email, verifyToken, challenge);
+    }
+  }, [challenge, email, signUp, verifyToken]);
+
+  return (
+    <>
+      <ModalHeader
+        title={t['com.affine.auth.sign.up']()}
+        subTitle={t['com.affine.auth.sign.up.sent.email.subtitle']()}
+      />
+      <AuthContent style={{ height: 100 }}>
+        {t['com.affine.auth.sign.sent.email.message.start']()}
+        <a href={`mailto:${email}`}>{email}</a>
+        {t['com.affine.auth.sign.sent.email.message.end']()}
+      </AuthContent>
+
+      <div className={style.resendWrapper}>
+        {allowSendEmail ? (
+          <>
+            <Captcha />
+            <Button
+              style={!verifyToken ? { cursor: 'not-allowed' } : {}}
+              disabled={!verifyToken}
+              type="plain"
+              size="large"
+              onClick={onResendClick}
+            >
+              {t['com.affine.auth.sign.auth.code.resend.hint']()}
+            </Button>
+          </>
+        ) : (
+          <>
+            <span className="resend-code-hint">
+              {t['com.affine.auth.sign.auth.code.on.resend.hint']()}
+            </span>
+            <CountDownRender
+              className={style.resendCountdown}
+              timeLeft={resendCountDown}
+            />
+          </>
+        )}
+      </div>
+
+      <div className={style.authMessage} style={{ marginTop: 20 }}>
+        {t['com.affine.auth.sign.auth.code.message']()}
+      </div>
+
+      <BackButton
+        onClick={useCallback(() => {
+          setAuthState('signIn');
+        }, [setAuthState])}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,103 @@
+import {
+  AuthModal as AuthModalBase,
+  type AuthModalProps as AuthModalBaseProps,
+} from '@affine/component/auth-components';
+import { type FC, useCallback, useMemo } from 'react';
+
+import { AfterSignInSendEmail } from './after-sign-in-send-email';
+import { AfterSignUpSendEmail } from './after-sign-up-send-email';
+import { NoAccess } from './no-access';
+import { SendEmail } from './send-email';
+import { SignIn } from './sign-in';
+import { SignInWithPassword } from './sign-in-with-password';
+
+export type AuthProps = {
+  state:
+    | 'signIn'
+    | 'afterSignUpSendEmail'
+    | 'afterSignInSendEmail'
+    // throw away
+    | 'signInWithPassword'
+    | 'sendEmail'
+    | 'noAccess';
+  setAuthState: (state: AuthProps['state']) => void;
+  setAuthEmail: (state: AuthProps['email']) => void;
+  setEmailType: (state: AuthProps['emailType']) => void;
+  email: string;
+  emailType: 'setPassword' | 'changePassword' | 'changeEmail';
+  onSignedIn?: () => void;
+};
+
+export type AuthPanelProps = {
+  email: string;
+  setAuthState: AuthProps['setAuthState'];
+  setAuthEmail: AuthProps['setAuthEmail'];
+  setEmailType: AuthProps['setEmailType'];
+  emailType: AuthProps['emailType'];
+  onSignedIn?: () => void;
+};
+
+const config: {
+  [k in AuthProps['state']]: FC<AuthPanelProps>;
+} = {
+  signIn: SignIn,
+  afterSignUpSendEmail: AfterSignUpSendEmail,
+  afterSignInSendEmail: AfterSignInSendEmail,
+  signInWithPassword: SignInWithPassword,
+  sendEmail: SendEmail,
+  noAccess: NoAccess,
+};
+
+export const AuthModal: FC<AuthModalBaseProps & AuthProps> = ({
+  open,
+  state,
+  setOpen,
+  email,
+  setAuthEmail,
+  setAuthState,
+  setEmailType,
+  emailType,
+}) => {
+  const onSignedIn = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <AuthModalBase open={open} setOpen={setOpen}>
+      <AuthPanel
+        state={state}
+        email={email}
+        setAuthEmail={setAuthEmail}
+        setAuthState={setAuthState}
+        setEmailType={setEmailType}
+        emailType={emailType}
+        onSignedIn={onSignedIn}
+      />
+    </AuthModalBase>
+  );
+};
+
+export const AuthPanel: FC<AuthProps> = ({
+  state,
+  email,
+  setAuthEmail,
+  setAuthState,
+  setEmailType,
+  emailType,
+  onSignedIn,
+}) => {
+  const CurrentPanel = useMemo(() => {
+    return config[state];
+  }, [state]);
+
+  return (
+    <CurrentPanel
+      email={email}
+      setAuthState={setAuthState}
+      setAuthEmail={setAuthEmail}
+      setEmailType={setEmailType}
+      emailType={emailType}
+      onSignedIn={onSignedIn}
+    />
+  );
+};

packages/frontend/core/src/components/affine/auth/no-access.tsx

@@ -0,0 +1,53 @@
+import {
+  AuthContent,
+  BackButton,
+  ModalHeader,
+} from '@affine/component/auth-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { NewIcon } from '@blocksuite/icons';
+import { type FC, useCallback } from 'react';
+
+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
+import type { AuthPanelProps } from './index';
+import * as style from './style.css';
+
+export const NoAccess: FC<AuthPanelProps> = ({ setAuthState, onSignedIn }) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+
+  if (loginStatus === 'authenticated') {
+    onSignedIn?.();
+  }
+
+  return (
+    <>
+      <ModalHeader
+        title={t['com.affine.brand.affineCloud']()}
+        subTitle={t['Early Access Stage']()}
+      />
+      <AuthContent style={{ height: 162 }}>
+        {t['com.affine.auth.sign.no.access.hint']()}
+        <a href="https://community.affine.pro/c/insider-general/">
+          {t['com.affine.auth.sign.no.access.link']()}
+        </a>
+      </AuthContent>
+
+      <div className={style.accessMessage}>
+        <NewIcon
+          style={{
+            fontSize: 16,
+            marginRight: 4,
+            color: 'var(--affine-icon-color)',
+          }}
+        />
+        {t['com.affine.auth.sign.no.access.wait']()}
+      </div>
+
+      <BackButton
+        onClick={useCallback(() => {
+          setAuthState('signIn');
+        }, [setAuthState])}
+      />
+    </>
+  );
+};

packages/frontend/core/src/components/affine/auth/send-email.tsx

@@ -0,0 +1,201 @@
+import { Wrapper } from '@affine/component';
+import {
+  AuthContent,
+  AuthInput,
+  BackButton,
+  ModalHeader,
+} from '@affine/component/auth-components';
+import { pushNotificationAtom } from '@affine/component/notification-center';
+import {
+  sendChangeEmailMutation,
+  sendChangePasswordEmailMutation,
+  sendSetPasswordEmailMutation,
+} from '@affine/graphql';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useMutation } from '@affine/workspace/affine/gql';
+import { Button } from '@toeverything/components/button';
+import { useSetAtom } from 'jotai/react';
+import { useCallback, useState } from 'react';
+
+import type { AuthPanelProps } from './index';
+
+const useEmailTitle = (emailType: AuthPanelProps['emailType']) => {
+  const t = useAFFiNEI18N();
+
+  switch (emailType) {
+    case 'setPassword':
+      return t['com.affine.auth.set.password']();
+    case 'changePassword':
+      return t['com.affine.auth.reset.password']();
+    case 'changeEmail':
+      return t['com.affine.settings.email.action']();
+  }
+};
+const useContent = (emailType: AuthPanelProps['emailType'], email: string) => {
+  const t = useAFFiNEI18N();
+
+  switch (emailType) {
+    case 'setPassword':
+      return t['com.affine.auth.set.password.message']();
+    case 'changePassword':
+      return t['com.affine.auth.set.password.message']();
+    case 'changeEmail':
+      return t['com.affine.auth.change.email.message']({
+        email,
+      });
+  }
+};
+
+const useNotificationHint = (emailType: AuthPanelProps['emailType']) => {
+  const t = useAFFiNEI18N();
+
+  switch (emailType) {
+    case 'setPassword':
+      return t['com.affine.auth.sent.set.password.hint']();
+    case 'changePassword':
+      return t['com.affine.auth.sent.change.password.hint']();
+    case 'changeEmail':
+      return t['com.affine.auth.sent.change.email.hint']();
+  }
+};
+const useButtonContent = (emailType: AuthPanelProps['emailType']) => {
+  const t = useAFFiNEI18N();
+
+  switch (emailType) {
+    case 'setPassword':
+      return t['com.affine.auth.send.set.password.link']();
+    case 'changePassword':
+      return t['com.affine.auth.send.reset.password.link']();
+    case 'changeEmail':
+      return t['com.affine.auth.send.change.email.link']();
+  }
+};
+
+const useSendEmail = (emailType: AuthPanelProps['emailType']) => {
+  const {
+    trigger: sendChangePasswordEmail,
+    isMutating: isChangePasswordMutating,
+  } = useMutation({
+    mutation: sendChangePasswordEmailMutation,
+  });
+  const { trigger: sendSetPasswordEmail, isMutating: isSetPasswordMutating } =
+    useMutation({
+      mutation: sendSetPasswordEmailMutation,
+    });
+  const { trigger: sendChangeEmail, isMutating: isChangeEmailMutating } =
+    useMutation({
+      mutation: sendChangeEmailMutation,
+    });
+
+  return {
+    loading:
+      isChangePasswordMutating ||
+      isSetPasswordMutating ||
+      isChangeEmailMutating,
+    sendEmail: useCallback(
+      (email: string) => {
+        let trigger: (args: {
+          email: string;
+          callbackUrl: string;
+        }) => Promise<unknown>;
+        let callbackUrl;
+        switch (emailType) {
+          case 'setPassword':
+            trigger = sendSetPasswordEmail;
+            callbackUrl = 'setPassword';
+            break;
+          case 'changePassword':
+            trigger = sendChangePasswordEmail;
+            callbackUrl = 'changePassword';
+            break;
+          case 'changeEmail':
+            trigger = sendChangeEmail;
+            callbackUrl = 'changeEmail';
+            break;
+        }
+        // TODO: add error handler
+        return trigger({
+          email,
+          callbackUrl: `/auth/${callbackUrl}?isClient=${
+            environment.isDesktop ? 'true' : 'false'
+          }`,
+        });
+      },
+      [
+        emailType,
+        sendChangeEmail,
+        sendChangePasswordEmail,
+        sendSetPasswordEmail,
+      ]
+    ),
+  };
+};
+
+export const SendEmail = ({
+  setAuthState,
+  email,
+  emailType,
+}: AuthPanelProps) => {
+  const t = useAFFiNEI18N();
+  const [hasSentEmail, setHasSentEmail] = useState(false);
+  const pushNotification = useSetAtom(pushNotificationAtom);
+
+  const title = useEmailTitle(emailType);
+  const hint = useNotificationHint(emailType);
+  const content = useContent(emailType, email);
+  const buttonContent = useButtonContent(emailType);
+  const { loading, sendEmail } = useSendEmail(emailType);
+
+  const onSendEmail = useCallback(async () => {
+    // TODO: add error handler
+    await sendEmail(email);
+
+    pushNotification({
+      title: hint,
+      message: '',
+      key: Date.now().toString(),
+      type: 'success',
+    });
+    setHasSentEmail(true);
+  }, [email, hint, pushNotification, sendEmail]);
+
+  return (
+    <>
+      <ModalHeader
+        title={t['com.affine.brand.affineCloud']()}
+        subTitle={title}
+      />
+      <AuthContent>{content}</AuthContent>
+
+      <Wrapper
+        marginTop={30}
+        marginBottom={50}
+        style={{
+          position: 'relative',
+        }}
+      >
+        <AuthInput
+          label={t['com.affine.settings.email']()}
+          disabled={true}
+          value={email}
+        />
+      </Wrapper>
+
+      <Button
+        type="primary"
+        size="extraLarge"
+        style={{ width: '100%' }}
+        disabled={hasSentEmail}
+        loading={loading}
+        onClick={onSendEmail}
+      >
+        {hasSentEmail ? t['com.affine.auth.sent']() : buttonContent}
+      </Button>
+      <BackButton
+        onClick={useCallback(() => {
+          setAuthState('signIn');
+        }, [setAuthState])}
+      />
+    </>
+  );
+};

packages/frontend/core/src/components/affine/auth/sign-in-with-password.tsx

@@ -0,0 +1,102 @@
+import { Wrapper } from '@affine/component';
+import {
+  AuthInput,
+  BackButton,
+  ModalHeader,
+} from '@affine/component/auth-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useSession } from 'next-auth/react';
+import type { FC } from 'react';
+import { useCallback, useState } from 'react';
+
+import { signInCloud } from '../../../utils/cloud-utils';
+import type { AuthPanelProps } from './index';
+import { forgetPasswordButton } from './style.css';
+
+export const SignInWithPassword: FC<AuthPanelProps> = ({
+  setAuthState,
+  email,
+  onSignedIn,
+}) => {
+  const t = useAFFiNEI18N();
+  const { update } = useSession();
+
+  const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState(false);
+
+  const onSignIn = useCallback(async () => {
+    const res = await signInCloud('credentials', {
+      redirect: false,
+      email,
+      password,
+    }).catch(console.error);
+
+    if (!res?.ok) {
+      return setPasswordError(true);
+    }
+
+    await update();
+    onSignedIn?.();
+  }, [email, password, onSignedIn, update]);
+
+  return (
+    <>
+      <ModalHeader
+        title={t['com.affine.auth.sign.in']()}
+        subTitle={t['com.affine.brand.affineCloud']()}
+      />
+
+      <Wrapper
+        marginTop={30}
+        marginBottom={50}
+        style={{
+          position: 'relative',
+        }}
+      >
+        <AuthInput
+          label={t['com.affine.settings.email']()}
+          disabled={true}
+          value={email}
+        />
+        <AuthInput
+          data-testid="password-input"
+          label={t['com.affine.auth.password']()}
+          value={password}
+          type="password"
+          onChange={useCallback((value: string) => {
+            setPassword(value);
+          }, [])}
+          error={passwordError}
+          errorHint={t['com.affine.auth.password.error']()}
+          onEnter={onSignIn}
+        />
+        <span></span>
+        <button
+          className={forgetPasswordButton}
+          // onClick={useCallback(() => {
+          //   setAuthState('sendPasswordEmail');
+          // }, [setAuthState])}
+        >
+          {t['com.affine.auth.forget']()}
+        </button>
+      </Wrapper>
+      <Button
+        data-testid="sign-in-button"
+        type="primary"
+        size="extraLarge"
+        style={{ width: '100%' }}
+        onClick={onSignIn}
+      >
+        {t['com.affine.auth.sign.in']()}
+      </Button>
+
+      <BackButton
+        onClick={useCallback(() => {
+          setAuthState('afterSignInSendEmail');
+        }, [setAuthState])}
+      />
+    </>
+  );
+};

packages/frontend/core/src/components/affine/auth/sign-in.tsx

@@ -0,0 +1,194 @@
+import {
+  AuthInput,
+  CountDownRender,
+  ModalHeader,
+} from '@affine/component/auth-components';
+import { type GetUserQuery, getUserQuery } from '@affine/graphql';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useMutation } from '@affine/workspace/affine/gql';
+import { ArrowDownBigIcon, GoogleDuotoneIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
+import { GraphQLError } from 'graphql';
+import { type FC, useState } from 'react';
+import { useCallback } from 'react';
+
+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
+import { emailRegex } from '../../../utils/email-regex';
+import type { AuthPanelProps } from './index';
+import * as style from './style.css';
+import { INTERNAL_BETA_URL, useAuth } from './use-auth';
+import { Captcha, useCaptcha } from './use-captcha';
+
+function validateEmail(email: string) {
+  return emailRegex.test(email);
+}
+
+export const SignIn: FC<AuthPanelProps> = ({
+  setAuthState,
+  setAuthEmail,
+  email,
+  onSignedIn,
+}) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+  const [verifyToken, challenge] = useCaptcha();
+
+  const {
+    isMutating: isSigningIn,
+    resendCountDown,
+    allowSendEmail,
+    signIn,
+    signUp,
+    signInWithGoogle,
+  } = useAuth();
+
+  const { trigger: verifyUser, isMutating } = useMutation({
+    mutation: getUserQuery,
+  });
+  const [isValidEmail, setIsValidEmail] = useState(true);
+
+  if (loginStatus === 'authenticated') {
+    onSignedIn?.();
+  }
+
+  const onContinue = useCallback(async () => {
+    if (!validateEmail(email)) {
+      setIsValidEmail(false);
+      return;
+    }
+
+    setIsValidEmail(true);
+    // 0 for no access for internal beta
+    let user: GetUserQuery['user'] | null | 0 = null;
+    await verifyUser({ email })
+      .then(({ user: u }) => {
+        user = u;
+      })
+      .catch(err => {
+        const e = err?.[0];
+        if (e instanceof GraphQLError && e.extensions?.code === 402) {
+          setAuthState('noAccess');
+          user = 0;
+        } else {
+          throw err;
+        }
+      });
+
+    if (user === 0) {
+      return;
+    }
+    setAuthEmail(email);
+
+    if (verifyToken) {
+      if (user) {
+        const res = await signIn(email, verifyToken, challenge);
+        if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
+          return setAuthState('noAccess');
+        }
+        setAuthState('afterSignInSendEmail');
+      } else {
+        const res = await signUp(email, verifyToken, challenge);
+        if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) {
+          return setAuthState('noAccess');
+        } else if (!res || res.status >= 400 || res.error) {
+          return;
+        }
+        setAuthState('afterSignUpSendEmail');
+      }
+    }
+  }, [
+    challenge,
+    email,
+    setAuthEmail,
+    setAuthState,
+    signIn,
+    signUp,
+    verifyToken,
+    verifyUser,
+  ]);
+
+  return (
+    <>
+      <ModalHeader
+        title={t['com.affine.auth.sign.in']()}
+        subTitle={t['com.affine.brand.affineCloud']()}
+      />
+
+      <Button
+        type="primary"
+        block
+        size="extraLarge"
+        style={{
+          marginTop: 30,
+        }}
+        icon={<GoogleDuotoneIcon />}
+        onClick={useCallback(() => {
+          signInWithGoogle();
+        }, [signInWithGoogle])}
+      >
+        {t['Continue with Google']()}
+      </Button>
+
+      <div className={style.authModalContent}>
+        <AuthInput
+          label={t['com.affine.settings.email']()}
+          placeholder={t['com.affine.auth.sign.email.placeholder']()}
+          value={email}
+          onChange={useCallback(
+            (value: string) => {
+              setAuthEmail(value);
+            },
+            [setAuthEmail]
+          )}
+          error={!isValidEmail}
+          errorHint={
+            isValidEmail ? '' : t['com.affine.auth.sign.email.error']()
+          }
+          onEnter={onContinue}
+        />
+
+        {verifyToken ? null : <Captcha />}
+
+        {verifyToken ? (
+          <Button
+            size="extraLarge"
+            data-testid="continue-login-button"
+            block
+            loading={isMutating || isSigningIn}
+            disabled={!allowSendEmail}
+            icon={
+              allowSendEmail || isMutating ? (
+                <ArrowDownBigIcon
+                  width={20}
+                  height={20}
+                  style={{
+                    transform: 'rotate(-90deg)',
+                    color: 'var(--affine-blue)',
+                  }}
+                />
+              ) : (
+                <CountDownRender
+                  className={style.resendCountdownInButton}
+                  timeLeft={resendCountDown}
+                />
+              )
+            }
+            iconPosition="end"
+            onClick={onContinue}
+          >
+            {t['com.affine.auth.sign.email.continue']()}
+          </Button>
+        ) : null}
+
+        <div className={style.authMessage}>
+          {/*prettier-ignore*/}
+          <Trans i18nKey="com.affine.auth.sign.message">
+              By clicking &quot;Continue with Google/Email&quot; above, you acknowledge that
+              you agree to AFFiNE&apos;s <a href="https://affine.pro/terms" target="_blank" rel="noreferrer">Terms of Conditions</a> and <a href="https://affine.pro/privacy" target="_blank" rel="noreferrer">Privacy Policy</a>.
+          </Trans>
+        </div>
+      </div>
+    </>
+  );
+};

packages/frontend/core/src/components/affine/auth/style.css.ts

@@ -0,0 +1,64 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const authModalContent = style({
+  marginTop: '30px',
+});
+
+export const captchaWrapper = style({
+  margin: 'auto',
+  marginBottom: '4px',
+  textAlign: 'center',
+});
+
+export const authMessage = style({
+  marginTop: '30px',
+  color: 'var(--affine-text-secondary-color)',
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: 1.5,
+});
+globalStyle(`${authMessage} a`, {
+  color: 'var(--affine-link-color)',
+});
+globalStyle(`${authMessage} .link`, {
+  cursor: 'pointer',
+  color: 'var(--affine-link-color)',
+});
+
+export const forgetPasswordButton = style({
+  fontSize: 'var(--affine-font-sm)',
+  color: 'var(--affine-text-secondary-color)',
+  position: 'absolute',
+  right: 0,
+  bottom: 0,
+  display: 'none',
+});
+
+export const resendWrapper = style({
+  height: 77,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: 30,
+});
+
+export const resendCountdown = style({ width: 45, textAlign: 'center' });
+export const resendCountdownInButton = style({
+  width: 40,
+  textAlign: 'center',
+  fontSize: 'var(--affine-font-sm)',
+  marginLeft: 16,
+  color: 'var(--affine-blue)',
+  fontWeight: 400,
+});
+
+export const accessMessage = style({
+  textAlign: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontSize: 'var(--affine-font-xs)',
+  fontWeight: 500,
+  marginTop: 65,
+  marginBottom: 40,
+});

packages/frontend/core/src/components/affine/auth/use-auth.ts

@@ -0,0 +1,155 @@
+import { pushNotificationAtom } from '@affine/component/notification-center';
+import type { Notification } from '@affine/component/notification-center/index.jotai';
+import { atom, useAtom, useSetAtom } from 'jotai';
+import { type SignInResponse } from 'next-auth/react';
+import { useCallback } from 'react';
+
+import { signInCloud } from '../../../utils/cloud-utils';
+
+const COUNT_DOWN_TIME = 60;
+export const INTERNAL_BETA_URL = `https://community.affine.pro/c/insider-general/`;
+
+function handleSendEmailError(
+  res: SignInResponse | undefined | void,
+  pushNotification: (notification: Notification) => void
+) {
+  if (res?.error) {
+    pushNotification({
+      title: 'Send email error',
+      message: 'Please back to home and try again',
+      type: 'error',
+    });
+  }
+}
+
+type AuthStoreAtom = {
+  allowSendEmail: boolean;
+  resendCountDown: number;
+  isMutating: boolean;
+};
+
+export const authStoreAtom = atom<AuthStoreAtom>({
+  isMutating: false,
+  allowSendEmail: true,
+  resendCountDown: COUNT_DOWN_TIME,
+});
+
+const countDownAtom = atom(
+  null, // it's a convention to pass `null` for the first argument
+  (get, set) => {
+    const clearId = window.setInterval(() => {
+      const countDown = get(authStoreAtom).resendCountDown;
+      if (countDown === 0) {
+        set(authStoreAtom, {
+          isMutating: false,
+          allowSendEmail: true,
+          resendCountDown: COUNT_DOWN_TIME,
+        });
+        window.clearInterval(clearId);
+        return;
+      }
+      set(authStoreAtom, {
+        isMutating: false,
+        resendCountDown: countDown - 1,
+        allowSendEmail: false,
+      });
+    }, 1000);
+  }
+);
+
+export const useAuth = () => {
+  const pushNotification = useSetAtom(pushNotificationAtom);
+  const [authStore, setAuthStore] = useAtom(authStoreAtom);
+  const startResendCountDown = useSetAtom(countDownAtom);
+
+  const signIn = useCallback(
+    async (email: string, verifyToken: string, challenge?: string) => {
+      setAuthStore(prev => {
+        return {
+          ...prev,
+          isMutating: true,
+        };
+      });
+
+      const res = await signInCloud(
+        'email',
+        {
+          email: email,
+          callbackUrl: '/auth/signIn',
+          redirect: false,
+        },
+        challenge
+          ? {
+              challenge,
+              token: verifyToken,
+            }
+          : { token: verifyToken }
+      ).catch(console.error);
+
+      handleSendEmailError(res, pushNotification);
+
+      setAuthStore({
+        isMutating: false,
+        allowSendEmail: false,
+        resendCountDown: COUNT_DOWN_TIME,
+      });
+
+      startResendCountDown();
+
+      return res;
+    },
+    [pushNotification, setAuthStore, startResendCountDown]
+  );
+
+  const signUp = useCallback(
+    async (email: string, verifyToken: string, challenge?: string) => {
+      setAuthStore(prev => {
+        return {
+          ...prev,
+          isMutating: true,
+        };
+      });
+
+      const res = await signInCloud(
+        'email',
+        {
+          email: email,
+          callbackUrl: '/auth/signUp',
+          redirect: false,
+        },
+        challenge
+          ? {
+              challenge,
+              token: verifyToken,
+            }
+          : { token: verifyToken }
+      ).catch(console.error);
+
+      handleSendEmailError(res, pushNotification);
+
+      setAuthStore({
+        isMutating: false,
+        allowSendEmail: false,
+        resendCountDown: COUNT_DOWN_TIME,
+      });
+
+      startResendCountDown();
+
+      return res;
+    },
+    [pushNotification, setAuthStore, startResendCountDown]
+  );
+
+  const signInWithGoogle = useCallback(() => {
+    signInCloud('google').catch(console.error);
+  }, []);
+
+  return {
+    allowSendEmail: authStore.allowSendEmail,
+    resendCountDown: authStore.resendCountDown,
+    isMutating: authStore.isMutating,
+    signUp,
+    signIn,
+    signInWithGoogle,
+  };
+};

packages/frontend/core/src/components/affine/auth/use-captcha.tsx

@@ -0,0 +1,105 @@
+import { fetchWithTraceReport } from '@affine/graphql';
+import { Turnstile } from '@marsidev/react-turnstile';
+import { atom, useAtom, useSetAtom } from 'jotai';
+import { useEffect, useRef } from 'react';
+import useSWR from 'swr';
+
+import * as style from './style.css';
+
+type Challenge = {
+  challenge: string;
+  resource: string;
+};
+
+const challengeFetcher = async (url: string) => {
+  if (!environment.isDesktop) {
+    return undefined;
+  }
+
+  const res = await fetchWithTraceReport(url);
+  if (!res.ok) {
+    throw new Error('Failed to fetch challenge');
+  }
+  const challenge = (await res.json()) as Challenge;
+  if (!challenge || !challenge.challenge || !challenge.resource) {
+    throw new Error('Invalid challenge');
+  }
+
+  return challenge;
+};
+const generateChallengeResponse = async (challenge: string) => {
+  if (!environment.isDesktop) {
+    return undefined;
+  }
+
+  return await window.apis?.ui?.getChallengeResponse(challenge);
+};
+
+const captchaAtom = atom<string | undefined>(undefined);
+const responseAtom = atom<string | undefined>(undefined);
+
+export const Captcha = () => {
+  const setCaptcha = useSetAtom(captchaAtom);
+  const [response] = useAtom(responseAtom);
+
+  if (!runtimeConfig.enableCaptcha) {
+    return <></>;
+  }
+
+  if (environment.isDesktop) {
+    if (response) {
+      return <div className={style.captchaWrapper}>Making Challenge</div>;
+    } else {
+      return <div className={style.captchaWrapper}>Verified Client</div>;
+    }
+  }
+
+  return (
+    <Turnstile
+      className={style.captchaWrapper}
+      siteKey={process.env.CAPTCHA_SITE_KEY || '1x00000000000000000000AA'}
+      onSuccess={setCaptcha}
+    />
+  );
+};
+
+export const useCaptcha = (): [string | undefined, string?] => {
+  const [verifyToken] = useAtom(captchaAtom);
+  const [response, setResponse] = useAtom(responseAtom);
+
+  const { data: challenge } = useSWR('/api/auth/challenge', challengeFetcher, {
+    suspense: false,
+    revalidateOnFocus: false,
+  });
+  const prevChallenge = useRef('');
+
+  useEffect(() => {
+    if (
+      runtimeConfig.enableCaptcha &&
+      environment.isDesktop &&
+      challenge?.challenge &&
+      prevChallenge.current !== challenge.challenge
+    ) {
+      prevChallenge.current = challenge.challenge;
+      generateChallengeResponse(challenge.resource)
+        .then(setResponse)
+        .catch(err => {
+          console.error('Error getting challenge response:', err);
+        });
+    }
+  }, [challenge, setResponse]);
+
+  if (!runtimeConfig.enableCaptcha) {
+    return ['XXXX.DUMMY.TOKEN.XXXX'];
+  }
+
+  if (environment.isDesktop) {
+    if (response) {
+      return [response, challenge?.challenge];
+    } else {
+      return [undefined, challenge?.challenge];
+    }
+  }
+
+  return [verifyToken];
+};

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

@@ -0,0 +1,43 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const header = style({
+  position: 'relative',
+  marginTop: '44px',
+});
+
+export const content = style({
+  padding: '0 40px',
+  fontSize: '18px',
+  lineHeight: '26px',
+});
+
+globalStyle(`${content} p`, {
+  marginTop: '12px',
+  marginBottom: '16px',
+});
+
+export const contentTitle = style({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  paddingBottom: '16px',
+});
+
+export const buttonGroup = style({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gap: '20px',
+  margin: '24px 0',
+});
+
+export const radioGroup = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+});
+
+export const radio = style({
+  cursor: 'pointer',
+  appearance: 'auto',
+  marginRight: '12px',
+});

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

@@ -0,0 +1,395 @@
+import { Input, toast } from '@affine/component';
+import { DebugLogger } from '@affine/debug';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { HelpIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+  Modal,
+} from '@toeverything/components/modal';
+import { Tooltip } from '@toeverything/components/tooltip';
+import type {
+  LoadDBFileResult,
+  SelectDBFileLocationResult,
+} from '@toeverything/infra/type';
+import { useSetAtom } from 'jotai';
+import type { KeyboardEvent } from 'react';
+import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
+import { useCallback, useState } from 'react';
+
+import { openDisableCloudAlertModalAtom } from '../../../atoms';
+import { useAppHelper } from '../../../hooks/use-workspaces';
+import * as style from './index.css';
+
+type CreateWorkspaceStep =
+  | 'set-db-location'
+  | 'name-workspace'
+  | 'set-syncing-mode';
+
+export type CreateWorkspaceMode = 'add' | 'new' | false;
+
+const logger = new DebugLogger('CreateWorkspaceModal');
+
+interface ModalProps {
+  mode: CreateWorkspaceMode; // false means not open
+  onClose: () => void;
+  onCreate: (id: string) => void;
+}
+
+interface NameWorkspaceContentProps extends ConfirmModalProps {
+  onConfirmName: (name: string) => void;
+}
+
+const NameWorkspaceContent = ({
+  onConfirmName,
+  ...props
+}: NameWorkspaceContentProps) => {
+  const [workspaceName, setWorkspaceName] = useState('');
+
+  const handleCreateWorkspace = useCallback(() => {
+    onConfirmName(workspaceName);
+  }, [onConfirmName, workspaceName]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter' && workspaceName) {
+        handleCreateWorkspace();
+      }
+    },
+    [handleCreateWorkspace, workspaceName]
+  );
+  const t = useAFFiNEI18N();
+  return (
+    <ConfirmModal
+      defaultOpen={true}
+      title={t['com.affine.nameWorkspace.title']()}
+      description={t['com.affine.nameWorkspace.description']()}
+      cancelText={t['com.affine.nameWorkspace.button.cancel']()}
+      confirmButtonOptions={{
+        type: 'primary',
+        disabled: !workspaceName,
+        ['data-testid' as string]: 'create-workspace-create-button',
+        children: t['com.affine.nameWorkspace.button.create'](),
+      }}
+      closeButtonOptions={{
+        ['data-testid' as string]: 'create-workspace-close-button',
+      }}
+      onConfirm={handleCreateWorkspace}
+      {...props}
+    >
+      <Input
+        ref={ref => {
+          if (ref) {
+            window.setTimeout(() => ref.focus(), 0);
+          }
+        }}
+        data-testid="create-workspace-input"
+        onKeyDown={handleKeyDown}
+        placeholder={t['com.affine.nameWorkspace.placeholder']()}
+        maxLength={64}
+        minLength={0}
+        onChange={setWorkspaceName}
+        size="large"
+      />
+    </ConfirmModal>
+  );
+};
+
+interface SetDBLocationContentProps {
+  onConfirmLocation: (dir?: string) => void;
+}
+
+const useDefaultDBLocation = () => {
+  const [defaultDBLocation, setDefaultDBLocation] = useState('');
+
+  useEffect(() => {
+    window.apis?.db
+      .getDefaultStorageLocation()
+      .then(dir => {
+        setDefaultDBLocation(dir);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, []);
+
+  return defaultDBLocation;
+};
+
+const SetDBLocationContent = ({
+  onConfirmLocation,
+}: SetDBLocationContentProps) => {
+  const t = useAFFiNEI18N();
+  const defaultDBLocation = useDefaultDBLocation();
+  const [opening, setOpening] = useState(false);
+
+  const handleSelectDBFileLocation = useCallback(() => {
+    if (opening) {
+      return;
+    }
+    setOpening(true);
+    (async function () {
+      const result: SelectDBFileLocationResult =
+        await window.apis?.dialog.selectDBFileLocation();
+      setOpening(false);
+      if (result?.filePath) {
+        onConfirmLocation(result.filePath);
+      } else if (result?.error) {
+        toast(t[result.error]());
+      }
+    })().catch(err => {
+      logger.error(err);
+    });
+  }, [onConfirmLocation, opening, t]);
+
+  return (
+    <div className={style.content}>
+      <div className={style.contentTitle}>
+        {t['com.affine.setDBLocation.title']()}
+      </div>
+      <p>{t['com.affine.setDBLocation.description']()}</p>
+      <div className={style.buttonGroup}>
+        <Button
+          disabled={opening}
+          data-testid="create-workspace-customize-button"
+          type="primary"
+          onClick={handleSelectDBFileLocation}
+        >
+          {t['com.affine.setDBLocation.button.customize']()}
+        </Button>
+        <Tooltip
+          content={t['com.affine.setDBLocation.tooltip.defaultLocation']({
+            location: defaultDBLocation,
+          })}
+        >
+          <Button
+            data-testid="create-workspace-default-location-button"
+            type="primary"
+            onClick={() => {
+              onConfirmLocation();
+            }}
+            icon={<HelpIcon />}
+            iconPosition="end"
+          >
+            {t['com.affine.setDBLocation.button.defaultLocation']()}
+          </Button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+interface SetSyncingModeContentProps {
+  mode: CreateWorkspaceMode;
+  onConfirmMode: (enableCloudSyncing: boolean) => void;
+}
+
+const SetSyncingModeContent = ({
+  mode,
+  onConfirmMode,
+}: SetSyncingModeContentProps) => {
+  const t = useAFFiNEI18N();
+  const [enableCloudSyncing, setEnableCloudSyncing] = useState(false);
+  return (
+    <div className={style.content}>
+      <div className={style.contentTitle}>
+        {mode === 'new'
+          ? t['com.affine.setSyncingMode.title.created']()
+          : t['com.affine.setSyncingMode.title.added']()}
+      </div>
+
+      <div className={style.radioGroup}>
+        <label onClick={() => setEnableCloudSyncing(false)}>
+          <input
+            className={style.radio}
+            type="radio"
+            readOnly
+            checked={!enableCloudSyncing}
+          />
+          {t['com.affine.setSyncingMode.deviceOnly']()}
+        </label>
+        <label onClick={() => setEnableCloudSyncing(true)}>
+          <input
+            className={style.radio}
+            type="radio"
+            readOnly
+            checked={enableCloudSyncing}
+          />
+          {t['com.affine.setSyncingMode.cloud']()}
+        </label>
+      </div>
+
+      <div className={style.buttonGroup}>
+        <Button
+          data-testid="create-workspace-continue-button"
+          type="primary"
+          onClick={() => {
+            onConfirmMode(enableCloudSyncing);
+          }}
+        >
+          {t['com.affine.setSyncingMode.button.continue']()}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const CreateWorkspaceModal = ({
+  mode,
+  onClose,
+  onCreate,
+}: ModalProps) => {
+  const { createLocalWorkspace, addLocalWorkspace } = useAppHelper();
+  const [step, setStep] = useState<CreateWorkspaceStep>();
+  const [addedId, setAddedId] = useState<string>();
+  const [workspaceName, setWorkspaceName] = useState<string>();
+  const [dbFileLocation, setDBFileLocation] = useState<string>();
+  const setOpenDisableCloudAlertModal = useSetAtom(
+    openDisableCloudAlertModalAtom
+  );
+  const t = useAFFiNEI18N();
+
+  // todo: maybe refactor using xstate?
+  useLayoutEffect(() => {
+    let canceled = false;
+    // if mode changed, reset step
+    if (mode === 'add') {
+      // a hack for now
+      // when adding a workspace, we will immediately let user select a db file
+      // after it is done, it will effectively add a new workspace to app-data folder
+      // so after that, we will be able to load it via importLocalWorkspace
+      (async () => {
+        if (!window.apis) {
+          return;
+        }
+        logger.info('load db file');
+        setStep(undefined);
+        const result: LoadDBFileResult = await window.apis.dialog.loadDBFile();
+        if (result.workspaceId && !canceled) {
+          setAddedId(result.workspaceId);
+          const newWorkspaceId = await addLocalWorkspace(result.workspaceId);
+          onCreate(newWorkspaceId);
+        } else if (result.error || result.canceled) {
+          if (result.error) {
+            toast(t[result.error]());
+          }
+          onClose();
+        }
+      })().catch(err => {
+        console.error(err);
+      });
+    } else if (mode === 'new') {
+      setStep('name-workspace');
+    } else {
+      setStep(undefined);
+    }
+    return () => {
+      canceled = true;
+    };
+  }, [addLocalWorkspace, mode, onClose, onCreate, t]);
+
+  const onConfirmEnableCloudSyncing = useCallback(
+    (enableCloudSyncing: boolean) => {
+      (async function () {
+        if (!runtimeConfig.enableCloud && enableCloudSyncing) {
+          setOpenDisableCloudAlertModal(true);
+        } else {
+          let id = addedId;
+          // syncing mode is also the last step
+          if (addedId && mode === 'add') {
+            await addLocalWorkspace(addedId);
+          } else if (mode === 'new' && workspaceName) {
+            id = await createLocalWorkspace(workspaceName);
+            // if dbFileLocation is set, move db file to that location
+            if (dbFileLocation) {
+              await window.apis?.dialog.moveDBFile(id, dbFileLocation);
+            }
+          } else {
+            logger.error('invalid state');
+            return;
+          }
+          if (id) {
+            onCreate(id);
+          }
+        }
+      })().catch(e => {
+        logger.error(e);
+      });
+    },
+    [
+      addLocalWorkspace,
+      addedId,
+      createLocalWorkspace,
+      dbFileLocation,
+      mode,
+      onCreate,
+      setOpenDisableCloudAlertModal,
+      workspaceName,
+    ]
+  );
+
+  const onConfirmName = useCallback(
+    (name: string) => {
+      setWorkspaceName(name);
+      // this will be the last step for web for now
+      // fix me later
+      createLocalWorkspace(name).then(id => {
+        onCreate(id);
+      });
+    },
+    [createLocalWorkspace, onCreate]
+  );
+
+  const setDBLocationNode =
+    step === 'set-db-location' ? (
+      <SetDBLocationContent
+        onConfirmLocation={dir => {
+          setDBFileLocation(dir);
+          setStep('name-workspace');
+        }}
+      />
+    ) : null;
+
+  const setSyncingModeNode =
+    step === 'set-syncing-mode' ? (
+      <SetSyncingModeContent
+        mode={mode}
+        onConfirmMode={onConfirmEnableCloudSyncing}
+      />
+    ) : null;
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  if (step === 'name-workspace') {
+    return (
+      <NameWorkspaceContent
+        open={mode !== false && !!step}
+        onOpenChange={onOpenChange}
+        onConfirmName={onConfirmName}
+      />
+    );
+  }
+
+  return (
+    <Modal
+      open={mode !== false && !!step}
+      width={560}
+      onOpenChange={onOpenChange}
+      contentOptions={{
+        style: { padding: '10px' },
+      }}
+    >
+      <div className={style.header}></div>
+      {setDBLocationNode}
+      {setSyncingModeNode}
+    </Modal>
+  );
+};

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

@@ -0,0 +1,59 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+} from '@toeverything/components/modal';
+import { useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import { authAtom } from '../../../atoms';
+import { setOnceSignedInEventAtom } from '../../../atoms/event';
+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
+
+export const EnableAffineCloudModal = ({
+  onConfirm: propsOnConfirm,
+  ...props
+}: ConfirmModalProps) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+  const setAuthAtom = useSetAtom(authAtom);
+  const setOnceSignedInEvent = useSetAtom(setOnceSignedInEventAtom);
+
+  const confirm = useCallback(async () => {
+    return propsOnConfirm?.();
+  }, [propsOnConfirm]);
+
+  const onConfirm = useCallback(() => {
+    if (loginStatus === 'unauthenticated') {
+      setAuthAtom(prev => ({
+        ...prev,
+        openModal: true,
+      }));
+      setOnceSignedInEvent(confirm);
+    }
+    if (loginStatus === 'authenticated') {
+      return propsOnConfirm?.();
+    }
+  }, [confirm, loginStatus, propsOnConfirm, setAuthAtom, setOnceSignedInEvent]);
+
+  return (
+    <ConfirmModal
+      title={t['Enable AFFiNE Cloud']()}
+      description={t['Enable AFFiNE Cloud Description']()}
+      cancelText={t['com.affine.enableAffineCloudModal.button.cancel']()}
+      onConfirm={onConfirm}
+      confirmButtonOptions={{
+        type: 'primary',
+        ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
+        children:
+          loginStatus === 'authenticated'
+            ? t['Enable']()
+            : t['Sign in and Enable'](),
+      }}
+      contentOptions={{
+        ['data-testid' as string]: 'enable-cloud-modal',
+      }}
+      {...props}
+    />
+  );
+};

packages/frontend/core/src/components/affine/language-menu/index.tsx

@@ -0,0 +1,48 @@
+import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
+import { memo, type ReactElement } from 'react';
+
+import { useLanguageHelper } from '../../../hooks/affine/use-language-helper';
+
+// Fixme: keyboard focus should be supported by Menu component
+const LanguageMenuContent = memo(function LanguageMenuContent() {
+  const { currentLanguage, languagesList, onSelect } = useLanguageHelper();
+  return (
+    <>
+      {languagesList.map(option => {
+        return (
+          <MenuItem
+            key={option.name}
+            selected={currentLanguage?.originalName === option.originalName}
+            title={option.name}
+            onSelect={() => onSelect(option.tag)}
+          >
+            {option.originalName}
+          </MenuItem>
+        );
+      })}
+    </>
+  );
+});
+
+export const LanguageMenu = () => {
+  const { currentLanguage } = useLanguageHelper();
+  return (
+    <Menu
+      items={(<LanguageMenuContent />) as ReactElement}
+      contentOptions={{
+        style: {
+          background: 'var(--affine-white)',
+        },
+        align: 'end',
+      }}
+    >
+      <MenuTrigger
+        data-testid="language-menu-button"
+        style={{ textTransform: 'capitalize', fontWeight: 600 }}
+        block={true}
+      >
+        {currentLanguage?.originalName || ''}
+      </MenuTrigger>
+    </Menu>
+  );
+};

packages/frontend/core/src/components/affine/language-menu/style.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const hoveredLanguageItem = style({
+  background: 'var(--affine-hover-color)',
+});

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

@@ -0,0 +1,84 @@
+import { Input } from '@affine/component';
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+} from '@toeverything/components/modal';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useCallback, useState } from 'react';
+
+import * as styles from './style.css';
+
+interface WorkspaceDeleteProps extends ConfirmModalProps {
+  workspace: AffineOfficialWorkspace;
+}
+
+export const WorkspaceDeleteModal = ({
+  workspace,
+  ...props
+}: WorkspaceDeleteProps) => {
+  const { onConfirm } = props;
+  const [workspaceName] = useBlockSuiteWorkspaceName(
+    workspace.blockSuiteWorkspace
+  );
+  const [deleteStr, setDeleteStr] = useState<string>('');
+  const allowDelete = deleteStr === workspaceName;
+  const t = useAFFiNEI18N();
+
+  const handleOnEnter = useCallback(() => {
+    if (allowDelete) {
+      return onConfirm?.();
+    }
+  }, [allowDelete, onConfirm]);
+
+  return (
+    <ConfirmModal
+      title={`${t['com.affine.workspaceDelete.title']()}?`}
+      cancelText={t['com.affine.workspaceDelete.button.cancel']()}
+      confirmButtonOptions={{
+        type: 'error',
+        disabled: !allowDelete,
+        ['data-testid' as string]: 'delete-workspace-confirm-button',
+        children: t['com.affine.workspaceDelete.button.delete'](),
+      }}
+      {...props}
+    >
+      {workspace.flavour === WorkspaceFlavour.LOCAL ? (
+        <Trans i18nKey="com.affine.workspaceDelete.description">
+          Deleting (
+          <span className={styles.workspaceName}>
+            {{ workspace: workspaceName } as any}
+          </span>
+          ) cannot be undone, please proceed with caution. All contents will be
+          lost.
+        </Trans>
+      ) : (
+        <Trans i18nKey="com.affine.workspaceDelete.description2">
+          Deleting (
+          <span className={styles.workspaceName}>
+            {{ workspace: workspaceName } as any}
+          </span>
+          ) will delete both local and cloud data, this operation cannot be
+          undone, please proceed with caution.
+        </Trans>
+      )}
+      <div className={styles.inputContent}>
+        <Input
+          ref={ref => {
+            if (ref) {
+              window.setTimeout(() => ref.focus(), 0);
+            }
+          }}
+          onChange={setDeleteStr}
+          data-testid="delete-workspace-input"
+          onEnter={handleOnEnter}
+          placeholder={t['com.affine.workspaceDelete.placeholder']()}
+          size="large"
+        />
+      </div>
+    </ConfirmModal>
+  );
+};

packages/frontend/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.css.ts

@@ -0,0 +1,29 @@
+import { style } from '@vanilla-extract/css';
+
+export const modalWrapper = style({
+  position: 'relative',
+  padding: '0px',
+  width: '560px',
+  background: 'var(--affine-background-overlay-panel-color)',
+  borderRadius: '12px',
+});
+
+export const modalHeader = style({
+  margin: '44px 0px 12px 0px',
+  width: '560px',
+  fontWeight: '600',
+  fontSize: '20px;',
+  textAlign: 'center',
+});
+
+export const inputContent = style({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  margin: '24px 0',
+  fontSize: 'var(--affine-font-base)',
+});
+
+export const workspaceName = style({
+  fontWeight: '600',
+});

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

@@ -0,0 +1,89 @@
+import { SettingRow } from '@affine/component/setting-components';
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ArrowRightSmallIcon } from '@blocksuite/icons';
+import { ConfirmModal } from '@toeverything/components/modal';
+import { useCallback, useState } from 'react';
+
+import type { WorkspaceSettingDetailProps } from '../types';
+import { WorkspaceDeleteModal } from './delete';
+
+export interface DeleteLeaveWorkspaceProps extends WorkspaceSettingDetailProps {
+  workspace: AffineOfficialWorkspace;
+}
+
+export const DeleteLeaveWorkspace = ({
+  workspace,
+  onDeleteCloudWorkspace,
+  onDeleteLocalWorkspace,
+  onLeaveWorkspace,
+  isOwner,
+}: DeleteLeaveWorkspaceProps) => {
+  const t = useAFFiNEI18N();
+  // fixme: cloud regression
+  const [showDelete, setShowDelete] = useState(false);
+  const [showLeave, setShowLeave] = useState(false);
+
+  const onLeaveOrDelete = useCallback(() => {
+    if (isOwner) {
+      setShowDelete(true);
+    } else {
+      setShowLeave(true);
+    }
+  }, [isOwner]);
+
+  const onLeaveConfirm = useCallback(() => {
+    return onLeaveWorkspace();
+  }, [onLeaveWorkspace]);
+
+  const onDeleteConfirm = useCallback(() => {
+    if (workspace.flavour === WorkspaceFlavour.LOCAL) {
+      return onDeleteLocalWorkspace();
+    }
+    if (workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
+      return onDeleteCloudWorkspace();
+    }
+  }, [onDeleteCloudWorkspace, onDeleteLocalWorkspace, workspace.flavour]);
+
+  return (
+    <>
+      <SettingRow
+        name={
+          <span style={{ color: 'var(--affine-error-color)' }}>
+            {isOwner
+              ? t['com.affine.workspaceDelete.title']()
+              : t['com.affine.deleteLeaveWorkspace.leave']()}
+          </span>
+        }
+        desc={t['com.affine.deleteLeaveWorkspace.description']()}
+        style={{ cursor: 'pointer' }}
+        onClick={onLeaveOrDelete}
+        data-testid="delete-workspace-button"
+      >
+        <ArrowRightSmallIcon />
+      </SettingRow>
+      {isOwner ? (
+        <WorkspaceDeleteModal
+          onConfirm={onDeleteConfirm}
+          open={showDelete}
+          onOpenChange={setShowDelete}
+          workspace={workspace}
+        />
+      ) : (
+        <ConfirmModal
+          open={showLeave}
+          cancelText={t['com.affine.confirmModal.button.cancel']()}
+          onConfirm={onLeaveConfirm}
+          onOpenChange={setShowLeave}
+          title={`${t['com.affine.deleteLeaveWorkspace.leave']()}?`}
+          description={t['com.affine.deleteLeaveWorkspace.leaveDescription']()}
+          confirmButtonOptions={{
+            type: 'warning',
+            children: t['Leave'](),
+          }}
+        />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,101 @@
+import { pushNotificationAtom } from '@affine/component/notification-center';
+import { SettingRow } from '@affine/component/setting-components';
+import { isDesktop } from '@affine/env/constant';
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import type { SaveDBFileResult } from '@toeverything/infra/type';
+import { useSetAtom } from 'jotai';
+import { useCallback, useState } from 'react';
+import type { Doc } from 'yjs';
+import { encodeStateAsUpdate } from 'yjs';
+
+async function syncBlobsToSqliteDb(workspace: AffineOfficialWorkspace) {
+  if (window.apis && isDesktop) {
+    const bs = workspace.blockSuiteWorkspace.blobs;
+    const blobsInDb = await window.apis.db.getBlobKeys(workspace.id);
+    const blobsInStorage = await bs.list();
+    const blobsToSync = blobsInStorage.filter(
+      blob => !blobsInDb.includes(blob)
+    );
+
+    await Promise.all(
+      blobsToSync.map(async blobKey => {
+        const blob = await bs.get(blobKey);
+        if (blob) {
+          const bin = new Uint8Array(await blob.arrayBuffer());
+          await window.apis.db.addBlob(workspace.id, blobKey, bin);
+        }
+      })
+    );
+  }
+}
+
+async function syncDocsToSqliteDb(workspace: AffineOfficialWorkspace) {
+  if (window.apis && isDesktop) {
+    const workspaceId = workspace.blockSuiteWorkspace.doc.guid;
+    const syncDoc = async (doc: Doc) => {
+      await window.apis.db.applyDocUpdate(
+        workspace.id,
+        encodeStateAsUpdate(doc),
+        doc.guid === workspaceId ? undefined : doc.guid
+      );
+      await Promise.all([...doc.subdocs].map(subdoc => syncDoc(subdoc)));
+    };
+
+    return syncDoc(workspace.blockSuiteWorkspace.doc);
+  }
+}
+
+interface ExportPanelProps {
+  workspace: AffineOfficialWorkspace;
+}
+
+export const ExportPanel = ({ workspace }: ExportPanelProps) => {
+  const workspaceId = workspace.id;
+  const t = useAFFiNEI18N();
+  const [syncing, setSyncing] = useState(false);
+  const pushNotification = useSetAtom(pushNotificationAtom);
+  const onExport = useCallback(async () => {
+    if (syncing) {
+      return;
+    }
+    setSyncing(true);
+    try {
+      await syncBlobsToSqliteDb(workspace);
+      await syncDocsToSqliteDb(workspace);
+      const result: SaveDBFileResult =
+        await window.apis?.dialog.saveDBFileAs(workspaceId);
+      if (result?.error) {
+        throw new Error(result.error);
+      } else if (!result?.canceled) {
+        pushNotification({
+          type: 'success',
+          title: t['Export success'](),
+        });
+      }
+    } catch (e: any) {
+      pushNotification({
+        type: 'error',
+        title: t['Export failed'](),
+        message: e.message,
+      });
+    } finally {
+      setSyncing(false);
+    }
+  }, [pushNotification, syncing, t, workspace, workspaceId]);
+
+  return (
+    <>
+      <SettingRow name={t['Export']()} desc={t['Export Description']()}>
+        <Button
+          data-testid="export-affine-backup"
+          onClick={onExport}
+          disabled={syncing}
+        >
+          {t['Export']()}
+        </Button>
+      </SettingRow>
+    </>
+  );
+};

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

@@ -0,0 +1,67 @@
+import {
+  SettingHeader,
+  SettingRow,
+  SettingWrapper,
+} from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useMemo } from 'react';
+
+import { useWorkspace } from '../../../hooks/use-workspace';
+import { DeleteLeaveWorkspace } from './delete-leave-workspace';
+import { ExportPanel } from './export';
+import { LabelsPanel } from './labels';
+import { MembersPanel } from './members';
+import { ProfilePanel } from './profile';
+import { PublishPanel } from './publish';
+import { StoragePanel } from './storage';
+import type { WorkspaceSettingDetailProps } from './types';
+
+export const WorkspaceSettingDetail = (props: WorkspaceSettingDetailProps) => {
+  const { workspaceId } = props;
+  const t = useAFFiNEI18N();
+  const workspace = useWorkspace(workspaceId);
+  const [name] = useBlockSuiteWorkspaceName(workspace.blockSuiteWorkspace);
+
+  const storageAndExportSetting = useMemo(() => {
+    if (environment.isDesktop) {
+      return (
+        <SettingWrapper title={t['Storage and Export']()}>
+          {runtimeConfig.enableMoveDatabase ? (
+            <StoragePanel workspace={workspace} />
+          ) : null}
+          <ExportPanel workspace={workspace} />
+        </SettingWrapper>
+      );
+    } else {
+      return null;
+    }
+  }, [t, workspace]);
+
+  return (
+    <>
+      <SettingHeader
+        title={t[`Workspace Settings with name`]({ name })}
+        subtitle={t['com.affine.settings.workspace.description']()}
+      />
+      <SettingWrapper title={t['Info']()}>
+        <SettingRow
+          name={t['Workspace Profile']()}
+          desc={t['com.affine.settings.workspace.not-owner']()}
+          spreadCol={false}
+        >
+          <ProfilePanel workspace={workspace} {...props} />
+          <LabelsPanel workspace={workspace} {...props} />
+        </SettingRow>
+      </SettingWrapper>
+      <SettingWrapper title={t['com.affine.brand.affineCloud']()}>
+        <PublishPanel workspace={workspace} {...props} />
+        <MembersPanel workspace={workspace} {...props} />
+      </SettingWrapper>
+      {storageAndExportSetting}
+      <SettingWrapper>
+        <DeleteLeaveWorkspace workspace={workspace} {...props} />
+      </SettingWrapper>
+    </>
+  );
+};

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

@@ -0,0 +1,103 @@
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { useMemo } from 'react';
+
+import * as style from './style.css';
+import type { WorkspaceSettingDetailProps } from './types';
+
+export interface LabelsPanelProps extends WorkspaceSettingDetailProps {
+  workspace: AffineOfficialWorkspace;
+}
+
+type WorkspaceStatus =
+  | 'local'
+  | 'syncCloud'
+  | 'syncDocker'
+  | 'selfHosted'
+  | 'joinedWorkspace'
+  | 'availableOffline'
+  | 'publishedToWeb';
+
+type LabelProps = {
+  value: string;
+  background: string;
+};
+
+type LabelMap = {
+  [key in WorkspaceStatus]: LabelProps;
+};
+type labelConditionsProps = {
+  condition: boolean;
+  label: WorkspaceStatus;
+};
+const Label = ({ value, background }: LabelProps) => {
+  return (
+    <div>
+      <div className={style.workspaceLabel} style={{ background: background }}>
+        {value}
+      </div>
+    </div>
+  );
+};
+export const LabelsPanel = ({ workspace, isOwner }: LabelsPanelProps) => {
+  const labelMap: LabelMap = useMemo(
+    () => ({
+      local: {
+        value: 'Local',
+        background: 'var(--affine-tag-orange)',
+      },
+      syncCloud: {
+        value: 'Sync with AFFiNE Cloud',
+        background: 'var(--affine-tag-blue)',
+      },
+      syncDocker: {
+        value: 'Sync with AFFiNE Docker',
+        background: 'var(--affine-tag-green)',
+      },
+      selfHosted: {
+        value: 'Self-Hosted Server',
+        background: 'var(--affine-tag-purple)',
+      },
+      joinedWorkspace: {
+        value: 'Joined Workspace',
+        background: 'var(--affine-tag-yellow)',
+      },
+      availableOffline: {
+        value: 'Available Offline',
+        background: 'var(--affine-tag-green)',
+      },
+      publishedToWeb: {
+        value: 'Published to Web',
+        background: 'var(--affine-tag-blue)',
+      },
+    }),
+    []
+  );
+  const labelConditions: labelConditionsProps[] = [
+    { condition: !isOwner, label: 'joinedWorkspace' },
+    { condition: workspace.flavour === 'local', label: 'local' },
+    { condition: workspace.flavour === 'affine-cloud', label: 'syncCloud' },
+    {
+      condition: workspace.flavour === 'affine-public',
+      label: 'publishedToWeb',
+    },
+    //TODO: add these labels
+    // { status==="synced", label: 'availableOffline' }
+    // { workspace.flavour === 'affine-Docker', label: 'syncDocker' }
+    // { workspace.flavour === 'self-hosted', label: 'selfHosted' }
+  ];
+
+  return (
+    <div className={style.labelWrapper}>
+      {labelConditions.map(
+        ({ condition, label }) =>
+          condition && (
+            <Label
+              key={label}
+              value={labelMap[label].value}
+              background={labelMap[label].background}
+            />
+          )
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,319 @@
+import {
+  InviteModal,
+  type InviteModalProps,
+} from '@affine/component/member-components';
+import {
+  Pagination,
+  type PaginationProps,
+} from '@affine/component/member-components';
+import { pushNotificationAtom } from '@affine/component/notification-center';
+import { SettingRow } from '@affine/component/setting-components';
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { Permission } from '@affine/graphql';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { MoreVerticalIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
+import { Button, IconButton } from '@toeverything/components/button';
+import { Loading } from '@toeverything/components/loading';
+import { Menu, MenuItem } from '@toeverything/components/menu';
+import { Tooltip } from '@toeverything/components/tooltip';
+import clsx from 'clsx';
+import { useSetAtom } from 'jotai';
+import type { ReactElement } from 'react';
+import {
+  Suspense,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import type { CheckedUser } from '../../../hooks/affine/use-current-user';
+import { useCurrentUser } from '../../../hooks/affine/use-current-user';
+import { useInviteMember } from '../../../hooks/affine/use-invite-member';
+import { useMemberCount } from '../../../hooks/affine/use-member-count';
+import { type Member, useMembers } from '../../../hooks/affine/use-members';
+import { useRevokeMemberPermission } from '../../../hooks/affine/use-revoke-member-permission';
+import { AnyErrorBoundary } from '../any-error-boundary';
+import * as style from './style.css';
+import type { WorkspaceSettingDetailProps } from './types';
+
+const COUNT_PER_PAGE = 8;
+export interface MembersPanelProps extends WorkspaceSettingDetailProps {
+  workspace: AffineOfficialWorkspace;
+}
+type OnRevoke = (memberId: string) => void;
+const MembersPanelLocal = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <Tooltip content={t['com.affine.settings.member-tooltip']()}>
+      <div className={style.fakeWrapper}>
+        <SettingRow name={`${t['Members']()} (0)`} desc={t['Members hint']()}>
+          <Button size="large">{t['Invite Members']()}</Button>
+        </SettingRow>
+      </div>
+    </Tooltip>
+  );
+};
+
+export const CloudWorkspaceMembersPanel = ({
+  workspace,
+  isOwner,
+}: MembersPanelProps) => {
+  const workspaceId = workspace.id;
+  const memberCount = useMemberCount(workspaceId);
+
+  const t = useAFFiNEI18N();
+  const { invite, isMutating } = useInviteMember(workspaceId);
+  const revokeMemberPermission = useRevokeMemberPermission(workspaceId);
+
+  const [open, setOpen] = useState(false);
+  const [memberSkip, setMemberSkip] = useState(0);
+
+  const pushNotification = useSetAtom(pushNotificationAtom);
+
+  const openModal = useCallback(() => {
+    setOpen(true);
+  }, []);
+
+  const onPageChange = useCallback<PaginationProps['onPageChange']>(offset => {
+    setMemberSkip(offset);
+  }, []);
+
+  const onInviteConfirm = useCallback<InviteModalProps['onConfirm']>(
+    async ({ email, permission }) => {
+      const success = await invite(
+        email,
+        permission,
+        // send invite email
+        true
+      );
+      if (success) {
+        pushNotification({
+          title: t['Invitation sent'](),
+          message: t['Invitation sent hint'](),
+          type: 'success',
+        });
+        setOpen(false);
+      }
+    },
+    [invite, pushNotification, t]
+  );
+
+  const listContainerRef = useRef<HTMLDivElement | null>(null);
+  const [memberListHeight, setMemberListHeight] = useState<number | null>(null);
+
+  useLayoutEffect(() => {
+    if (
+      memberCount > COUNT_PER_PAGE &&
+      listContainerRef.current &&
+      memberListHeight === null
+    ) {
+      const rect = listContainerRef.current.getBoundingClientRect();
+      setMemberListHeight(rect.height);
+    }
+  }, [listContainerRef, memberCount, memberListHeight]);
+
+  const onRevoke = useCallback<OnRevoke>(
+    async memberId => {
+      const res = await revokeMemberPermission(memberId);
+      if (res?.revoke) {
+        pushNotification({
+          title: t['Removed successfully'](),
+          type: 'success',
+        });
+      }
+    },
+    [pushNotification, revokeMemberPermission, t]
+  );
+
+  return (
+    <>
+      <SettingRow
+        name={`${t['Members']()} (${memberCount})`}
+        desc={t['Members hint']()}
+        spreadCol={isOwner}
+      >
+        {isOwner ? (
+          <>
+            <Button onClick={openModal}>{t['Invite Members']()}</Button>
+            <InviteModal
+              open={open}
+              setOpen={setOpen}
+              onConfirm={onInviteConfirm}
+              isMutating={isMutating}
+            />
+          </>
+        ) : null}
+      </SettingRow>
+
+      <div
+        className={style.membersPanel}
+        ref={listContainerRef}
+        style={memberListHeight ? { height: memberListHeight } : {}}
+      >
+        <Suspense fallback={<MemberListFallback memberCount={memberCount} />}>
+          <MemberList
+            workspaceId={workspaceId}
+            isOwner={isOwner}
+            skip={memberSkip}
+            onRevoke={onRevoke}
+          />
+        </Suspense>
+
+        {memberCount > COUNT_PER_PAGE && (
+          <Pagination
+            totalCount={memberCount}
+            countPerPage={COUNT_PER_PAGE}
+            onPageChange={onPageChange}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+const MemberListFallback = ({ memberCount }: { memberCount: number }) => {
+  // prevent page jitter
+  const height = useMemo(() => {
+    if (memberCount > COUNT_PER_PAGE) {
+      // height and margin-bottom
+      return COUNT_PER_PAGE * 58 + (COUNT_PER_PAGE - 1) * 6;
+    }
+    return 'auto';
+  }, [memberCount]);
+
+  return (
+    <div
+      style={{
+        height,
+      }}
+      className={style.membersFallback}
+    >
+      <Loading size={40} />
+    </div>
+  );
+};
+
+const MemberList = ({
+  workspaceId,
+  isOwner,
+  skip,
+  onRevoke,
+}: {
+  workspaceId: string;
+  isOwner: boolean;
+  skip: number;
+  onRevoke: OnRevoke;
+}) => {
+  const members = useMembers(workspaceId, skip, COUNT_PER_PAGE);
+  const currentUser = useCurrentUser();
+
+  return (
+    <div className={style.memberList}>
+      {members.map(member => (
+        <MemberItem
+          key={member.id}
+          member={member}
+          isOwner={isOwner}
+          currentUser={currentUser}
+          onRevoke={onRevoke}
+        />
+      ))}
+    </div>
+  );
+};
+
+const MemberItem = ({
+  member,
+  isOwner,
+  currentUser,
+  onRevoke,
+}: {
+  member: Member;
+  isOwner: boolean;
+  currentUser: CheckedUser;
+  onRevoke: OnRevoke;
+}) => {
+  const t = useAFFiNEI18N();
+
+  const handleRevoke = useCallback(() => {
+    onRevoke(member.id);
+  }, [onRevoke, member.id]);
+
+  const operationButtonInfo = useMemo(() => {
+    return {
+      show: isOwner && currentUser.id !== member.id,
+      leaveOrRevokeText: t['Remove from workspace'](),
+    };
+  }, [currentUser.id, isOwner, member.id, t]);
+
+  return (
+    <div
+      key={member.id}
+      className={style.memberListItem}
+      data-testid="member-item"
+    >
+      <Avatar
+        size={36}
+        url={member.avatarUrl}
+        name={(member.emailVerified ? member.name : member.email) as string}
+      />
+      <div className={style.memberContainer}>
+        {member.emailVerified ? (
+          <>
+            <div className={style.memberName}>{member.name}</div>
+            <div className={style.memberEmail}>{member.email}</div>
+          </>
+        ) : (
+          <div className={style.memberName}>{member.email}</div>
+        )}
+      </div>
+      <div
+        className={clsx(style.roleOrStatus, {
+          pending: !member.accepted,
+        })}
+      >
+        {member.accepted
+          ? member.permission === Permission.Owner
+            ? 'Workspace Owner'
+            : 'Member'
+          : 'Pending'}
+      </div>
+      <Menu
+        items={
+          <MenuItem data-member-id={member.id} onClick={handleRevoke}>
+            {operationButtonInfo.leaveOrRevokeText}
+          </MenuItem>
+        }
+      >
+        <IconButton
+          disabled={!operationButtonInfo.show}
+          type="plain"
+          style={{
+            visibility: operationButtonInfo.show ? 'visible' : 'hidden',
+            flexShrink: 0,
+          }}
+        >
+          <MoreVerticalIcon />
+        </IconButton>
+      </Menu>
+    </div>
+  );
+};
+
+export const MembersPanel = (props: MembersPanelProps): ReactElement | null => {
+  if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
+    return <MembersPanelLocal />;
+  }
+  return (
+    <ErrorBoundary FallbackComponent={AnyErrorBoundary}>
+      <Suspense>
+        <CloudWorkspaceMembersPanel {...props} />
+      </Suspense>
+    </ErrorBoundary>
+  );
+};

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

@@ -0,0 +1,134 @@
+import { FlexWrapper, Input, Wrapper } from '@affine/component';
+import { pushNotificationAtom } from '@affine/component/notification-center';
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CameraIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
+import { Button } from '@toeverything/components/button';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useSetAtom } from 'jotai';
+import {
+  type KeyboardEvent,
+  type MouseEvent,
+  startTransition,
+  useCallback,
+  useState,
+} from 'react';
+
+import { Upload } from '../../pure/file-upload';
+import * as style from './style.css';
+import type { WorkspaceSettingDetailProps } from './types';
+
+export interface ProfilePanelProps extends WorkspaceSettingDetailProps {
+  workspace: AffineOfficialWorkspace;
+}
+
+export const ProfilePanel = ({ workspace, isOwner }: ProfilePanelProps) => {
+  const t = useAFFiNEI18N();
+  const pushNotification = useSetAtom(pushNotificationAtom);
+
+  const [workspaceAvatar, update] = useBlockSuiteWorkspaceAvatarUrl(
+    workspace.blockSuiteWorkspace
+  );
+
+  const [name, setName] = useBlockSuiteWorkspaceName(
+    workspace.blockSuiteWorkspace
+  );
+
+  const [input, setInput] = useState<string>(name);
+
+  const handleUpdateWorkspaceName = useCallback(
+    (name: string) => {
+      setName(name);
+      pushNotification({
+        title: t['Update workspace name success'](),
+        type: 'success',
+      });
+    },
+    [pushNotification, setName, t]
+  );
+
+  const handleSetInput = useCallback((value: string) => {
+    startTransition(() => {
+      setInput(value);
+    });
+  }, []);
+
+  const handleKeyUp = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.code === 'Enter' && name !== input) {
+        handleUpdateWorkspaceName(input);
+      }
+    },
+    [handleUpdateWorkspaceName, input, name]
+  );
+
+  const handleClick = useCallback(() => {
+    handleUpdateWorkspaceName(input);
+  }, [handleUpdateWorkspaceName, input]);
+
+  const handleRemoveUserAvatar = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      await update(null);
+    },
+    [update]
+  );
+  return (
+    <div className={style.profileWrapper}>
+      <Upload
+        accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+        fileChange={update}
+        data-testid="upload-avatar"
+        disabled={!isOwner}
+      >
+        <Avatar
+          size={56}
+          url={workspaceAvatar}
+          name={name}
+          colorfulFallback
+          hoverIcon={isOwner ? <CameraIcon /> : undefined}
+          onRemove={
+            workspaceAvatar && isOwner ? handleRemoveUserAvatar : undefined
+          }
+          avatarTooltipOptions={{ content: t['Click to replace photo']() }}
+          removeTooltipOptions={{ content: t['Remove photo']() }}
+          data-testid="workspace-setting-avatar"
+          removeButtonProps={{
+            ['data-testid' as string]: 'workspace-setting-remove-avatar-button',
+          }}
+        />
+      </Upload>
+
+      <Wrapper marginLeft={20}>
+        <div className={style.label}>{t['Workspace Name']()}</div>
+        <FlexWrapper alignItems="center" flexGrow="1">
+          <Input
+            disabled={!isOwner}
+            width={280}
+            height={32}
+            defaultValue={input}
+            data-testid="workspace-name-input"
+            placeholder={t['Workspace Name']()}
+            maxLength={64}
+            minLength={0}
+            onChange={handleSetInput}
+            onKeyUp={handleKeyUp}
+          />
+          {input === workspace.blockSuiteWorkspace.meta.name ? null : (
+            <Button
+              data-testid="save-workspace-name"
+              onClick={handleClick}
+              style={{
+                marginLeft: '12px',
+              }}
+            >
+              {t['com.affine.editCollection.save']()}
+            </Button>
+          )}
+        </FlexWrapper>
+      </Wrapper>
+    </div>
+  );
+};

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

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

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

@@ -0,0 +1,124 @@
+import { FlexWrapper, toast } from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
+import type { MoveDBFileResult } from '@toeverything/infra/type';
+import { useMemo } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+const useDBFileSecondaryPath = (workspaceId: string) => {
+  const [path, setPath] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    if (window.apis && window.events && environment.isDesktop) {
+      window.apis?.workspace
+        .getMeta(workspaceId)
+        .then(meta => {
+          setPath(meta.secondaryDBPath);
+        })
+        .catch(err => {
+          console.error(err);
+        });
+      return window.events.workspace.onMetaChange((newMeta: any) => {
+        if (newMeta.workspaceId === workspaceId) {
+          const meta = newMeta.meta;
+          setPath(meta.secondaryDBPath);
+        }
+      });
+    }
+    return;
+  }, [workspaceId]);
+  return path;
+};
+
+interface StoragePanelProps {
+  workspace: AffineOfficialWorkspace;
+}
+
+export const StoragePanel = ({ workspace }: StoragePanelProps) => {
+  const workspaceId = workspace.id;
+  const t = useAFFiNEI18N();
+  const secondaryPath = useDBFileSecondaryPath(workspaceId);
+
+  const [moveToInProgress, setMoveToInProgress] = useState<boolean>(false);
+  const onRevealDBFile = useCallback(() => {
+    window.apis?.dialog.revealDBFile(workspaceId).catch(err => {
+      console.error(err);
+    });
+  }, [workspaceId]);
+
+  const handleMoveTo = useCallback(() => {
+    if (moveToInProgress) {
+      return;
+    }
+    setMoveToInProgress(true);
+    window.apis?.dialog
+      .moveDBFile(workspaceId)
+      .then((result: MoveDBFileResult) => {
+        if (!result?.error && !result?.canceled) {
+          toast(t['Move folder success']());
+        } else if (result?.error) {
+          toast(t[result.error]());
+        }
+      })
+      .catch(() => {
+        toast(t['UNKNOWN_ERROR']());
+      })
+      .finally(() => {
+        setMoveToInProgress(false);
+      });
+  }, [moveToInProgress, t, workspaceId]);
+
+  const rowContent = useMemo(
+    () =>
+      secondaryPath ? (
+        <FlexWrapper justifyContent="space-between">
+          <Tooltip
+            content={t['com.affine.settings.storage.db-location.change-hint']()}
+            side="top"
+            align="start"
+          >
+            <Button
+              data-testid="move-folder"
+              // className={style.urlButton}
+              size="large"
+              onClick={handleMoveTo}
+            >
+              {secondaryPath}
+            </Button>
+          </Tooltip>
+          <Button
+            data-testid="reveal-folder"
+            data-disabled={moveToInProgress}
+            onClick={onRevealDBFile}
+          >
+            {t['Open folder']()}
+          </Button>
+        </FlexWrapper>
+      ) : (
+        <Button
+          data-testid="move-folder"
+          data-disabled={moveToInProgress}
+          onClick={handleMoveTo}
+        >
+          {t['Move folder']()}
+        </Button>
+      ),
+    [handleMoveTo, moveToInProgress, onRevealDBFile, secondaryPath, t]
+  );
+
+  return (
+    <SettingRow
+      name={t['Storage']()}
+      desc={t[
+        secondaryPath
+          ? 'com.affine.settings.storage.description-alt'
+          : 'com.affine.settings.storage.description'
+      ]()}
+      spreadCol={!secondaryPath}
+    >
+      {rowContent}
+    </SettingRow>
+  );
+};

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

@@ -0,0 +1,184 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const profileWrapper = style({
+  display: 'flex',
+  alignItems: 'flex-end',
+  marginTop: '12px',
+});
+export const profileHandlerWrapper = style({
+  flexGrow: '1',
+  display: 'flex',
+  alignItems: 'center',
+  marginLeft: '20px',
+});
+
+export const labelWrapper = style({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: '24px',
+  gap: '10px',
+  flexWrap: 'wrap',
+});
+
+export const avatarWrapper = style({
+  width: '56px',
+  height: '56px',
+  borderRadius: '50%',
+  position: 'relative',
+  cursor: 'pointer',
+  flexShrink: '0',
+  selectors: {
+    '&.disable': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+});
+globalStyle(`${avatarWrapper}:hover .camera-icon-wrapper`, {
+  display: 'flex',
+});
+globalStyle(`${avatarWrapper}:hover .camera-icon-wrapper`, {
+  display: 'flex',
+});
+globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
+  width: '56px',
+  height: '56px',
+  borderRadius: '50%',
+  position: 'absolute',
+  display: 'none',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'rgba(60, 61, 63, 0.5)',
+  zIndex: '1',
+  color: 'var(--affine-white)',
+  fontSize: '24px',
+});
+
+export const urlButton = style({
+  width: 'calc(100% - 64px - 15px)',
+  justifyContent: 'left',
+  textAlign: 'left',
+});
+globalStyle(`${urlButton} span`, {
+  width: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  color: 'var(--affine-placeholder-color)',
+  fontWeight: '500',
+});
+
+export const fakeWrapper = style({
+  position: 'relative',
+  opacity: 0.4,
+  marginTop: '24px',
+  selectors: {
+    '&::after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      cursor: 'not-allowed',
+    },
+  },
+});
+
+export const membersFallback = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: 'var(--affine-primary-color)',
+});
+export const membersPanel = style({
+  padding: '4px',
+  borderRadius: '12px',
+  background: 'var(--affine-background-primary-color)',
+  border: '1px solid var(--affine-border-color)',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+});
+
+export const memberList = style({});
+export const memberListItem = style({
+  padding: '0 4px 0 16px',
+  height: '58px',
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+      borderRadius: '8px',
+    },
+    '&:not(:last-of-type)': {
+      marginBottom: '6px',
+    },
+  },
+});
+export const memberContainer = style({
+  width: '250px',
+  display: 'flex',
+  flexDirection: 'column',
+  flexShrink: 0,
+  marginLeft: '12px',
+  marginRight: '20px',
+});
+export const roleOrStatus = style({
+  // width: '20%',
+  flexGrow: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  fontSize: 'var(--affine-font-sm)',
+  selectors: {
+    '&.pending': {
+      color: 'var(--affine-primary-color)',
+    },
+  },
+});
+export const memberName = style({
+  fontSize: 'var(--affine-font-sm)',
+  color: 'var(--affine-text-primary-color)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  lineHeight: '22px',
+});
+export const memberEmail = style({
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  lineHeight: '20px',
+});
+export const iconButton = style({});
+
+globalStyle(`${memberListItem}:hover ${iconButton}`, {
+  opacity: 1,
+  pointerEvents: 'all',
+});
+
+export const label = style({
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+  marginBottom: '5px',
+});
+export const workspaceLabel = style({
+  width: '100%',
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '6px',
+  padding: '2px 10px',
+  border: '1px solid var(--affine-white-30)',
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-primary-color)',
+  lineHeight: '20px',
+  whiteSpace: 'nowrap',
+});

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

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

packages/frontend/core/src/components/affine/onboarding-modal.tsx

@@ -0,0 +1,23 @@
+import { TourModal } from '@affine/component/tour-modal';
+import { useAtom } from 'jotai';
+import { memo, useCallback } from 'react';
+
+import { openOnboardingModalAtom } from '../../atoms';
+import { guideOnboardingAtom } from '../../atoms/guide';
+
+export const OnboardingModal = memo(function OnboardingModal() {
+  const [open, setOpen] = useAtom(openOnboardingModalAtom);
+  const [guideOpen, setShowOnboarding] = useAtom(guideOnboardingAtom);
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) return;
+      setShowOnboarding(false);
+      setOpen(false);
+    },
+    [setOpen, setShowOnboarding]
+  );
+
+  return (
+    <TourModal open={!open ? guideOpen : open} onOpenChange={onOpenChange} />
+  );
+});

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

@@ -0,0 +1,246 @@
+import { FlexWrapper, Input } from '@affine/component';
+import {
+  SettingHeader,
+  SettingRow,
+  StorageProgress,
+} from '@affine/component/setting-components';
+import {
+  allBlobSizesQuery,
+  removeAvatarMutation,
+  uploadAvatarMutation,
+} from '@affine/graphql';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useMutation, useQuery } from '@affine/workspace/affine/gql';
+import { ArrowRightSmallIcon, CameraIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
+import { Button } from '@toeverything/components/button';
+import { useSetAtom } from 'jotai';
+import {
+  type FC,
+  type MouseEvent,
+  Suspense,
+  useCallback,
+  useState,
+} from 'react';
+
+import { authAtom, openSignOutModalAtom } from '../../../../atoms';
+import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
+import { Upload } from '../../../pure/file-upload';
+import * as style from './style.css';
+
+export const UserAvatar = () => {
+  const t = useAFFiNEI18N();
+  const user = useCurrentUser();
+
+  const { trigger: avatarTrigger } = useMutation({
+    mutation: uploadAvatarMutation,
+  });
+  const { trigger: removeAvatarTrigger } = useMutation({
+    mutation: removeAvatarMutation,
+  });
+
+  const handleUpdateUserAvatar = useCallback(
+    async (file: File) => {
+      await avatarTrigger({
+        avatar: file,
+      });
+      // XXX: This is a hack to force the user to update, since next-auth can not only use update function without params
+      user.update({ name: user.name }).catch(console.error);
+    },
+    [avatarTrigger, user]
+  );
+  const handleRemoveUserAvatar = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      await removeAvatarTrigger();
+      // XXX: This is a hack to force the user to update, since next-auth can not only use update function without params
+      user.update({ name: user.name }).catch(console.error);
+    },
+    [removeAvatarTrigger, user]
+  );
+  return (
+    <Upload
+      accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+      fileChange={handleUpdateUserAvatar}
+      data-testid="upload-user-avatar"
+    >
+      <Avatar
+        size={56}
+        name={user.name}
+        url={user.image}
+        hoverIcon={<CameraIcon />}
+        onRemove={user.image ? handleRemoveUserAvatar : undefined}
+        avatarTooltipOptions={{ content: t['Click to replace photo']() }}
+        removeTooltipOptions={{ content: t['Remove photo']() }}
+        data-testid="user-setting-avatar"
+        removeButtonProps={{
+          ['data-testid' as string]: 'user-setting-remove-avatar-button',
+        }}
+      />
+    </Upload>
+  );
+};
+
+export const AvatarAndName = () => {
+  const t = useAFFiNEI18N();
+  const user = useCurrentUser();
+  const [input, setInput] = useState<string>(user.name);
+
+  const allowUpdate = !!input && input !== user.name;
+  const handleUpdateUserName = useCallback(() => {
+    if (!allowUpdate) {
+      return;
+    }
+    user.update({ name: input }).catch(console.error);
+  }, [allowUpdate, input, user]);
+
+  return (
+    <>
+      <SettingRow
+        name={t['com.affine.settings.profile']()}
+        desc={t['com.affine.settings.profile.message']()}
+        spreadCol={false}
+      >
+        <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
+          <Suspense>
+            <UserAvatar />
+          </Suspense>
+
+          <div className={style.profileInputWrapper}>
+            <label>{t['com.affine.settings.profile.name']()}</label>
+            <FlexWrapper alignItems="center">
+              <Input
+                defaultValue={input}
+                data-testid="user-name-input"
+                placeholder={t['com.affine.settings.profile.placeholder']()}
+                maxLength={64}
+                minLength={0}
+                width={280}
+                height={28}
+                onChange={setInput}
+                onEnter={handleUpdateUserName}
+              />
+              {allowUpdate ? (
+                <Button
+                  data-testid="save-user-name"
+                  onClick={handleUpdateUserName}
+                  style={{
+                    marginLeft: '12px',
+                  }}
+                >
+                  {t['com.affine.editCollection.save']()}
+                </Button>
+              ) : null}
+            </FlexWrapper>
+          </div>
+        </FlexWrapper>
+      </SettingRow>
+    </>
+  );
+};
+
+const StoragePanel = () => {
+  const t = useAFFiNEI18N();
+
+  const { data } = useQuery({
+    query: allBlobSizesQuery,
+  });
+
+  const onUpgrade = useCallback(() => {}, []);
+
+  return (
+    <SettingRow
+      name={t['com.affine.storage.title']()}
+      desc=""
+      spreadCol={false}
+    >
+      <StorageProgress
+        max={10737418240}
+        value={data.collectAllBlobSizes.size}
+        onUpgrade={onUpgrade}
+      />
+    </SettingRow>
+  );
+};
+
+export const AccountSetting: FC = () => {
+  const t = useAFFiNEI18N();
+  const user = useCurrentUser();
+  const setAuthModal = useSetAtom(authAtom);
+  const setSignOutModal = useSetAtom(openSignOutModalAtom);
+
+  const onChangeEmail = useCallback(() => {
+    setAuthModal({
+      openModal: true,
+      state: 'sendEmail',
+      email: user.email,
+      emailType: 'changeEmail',
+    });
+  }, [setAuthModal, user.email]);
+
+  const onPasswordButtonClick = useCallback(() => {
+    setAuthModal({
+      openModal: true,
+      state: 'sendEmail',
+      email: user.email,
+      emailType: user.hasPassword ? 'changePassword' : 'setPassword',
+    });
+  }, [setAuthModal, user.email, user.hasPassword]);
+
+  const onOpenSignOutModal = useCallback(() => {
+    setSignOutModal(true);
+  }, [setSignOutModal]);
+
+  return (
+    <>
+      <SettingHeader
+        title={t['com.affine.setting.account']()}
+        subtitle={t['com.affine.setting.account.message']()}
+        data-testid="account-title"
+      />
+      <AvatarAndName />
+      <SettingRow name={t['com.affine.settings.email']()} desc={user.email}>
+        <Button onClick={onChangeEmail}>
+          {t['com.affine.settings.email.action']()}
+        </Button>
+      </SettingRow>
+      <SettingRow
+        name={t['com.affine.settings.password']()}
+        desc={t['com.affine.settings.password.message']()}
+      >
+        <Button onClick={onPasswordButtonClick}>
+          {user.hasPassword
+            ? t['com.affine.settings.password.action.change']()
+            : t['com.affine.settings.password.action.set']()}
+        </Button>
+      </SettingRow>
+      <Suspense>
+        <StoragePanel />
+      </Suspense>
+      <SettingRow
+        name={t[`Sign out`]()}
+        desc={t['com.affine.setting.sign.out.message']()}
+        style={{ cursor: 'pointer' }}
+        data-testid="sign-out-button"
+        onClick={onOpenSignOutModal}
+      >
+        <ArrowRightSmallIcon />
+      </SettingRow>
+      {/*<SettingRow*/}
+      {/*  name={*/}
+      {/*    <span style={{ color: 'var(--affine-warning-color)' }}>*/}
+      {/*      {t['com.affine.setting.account.delete']()}*/}
+      {/*    </span>*/}
+      {/*  }*/}
+      {/*  desc={t['com.affine.setting.account.delete.message']()}*/}
+      {/*  style={{ cursor: 'pointer' }}*/}
+      {/*  onClick={useCallback(() => {*/}
+      {/*    toast('Function coming soon');*/}
+      {/*  }, [])}*/}
+      {/*  testId="delete-account-button"*/}
+      {/*>*/}
+      {/*  <ArrowRightSmallIcon />*/}
+      {/*</SettingRow>*/}
+    </>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/account-setting/style.css.ts

@@ -0,0 +1,41 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+export const profileInputWrapper = style({
+  marginLeft: '20px',
+});
+globalStyle(`${profileInputWrapper} label`, {
+  display: 'block',
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+  marginBottom: '4px',
+});
+
+export const avatarWrapper = style({
+  width: '56px',
+  height: '56px',
+  borderRadius: '50%',
+  position: 'relative',
+  cursor: 'pointer',
+  flexShrink: '0',
+  selectors: {
+    '&.disable': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+});
+globalStyle(`${avatarWrapper}:hover .camera-icon-wrapper`, {
+  display: 'flex',
+});
+globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
+  width: '56px',
+  height: '56px',
+  borderRadius: '50%',
+  position: 'absolute',
+  display: 'none',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'rgba(60, 61, 63, 0.5)',
+  zIndex: '1',
+  color: 'var(--affine-white)',
+  fontSize: 'var(--affine-font-h-4)',
+});

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/config.tsx

@@ -0,0 +1,41 @@
+import {
+  DiscordIcon,
+  GithubIcon,
+  RedditIcon,
+  TelegramIcon,
+  TwitterIcon,
+  YouTubeIcon,
+} from './icons';
+
+export const relatedLinks = [
+  {
+    icon: <GithubIcon />,
+    title: 'GitHub',
+    link: 'https://github.com/toeverything/AFFiNE',
+  },
+  {
+    icon: <TwitterIcon />,
+    title: 'Twitter',
+    link: 'https://twitter.com/AffineOfficial',
+  },
+  {
+    icon: <DiscordIcon />,
+    title: 'Discord',
+    link: 'https://discord.gg/Arn7TqJBvG',
+  },
+  {
+    icon: <YouTubeIcon />,
+    title: 'YouTube',
+    link: 'https://www.youtube.com/@affinepro',
+  },
+  {
+    icon: <TelegramIcon />,
+    title: 'Telegram',
+    link: 'https://t.me/affineworkos',
+  },
+  {
+    icon: <RedditIcon />,
+    title: 'Reddit',
+    link: 'https://www.reddit.com/r/Affine/',
+  },
+];

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/icons.tsx

@@ -0,0 +1,189 @@
+export const LogoIcon = () => {
+  return (
+    <svg
+      width="50"
+      height="50"
+      viewBox="0 0 50 50"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21.1996 0L4 50H14.0741L25.0146 15.4186L35.96 50H46L28.7978 0H21.1996Z"
+      />
+    </svg>
+  );
+};
+export const DocIcon = () => {
+  return (
+    <svg
+      width="50"
+      height="50"
+      viewBox="0 0 50 50"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 40.5353V9.46462C2 6.95444 2.99716 4.54708 4.77212 2.77212C6.54708 0.997163 8.95444 0 11.4646 0H37.7552C39.0224 0 40.0497 1.02726 40.0497 2.29445V33.3652C40.0497 33.4357 40.0465 33.5055 40.0403 33.5744C39.9882 34.1502 39.7234 34.6646 39.3251 35.0385C38.9147 35.4237 38.3625 35.6597 37.7552 35.6597H11.4646C11.0129 35.6597 10.5676 35.7224 10.1404 35.8429C8.60419 36.2781 7.37011 37.4505 6.85245 38.9541C6.67955 39.4584 6.58891 39.9922 6.58891 40.5354C6.58891 41.8285 7.1026 43.0687 8.01697 43.983C8.93134 44.8974 10.1715 45.4111 11.4646 45.4111H42.6309V4.68456C42.6309 3.41736 43.6582 2.3901 44.9254 2.3901C46.1926 2.3901 47.2198 3.41736 47.2198 4.68456V47.7055C47.2198 48.9727 46.1926 50 44.9254 50H11.4646C8.95445 50 6.54708 49.0028 4.77212 47.2279C2.99716 45.4529 2 43.0456 2 40.5353ZM12.6596 38.2409C11.3925 38.2409 10.3652 39.2682 10.3652 40.5354C10.3652 41.8026 11.3925 42.8298 12.6596 42.8298H36.5602C37.8274 42.8298 38.8546 41.8026 38.8546 40.5354C38.8546 39.2682 37.8274 38.2409 36.5602 38.2409H12.6596Z"
+      />
+    </svg>
+  );
+};
+
+export const TwitterIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22 5.88235C21.2639 6.21176 20.4704 6.42824 19.6482 6.53176C20.4895 6.03294 21.1396 5.24235 21.4455 4.29176C20.652 4.76235 19.7725 5.09176 18.8451 5.28C18.0899 4.47059 17.0287 4 15.8241 4C13.5774 4 11.7419 5.80706 11.7419 8.03765C11.7419 8.35765 11.7801 8.66824 11.847 8.96C8.4436 8.79059 5.413 7.18118 3.39579 4.74353C3.04207 5.33647 2.8413 6.03294 2.8413 6.76706C2.8413 8.16941 3.55832 9.41176 4.6673 10.1176C3.98853 10.1176 3.35755 9.92941 2.80306 9.64706V9.67529C2.80306 11.6329 4.21797 13.2706 6.09178 13.6376C5.49018 13.7997 4.8586 13.8223 4.24665 13.7035C4.50632 14.5059 5.01485 15.2079 5.70078 15.711C6.38671 16.2141 7.21553 16.4929 8.07075 16.5082C6.62106 17.6381 4.82409 18.2488 2.97514 18.24C2.6501 18.24 2.32505 18.2212 2 18.1835C3.81644 19.3318 5.97706 20 8.29063 20C15.8241 20 19.9637 13.8447 19.9637 8.50824C19.9637 8.32941 19.9637 8.16 19.9541 7.98118C20.7572 7.41647 21.4455 6.70118 22 5.88235Z"
+        fill="#1D9BF0"
+      />
+    </svg>
+  );
+};
+
+export const GithubIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3073_4801)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.667 2C7.14199 2 2.66699 6.58819 2.66699 12.2529C2.66699 16.7899 5.52949 20.6219 9.50449 21.9804C10.0045 22.0701 10.192 21.7625 10.192 21.4934C10.192 21.2499 10.1795 20.4425 10.1795 19.5838C7.66699 20.058 7.01699 18.9558 6.81699 18.3791C6.70449 18.0843 6.21699 17.1743 5.79199 16.9308C5.44199 16.7386 4.94199 16.2644 5.77949 16.2516C6.56699 16.2388 7.12949 16.9949 7.31699 17.3025C8.21699 18.8533 9.65449 18.4175 10.2295 18.1484C10.317 17.4819 10.5795 17.0334 10.867 16.777C8.64199 16.5207 6.31699 15.6364 6.31699 11.7147C6.31699 10.5997 6.70449 9.67689 7.34199 8.95918C7.24199 8.70286 6.89199 7.65193 7.44199 6.24215C7.44199 6.24215 8.27949 5.97301 10.192 7.29308C10.992 7.06239 11.842 6.94704 12.692 6.94704C13.542 6.94704 14.392 7.06239 15.192 7.29308C17.1045 5.9602 17.942 6.24215 17.942 6.24215C18.492 7.65193 18.142 8.70286 18.042 8.95918C18.6795 9.67689 19.067 10.5868 19.067 11.7147C19.067 15.6492 16.7295 16.5207 14.5045 16.777C14.867 17.0975 15.1795 17.7126 15.1795 18.6738C15.1795 20.0452 15.167 21.1474 15.167 21.4934C15.167 21.7625 15.3545 22.0829 15.8545 21.9804C17.8396 21.2932 19.5646 19.9851 20.7867 18.2401C22.0088 16.4951 22.6664 14.4012 22.667 12.2529C22.667 6.58819 18.192 2 12.667 2Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3073_4801">
+          <rect width="25" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+export const DiscordIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_3073_4801)">
+        <path
+          d="M19.2565 5.64663C17.9898 5.05614 16.6183 4.62755 15.1897 4.37993C15.1772 4.37953 15.1647 4.38188 15.1532 4.38681C15.1417 4.39175 15.1314 4.39915 15.1231 4.4085C14.9516 4.72279 14.7516 5.13233 14.6183 5.44662C13.103 5.21804 11.562 5.21804 10.0467 5.44662C9.9134 5.1228 9.71339 4.72279 9.53243 4.4085C9.52291 4.38945 9.49434 4.37993 9.46576 4.37993C8.03715 4.62755 6.67521 5.05614 5.39899 5.64663C5.38946 5.64663 5.37994 5.65615 5.37041 5.66568C2.77987 9.54197 2.06556 13.3135 2.41795 17.0469C2.41795 17.066 2.42748 17.085 2.44652 17.0946C4.16086 18.3517 5.80852 19.1137 7.43714 19.6184C7.46571 19.628 7.49428 19.6184 7.50381 19.5994C7.88477 19.0756 8.22764 18.5232 8.52288 17.9422C8.54193 17.9041 8.52288 17.866 8.48479 17.8565C7.94191 17.647 7.42761 17.3993 6.92284 17.1136C6.88474 17.0946 6.88474 17.0374 6.91331 17.0088C7.01808 16.9327 7.12284 16.8469 7.22761 16.7707C7.24666 16.7517 7.27523 16.7517 7.29428 16.7612C10.5706 18.2565 14.104 18.2565 17.3422 16.7612C17.3612 16.7517 17.3898 16.7517 17.4088 16.7707C17.5136 16.8565 17.6184 16.9327 17.7231 17.0184C17.7612 17.0469 17.7612 17.1041 17.7136 17.1231C17.2184 17.4184 16.6945 17.6565 16.1517 17.866C16.1136 17.8755 16.104 17.9232 16.1136 17.9517C16.4183 18.5327 16.7612 19.0851 17.1326 19.6089C17.1612 19.6184 17.1898 19.628 17.2184 19.6184C18.8565 19.1137 20.5042 18.3517 22.2185 17.0946C22.2375 17.085 22.2471 17.066 22.2471 17.0469C22.6661 12.7325 21.5518 8.98958 19.2946 5.66568C19.2851 5.65615 19.2756 5.64663 19.2565 5.64663ZM9.01813 14.7707C8.03715 14.7707 7.21808 13.8659 7.21808 12.7516C7.21808 11.6373 8.01811 10.7325 9.01813 10.7325C10.0277 10.7325 10.8277 11.6468 10.8182 12.7516C10.8182 13.8659 10.0182 14.7707 9.01813 14.7707ZM15.6564 14.7707C14.6754 14.7707 13.8564 13.8659 13.8564 12.7516C13.8564 11.6373 14.6564 10.7325 15.6564 10.7325C16.666 10.7325 17.466 11.6468 17.4565 12.7516C17.4565 13.8659 16.666 14.7707 15.6564 14.7707Z"
+          fill="#5865F2"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3073_4801">
+          <rect width="25" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export const TelegramIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2C9.34844 2 6.80312 3.05422 4.92969 4.92891C3.05432 6.80434 2.00052 9.34778 2 12C2 14.6511 3.05469 17.1964 4.92969 19.0711C6.80312 20.9458 9.34844 22 12 22C14.6516 22 17.1969 20.9458 19.0703 19.0711C20.9453 17.1964 22 14.6511 22 12C22 9.34891 20.9453 6.80359 19.0703 4.92891C17.1969 3.05422 14.6516 2 12 2Z"
+        fill="url(#paint0_linear_8233_169329)"
+      />
+      <path
+        d="M6.5267 11.8943C9.44232 10.6243 11.3861 9.78694 12.3579 9.38241C15.1361 8.22726 15.7126 8.02663 16.0892 8.01983C16.172 8.01851 16.3564 8.03898 16.4767 8.13624C16.5767 8.21827 16.6048 8.32921 16.6189 8.4071C16.6314 8.48491 16.6486 8.66226 16.6345 8.80069C16.4845 10.3819 15.8329 14.2191 15.5017 15.9902C15.3626 16.7396 15.0861 16.9908 14.8189 17.0154C14.2376 17.0688 13.797 16.6316 13.2345 16.263C12.3548 15.686 11.8579 15.3269 11.0033 14.764C10.0158 14.1134 10.6564 13.7557 11.2189 13.1713C11.3658 13.0184 13.9251 10.691 13.9736 10.4799C13.9798 10.4535 13.9861 10.3551 13.9267 10.3032C13.8689 10.2512 13.7829 10.269 13.7204 10.283C13.6314 10.303 12.2267 11.2324 9.5017 13.071C9.10326 13.3451 8.74232 13.4787 8.41732 13.4716C8.06107 13.464 7.37357 13.2698 6.86264 13.1038C6.23764 12.9002 5.7392 12.7926 5.78295 12.4468C5.80482 12.2668 6.05326 12.0826 6.5267 11.8943Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_8233_169329"
+          x1="1002"
+          y1="2"
+          x2="1002"
+          y2="2002"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#2AABEE" />
+          <stop offset="1" stopColor="#229ED9" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export const RedditIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.334 22C17.8568 22 22.334 17.5228 22.334 12C22.334 6.47715 17.8568 2 12.334 2C6.81114 2 2.33398 6.47715 2.33398 12C2.33398 17.5228 6.81114 22 12.334 22Z"
+        fill="#FF4500"
+      />
+      <path
+        d="M18.9863 12.0954C18.9863 11.2848 18.3308 10.641 17.5319 10.641C17.1545 10.6404 16.7915 10.7857 16.5186 11.0463C15.5172 10.331 14.1461 9.86611 12.6202 9.8065L13.2877 6.68299L15.4574 7.14783C15.4814 7.69627 15.9343 8.13744 16.4948 8.13744C17.067 8.13744 17.5319 7.6726 17.5319 7.1001C17.5319 6.52791 17.067 6.06299 16.4948 6.06299C16.0895 6.06299 15.7316 6.30143 15.5648 6.64721L13.1448 6.13455C13.0732 6.12252 13.0016 6.13455 12.9539 6.17033C12.8943 6.20611 12.8586 6.26564 12.8468 6.33721L12.1074 9.8183C10.5577 9.86611 9.16273 10.331 8.14945 11.0583C7.87653 10.7976 7.51349 10.6524 7.13609 10.653C6.32539 10.653 5.68164 11.3085 5.68164 12.1074C5.68164 12.7035 6.03922 13.2041 6.54008 13.4308C6.51576 13.5766 6.50379 13.7241 6.5043 13.8719C6.5043 16.113 9.11524 17.9372 12.3341 17.9372C15.553 17.9372 18.1639 16.125 18.1639 13.8719C18.1638 13.7241 18.1519 13.5766 18.1281 13.4308C18.6288 13.2041 18.9863 12.6914 18.9863 12.0954ZM8.99586 13.1325C8.99586 12.5603 9.4607 12.0954 10.0332 12.0954C10.6054 12.0954 11.0703 12.5603 11.0703 13.1325C11.0703 13.7048 10.6055 14.1699 10.0332 14.1699C9.46078 14.1816 8.99586 13.7048 8.99586 13.1325ZM14.8019 15.8865C14.0866 16.6019 12.7274 16.6496 12.3341 16.6496C11.9288 16.6496 10.5697 16.5899 9.86609 15.8865C9.75898 15.7792 9.75898 15.6123 9.86609 15.505C9.97344 15.3979 10.1403 15.3979 10.2477 15.505C10.7008 15.9581 11.6545 16.113 12.3341 16.113C13.0137 16.113 13.9792 15.9581 14.4203 15.505C14.5277 15.3979 14.6945 15.3979 14.8019 15.505C14.8972 15.6123 14.8972 15.7792 14.8019 15.8865ZM14.611 14.1817C14.0387 14.1817 13.5739 13.7168 13.5739 13.1446C13.5739 12.5723 14.0387 12.1074 14.611 12.1074C15.1834 12.1074 15.6483 12.5723 15.6483 13.1446C15.6483 13.7047 15.1834 14.1817 14.611 14.1817Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export const LinkIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.2917 1.33334C10.2917 0.988166 10.5715 0.708344 10.9167 0.708344H14.6667C15.0118 0.708344 15.2917 0.988166 15.2917 1.33334V5.08334C15.2917 5.42852 15.0118 5.70834 14.6667 5.70834C14.3215 5.70834 14.0417 5.42852 14.0417 5.08334V2.84223L8.44194 8.44195C8.19787 8.68603 7.80214 8.68603 7.55806 8.44195C7.31398 8.19787 7.31398 7.80215 7.55806 7.55807L13.1578 1.95834H10.9167C10.5715 1.95834 10.2917 1.67852 10.2917 1.33334ZM3.97464 1.54168L7.58334 1.54168C7.92851 1.54168 8.20834 1.8215 8.20834 2.16668C8.20834 2.51185 7.92851 2.79168 7.58334 2.79168H4C3.52298 2.79168 3.2028 2.79216 2.95623 2.81231C2.71697 2.83186 2.60256 2.86676 2.5271 2.90521C2.33109 3.00508 2.17174 3.16443 2.07187 3.36044C2.03342 3.4359 1.99852 3.55031 1.97897 3.78957C1.95882 4.03614 1.95834 4.35632 1.95834 4.83334V12C1.95834 12.477 1.95882 12.7972 1.97897 13.0438C1.99852 13.283 2.03342 13.3974 2.07187 13.4729C2.17174 13.6689 2.33109 13.8283 2.5271 13.9281C2.60256 13.9666 2.71697 14.0015 2.95623 14.021C3.2028 14.0412 3.52298 14.0417 4 14.0417H11.1667C11.6437 14.0417 11.9639 14.0412 12.2104 14.021C12.4497 14.0015 12.5641 13.9666 12.6396 13.9281C12.8356 13.8283 12.9949 13.6689 13.0948 13.4729C13.1333 13.3974 13.1682 13.283 13.1877 13.0438C13.2079 12.7972 13.2083 12.477 13.2083 12V8.41668C13.2083 8.0715 13.4882 7.79168 13.8333 7.79168C14.1785 7.79168 14.4583 8.0715 14.4583 8.41668V12.0254C14.4583 12.4705 14.4584 12.842 14.4336 13.1456C14.4077 13.4621 14.3518 13.7594 14.2086 14.0404C13.9888 14.4716 13.6383 14.8222 13.2071 15.0419C12.926 15.1851 12.6288 15.241 12.3122 15.2669C12.0087 15.2917 11.6372 15.2917 11.192 15.2917H3.97463C3.5295 15.2917 3.15797 15.2917 2.85444 15.2669C2.53787 15.241 2.24066 15.1851 1.95961 15.0419C1.5284 14.8222 1.17782 14.4716 0.958113 14.0404C0.81491 13.7594 0.758984 13.4621 0.733119 13.1456C0.70832 12.842 0.708327 12.4705 0.708336 12.0254V4.80798C0.708327 4.36285 0.70832 3.99131 0.733119 3.68779C0.758984 3.37121 0.81491 3.074 0.958113 2.79295C1.17782 2.36174 1.5284 2.01116 1.95961 1.79145C2.24066 1.64825 2.53787 1.59232 2.85444 1.56646C3.15797 1.54166 3.52951 1.54167 3.97464 1.54168Z"
+      />
+    </svg>
+  );
+};
+export const YouTubeIcon = () => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.7477 7.19232C21.6387 6.76858 21.4261 6.38227 21.1311 6.07186C20.8361 5.76145 20.4689 5.53776 20.0662 5.42308C18.5917 5 12.6575 5 12.6575 5C12.6575 5 6.72304 5.01281 5.24858 5.43589C4.84583 5.55057 4.47865 5.77427 4.18363 6.0847C3.88861 6.39512 3.67602 6.78145 3.56705 7.2052C3.12106 9.96155 2.94806 14.1616 3.5793 16.8077C3.68828 17.2314 3.90087 17.6177 4.19589 17.9281C4.49092 18.2386 4.85808 18.4622 5.26083 18.5769C6.73528 19 12.6696 19 12.6696 19C12.6696 19 18.6039 19 20.0783 18.5769C20.481 18.4623 20.8482 18.2386 21.1432 17.9282C21.4383 17.6177 21.6509 17.2314 21.7599 16.8077C22.2303 14.0474 22.3752 9.85004 21.7477 7.1924V7.19232Z"
+        fill="#FF0000"
+      />
+      <path d="M10.667 15L15.667 12L10.667 9V15Z" fill="white" />
+    </svg>
+  );
+};

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

@@ -0,0 +1,137 @@
+import { Switch } from '@affine/component';
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingRow } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ArrowRightSmallIcon, OpenInNewIcon } from '@blocksuite/icons';
+import { useCallback } from 'react';
+
+import { type AppSetting, useAppSetting } from '../../../../../atoms/settings';
+import { relatedLinks } from './config';
+import { communityItem, communityWrapper, link } from './style.css';
+
+export const AboutAffine = () => {
+  const t = useAFFiNEI18N();
+  const [appSettings, setAppSettings] = useAppSetting();
+  const changeSwitch = useCallback(
+    (key: keyof AppSetting, checked: boolean) => {
+      setAppSettings({ [key]: checked });
+    },
+    [setAppSettings]
+  );
+  return (
+    <>
+      <SettingHeader
+        title={t['com.affine.aboutAFFiNE.title']()}
+        subtitle={t['com.affine.aboutAFFiNE.subtitle']()}
+        data-testid="about-title"
+      />
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.version.title']()}>
+        <SettingRow
+          name={t['com.affine.aboutAFFiNE.version.app']()}
+          desc={runtimeConfig.appVersion}
+        />
+        <SettingRow
+          name={t['com.affine.aboutAFFiNE.version.editor.title']()}
+          desc={runtimeConfig.editorVersion}
+        />
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+          <>
+            <SettingRow
+              name={t['com.affine.aboutAFFiNE.checkUpdate.title']()}
+              desc={t['com.affine.aboutAFFiNE.checkUpdate.description']()}
+            />
+            <SettingRow
+              name={t['com.affine.aboutAFFiNE.autoCheckUpdate.title']()}
+              desc={t['com.affine.aboutAFFiNE.autoCheckUpdate.description']()}
+            >
+              <Switch
+                checked={appSettings.autoCheckUpdate}
+                onChange={checked => changeSwitch('autoCheckUpdate', checked)}
+              />
+            </SettingRow>
+            <SettingRow
+              name={t['com.affine.aboutAFFiNE.autoDownloadUpdate.title']()}
+              desc={t[
+                'com.affine.aboutAFFiNE.autoDownloadUpdate.description'
+              ]()}
+            >
+              <Switch
+                checked={appSettings.autoCheckUpdate}
+                onChange={checked => changeSwitch('autoCheckUpdate', checked)}
+              />
+            </SettingRow>
+            <SettingRow
+              name={t['com.affine.aboutAFFiNE.changelog.title']()}
+              desc={t['com.affine.aboutAFFiNE.changelog.description']()}
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                window.open(runtimeConfig.changelogUrl, '_blank');
+              }}
+            >
+              <ArrowRightSmallIcon />
+            </SettingRow>
+          </>
+        ) : null}
+      </SettingWrapper>
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.contact.title']()}>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://affine.pro"
+          target="_blank"
+        >
+          {t['com.affine.aboutAFFiNE.contact.website']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://community.affine.pro"
+          target="_blank"
+        >
+          {t['com.affine.aboutAFFiNE.contact.community']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+      </SettingWrapper>
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.community.title']()}>
+        <div className={communityWrapper}>
+          {relatedLinks.map(({ icon, title, link }) => {
+            return (
+              <div
+                className={communityItem}
+                onClick={() => {
+                  window.open(link, '_blank');
+                }}
+                key={title}
+              >
+                {icon}
+                <p>{title}</p>
+              </div>
+            );
+          })}
+        </div>
+      </SettingWrapper>
+      <SettingWrapper title={t['com.affine.aboutAFFiNE.legal.title']()}>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://affine.pro/privacy"
+          target="_blank"
+        >
+          {t['com.affine.aboutAFFiNE.legal.privacy']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://affine.pro/terms"
+          target="_blank"
+        >
+          {t['com.affine.aboutAFFiNE.legal.tos']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+      </SettingWrapper>
+    </>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/style.css.ts

@@ -0,0 +1,45 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const link = style({
+  height: '18px',
+  display: 'flex',
+  alignItems: 'center',
+  color: 'var(--affine-text-primary-color)',
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: 600,
+  marginBottom: '12px',
+  selectors: {
+    '&:last-of-type': {
+      marginBottom: '0',
+    },
+  },
+});
+
+globalStyle(`${link} .icon`, {
+  color: 'var(--affine-icon-color)',
+  fontSize: 'var(--affine-font-base)',
+  marginLeft: '5px',
+});
+
+export const communityWrapper = style({
+  display: 'grid',
+  gridTemplateColumns: '15% 15% 15% 15% 15% 15%',
+  gap: '2%',
+});
+export const communityItem = style({
+  borderRadius: '8px',
+  border: '1px solid var(--affine-border-color)',
+  color: 'var(--affine-text-primary-color)',
+  cursor: 'pointer',
+  padding: '6px 8px',
+});
+globalStyle(`${communityItem} svg`, {
+  width: '24px',
+  height: '24px',
+  display: 'block',
+  margin: '0 auto 2px',
+});
+globalStyle(`${communityItem} p`, {
+  fontSize: 'var(--affine-font-xs)',
+  textAlign: 'center',
+});

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx

@@ -0,0 +1,60 @@
+import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
+import dayjs from 'dayjs';
+import { useCallback } from 'react';
+
+import {
+  dateFormatOptions,
+  type DateFormats,
+  useAppSetting,
+} from '../../../../../atoms/settings';
+
+interface DateFormatMenuContentProps {
+  currentOption: DateFormats;
+  onSelect: (option: DateFormats) => void;
+}
+
+const DateFormatMenuContent = ({
+  onSelect,
+  currentOption,
+}: DateFormatMenuContentProps) => {
+  return (
+    <>
+      {dateFormatOptions.map(option => {
+        return (
+          <MenuItem
+            key={option}
+            selected={currentOption === option}
+            onSelect={() => onSelect(option)}
+          >
+            {dayjs(new Date()).format(option)}
+          </MenuItem>
+        );
+      })}
+    </>
+  );
+};
+
+export const DateFormatSetting = () => {
+  const [appearanceSettings, setAppSettings] = useAppSetting();
+  const handleSelect = useCallback(
+    (option: DateFormats) => {
+      setAppSettings({ dateFormat: option });
+    },
+    [setAppSettings]
+  );
+
+  return (
+    <Menu
+      items={
+        <DateFormatMenuContent
+          onSelect={handleSelect}
+          currentOption={appearanceSettings.dateFormat}
+        />
+      }
+    >
+      <MenuTrigger data-testid="date-format-menu-trigger" block>
+        {dayjs(new Date()).format(appearanceSettings.dateFormat)}
+      </MenuTrigger>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,239 @@
+import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingRow } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useTheme } from 'next-themes';
+import { useCallback } from 'react';
+
+import {
+  type AppSetting,
+  fontStyleOptions,
+  useAppSetting,
+  windowFrameStyleOptions,
+} from '../../../../../atoms/settings';
+import { LanguageMenu } from '../../../language-menu';
+import { DateFormatSetting } from './date-format-setting';
+import { settingWrapper } from './style.css';
+
+export const ThemeSettings = () => {
+  const t = useAFFiNEI18N();
+  const { setTheme, theme } = useTheme();
+
+  return (
+    <RadioButtonGroup
+      width={250}
+      className={settingWrapper}
+      value={theme}
+      onValueChange={useCallback(
+        (value: string) => {
+          setTheme(value);
+        },
+        [setTheme]
+      )}
+    >
+      <RadioButton value="system" data-testid="system-theme-trigger">
+        {t['com.affine.themeSettings.system']()}
+      </RadioButton>
+      <RadioButton value="light" data-testid="light-theme-trigger">
+        {t['com.affine.themeSettings.light']()}
+      </RadioButton>
+      <RadioButton value="dark" data-testid="dark-theme-trigger">
+        {t['com.affine.themeSettings.dark']()}
+      </RadioButton>
+    </RadioButtonGroup>
+  );
+};
+
+const FontFamilySettings = () => {
+  const t = useAFFiNEI18N();
+  const [appSettings, setAppSettings] = useAppSetting();
+  return (
+    <RadioButtonGroup
+      width={250}
+      className={settingWrapper}
+      value={appSettings.fontStyle}
+      onValueChange={useCallback(
+        (key: AppSetting['fontStyle']) => {
+          setAppSettings({ fontStyle: key });
+        },
+        [setAppSettings]
+      )}
+    >
+      {fontStyleOptions.map(({ key, value }) => {
+        let font = '';
+        switch (key) {
+          case 'Sans':
+            font = t['com.affine.appearanceSettings.fontStyle.sans']();
+            break;
+          case 'Serif':
+            font = t['com.affine.appearanceSettings.fontStyle.serif']();
+            break;
+          case 'Mono':
+            font = t[`com.affine.appearanceSettings.fontStyle.mono`]();
+            break;
+          default:
+            break;
+        }
+        return (
+          <RadioButton
+            key={key}
+            value={key}
+            data-testid="system-font-style-trigger"
+            style={{
+              fontFamily: value,
+            }}
+          >
+            {font}
+          </RadioButton>
+        );
+      })}
+    </RadioButtonGroup>
+  );
+};
+
+export const AppearanceSettings = () => {
+  const t = useAFFiNEI18N();
+
+  const [appSettings, setAppSettings] = useAppSetting();
+
+  const changeSwitch = useCallback(
+    (key: keyof AppSetting, checked: boolean) => {
+      setAppSettings({ [key]: checked });
+    },
+    [setAppSettings]
+  );
+  return (
+    <>
+      <SettingHeader
+        title={t['com.affine.appearanceSettings.title']()}
+        subtitle={t['com.affine.appearanceSettings.subtitle']()}
+      />
+
+      <SettingWrapper title={t['com.affine.appearanceSettings.theme.title']()}>
+        <SettingRow
+          name={t['com.affine.appearanceSettings.color.title']()}
+          desc={t['com.affine.appearanceSettings.color.description']()}
+        >
+          <ThemeSettings />
+        </SettingRow>
+        <SettingRow
+          name={t['com.affine.appearanceSettings.font.title']()}
+          desc={t['com.affine.appearanceSettings.font.description']()}
+        >
+          <FontFamilySettings />
+        </SettingRow>
+        <SettingRow
+          name={t['com.affine.appearanceSettings.language.title']()}
+          desc={t['com.affine.appearanceSettings.language.description']()}
+        >
+          <div className={settingWrapper}>
+            <LanguageMenu />
+          </div>
+        </SettingRow>
+        {environment.isDesktop ? (
+          <SettingRow
+            name={t['com.affine.appearanceSettings.clientBorder.title']()}
+            desc={t['com.affine.appearanceSettings.clientBorder.description']()}
+            data-testid="client-border-style-trigger"
+          >
+            <Switch
+              checked={appSettings.clientBorder}
+              onChange={checked => changeSwitch('clientBorder', checked)}
+            />
+          </SettingRow>
+        ) : null}
+
+        <SettingRow
+          name={t['com.affine.appearanceSettings.fullWidth.title']()}
+          desc={t['com.affine.appearanceSettings.fullWidth.description']()}
+        >
+          <Switch
+            data-testid="full-width-layout-trigger"
+            checked={appSettings.fullWidthLayout}
+            onChange={checked => changeSwitch('fullWidthLayout', checked)}
+          />
+        </SettingRow>
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+          <SettingRow
+            name={t['com.affine.appearanceSettings.windowFrame.title']()}
+            desc={t['com.affine.appearanceSettings.windowFrame.description']()}
+          >
+            <RadioButtonGroup
+              className={settingWrapper}
+              width={250}
+              defaultValue={appSettings.windowFrameStyle}
+              onValueChange={(value: AppSetting['windowFrameStyle']) => {
+                setAppSettings({ windowFrameStyle: value });
+              }}
+            >
+              {windowFrameStyleOptions.map(option => {
+                return (
+                  <RadioButton value={option} key={option}>
+                    {t[`com.affine.appearanceSettings.windowFrame.${option}`]()}
+                  </RadioButton>
+                );
+              })}
+            </RadioButtonGroup>
+          </SettingRow>
+        ) : null}
+      </SettingWrapper>
+      {runtimeConfig.enableNewSettingUnstableApi ? (
+        <SettingWrapper title={t['com.affine.appearanceSettings.date.title']()}>
+          <SettingRow
+            name={t['com.affine.appearanceSettings.dateFormat.title']()}
+            desc={t['com.affine.appearanceSettings.dateFormat.description']()}
+          >
+            <div className={settingWrapper}>
+              <DateFormatSetting />
+            </div>
+          </SettingRow>
+          <SettingRow
+            name={t['com.affine.appearanceSettings.startWeek.title']()}
+            desc={t['com.affine.appearanceSettings.startWeek.description']()}
+          >
+            <Switch
+              checked={appSettings.startWeekOnMonday}
+              onChange={checked => changeSwitch('startWeekOnMonday', checked)}
+            />
+          </SettingRow>
+        </SettingWrapper>
+      ) : null}
+
+      {environment.isDesktop ? (
+        <SettingWrapper
+          title={t['com.affine.appearanceSettings.sidebar.title']()}
+        >
+          <SettingRow
+            name={t['com.affine.appearanceSettings.noisyBackground.title']()}
+            desc={t[
+              'com.affine.appearanceSettings.noisyBackground.description'
+            ]()}
+          >
+            <Switch
+              checked={appSettings.enableNoisyBackground}
+              onChange={checked =>
+                changeSwitch('enableNoisyBackground', checked)
+              }
+            />
+          </SettingRow>
+          {environment.isMacOs && (
+            <SettingRow
+              name={t['com.affine.appearanceSettings.translucentUI.title']()}
+              desc={t[
+                'com.affine.appearanceSettings.translucentUI.description'
+              ]()}
+            >
+              <Switch
+                checked={appSettings.enableBlurBackground}
+                onChange={checked =>
+                  changeSwitch('enableBlurBackground', checked)
+                }
+              />
+            </SettingRow>
+          )}
+        </SettingWrapper>
+      ) : null}
+    </>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const settingWrapper = style({
+  flexGrow: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  minWidth: '150px',
+  maxWidth: '250px',
+});

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

@@ -0,0 +1,78 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  AppearanceIcon,
+  InformationIcon,
+  KeyboardIcon,
+  PluginIcon,
+} from '@blocksuite/icons';
+import type { ReactElement, SVGProps } from 'react';
+
+import { AboutAffine } from './about';
+import { AppearanceSettings } from './appearance';
+import { Plugins } from './plugins';
+import { Shortcuts } from './shortcuts';
+
+export type GeneralSettingKeys =
+  | 'shortcuts'
+  | 'appearance'
+  | 'plugins'
+  | 'about';
+
+interface GeneralSettingListItem {
+  key: GeneralSettingKeys;
+  title: string;
+  icon: (props: SVGProps<SVGSVGElement>) => ReactElement;
+  testId: string;
+}
+
+export type GeneralSettingList = GeneralSettingListItem[];
+
+export const useGeneralSettingList = (): GeneralSettingList => {
+  const t = useAFFiNEI18N();
+
+  return [
+    {
+      key: 'appearance',
+      title: t['com.affine.settings.appearance'](),
+      icon: AppearanceIcon,
+      testId: 'appearance-panel-trigger',
+    },
+    {
+      key: 'shortcuts',
+      title: t['com.affine.keyboardShortcuts.title'](),
+      icon: KeyboardIcon,
+      testId: 'shortcuts-panel-trigger',
+    },
+    {
+      key: 'plugins',
+      title: 'Plugins',
+      icon: PluginIcon,
+      testId: 'plugins-panel-trigger',
+    },
+    {
+      key: 'about',
+      title: t['com.affine.aboutAFFiNE.title'](),
+      icon: InformationIcon,
+      testId: 'about-panel-trigger',
+    },
+  ];
+};
+
+interface GeneralSettingProps {
+  generalKey: GeneralSettingKeys;
+}
+
+export const GeneralSetting = ({ generalKey }: GeneralSettingProps) => {
+  switch (generalKey) {
+    case 'shortcuts':
+      return <Shortcuts />;
+    case 'appearance':
+      return <AppearanceSettings />;
+    case 'plugins':
+      return <Plugins />;
+    case 'about':
+      return <AboutAffine />;
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,97 @@
+import { Switch } from '@affine/component';
+import { SettingHeader } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { CallbackMap } from '@affine/sdk/entry';
+import {
+  addCleanup,
+  enabledPluginAtom,
+  pluginPackageJson,
+  pluginSettingAtom,
+} from '@toeverything/infra/__internal__/plugin';
+import { loadedPluginNameAtom } from '@toeverything/infra/atom';
+import type { packageJsonOutputSchema } from '@toeverything/infra/type';
+import { useAtom, useAtomValue } from 'jotai/react';
+import { startTransition, useCallback, useMemo } from 'react';
+import type { z } from 'zod';
+
+import { pluginItemStyle } from './style.css';
+
+type PluginItemProps = {
+  json: z.infer<typeof packageJsonOutputSchema>;
+};
+
+type PluginSettingDetailProps = {
+  pluginName: string;
+  create: CallbackMap['setting'];
+};
+
+const PluginSettingDetail = ({
+  pluginName,
+  create,
+}: PluginSettingDetailProps) => {
+  return (
+    <div
+      ref={useCallback(
+        (ref: HTMLDivElement | null) => {
+          if (ref) {
+            const cleanup = create(ref);
+            addCleanup(pluginName, cleanup);
+          }
+        },
+        [pluginName, create]
+      )}
+    />
+  );
+};
+
+const PluginItem = ({ json }: PluginItemProps) => {
+  const [plugins, setEnabledPlugins] = useAtom(enabledPluginAtom);
+  const checked = useMemo(
+    () => plugins.includes(json.name),
+    [json.name, plugins]
+  );
+  const create = useAtomValue(pluginSettingAtom)[json.name];
+  return (
+    <div className={pluginItemStyle} key={json.name}>
+      <div>
+        {json.name}
+        <Switch
+          checked={checked}
+          onChange={useCallback(
+            (checked: boolean) => {
+              startTransition(() => {
+                setEnabledPlugins(plugins => {
+                  if (checked) {
+                    return [...plugins, json.name];
+                  } else {
+                    return plugins.filter(plugin => plugin !== json.name);
+                  }
+                });
+              });
+            },
+            [json.name, setEnabledPlugins]
+          )}
+        />
+      </div>
+      <div>{json.description}</div>
+      {create && <PluginSettingDetail pluginName={json.name} create={create} />}
+    </div>
+  );
+};
+
+export const Plugins = () => {
+  const t = useAFFiNEI18N();
+  const loadedPlugins = useAtomValue(loadedPluginNameAtom);
+  return (
+    <>
+      <SettingHeader
+        title={'Plugins'}
+        subtitle={loadedPlugins.length === 0 && t['None yet']()}
+        data-testid="plugins-title"
+      />
+      {useAtomValue(pluginPackageJson).map(json => (
+        <PluginItem json={json} key={json.name} />
+      ))}
+    </>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/general-setting/plugins/style.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+
+export const settingWrapperStyle = style({
+  flexGrow: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  minWidth: '150px',
+  maxWidth: '250px',
+});
+
+export const pluginItemStyle = style({
+  borderBottom: '1px solid var(--affine-border-color)',
+  transition: '0.3s',
+  padding: '24px 8px',
+  fontSize: 'var(--affine-font-sm)',
+});

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

@@ -0,0 +1,62 @@
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+import {
+  type ShortcutsInfo,
+  useEdgelessShortcuts,
+  useGeneralShortcuts,
+  useMarkdownShortcuts,
+  usePageShortcuts,
+} from '../../../../../hooks/affine/use-shortcuts';
+import { shortcutKey, shortcutKeyContainer, shortcutRow } from './style.css';
+
+const ShortcutsPanel = ({
+  shortcutsInfo,
+}: {
+  shortcutsInfo: ShortcutsInfo;
+}) => {
+  return (
+    <SettingWrapper title={shortcutsInfo.title}>
+      {Object.entries(shortcutsInfo.shortcuts).map(([title, shortcuts]) => {
+        return (
+          <div key={title} className={shortcutRow}>
+            <span>{title}</span>
+            <div className={shortcutKeyContainer}>
+              {shortcuts.map(key => {
+                return (
+                  <span className={shortcutKey} key={key}>
+                    {key}
+                  </span>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </SettingWrapper>
+  );
+};
+
+export const Shortcuts = () => {
+  const t = useAFFiNEI18N();
+
+  const markdownShortcutsInfo = useMarkdownShortcuts();
+  const pageShortcutsInfo = usePageShortcuts();
+  const edgelessShortcutsInfo = useEdgelessShortcuts();
+  const generalShortcutsInfo = useGeneralShortcuts();
+
+  return (
+    <>
+      <SettingHeader
+        title={t['com.affine.keyboardShortcuts.title']()}
+        subtitle={t['com.affine.keyboardShortcuts.subtitle']()}
+        data-testid="keyboard-shortcuts-title"
+      />
+      <ShortcutsPanel shortcutsInfo={generalShortcutsInfo} />
+      <ShortcutsPanel shortcutsInfo={pageShortcutsInfo} />
+      <ShortcutsPanel shortcutsInfo={edgelessShortcutsInfo} />
+      <ShortcutsPanel shortcutsInfo={markdownShortcutsInfo} />
+    </>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+
+export const shortcutRow = style({
+  height: '32px',
+  marginBottom: '12px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  fontSize: 'var(--affine-font-base)',
+  selectors: {
+    '&:last-of-type': {
+      marginBottom: '0',
+    },
+  },
+});
+
+export const shortcutKeyContainer = style({
+  display: 'flex',
+});
+export const shortcutKey = style({
+  minWidth: '24px',
+  height: '20px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 6px',
+  borderRadius: '4px',
+  background: 'var(--affine-background-tertiary-color)',
+  fontSize: 'var(--affine-font-xs)',
+  selectors: {
+    '&:not(:last-of-type)': {
+      marginRight: '2px',
+    },
+  },
+});

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

@@ -0,0 +1,117 @@
+import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ContactWithUsIcon } from '@blocksuite/icons';
+import { Modal, type ModalProps } from '@toeverything/components/modal';
+import { Suspense, useCallback } from 'react';
+
+import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-status';
+import { AccountSetting } from './account-setting';
+import {
+  GeneralSetting,
+  type GeneralSettingKeys,
+  useGeneralSettingList,
+} from './general-setting';
+import { SettingSidebar } from './setting-sidebar';
+import * as style from './style.css';
+import { WorkspaceSetting } from './workspace-setting';
+
+type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
+
+export interface SettingProps extends ModalProps {
+  activeTab: ActiveTab;
+  workspaceId: string | null;
+  onSettingClick: (params: {
+    activeTab: ActiveTab;
+    workspaceId: string | null;
+  }) => void;
+}
+
+export const SettingModal = ({
+  activeTab = 'appearance',
+  workspaceId = null,
+  onSettingClick,
+  ...modalProps
+}: SettingProps) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+
+  const generalSettingList = useGeneralSettingList();
+
+  const onGeneralSettingClick = useCallback(
+    (key: GeneralSettingKeys) => {
+      onSettingClick({
+        activeTab: key,
+        workspaceId: null,
+      });
+    },
+    [onSettingClick]
+  );
+  const onWorkspaceSettingClick = useCallback(
+    (workspaceId: string) => {
+      onSettingClick({
+        activeTab: 'workspace',
+        workspaceId,
+      });
+    },
+    [onSettingClick]
+  );
+  const onAccountSettingClick = useCallback(() => {
+    onSettingClick({ activeTab: 'account', workspaceId: null });
+  }, [onSettingClick]);
+
+  return (
+    <Modal
+      width={1080}
+      height={760}
+      contentOptions={{
+        ['data-testid' as string]: 'setting-modal',
+        style: {
+          maxHeight: '85vh',
+          maxWidth: '70vw',
+          padding: 0,
+          overflow: 'hidden',
+          display: 'flex',
+        },
+      }}
+      {...modalProps}
+    >
+      <SettingSidebar
+        generalSettingList={generalSettingList}
+        onGeneralSettingClick={onGeneralSettingClick}
+        onWorkspaceSettingClick={onWorkspaceSettingClick}
+        selectedGeneralKey={activeTab}
+        selectedWorkspaceId={workspaceId}
+        onAccountSettingClick={onAccountSettingClick}
+      />
+
+      <div data-testid="setting-modal-content" className={style.wrapper}>
+        <div className={style.content}>
+          {activeTab === 'workspace' && workspaceId ? (
+            <Suspense fallback={<WorkspaceDetailSkeleton />}>
+              <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
+            </Suspense>
+          ) : null}
+          {generalSettingList.find(v => v.key === activeTab) ? (
+            <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
+          ) : null}
+          {activeTab === 'account' && loginStatus === 'authenticated' ? (
+            <AccountSetting />
+          ) : null}
+        </div>
+        <div className="footer">
+          <a
+            href="https://community.affine.pro/home"
+            target="_blank"
+            rel="noreferrer"
+            className={style.suggestionLink}
+          >
+            <span className={style.suggestionLinkIcon}>
+              <ContactWithUsIcon />
+            </span>
+            {t['com.affine.settings.suggestion']()}
+          </a>
+        </div>
+      </div>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,244 @@
+import {
+  WorkspaceListItemSkeleton,
+  WorkspaceListSkeleton,
+} from '@affine/component/setting-components';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { Logo1Icon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
+import { Tooltip } from '@toeverything/components/tooltip';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { getBlockSuiteWorkspaceAtom } from '@toeverything/infra/__internal__/workspace';
+import clsx from 'clsx';
+import { useAtom, useAtomValue } from 'jotai/react';
+import { type ReactElement, Suspense, useCallback, useMemo } from 'react';
+
+import { authAtom } from '../../../../atoms';
+import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-login-status';
+import { useCurrentUser } from '../../../../hooks/affine/use-current-user';
+import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
+import type {
+  GeneralSettingKeys,
+  GeneralSettingList,
+} from '../general-setting';
+import {
+  accountButton,
+  currentWorkspaceLabel,
+  settingSlideBar,
+  sidebarFooter,
+  sidebarItemsWrapper,
+  sidebarSelectItem,
+  sidebarSubtitle,
+  sidebarTitle,
+} from './style.css';
+
+export type UserInfoProps = {
+  onAccountSettingClick: () => void;
+};
+
+export const UserInfo = ({
+  onAccountSettingClick,
+}: UserInfoProps): ReactElement => {
+  const user = useCurrentUser();
+  return (
+    <div
+      data-testid="user-info-card"
+      className={accountButton}
+      onClick={onAccountSettingClick}
+    >
+      <Avatar size={28} name={user.name} url={user.image} className="avatar" />
+
+      <div className="content">
+        <div className="name" title={user.name}>
+          {user.name}
+        </div>
+        <div className="email" title={user.email}>
+          {user.email}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SignInButton = () => {
+  const t = useAFFiNEI18N();
+  const [, setAuthModal] = useAtom(authAtom);
+
+  return (
+    <div
+      className={accountButton}
+      onClick={useCallback(() => {
+        setAuthModal({ openModal: true, state: 'signIn' });
+      }, [setAuthModal])}
+    >
+      <div className="avatar not-sign">
+        <Logo1Icon />
+      </div>
+
+      <div className="content">
+        <div className="name" title={t['com.affine.settings.sign']()}>
+          {t['com.affine.settings.sign']()}
+        </div>
+        <div className="email" title={t['com.affine.setting.sign.message']()}>
+          {t['com.affine.setting.sign.message']()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SettingSidebar = ({
+  generalSettingList,
+  onGeneralSettingClick,
+  onWorkspaceSettingClick,
+  selectedWorkspaceId,
+  selectedGeneralKey,
+  onAccountSettingClick,
+}: {
+  generalSettingList: GeneralSettingList;
+  onGeneralSettingClick: (key: GeneralSettingKeys) => void;
+  onWorkspaceSettingClick: (workspaceId: string) => void;
+  selectedWorkspaceId: string | null;
+  selectedGeneralKey: string | null;
+  onAccountSettingClick: () => void;
+}) => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+  return (
+    <div className={settingSlideBar} data-testid="settings-sidebar">
+      <div className={sidebarTitle}>
+        {t['com.affine.settingSidebar.title']()}
+      </div>
+      <div className={sidebarSubtitle}>
+        {t['com.affine.settingSidebar.settings.general']()}
+      </div>
+      <div className={sidebarItemsWrapper}>
+        {generalSettingList.map(({ title, icon, key, testId }) => {
+          if (!runtimeConfig.enablePlugin && key === 'plugins') {
+            return null;
+          }
+          return (
+            <div
+              className={clsx(sidebarSelectItem, {
+                active: key === selectedGeneralKey,
+              })}
+              key={key}
+              title={title}
+              onClick={() => {
+                onGeneralSettingClick(key);
+              }}
+              data-testid={testId}
+            >
+              {icon({ className: 'icon' })}
+              <span className="setting-name">{title}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={sidebarSubtitle}>
+        {t['com.affine.settingSidebar.settings.workspace']()}
+      </div>
+      <div className={clsx(sidebarItemsWrapper, 'scroll')}>
+        <Suspense fallback={<WorkspaceListSkeleton />}>
+          <WorkspaceList
+            onWorkspaceSettingClick={onWorkspaceSettingClick}
+            selectedWorkspaceId={selectedWorkspaceId}
+          />
+        </Suspense>
+      </div>
+
+      <div className={sidebarFooter}>
+        {runtimeConfig.enableCloud && loginStatus === 'unauthenticated' ? (
+          <SignInButton />
+        ) : null}
+
+        {runtimeConfig.enableCloud && loginStatus === 'authenticated' ? (
+          <UserInfo onAccountSettingClick={onAccountSettingClick} />
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export const WorkspaceList = ({
+  onWorkspaceSettingClick,
+  selectedWorkspaceId,
+}: {
+  onWorkspaceSettingClick: (workspaceId: string) => void;
+  selectedWorkspaceId: string | null;
+}) => {
+  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
+  const [currentWorkspace] = useCurrentWorkspace();
+  const workspaceList = useMemo(() => {
+    return workspaces.filter(
+      ({ flavour }) => flavour !== WorkspaceFlavour.AFFINE_PUBLIC
+    );
+  }, [workspaces]);
+  return (
+    <>
+      {workspaceList.map(workspace => {
+        return (
+          <Suspense key={workspace.id} fallback={<WorkspaceListItemSkeleton />}>
+            <WorkspaceListItem
+              meta={workspace}
+              onClick={() => {
+                onWorkspaceSettingClick(workspace.id);
+              }}
+              isCurrent={workspace.id === currentWorkspace.id}
+              isActive={workspace.id === selectedWorkspaceId}
+            />
+          </Suspense>
+        );
+      })}
+    </>
+  );
+};
+
+const WorkspaceListItem = ({
+  meta,
+  onClick,
+  isCurrent,
+  isActive,
+}: {
+  meta: RootWorkspaceMetadata;
+  onClick: () => void;
+  isCurrent: boolean;
+  isActive: boolean;
+}) => {
+  const [workspaceAtom] = getBlockSuiteWorkspaceAtom(meta.id);
+  const workspace = useAtomValue(workspaceAtom);
+  const [workspaceAvatar] = useBlockSuiteWorkspaceAvatarUrl(workspace);
+  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
+
+  return (
+    <div
+      className={clsx(sidebarSelectItem, { active: isActive })}
+      title={workspaceName}
+      onClick={onClick}
+      data-testid="workspace-list-item"
+    >
+      <Avatar
+        size={14}
+        url={workspaceAvatar}
+        name={workspaceName}
+        colorfulFallback
+        style={{
+          marginRight: '10px',
+        }}
+      />
+      <span className="setting-name">{workspaceName}</span>
+      {isCurrent ? (
+        <Tooltip content="Current" side="top">
+          <div
+            className={currentWorkspaceLabel}
+            data-testid="current-workspace-label"
+          ></div>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+};

packages/frontend/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts

@@ -0,0 +1,147 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const settingSlideBar = style({
+  width: '25%',
+  maxWidth: '242px',
+  background: 'var(--affine-background-secondary-color)',
+  padding: '20px 0px',
+  height: '100%',
+  flexShrink: 0,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const sidebarTitle = style({
+  fontSize: 'var(--affine-font-h-6)',
+  fontWeight: '600',
+  lineHeight: 'var(--affine-line-height)',
+  padding: '0px 16px 0px 24px',
+});
+
+export const sidebarSubtitle = style({
+  fontSize: 'var(--affine-font-sm)',
+  lineHeight: 'var(--affine-line-height)',
+  color: 'var(--affine-text-secondary-color)',
+  padding: '0px 16px 0px 24px',
+  marginTop: '20px',
+  marginBottom: '4px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const sidebarItemsWrapper = style({
+  selectors: {
+    '&.scroll': {
+      flexGrow: 1,
+      overflowY: 'auto',
+    },
+  },
+});
+
+export const sidebarSelectItem = style({
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0px 16px 4px 16px',
+  padding: '0px 8px',
+  height: '30px',
+  fontSize: 'var(--affine-font-sm)',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+  },
+  selectors: {
+    '&.active': {
+      background: 'var(--affine-hover-color)',
+    },
+    [`${sidebarItemsWrapper} &:last-of-type`]: {
+      marginBottom: 0,
+    },
+  },
+});
+globalStyle(`${settingSlideBar} .icon`, {
+  width: '16px',
+  height: '16px',
+  marginRight: '10px',
+  flexShrink: 0,
+});
+globalStyle(`${settingSlideBar} .setting-name`, {
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flexGrow: 1,
+});
+export const currentWorkspaceLabel = style({
+  width: '20px',
+  height: '20px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  selectors: {
+    '&::after': {
+      content: '""',
+      width: '8px',
+      height: '8px',
+      borderRadius: '50%',
+      background: 'var(--affine-blue)',
+    },
+  },
+});
+
+export const sidebarFooter = style({ padding: '0 16px' });
+
+export const accountButton = style({
+  height: '42px',
+  padding: '4px 8px',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+  display: 'flex',
+  columnGap: '10px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+  },
+});
+
+globalStyle(`${accountButton} .avatar`, {
+  width: '28px',
+  height: '28px',
+  borderRadius: '50%',
+  fontSize: '20px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexShrink: 0,
+});
+
+globalStyle(`${accountButton} .avatar.not-sign`, {
+  color: 'var(--affine-icon-secondary)',
+  background: 'var(--affine-white)',
+  paddingBottom: '2px',
+  border: '1px solid var(--affine-icon-secondary)',
+});
+globalStyle(`${accountButton} .content`, {
+  flexGrow: '1',
+  minWidth: 0,
+});
+globalStyle(`${accountButton} .name`, {
+  fontSize: 'var(--affine-font-sm)',
+  fontWeight: 600,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flexGrow: 1,
+});
+globalStyle(`${accountButton} .email`, {
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  flexGrow: 1,
+});

packages/frontend/core/src/components/affine/setting-modal/style.css.ts

@@ -0,0 +1,38 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  flexGrow: '1',
+  height: '100%',
+  maxWidth: '560px',
+  margin: '0 auto',
+  padding: '40px 15px 20px 15px',
+  overflow: 'hidden auto',
+
+  // children
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const content = style({
+  width: '100%',
+  marginBottom: '24px',
+});
+
+export const suggestionLink = style({
+  fontSize: 'var(--affine-font-sm)',
+  color: 'var(--affine-text-primary-color)',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const suggestionLinkIcon = style({
+  color: 'var(--affine-icon-color)',
+  marginRight: '12px',
+  display: 'flex',
+});

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

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

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

@@ -0,0 +1,53 @@
+import { ShareMenu } from '@affine/component/share-menu';
+import {
+  type AffineOfficialWorkspace,
+  WorkspaceFlavour,
+} from '@affine/env/workspace';
+import type { Page } from '@blocksuite/store';
+import { useCallback, useState } from 'react';
+
+import { useExportPage } from '../../../hooks/affine/use-export-page';
+import { useIsSharedPage } from '../../../hooks/affine/use-is-shared-page';
+import { useOnTransformWorkspace } from '../../../hooks/root/use-on-transform-workspace';
+import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
+
+type SharePageModalProps = {
+  workspace: AffineOfficialWorkspace;
+  page: Page;
+};
+
+export const SharePageModal = ({ workspace, page }: SharePageModalProps) => {
+  const onTransformWorkspace = useOnTransformWorkspace();
+  const [open, setOpen] = useState(false);
+  const exportHandler = useExportPage(page);
+  const handleConfirm = useCallback(() => {
+    if (workspace.flavour !== WorkspaceFlavour.LOCAL) {
+      return;
+    }
+    onTransformWorkspace(
+      WorkspaceFlavour.LOCAL,
+      WorkspaceFlavour.AFFINE_CLOUD,
+      workspace
+    );
+    setOpen(false);
+  }, [onTransformWorkspace, workspace]);
+  return (
+    <>
+      <ShareMenu
+        workspace={workspace}
+        currentPage={page}
+        useIsSharedPage={useIsSharedPage}
+        onEnableAffineCloud={() => setOpen(true)}
+        togglePagePublic={async () => {}}
+        exportHandler={exportHandler}
+      />
+      {workspace.flavour === WorkspaceFlavour.LOCAL ? (
+        <EnableAffineCloudModal
+          open={open}
+          onOpenChange={setOpen}
+          onConfirm={handleConfirm}
+        />
+      ) : null}
+    </>
+  );
+};

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

@@ -0,0 +1,46 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+} from '@toeverything/components/modal';
+import { useMemo } from 'react';
+
+type SignOutConfirmModalI18NKeys =
+  | 'title'
+  | 'description'
+  | 'cancel'
+  | 'confirm';
+
+export const SignOutModal = ({ ...props }: ConfirmModalProps) => {
+  const { title, description, cancelText, confirmButtonOptions = {} } = props;
+  const t = useAFFiNEI18N();
+
+  const defaultTexts = useMemo(() => {
+    const getDefaultText = (key: SignOutConfirmModalI18NKeys) => {
+      return t[`com.affine.auth.sign-out.confirm-modal.${key}`]();
+    };
+    return {
+      title: getDefaultText('title'),
+      description: getDefaultText('description'),
+      cancelText: getDefaultText('cancel'),
+      children: getDefaultText('confirm'),
+    };
+  }, [t]);
+
+  return (
+    <ConfirmModal
+      title={title ?? defaultTexts.title}
+      description={description ?? defaultTexts.description}
+      cancelText={cancelText ?? defaultTexts.cancelText}
+      confirmButtonOptions={{
+        type: 'error',
+        ['data-testid' as string]: 'confirm-sign-out-button',
+        children: confirmButtonOptions.children ?? defaultTexts.children,
+      }}
+      contentOptions={{
+        ['data-testid' as string]: 'confirm-sign-out-modal',
+      }}
+      {...props}
+    />
+  );
+};

packages/frontend/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx

@@ -0,0 +1,61 @@
+import { Empty } from '@affine/component';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Modal, type ModalProps } from '@toeverything/components/modal';
+import { useCallback } from 'react';
+
+import {
+  StyleButton,
+  StyleButtonContainer,
+  StyleImage,
+  StyleTips,
+} from './style';
+
+export const TmpDisableAffineCloudModal = (props: ModalProps) => {
+  const t = useAFFiNEI18N();
+  const onClose = useCallback(() => {
+    props.onOpenChange?.(false);
+  }, [props]);
+  return (
+    <Modal
+      title={t['com.affine.cloudTempDisable.title']()}
+      contentOptions={{
+        ['data-testid' as string]: 'disable-affine-cloud-modal',
+      }}
+      width={480}
+      {...props}
+    >
+      <StyleTips>
+        <Trans i18nKey="com.affine.cloudTempDisable.description">
+          We are upgrading the AFFiNE Cloud service and it is temporarily
+          unavailable on the client side. If you wish to stay updated on the
+          progress and be notified on availability, you can fill out the
+          <a
+            href="https://6dxre9ihosp.typeform.com/to/B8IHwuyy"
+            rel="noreferrer"
+            target="_blank"
+            style={{
+              color: 'var(--affine-link-color)',
+            }}
+          >
+            AFFiNE Cloud Signup
+          </a>
+          .
+        </Trans>
+      </StyleTips>
+      <StyleImage>
+        <Empty
+          containerStyle={{
+            width: '200px',
+            height: '112px',
+          }}
+        />
+      </StyleImage>
+      <StyleButtonContainer>
+        <StyleButton type="primary" onClick={onClose}>
+          {t['Got it']()}
+        </StyleButton>
+      </StyleButtonContainer>
+    </Modal>
+  );
+};

packages/frontend/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts

@@ -0,0 +1,56 @@
+import { displayFlex, styled } from '@affine/component';
+import { Button } from '@toeverything/components/button';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+  flexShrink: 0,
+});
+
+export const Content = styled('div')({
+  padding: '0 40px',
+});
+
+export const ContentTitle = styled('h1')(() => {
+  return {
+    marginTop: 44,
+    fontSize: 'var(--affine-font-h6)',
+    lineHeight: '28px',
+    fontWeight: 600,
+  };
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    margin: '0 0 20px 0',
+    a: {
+      color: 'var(--affine-primary-color)',
+    },
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    textAlign: 'center',
+    borderRadius: '8px',
+    backgroundColor: 'var(--affine-primary-color)',
+    span: {
+      margin: '0',
+    },
+  };
+});
+export const StyleButtonContainer = styled('div')(() => {
+  return {
+    width: '100%',
+    marginTop: 20,
+    ...displayFlex('flex-end', 'center'),
+  };
+});
+export const StyleImage = styled('div')(() => {
+  return {
+    ...displayFlex('center', 'center'),
+  };
+});

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

@@ -0,0 +1,2 @@
+export type { EditorProps } from '@affine/component/block-suite-editor';
+export { BlockSuiteEditor } from '@affine/component/block-suite-editor';

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

@@ -0,0 +1,148 @@
+import type { AffineOfficialWorkspace } from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import {
+  useBlockSuitePageMeta,
+  usePageMetaHelper,
+} from '@toeverything/hooks/use-block-suite-page-meta';
+import {
+  type FocusEvent,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+
+import { EditorModeSwitch } from '../block-suite-mode-switch';
+import { PageMenu } from './operation-menu';
+import * as styles from './styles.css';
+
+export interface BlockSuiteHeaderTitleProps {
+  workspace: AffineOfficialWorkspace;
+  pageId: string;
+}
+
+const EditableTitle = ({
+  value,
+  onFocus: propsOnFocus,
+  ...inputProps
+}: InputHTMLAttributes<HTMLInputElement>) => {
+  const onFocus = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      e.target.select();
+      propsOnFocus?.(e);
+    },
+    [propsOnFocus]
+  );
+  return (
+    <div className={styles.headerTitleContainer}>
+      <input
+        className={styles.titleInput}
+        autoFocus={true}
+        value={value}
+        type="text"
+        data-testid="title-content"
+        onFocus={onFocus}
+        {...inputProps}
+      />
+      <span className={styles.shadowTitle}>{value}</span>
+    </div>
+  );
+};
+
+const StableTitle = ({
+  workspace,
+  pageId,
+  onRename,
+}: BlockSuiteHeaderTitleProps & {
+  onRename?: () => void;
+}) => {
+  const currentPage = workspace.blockSuiteWorkspace.getPage(pageId);
+  const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
+    meta => meta.id === currentPage?.id
+  );
+
+  const title = pageMeta?.title;
+
+  return (
+    <div className={styles.headerTitleContainer}>
+      <EditorModeSwitch
+        blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+        pageId={pageId}
+        style={{
+          marginRight: '12px',
+        }}
+      />
+      <span
+        data-testid="title-edit-button"
+        className={styles.titleEditButton}
+        onDoubleClick={onRename}
+      >
+        {title || 'Untitled'}
+      </span>
+      <PageMenu rename={onRename} pageId={pageId} />
+    </div>
+  );
+};
+
+const BlockSuiteTitleWithRename = (props: BlockSuiteHeaderTitleProps) => {
+  const { workspace, pageId } = props;
+  const currentPage = workspace.blockSuiteWorkspace.getPage(pageId);
+  const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
+    meta => meta.id === currentPage?.id
+  );
+  const pageTitleMeta = usePageMetaHelper(workspace.blockSuiteWorkspace);
+
+  const [isEditable, setIsEditable] = useState(false);
+  const [title, setPageTitle] = useState(pageMeta?.title || 'Untitled');
+
+  const onRename = useCallback(() => {
+    setIsEditable(true);
+  }, []);
+
+  const onBlur = useCallback(() => {
+    setIsEditable(false);
+    if (!currentPage?.id) {
+      return;
+    }
+    pageTitleMeta.setPageTitle(currentPage.id, title);
+  }, [currentPage?.id, pageTitleMeta, title]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter' || e.key === 'Escape') {
+        onBlur();
+      }
+    },
+    [onBlur]
+  );
+
+  useEffect(() => {
+    setPageTitle(pageMeta?.title || '');
+  }, [pageMeta?.title]);
+
+  if (isEditable) {
+    return (
+      <EditableTitle
+        onBlur={onBlur}
+        value={title}
+        onKeyDown={handleKeyDown}
+        onChange={e => {
+          const value = e.target.value;
+          setPageTitle(value);
+        }}
+      />
+    );
+  }
+
+  return <StableTitle {...props} onRename={onRename} />;
+};
+
+export const BlockSuiteHeaderTitle = (props: BlockSuiteHeaderTitleProps) => {
+  if (props.workspace.flavour === WorkspaceFlavour.AFFINE_PUBLIC) {
+    return <StableTitle {...props} />;
+  }
+  return <BlockSuiteTitleWithRename {...props} />;
+};
+
+BlockSuiteHeaderTitle.displayName = 'BlockSuiteHeaderTitle';

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

@@ -0,0 +1,234 @@
+import { FlexWrapper } from '@affine/component';
+import { Export, MoveToTrash } from '@affine/component/page-list';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import {
+  DuplicateIcon,
+  EdgelessIcon,
+  EditIcon,
+  FavoritedIcon,
+  FavoriteIcon,
+  ImportIcon,
+  PageIcon,
+} from '@blocksuite/icons';
+import type { PageMeta } from '@blocksuite/store';
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+} from '@toeverything/components/menu';
+import {
+  useBlockSuitePageMeta,
+  usePageMetaHelper,
+} from '@toeverything/hooks/use-block-suite-page-meta';
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useRef } from 'react';
+import { applyUpdate, encodeStateAsUpdate } from 'yjs';
+
+import { setPageModeAtom } from '../../../atoms';
+import { currentModeAtom } from '../../../atoms/mode';
+import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
+import { useExportPage } from '../../../hooks/affine/use-export-page';
+import { useTrashModalHelper } from '../../../hooks/affine/use-trash-modal-helper';
+import { useCurrentWorkspace } from '../../../hooks/current/use-current-workspace';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
+import { toast } from '../../../utils';
+import { HeaderDropDownButton } from '../../pure/header-drop-down-button';
+import { usePageHelper } from '../block-suite-page-list/utils';
+
+type PageMenuProps = {
+  rename?: () => void;
+  pageId: string;
+};
+// fixme: refactor this file
+export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
+  const t = useAFFiNEI18N();
+  const ref = useRef(null);
+  const { openPage } = useNavigateHelper();
+
+  // fixme(himself65): remove these hooks ASAP
+  const [workspace] = useCurrentWorkspace();
+  const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
+  const currentPage = blockSuiteWorkspace.getPage(pageId);
+  assertExists(currentPage);
+
+  const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
+    meta => meta.id === pageId
+  ) as PageMeta;
+  const currentMode = useAtomValue(currentModeAtom);
+  const favorite = pageMeta.favorite ?? false;
+
+  const { setPageMeta, setPageTitle } = usePageMetaHelper(blockSuiteWorkspace);
+  const { togglePageMode, toggleFavorite } =
+    useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const { importFile } = usePageHelper(blockSuiteWorkspace);
+  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
+  const { setTrashModal } = useTrashModalHelper(blockSuiteWorkspace);
+
+  const handleOpenTrashModal = useCallback(() => {
+    setTrashModal({
+      open: true,
+      pageId,
+      pageTitle: pageMeta.title,
+    });
+  }, [pageId, pageMeta.title, setTrashModal]);
+
+  const handleFavorite = useCallback(() => {
+    toggleFavorite(pageId);
+    toast(
+      favorite
+        ? t['com.affine.toastMessage.removedFavorites']()
+        : t['com.affine.toastMessage.addedFavorites']()
+    );
+  }, [favorite, pageId, t, toggleFavorite]);
+  const handleSwitchMode = useCallback(() => {
+    togglePageMode(pageId);
+    toast(
+      currentMode === 'page'
+        ? t['com.affine.toastMessage.edgelessMode']()
+        : t['com.affine.toastMessage.pageMode']()
+    );
+  }, [currentMode, pageId, t, togglePageMode]);
+  const menuItemStyle = {
+    padding: '4px 12px',
+    transition: 'all 0.3s',
+  };
+
+  const exportHandler = useExportPage(currentPage);
+  const setPageMode = useSetAtom(setPageModeAtom);
+
+  const duplicate = useCallback(async () => {
+    const currentPageMeta = currentPage.meta;
+    const newPage = createPage();
+    await newPage.waitForLoaded();
+
+    const update = encodeStateAsUpdate(currentPage.spaceDoc);
+    applyUpdate(newPage.spaceDoc, update);
+
+    setPageMeta(newPage.id, {
+      tags: currentPageMeta.tags,
+      favorite: currentPageMeta.favorite,
+    });
+    setPageMode(newPage.id, currentMode);
+    setPageTitle(newPage.id, `${currentPageMeta.title}(1)`);
+    openPage(blockSuiteWorkspace.id, newPage.id);
+  }, [
+    blockSuiteWorkspace.id,
+    createPage,
+    currentMode,
+    currentPage.meta,
+    currentPage.spaceDoc,
+    openPage,
+    setPageMeta,
+    setPageMode,
+    setPageTitle,
+  ]);
+  const EditMenu = (
+    <>
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <EditIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-rename"
+        onSelect={rename}
+        style={menuItemStyle}
+      >
+        {t['Rename']()}
+      </MenuItem>
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            {currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-edgeless"
+        onSelect={handleSwitchMode}
+        style={menuItemStyle}
+      >
+        {t['Convert to ']()}
+        {currentMode === 'page'
+          ? t['com.affine.pageMode.edgeless']()
+          : t['com.affine.pageMode.page']()}
+      </MenuItem>
+      <MenuItem
+        data-testid="editor-option-menu-favorite"
+        onSelect={handleFavorite}
+        style={menuItemStyle}
+        preFix={
+          <MenuIcon>
+            {favorite ? (
+              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+            ) : (
+              <FavoriteIcon />
+            )}
+          </MenuIcon>
+        }
+      >
+        {favorite
+          ? t['com.affine.favoritePageOperation.remove']()
+          : t['com.affine.favoritePageOperation.add']()}
+      </MenuItem>
+      {/* {TODO: add tag and duplicate function support} */}
+      {/* <MenuItem
+        icon={<TagsIcon />}
+        data-testid="editor-option-menu-add-tag"
+        onClick={() => {}}
+        style={menuItemStyle}
+      >
+        {t['com.affine.header.option.add-tag']()}
+      </MenuItem> */}
+      <MenuSeparator />
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <DuplicateIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-duplicate"
+        onSelect={duplicate}
+        style={menuItemStyle}
+      >
+        {t['com.affine.header.option.duplicate']()}
+      </MenuItem>
+      <MenuItem
+        preFix={
+          <MenuIcon>
+            <ImportIcon />
+          </MenuIcon>
+        }
+        data-testid="editor-option-menu-import"
+        onSelect={importFile}
+        style={menuItemStyle}
+      >
+        {t['Import']()}
+      </MenuItem>
+      <Export exportHandler={exportHandler} />
+      <MenuSeparator />
+      <MoveToTrash
+        data-testid="editor-option-menu-delete"
+        onSelect={handleOpenTrashModal}
+      />
+    </>
+  );
+  if (pageMeta.trash) {
+    return null;
+  }
+  return (
+    <>
+      <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
+        <Menu
+          items={EditMenu}
+          contentOptions={{
+            align: 'center',
+          }}
+        >
+          <HeaderDropDownButton />
+        </Menu>
+      </FlexWrapper>
+    </>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-header-title/styles.css.ts

@@ -0,0 +1,40 @@
+import { type ComplexStyleRule, style } from '@vanilla-extract/css';
+
+export const headerTitleContainer = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexGrow: 1,
+  position: 'relative',
+  width: '100%',
+});
+
+export const titleEditButton = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  WebkitAppRegion: 'no-drag',
+} as ComplexStyleRule);
+
+export const titleInput = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
+  width: '100%',
+  height: '100%',
+
+  selectors: {
+    '&:focus': {
+      border: '1px solid var(--affine-black-10)',
+      borderRadius: '8px',
+      height: '32px',
+      padding: '6px 8px',
+    },
+  },
+});
+export const shadowTitle = style({
+  visibility: 'hidden',
+});

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/animation-data/edgeless-hover.json

@@ -0,0 +1,919 @@
+{
+  "v": "5.12.1",
+  "fr": 120,
+  "ip": 0,
+  "op": 76,
+  "w": 240,
+  "h": 240,
+  "nm": "Edgeless",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "“图层 2”轮廓",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [97.5, 138, 0],
+          "ix": 2,
+          "l": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [10.35, 13.5, 0],
+          "ix": 1,
+          "l": 2
+        },
+        "s": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [0.772, 0.772, 0.667],
+                "y": [1, 1, 1.219]
+              },
+              "o": {
+                "x": [0.462, 0.462, 0.333],
+                "y": [0, 0, 0]
+              },
+              "t": 5,
+              "s": [1100, 1100, 100]
+            },
+            {
+              "i": {
+                "x": [0.562, 0.562, 0.667],
+                "y": [1, 1, 1]
+              },
+              "o": {
+                "x": [0.455, 0.455, 0.333],
+                "y": [0, 0, -0.238]
+              },
+              "t": 26.562,
+              "s": [1070, 1070, 100]
+            },
+            {
+              "t": 50,
+              "s": [1100, 1100, 100]
+            }
+          ],
+          "ix": 6,
+          "l": 2
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [1.369, 1.18],
+                    [1.875, 0]
+                  ],
+                  "o": [
+                    [0, -1.885],
+                    [-2.094, -1.571],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [3.665, 3.299],
+                    [1.57, -1.728],
+                    [-3.665, -3.299]
+                  ],
+                  "c": false
+                },
+                "ix": 2
+              },
+              "nm": "路径 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 3
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 4
+              },
+              "w": {
+                "a": 0,
+                "k": 1.5,
+                "ix": 5
+              },
+              "lc": 1,
+              "lj": 1,
+              "ml": 4,
+              "bm": 0,
+              "nm": "描边 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 0,
+                "k": [13.626, 10.441],
+                "ix": 2
+              },
+              "a": {
+                "a": 0,
+                "k": [0, 0],
+                "ix": 1
+              },
+              "s": {
+                "a": 0,
+                "k": [100, 100],
+                "ix": 3
+              },
+              "r": {
+                "a": 0,
+                "k": 0,
+                "ix": 6
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 7
+              },
+              "sk": {
+                "a": 0,
+                "k": 0,
+                "ix": 4
+              },
+              "sa": {
+                "a": 0,
+                "k": 0,
+                "ix": 5
+              },
+              "nm": "变换"
+            }
+          ],
+          "nm": "组 1",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "ct": 1,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 4,
+      "nm": "“图层 3”轮廓",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 0,
+          "k": [69, 119, 0],
+          "ix": 2,
+          "l": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [6.9, 11.9, 0],
+          "ix": 1,
+          "l": 2
+        },
+        "s": {
+          "a": 0,
+          "k": [1000, 1000, 100],
+          "ix": 6,
+          "l": 2
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [6.818, 9.76],
+                    [6.818, 13.949]
+                  ],
+                  "c": false
+                },
+                "ix": 2
+              },
+              "nm": "路径 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 3
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 4
+              },
+              "w": {
+                "a": 0,
+                "k": 1.5,
+                "ix": 5
+              },
+              "lc": 1,
+              "lj": 1,
+              "ml": 4,
+              "bm": 0,
+              "nm": "描边 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 0,
+                "k": [0, 0],
+                "ix": 2
+              },
+              "a": {
+                "a": 0,
+                "k": [0, 0],
+                "ix": 1
+              },
+              "s": {
+                "a": 0,
+                "k": [100, 100],
+                "ix": 3
+              },
+              "r": {
+                "a": 0,
+                "k": 0,
+                "ix": 6
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 7
+              },
+              "sk": {
+                "a": 0,
+                "k": 0,
+                "ix": 4
+              },
+              "sa": {
+                "a": 0,
+                "k": 0,
+                "ix": 5
+              },
+              "nm": "变换"
+            }
+          ],
+          "nm": "组 1",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "ct": 1,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 3,
+      "ty": 4,
+      "nm": "“图层 4”轮廓",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": [0.363],
+                "y": [1]
+              },
+              "o": {
+                "x": [0.675],
+                "y": [-0.111]
+              },
+              "t": 5,
+              "s": [0]
+            },
+            {
+              "t": 50,
+              "s": [90]
+            }
+          ],
+          "ix": 10
+        },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": 0.363,
+                "y": 1
+              },
+              "o": {
+                "x": 0.675,
+                "y": 0
+              },
+              "t": 5,
+              "s": [173.5, 171, 0],
+              "to": [0, -1.333, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {
+                "x": 0.667,
+                "y": 1
+              },
+              "o": {
+                "x": 0.647,
+                "y": 0
+              },
+              "t": 26.562,
+              "s": [173.5, 163, 0],
+              "to": [0, 0, 0],
+              "ti": [0, -1.333, 0]
+            },
+            {
+              "t": 50,
+              "s": [173.5, 171, 0]
+            }
+          ],
+          "ix": 2,
+          "l": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [17.35, 16.9, 0],
+          "ix": 1,
+          "l": 2
+        },
+        "s": {
+          "a": 0,
+          "k": [1000, 1000, 100],
+          "ix": 6,
+          "l": 2
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [0, 0],
+                    [0, 0],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-2.357, -2.357],
+                    [2.357, -2.357],
+                    [2.357, 2.357],
+                    [-2.357, 2.357]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "路径 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 3
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 4
+              },
+              "w": {
+                "a": 0,
+                "k": 1.5,
+                "ix": 5
+              },
+              "lc": 1,
+              "lj": 2,
+              "bm": 0,
+              "nm": "描边 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 0,
+                "k": [17.344, 16.829],
+                "ix": 2
+              },
+              "a": {
+                "a": 0,
+                "k": [0, 0],
+                "ix": 1
+              },
+              "s": {
+                "a": 0,
+                "k": [100, 100],
+                "ix": 3
+              },
+              "r": {
+                "a": 0,
+                "k": 0,
+                "ix": 6
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 7
+              },
+              "sk": {
+                "a": 0,
+                "k": 0,
+                "ix": 4
+              },
+              "sa": {
+                "a": 0,
+                "k": 0,
+                "ix": 5
+              },
+              "nm": "变换"
+            }
+          ],
+          "nm": "组 1",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "ct": 1,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 4,
+      "ty": 4,
+      "nm": "“图层 5”轮廓",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": 0.363,
+                "y": 1
+              },
+              "o": {
+                "x": 0.675,
+                "y": 0
+              },
+              "t": 5,
+              "s": [68.5, 170, 0],
+              "to": [0, -1.333, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {
+                "x": 0.667,
+                "y": 1
+              },
+              "o": {
+                "x": 0.647,
+                "y": 0
+              },
+              "t": 26.562,
+              "s": [68.5, 162, 0],
+              "to": [0, 0, 0],
+              "ti": [0, -1.333, 0]
+            },
+            {
+              "t": 50,
+              "s": [68.5, 170, 0]
+            }
+          ],
+          "ix": 2,
+          "l": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [6.85, 17.05, 0],
+          "ix": 1,
+          "l": 2
+        },
+        "s": {
+          "a": 0,
+          "k": [1000, 1000, 100],
+          "ix": 6,
+          "l": 2
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [-1.446, 0],
+                    [0, -1.446],
+                    [1.446, 0],
+                    [0, 1.446]
+                  ],
+                  "o": [
+                    [1.446, 0],
+                    [0, 1.446],
+                    [-1.446, 0],
+                    [0, -1.446]
+                  ],
+                  "v": [
+                    [0, -2.618],
+                    [2.618, 0],
+                    [0, 2.618],
+                    [-2.618, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "路径 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 3
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 4
+              },
+              "w": {
+                "a": 0,
+                "k": 1.5,
+                "ix": 5
+              },
+              "lc": 1,
+              "lj": 1,
+              "ml": 4,
+              "bm": 0,
+              "nm": "描边 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 0,
+                "k": [6.818, 17.091],
+                "ix": 2
+              },
+              "a": {
+                "a": 0,
+                "k": [0, 0],
+                "ix": 1
+              },
+              "s": {
+                "a": 0,
+                "k": [100, 100],
+                "ix": 3
+              },
+              "r": {
+                "a": 0,
+                "k": 0,
+                "ix": 6
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 7
+              },
+              "sk": {
+                "a": 0,
+                "k": 0,
+                "ix": 4
+              },
+              "sa": {
+                "a": 0,
+                "k": 0,
+                "ix": 5
+              },
+              "nm": "变换"
+            }
+          ],
+          "nm": "组 1",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "ct": 1,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 5,
+      "ty": 4,
+      "nm": "“图层 6”轮廓",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 0,
+          "k": 100,
+          "ix": 11
+        },
+        "r": {
+          "a": 0,
+          "k": 0,
+          "ix": 10
+        },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": {
+                "x": 0.363,
+                "y": 1
+              },
+              "o": {
+                "x": 0.675,
+                "y": 0
+              },
+              "t": 5,
+              "s": [68, 65, 0],
+              "to": [0, 1.333, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": {
+                "x": 0.667,
+                "y": 1
+              },
+              "o": {
+                "x": 0.647,
+                "y": 0
+              },
+              "t": 26.562,
+              "s": [68, 73, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 1.333, 0]
+            },
+            {
+              "t": 50,
+              "s": [68, 65, 0]
+            }
+          ],
+          "ix": 2,
+          "l": 2
+        },
+        "a": {
+          "a": 0,
+          "k": [6.8, 6.6, 0],
+          "ix": 1,
+          "l": 2
+        },
+        "s": {
+          "a": 0,
+          "k": [1000, 1000, 100],
+          "ix": 6,
+          "l": 2
+        }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [-1.446, 0],
+                    [0, -1.446],
+                    [1.446, 0],
+                    [0, 1.446]
+                  ],
+                  "o": [
+                    [1.446, 0],
+                    [0, 1.446],
+                    [-1.446, 0],
+                    [0, -1.446]
+                  ],
+                  "v": [
+                    [0, -2.618],
+                    [2.618, 0],
+                    [0, 2.618],
+                    [-2.618, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "路径 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 3
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 4
+              },
+              "w": {
+                "a": 0,
+                "k": 1.5,
+                "ix": 5
+              },
+              "lc": 1,
+              "lj": 1,
+              "ml": 4,
+              "bm": 0,
+              "nm": "描边 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 0,
+                "k": [6.818, 6.618],
+                "ix": 2
+              },
+              "a": {
+                "a": 0,
+                "k": [0, 0],
+                "ix": 1
+              },
+              "s": {
+                "a": 0,
+                "k": [100, 100],
+                "ix": 3
+              },
+              "r": {
+                "a": 0,
+                "k": 0,
+                "ix": 6
+              },
+              "o": {
+                "a": 0,
+                "k": 100,
+                "ix": 7
+              },
+              "sk": {
+                "a": 0,
+                "k": 0,
+                "ix": 4
+              },
+              "sa": {
+                "a": 0,
+                "k": 0,
+                "ix": 5
+              },
+              "nm": "变换"
+            }
+          ],
+          "nm": "组 1",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 240,
+      "st": 0,
+      "ct": 1,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}

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

@@ -0,0 +1,112 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import { Tooltip } from '@toeverything/components/tooltip';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useAtomValue } from 'jotai';
+import type { CSSProperties } from 'react';
+import { useCallback, useEffect } from 'react';
+
+import { currentModeAtom } from '../../../atoms/mode';
+import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
+import type { BlockSuiteWorkspace } from '../../../shared';
+import { toast } from '../../../utils';
+import { StyledEditorModeSwitch, StyledKeyboardItem } from './style';
+import { EdgelessSwitchItem, PageSwitchItem } from './switch-items';
+
+export type EditorModeSwitchProps = {
+  // todo(himself65): combine these two properties
+  blockSuiteWorkspace: BlockSuiteWorkspace;
+  pageId: string;
+  style?: CSSProperties;
+};
+const TooltipContent = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <>
+      {t['Switch']()}
+      <StyledKeyboardItem>
+        {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
+      </StyledKeyboardItem>
+    </>
+  );
+};
+export const EditorModeSwitch = ({
+  style,
+  blockSuiteWorkspace,
+  pageId,
+}: EditorModeSwitchProps) => {
+  const t = useAFFiNEI18N();
+  const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
+    meta => meta.id === pageId
+  );
+  assertExists(pageMeta);
+  const { trash } = pageMeta;
+
+  const { togglePageMode, switchToEdgelessMode, switchToPageMode } =
+    useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const currentMode = useAtomValue(currentModeAtom);
+
+  useEffect(() => {
+    if (trash) {
+      return;
+    }
+    const keydown = (e: KeyboardEvent) => {
+      if (
+        !environment.isServer && environment.isMacOs
+          ? e.key === 'ß'
+          : e.key === 's' && e.altKey
+      ) {
+        e.preventDefault();
+        togglePageMode(pageId);
+        toast(
+          currentMode === 'page'
+            ? t['com.affine.toastMessage.edgelessMode']()
+            : t['com.affine.toastMessage.pageMode']()
+        );
+      }
+    };
+    document.addEventListener('keydown', keydown, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', keydown, { capture: true });
+  }, [currentMode, pageId, t, togglePageMode, trash]);
+
+  const onSwitchToPageMode = useCallback(() => {
+    if (currentMode === 'page') {
+      return;
+    }
+    switchToPageMode(pageId);
+    toast(t['com.affine.toastMessage.pageMode']());
+  }, [currentMode, pageId, switchToPageMode, t]);
+  const onSwitchToEdgelessMode = useCallback(() => {
+    if (currentMode === 'edgeless') {
+      return;
+    }
+    switchToEdgelessMode(pageId);
+    toast(t['com.affine.toastMessage.edgelessMode']());
+  }, [currentMode, pageId, switchToEdgelessMode, t]);
+
+  return (
+    <Tooltip content={<TooltipContent />}>
+      <StyledEditorModeSwitch
+        style={style}
+        switchLeft={currentMode === 'page'}
+        showAlone={trash}
+      >
+        <PageSwitchItem
+          data-testid="switch-page-mode-button"
+          active={currentMode === 'page'}
+          hide={trash && currentMode !== 'page'}
+          trash={trash}
+          onClick={onSwitchToPageMode}
+        />
+        <EdgelessSwitchItem
+          data-testid="switch-edgeless-mode-button"
+          active={currentMode === 'edgeless'}
+          hide={trash && currentMode !== 'edgeless'}
+          trash={trash}
+          onClick={onSwitchToEdgelessMode}
+        />
+      </StyledEditorModeSwitch>
+    </Tooltip>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/style.ts

@@ -0,0 +1,72 @@
+import { displayFlex, styled } from '@affine/component';
+
+export const StyledEditorModeSwitch = styled('div')<{
+  switchLeft: boolean;
+  showAlone?: boolean;
+}>(({ switchLeft, showAlone }) => {
+  return {
+    maxWidth: showAlone ? '40px' : '70px',
+    gap: '8px',
+    height: '32px',
+    background: showAlone
+      ? 'transparent'
+      : 'var(--affine-background-secondary-color)',
+    borderRadius: '12px',
+    ...displayFlex('space-between', 'center'),
+    padding: '4px 4px',
+    position: 'relative',
+
+    '::after': {
+      content: '""',
+      display: showAlone ? 'none' : 'block',
+      width: '24px',
+      height: '24px',
+      background: 'var(--affine-background-primary-color)',
+      boxShadow: 'var(--affine-shadow-1)',
+      borderRadius: '8px',
+      zIndex: 1,
+      position: 'absolute',
+      transform: `translateX(${switchLeft ? '0' : '32px'})`,
+      transition: 'all .15s',
+    },
+  };
+});
+
+export const StyledSwitchItem = styled('button')<{
+  active?: boolean;
+  hide?: boolean;
+  trash?: boolean;
+}>(({ active = false, hide = false, trash = false }) => {
+  return {
+    width: '24px',
+    height: '24px',
+    borderRadius: '8px',
+    WebkitAppRegion: 'no-drag',
+    boxShadow: active ? 'var(--affine-shadow-1)' : 'none',
+    color: active
+      ? trash
+        ? 'var(--affine-error-color)'
+        : 'var(--affine-primary-color)'
+      : 'var(--affine-icon-color)',
+    display: hide ? 'none' : 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    zIndex: 2,
+    fontSize: '20px',
+    path: {
+      stroke: 'currentColor',
+    },
+  };
+});
+
+export const StyledKeyboardItem = styled('span')(() => {
+  return {
+    marginLeft: '10px',
+    fontSize: 'var(--affine-font-xs)',
+    paddingLeft: '5px',
+    paddingRight: '5px',
+    backgroundColor: 'var(--affine-white-10)',
+    borderRadius: '4px',
+  };
+});

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

@@ -0,0 +1,84 @@
+import { InternalLottie } from '@affine/component/internal-lottie';
+import type { HTMLAttributes } from 'react';
+import type React from 'react';
+import { cloneElement, useState } from 'react';
+
+import edgelessHover from './animation-data/edgeless-hover.json';
+import pageHover from './animation-data/page-hover.json';
+import { StyledSwitchItem } from './style';
+
+type HoverAnimateControllerProps = {
+  active?: boolean;
+  hide?: boolean;
+  trash?: boolean;
+  children: React.ReactElement;
+} & HTMLAttributes<HTMLButtonElement>;
+
+const HoverAnimateController = ({
+  active,
+  hide,
+  trash,
+  children,
+  ...props
+}: HoverAnimateControllerProps) => {
+  const [startAnimate, setStartAnimate] = useState(false);
+  return (
+    <StyledSwitchItem
+      hide={hide}
+      active={active}
+      trash={trash}
+      onMouseEnter={() => {
+        setStartAnimate(true);
+      }}
+      onMouseLeave={() => {
+        setStartAnimate(false);
+      }}
+      {...props}
+    >
+      {cloneElement(children, {
+        isStopped: !startAnimate,
+        speed: 1,
+        width: 20,
+        height: 20,
+      })}
+    </StyledSwitchItem>
+  );
+};
+
+export const PageSwitchItem = (
+  props: Omit<HoverAnimateControllerProps, 'children'>
+) => {
+  return (
+    <HoverAnimateController {...props}>
+      <InternalLottie
+        options={{
+          loop: false,
+          autoplay: false,
+          animationData: pageHover,
+          rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+          },
+        }}
+      />
+    </HoverAnimateController>
+  );
+};
+
+export const EdgelessSwitchItem = (
+  props: Omit<HoverAnimateControllerProps, 'children'>
+) => {
+  return (
+    <HoverAnimateController {...props}>
+      <InternalLottie
+        options={{
+          loop: false,
+          autoplay: false,
+          animationData: edgelessHover,
+          rendererSettings: {
+            preserveAspectRatio: 'xMidYMid slice',
+          },
+        }}
+      />
+    </HoverAnimateController>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.css.ts

@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+
+export const pageListEmptyStyle = style({
+  height: 'calc(100% - 52px)',
+});
+
+export const emptyDescButton = style({
+  cursor: 'pointer',
+  color: 'var(--affine-text-secondary-color)',
+  background: 'var(--affine-background-code-block)',
+  border: '1px solid var(--affine-border-color)',
+  borderRadius: '4px',
+  padding: '0 6px',
+  boxSizing: 'border-box',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});
+
+export const emptyDescKbd = style([
+  emptyDescButton,
+  {
+    cursor: 'text',
+  },
+]);

packages/frontend/core/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -0,0 +1,297 @@
+import { Empty } from '@affine/component';
+import type { ListData, TrashListData } from '@affine/component/page-list';
+import { PageList, PageListTrashView } from '@affine/component/page-list';
+import type { Collection } from '@affine/env/filter';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import { type PageMeta, type Workspace } from '@blocksuite/store';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useBlockSuitePagePreview } from '@toeverything/hooks/use-block-suite-page-preview';
+import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
+import { useAtom, useAtomValue } from 'jotai';
+import { Suspense, useCallback, useMemo } from 'react';
+
+import { allPageModeSelectAtom } from '../../../atoms';
+import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
+import { useTrashModalHelper } from '../../../hooks/affine/use-trash-modal-helper';
+import { useGetPageInfoById } from '../../../hooks/use-get-page-info';
+import type { BlockSuiteWorkspace } from '../../../shared';
+import { toast } from '../../../utils';
+import { filterPage } from '../../../utils/filter';
+import { currentCollectionsAtom } from '../../../utils/user-setting';
+import { emptyDescButton, emptyDescKbd, pageListEmptyStyle } from './index.css';
+import { usePageHelper } from './utils';
+
+export interface BlockSuitePageListProps {
+  blockSuiteWorkspace: BlockSuiteWorkspace;
+  listType: 'all' | 'trash' | 'shared' | 'public';
+  isPublic?: boolean;
+  onOpenPage: (pageId: string, newTab?: boolean) => void;
+  collection?: Collection;
+}
+
+const filter = {
+  all: (pageMeta: PageMeta) => !pageMeta.trash,
+  public: (pageMeta: PageMeta) => !pageMeta.trash,
+  trash: (pageMeta: PageMeta, allMetas: PageMeta[]) => {
+    const parentMeta = allMetas.find(m => m.subpageIds?.includes(pageMeta.id));
+    return !parentMeta?.trash && pageMeta.trash;
+  },
+  shared: (pageMeta: PageMeta) => pageMeta.isPublic && !pageMeta.trash,
+};
+
+interface PagePreviewInnerProps {
+  workspace: Workspace;
+  pageId: string;
+}
+
+const PagePreviewInner = ({ workspace, pageId }: PagePreviewInnerProps) => {
+  const page = useBlockSuiteWorkspacePage(workspace, pageId);
+  assertExists(page);
+  const previewAtom = useBlockSuitePagePreview(page);
+  const preview = useAtomValue(previewAtom);
+  return preview;
+};
+
+interface PagePreviewProps {
+  workspace: Workspace;
+  pageId: string;
+}
+
+const PagePreview = ({ workspace, pageId }: PagePreviewProps) => {
+  return (
+    <Suspense>
+      <PagePreviewInner workspace={workspace} pageId={pageId} />
+    </Suspense>
+  );
+};
+
+interface PageListEmptyProps {
+  createPage?: ReturnType<typeof usePageHelper>['createPage'];
+  listType: BlockSuitePageListProps['listType'];
+}
+
+const PageListEmpty = (props: PageListEmptyProps) => {
+  const { listType, createPage } = props;
+  const t = useAFFiNEI18N();
+
+  const onCreatePage = useCallback(() => {
+    createPage?.();
+  }, [createPage]);
+
+  const getEmptyDescription = () => {
+    if (listType === 'all') {
+      const createNewPageButton = (
+        <button className={emptyDescButton} onClick={onCreatePage}>
+          New Page
+        </button>
+      );
+      if (environment.isDesktop) {
+        const shortcut = environment.isMacOs ? '⌘ + N' : 'Ctrl + N';
+        return (
+          <Trans i18nKey="emptyAllPagesClient">
+            Click on the {createNewPageButton} button Or press
+            <kbd className={emptyDescKbd}>{{ shortcut } as any}</kbd> to create
+            your first page.
+          </Trans>
+        );
+      }
+      return (
+        <Trans i18nKey="emptyAllPages">
+          Click on the
+          {createNewPageButton}
+          button to create your first page.
+        </Trans>
+      );
+    }
+    if (listType === 'trash') {
+      return t['emptyTrash']();
+    }
+    if (listType === 'shared') {
+      return t['emptySharedPages']();
+    }
+    return;
+  };
+
+  return (
+    <div className={pageListEmptyStyle}>
+      <Empty
+        title={t['com.affine.emptyDesc']()}
+        description={getEmptyDescription()}
+      />
+    </div>
+  );
+};
+
+export const BlockSuitePageList = ({
+  blockSuiteWorkspace,
+  onOpenPage,
+  listType,
+  isPublic = false,
+  collection,
+}: BlockSuitePageListProps) => {
+  const pageMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
+  const {
+    toggleFavorite,
+    restoreFromTrash,
+    permanentlyDeletePage,
+    cancelPublicPage,
+  } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const [filterMode] = useAtom(allPageModeSelectAtom);
+  const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
+    usePageHelper(blockSuiteWorkspace);
+  const t = useAFFiNEI18N();
+  const getPageInfo = useGetPageInfoById(blockSuiteWorkspace);
+  const { setTrashModal } = useTrashModalHelper(blockSuiteWorkspace);
+
+  const tagOptionMap = useMemo(
+    () =>
+      Object.fromEntries(
+        (blockSuiteWorkspace.meta.properties.tags?.options ?? []).map(v => [
+          v.id,
+          v,
+        ])
+      ),
+    [blockSuiteWorkspace.meta.properties.tags?.options]
+  );
+  const list = useMemo(
+    () =>
+      pageMetas
+        .filter(pageMeta => {
+          if (filterMode === 'all') {
+            return true;
+          }
+          if (filterMode === 'edgeless') {
+            return isPreferredEdgeless(pageMeta.id);
+          }
+          if (filterMode === 'page') {
+            return !isPreferredEdgeless(pageMeta.id);
+          }
+          console.error('unknown filter mode', pageMeta, filterMode);
+          return true;
+        })
+        .filter(pageMeta => {
+          if (!filter[listType](pageMeta, pageMetas)) {
+            return false;
+          }
+          if (!collection) {
+            return true;
+          }
+          return filterPage(collection, pageMeta);
+        }),
+    [pageMetas, filterMode, isPreferredEdgeless, listType, collection]
+  );
+
+  if (listType === 'trash') {
+    const pageList: TrashListData[] = list.map(pageMeta => {
+      return {
+        icon: isPreferredEdgeless(pageMeta.id) ? (
+          <EdgelessIcon />
+        ) : (
+          <PageIcon />
+        ),
+        pageId: pageMeta.id,
+        title: pageMeta.title,
+        preview: (
+          <PagePreview workspace={blockSuiteWorkspace} pageId={pageMeta.id} />
+        ),
+        createDate: new Date(pageMeta.createDate),
+        trashDate: pageMeta.trashDate
+          ? new Date(pageMeta.trashDate)
+          : undefined,
+        onClickPage: () => onOpenPage(pageMeta.id),
+        onClickRestore: () => {
+          restoreFromTrash(pageMeta.id);
+        },
+        onRestorePage: () => {
+          restoreFromTrash(pageMeta.id);
+          toast(
+            t['com.affine.toastMessage.restored']({
+              title: pageMeta.title || 'Untitled',
+            })
+          );
+        },
+        onPermanentlyDeletePage: () => {
+          permanentlyDeletePage(pageMeta.id);
+          toast(t['com.affine.toastMessage.permanentlyDeleted']());
+        },
+      };
+    });
+    return (
+      <PageListTrashView
+        list={pageList}
+        fallback={<PageListEmpty listType={listType} />}
+      />
+    );
+  }
+
+  const pageList: ListData[] = list.map(pageMeta => {
+    const page = blockSuiteWorkspace.getPage(pageMeta.id);
+    return {
+      icon: isPreferredEdgeless(pageMeta.id) ? <EdgelessIcon /> : <PageIcon />,
+      pageId: pageMeta.id,
+      title: pageMeta.title,
+      preview: (
+        <PagePreview workspace={blockSuiteWorkspace} pageId={pageMeta.id} />
+      ),
+      tags:
+        page?.meta.tags?.map(id => tagOptionMap[id]).filter(v => v != null) ??
+        [],
+      favorite: !!pageMeta.favorite,
+      isPublicPage: !!pageMeta.isPublic,
+      createDate: new Date(pageMeta.createDate),
+      updatedDate: new Date(pageMeta.updatedDate ?? pageMeta.createDate),
+      onClickPage: () => onOpenPage(pageMeta.id),
+      onOpenPageInNewTab: () => onOpenPage(pageMeta.id, true),
+      onClickRestore: () => {
+        restoreFromTrash(pageMeta.id);
+      },
+      removeToTrash: () =>
+        setTrashModal({
+          open: true,
+          pageId: pageMeta.id,
+          pageTitle: pageMeta.title,
+        }),
+
+      onRestorePage: () => {
+        restoreFromTrash(pageMeta.id);
+        toast(
+          t['com.affine.toastMessage.restored']({
+            title: pageMeta.title || 'Untitled',
+          })
+        );
+      },
+      bookmarkPage: () => {
+        const status = pageMeta.favorite;
+        toggleFavorite(pageMeta.id);
+        toast(
+          status
+            ? t['com.affine.toastMessage.removedFavorites']()
+            : t['com.affine.toastMessage.addedFavorites']()
+        );
+      },
+      onDisablePublicSharing: () => {
+        cancelPublicPage(pageMeta.id);
+        toast('Successfully disabled', {
+          portal: document.body,
+        });
+      },
+    };
+  });
+
+  return (
+    <PageList
+      collectionsAtom={currentCollectionsAtom}
+      propertiesMeta={blockSuiteWorkspace.meta.properties}
+      getPageInfo={getPageInfo}
+      onCreateNewPage={createPage}
+      onCreateNewEdgeless={createEdgeless}
+      onImportFile={importFile}
+      isPublicWorkspace={isPublic}
+      list={pageList}
+      fallback={<PageListEmpty createPage={createPage} listType={listType} />}
+    />
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx

@@ -0,0 +1,73 @@
+import { toast } from '@affine/component';
+import { WorkspaceSubPath } from '@affine/env/workspace';
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { initEmptyPage } from '@toeverything/infra/blocksuite';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useMemo } from 'react';
+
+import { pageSettingsAtom, setPageModeAtom } from '../../../atoms';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
+import type { BlockSuiteWorkspace } from '../../../shared';
+
+export const usePageHelper = (blockSuiteWorkspace: BlockSuiteWorkspace) => {
+  const { openPage, jumpToSubPath } = useNavigateHelper();
+  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
+  const pageSettings = useAtomValue(pageSettingsAtom);
+  const isPreferredEdgeless = useCallback(
+    (pageId: string) => pageSettings[pageId]?.mode === 'edgeless',
+    [pageSettings]
+  );
+  const setPageMode = useSetAtom(setPageModeAtom);
+  const createPageAndOpen = useCallback(
+    (id?: string, mode?: 'page' | 'edgeless') => {
+      const page = createPage(id);
+      initEmptyPage(page).catch(error => {
+        toast(`Failed to initialize Page: ${error.message}`);
+      });
+      setPageMode(page.id, mode || 'page');
+      openPage(blockSuiteWorkspace.id, page.id);
+      return page;
+    },
+    [blockSuiteWorkspace.id, createPage, openPage, setPageMode]
+  );
+  const createEdgelessAndOpen = useCallback(
+    (id?: string) => {
+      return createPageAndOpen(id, 'edgeless');
+    },
+    [createPageAndOpen]
+  );
+  const importFileAndOpen = useCallback(async () => {
+    const { showImportModal } = await import('@blocksuite/blocks');
+    const onSuccess = (pageIds: string[], isWorkspaceFile: boolean) => {
+      toast(
+        `Successfully imported ${pageIds.length} Page${
+          pageIds.length > 1 ? 's' : ''
+        }.`
+      );
+      if (isWorkspaceFile) {
+        jumpToSubPath(blockSuiteWorkspace.id, WorkspaceSubPath.ALL);
+        return;
+      }
+
+      if (pageIds.length === 0) {
+        return;
+      }
+      const pageId = pageIds[0];
+      openPage(blockSuiteWorkspace.id, pageId);
+    };
+    showImportModal({ workspace: blockSuiteWorkspace, onSuccess });
+  }, [blockSuiteWorkspace, openPage, jumpToSubPath]);
+  return useMemo(() => {
+    return {
+      createPage: createPageAndOpen,
+      createEdgeless: createEdgelessAndOpen,
+      importFile: importFileAndOpen,
+      isPreferredEdgeless: isPreferredEdgeless,
+    };
+  }, [
+    createEdgelessAndOpen,
+    createPageAndOpen,
+    importFileAndOpen,
+    isPreferredEdgeless,
+  ]);
+};

packages/frontend/core/src/components/bookmark.tsx

@@ -0,0 +1,244 @@
+import { MenuItem, PureMenu } from '@affine/component';
+import { MuiClickAwayListener } from '@affine/component';
+import type { SerializedBlock } from '@blocksuite/blocks';
+import type { BaseBlockModel } from '@blocksuite/store';
+import type { Page } from '@blocksuite/store';
+import type { VEditor } from '@blocksuite/virgo';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type ShortcutMap = {
+  [key: string]: (e: KeyboardEvent, page: Page) => void;
+};
+
+const menuOptions = [
+  {
+    id: 'dismiss',
+    label: 'Dismiss',
+  },
+  {
+    id: 'bookmark',
+    label: 'Create bookmark',
+  },
+];
+
+function getCurrentNativeRange(selection = window.getSelection()) {
+  if (!selection) {
+    return null;
+  }
+  if (selection.rangeCount === 0) {
+    return null;
+  }
+  if (selection.rangeCount > 1) {
+    console.warn('getCurrentRange may be wrong, rangeCount > 1');
+  }
+  return selection.getRangeAt(0);
+}
+
+const handleEnter = ({
+  page,
+  selectedOption,
+  callback,
+}: {
+  page: Page;
+  selectedOption: keyof ShortcutMap;
+  callback: () => void;
+}) => {
+  if (selectedOption === 'dismiss') {
+    return callback();
+  }
+  const native = getCurrentNativeRange();
+  if (!native) {
+    return callback();
+  }
+  const container = native.startContainer;
+  const element =
+    container instanceof Element ? container : container?.parentElement;
+  const virgo = element?.closest<Element & { virgoEditor: VEditor }>(
+    '[data-virgo-root]'
+  )?.virgoEditor;
+  if (!virgo) {
+    return callback();
+  }
+  const linkInfo = virgo
+    ?.getDeltasByVRange({
+      index: native.startOffset,
+      length: 0,
+    })
+    .find(delta => delta[0]?.attributes?.link);
+  if (!linkInfo) {
+    return;
+  }
+  const [, { index, length }] = linkInfo;
+  const link = linkInfo[0]?.attributes?.link as string;
+
+  const model = element?.closest<Element & { model: BaseBlockModel }>(
+    '[data-block-id]'
+  )?.model;
+  if (!model) {
+    return callback();
+  }
+  const parent = page.getParent(model);
+  if (!parent) {
+    return callback();
+  }
+  const currentBlockIndex = parent.children.indexOf(model);
+  page.addBlock(
+    'affine:bookmark',
+    { url: link },
+    parent,
+    currentBlockIndex + 1
+  );
+
+  virgo?.deleteText({
+    index,
+    length,
+  });
+
+  if (model.isEmpty()) {
+    page.deleteBlock(model);
+  }
+  return callback();
+};
+
+const shouldShowBookmarkMenu = (pastedBlocks: Record<string, unknown>[]) => {
+  if (!pastedBlocks.length || pastedBlocks.length > 1) {
+    return;
+  }
+  const [firstBlock] = pastedBlocks as [SerializedBlock];
+  if (
+    !firstBlock.text ||
+    !firstBlock.text.length ||
+    firstBlock.text.length > 1
+  ) {
+    return;
+  }
+  return !!firstBlock.text[0].attributes?.link;
+};
+
+export type BookmarkProps = {
+  page: Page;
+};
+
+export const Bookmark = ({ page }: BookmarkProps) => {
+  const [anchor, setAnchor] = useState<Range | null>(null);
+  const [selectedOption, setSelectedOption] = useState<string>(
+    menuOptions[0].id
+  );
+  const shortcutMap = useMemo<ShortcutMap>(
+    () => ({
+      ArrowUp: () => {
+        const curIndex = menuOptions.findIndex(
+          ({ id }) => id === selectedOption
+        );
+        if (menuOptions[curIndex - 1]) {
+          setSelectedOption(menuOptions[curIndex - 1].id);
+        } else if (curIndex === -1) {
+          setSelectedOption(menuOptions[0].id);
+        } else {
+          setSelectedOption(menuOptions[menuOptions.length - 1].id);
+        }
+      },
+      ArrowDown: () => {
+        const curIndex = menuOptions.findIndex(
+          ({ id }) => id === selectedOption
+        );
+        if (curIndex !== -1 && menuOptions[curIndex + 1]) {
+          setSelectedOption(menuOptions[curIndex + 1].id);
+        } else {
+          setSelectedOption(menuOptions[0].id);
+        }
+      },
+      Enter: () =>
+        handleEnter({
+          page,
+          selectedOption,
+          callback: () => {
+            setAnchor(null);
+          },
+        }),
+      Escape: () => {
+        setAnchor(null);
+      },
+    }),
+    [page, selectedOption]
+  );
+  const onKeydown = useCallback(
+    (e: KeyboardEvent) => {
+      const shortcut = shortcutMap[e.key];
+      if (shortcut) {
+        e.stopPropagation();
+        e.preventDefault();
+        shortcut(e, page);
+      } else {
+        setAnchor(null);
+      }
+    },
+    [page, shortcutMap]
+  );
+
+  useEffect(() => {
+    const disposer = page.slots.pasted.on(pastedBlocks => {
+      if (!shouldShowBookmarkMenu(pastedBlocks)) {
+        return;
+      }
+      window.setTimeout(() => {
+        setAnchor(getCurrentNativeRange());
+      }, 100);
+    });
+
+    return () => {
+      disposer.dispose();
+    };
+  }, [onKeydown, page, shortcutMap]);
+
+  useEffect(() => {
+    if (anchor) {
+      document.addEventListener('keydown', onKeydown, { capture: true });
+    } else {
+      // reset status and remove event
+      setSelectedOption(menuOptions[0].id);
+      document.removeEventListener('keydown', onKeydown, { capture: true });
+    }
+
+    return () => {
+      document.removeEventListener('keydown', onKeydown, { capture: true });
+    };
+  }, [anchor, onKeydown]);
+
+  return anchor ? (
+    <MuiClickAwayListener
+      onClickAway={() => {
+        setAnchor(null);
+        setSelectedOption('');
+      }}
+    >
+      <div>
+        <PureMenu open={!!anchor} anchorEl={anchor} placement="bottom-start">
+          {menuOptions.map(({ id, label }) => {
+            return (
+              <MenuItem
+                key={id}
+                active={selectedOption === id}
+                onClick={() => {
+                  handleEnter({
+                    page,
+                    selectedOption: id,
+                    callback: () => {
+                      setAnchor(null);
+                    },
+                  });
+                }}
+                disableHover={true}
+                onMouseEnter={() => {
+                  setSelectedOption(id);
+                }}
+              >
+                {label}
+              </MenuItem>
+            );
+          })}
+        </PureMenu>
+      </div>
+    </MuiClickAwayListener>
+  ) : null;
+};

packages/frontend/core/src/components/cloud/login-card.tsx

@@ -0,0 +1,47 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloudWorkspaceIcon } from '@blocksuite/icons';
+import { Avatar } from '@toeverything/components/avatar';
+
+import { useCurrentLoginStatus } from '../../hooks/affine/use-current-login-status';
+import { useCurrentUser } from '../../hooks/affine/use-current-user';
+import { signInCloud } from '../../utils/cloud-utils';
+import { StyledSignInButton } from '../pure/footer/styles';
+
+export const LoginCard = () => {
+  const t = useAFFiNEI18N();
+  const loginStatus = useCurrentLoginStatus();
+  if (loginStatus === 'authenticated') {
+    return <UserCard />;
+  }
+  return (
+    <StyledSignInButton
+      data-testid="sign-in-button"
+      onClick={async () => {
+        signInCloud().catch(console.error);
+      }}
+    >
+      <div className="circle">
+        <CloudWorkspaceIcon />
+      </div>{' '}
+      {t['Sign in']()}
+    </StyledSignInButton>
+  );
+};
+
+const UserCard = () => {
+  const user = useCurrentUser();
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Avatar size={28} name={user.name} url={user.image} />
+      <div style={{ marginLeft: '15px' }}>
+        <div>{user.name}</div>
+        <div>{user.email}</div>
+      </div>
+    </div>
+  );
+};