refactor!: remove next.js (#3267)

apps/core/src/components/__debug__/client/editor.tsx

@@ -0,0 +1,40 @@
+import { initEmptyPage } from '@affine/env/blocksuite';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { createEmptyBlockSuiteWorkspace } from '@affine/workspace/utils';
+import type { EditorContainer } from '@blocksuite/editor';
+import type { Page } from '@blocksuite/store';
+import type React from 'react';
+import { useCallback } from 'react';
+
+import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
+
+const blockSuiteWorkspace = createEmptyBlockSuiteWorkspace(
+  'test',
+  WorkspaceFlavour.LOCAL
+);
+
+const page = blockSuiteWorkspace.createPage({ id: 'page0' });
+
+const Editor: React.FC = () => {
+  const onLoad = useCallback((page: Page, editor: EditorContainer) => {
+    // @ts-expect-error
+    globalThis.page = page;
+    // @ts-expect-error
+    globalThis.editor = editor;
+    return () => void 0;
+  }, []);
+
+  if (!page) {
+    return <>loading...</>;
+  }
+  return (
+    <BlockSuiteEditor
+      page={page}
+      mode="page"
+      onInit={initEmptyPage}
+      onLoad={onLoad}
+    />
+  );
+};
+
+export default Editor;

apps/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>
+  );
+};
+```

apps/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,
+  rootStore,
+} from '@toeverything/plugin-infra/manager';
+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={rootStore}>
+            <DumpInfo />
+          </Provider>
+        </>
+      );
+    }
+
+    return this.props.children;
+  }
+}

apps/core/src/components/affine/app-container.tsx

@@ -0,0 +1,18 @@
+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}
+      {...props}
+    />
+  );
+};

apps/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',
+  height: '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',
+});

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

@@ -0,0 +1,397 @@
+import {
+  Button,
+  Input,
+  Modal,
+  ModalCloseButton,
+  ModalWrapper,
+  toast,
+  Tooltip,
+} from '@affine/component';
+import { DebugLogger } from '@affine/debug';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { HelpIcon } from '@blocksuite/icons';
+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 {
+  onClose: () => void;
+  onConfirmName: (name: string) => void;
+}
+
+const NameWorkspaceContent = ({
+  onConfirmName,
+  onClose,
+}: 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 (
+    <div className={style.content}>
+      <div className={style.contentTitle}>{t['Name Your Workspace']()}</div>
+      <p>{t['Workspace description']()}</p>
+      <Input
+        ref={ref => {
+          if (ref) {
+            setTimeout(() => ref.focus(), 0);
+          }
+        }}
+        data-testid="create-workspace-input"
+        onKeyDown={handleKeyDown}
+        placeholder={t['Set a Workspace name']()}
+        maxLength={64}
+        minLength={0}
+        onChange={setWorkspaceName}
+      />
+      <div className={style.buttonGroup}>
+        <Button
+          data-testid="create-workspace-close-button"
+          type="light"
+          onClick={onClose}
+        >
+          {t.Cancel()}
+        </Button>
+        <Button
+          data-testid="create-workspace-create-button"
+          disabled={!workspaceName}
+          style={{
+            opacity: !workspaceName ? 0.5 : 1,
+          }}
+          type="primary"
+          onClick={handleCreateWorkspace}
+        >
+          {t.Create()}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+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 = await window.apis?.dialog.selectDBFileLocation();
+      setOpening(false);
+      if (result?.filePath) {
+        onConfirmLocation(result.filePath);
+      } else if (result?.error) {
+        // @ts-expect-error: result.error is dynamic so the type is unknown
+        toast(t[result.error]());
+      }
+    })().catch(err => {
+      logger.error(err);
+    });
+  }, [onConfirmLocation, opening, t]);
+
+  return (
+    <div className={style.content}>
+      <div className={style.contentTitle}>{t['Set database location']()}</div>
+      <p>{t['Workspace database storage description']()}</p>
+      <div className={style.buttonGroup}>
+        <Button
+          disabled={opening}
+          data-testid="create-workspace-customize-button"
+          type="light"
+          onClick={handleSelectDBFileLocation}
+        >
+          {t['Customize']()}
+        </Button>
+        <Tooltip
+          zIndex={1000}
+          content={t['Default db location hint']({
+            location: defaultDBLocation,
+          })}
+          placement="top-start"
+        >
+          <Button
+            data-testid="create-workspace-default-location-button"
+            type="primary"
+            onClick={() => {
+              onConfirmLocation();
+            }}
+            icon={<HelpIcon />}
+            iconPosition="end"
+          >
+            {t['Default Location']()}
+          </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}>
+        {t[mode === 'new' ? 'Created Successfully' : 'Added Successfully']()}
+      </div>
+
+      <div className={style.radioGroup}>
+        <label onClick={() => setEnableCloudSyncing(false)}>
+          <input
+            className={style.radio}
+            type="radio"
+            readOnly
+            checked={!enableCloudSyncing}
+          />
+          {t['Use on current device only']()}
+        </label>
+        <label onClick={() => setEnableCloudSyncing(true)}>
+          <input
+            className={style.radio}
+            type="radio"
+            readOnly
+            checked={enableCloudSyncing}
+          />
+          {t['Sync across devices with AFFiNE Cloud']()}
+        </label>
+      </div>
+
+      <div className={style.buttonGroup}>
+        <Button
+          data-testid="create-workspace-continue-button"
+          type="primary"
+          onClick={() => {
+            onConfirmMode(enableCloudSyncing);
+          }}
+        >
+          {t['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 = await window.apis.dialog.loadDBFile();
+        if (result.workspaceId && !canceled) {
+          setAddedId(result.workspaceId);
+          setStep('set-syncing-mode');
+        } else if (result.error || result.canceled) {
+          if (result.error) {
+            // @ts-expect-error: result.error is dynamic so the type is unknown
+            toast(t[result.error]());
+          }
+          onClose();
+        }
+      })().catch(err => {
+        console.error(err);
+      });
+    } else if (mode === 'new') {
+      setStep(
+        environment.isDesktop && runtimeConfig.enableSQLiteProvider
+          ? 'set-db-location'
+          : 'name-workspace'
+      );
+    } else {
+      setStep(undefined);
+    }
+    return () => {
+      canceled = true;
+    };
+  }, [mode, onClose, 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);
+      if (environment.isDesktop && runtimeConfig.enableSQLiteProvider) {
+        setStep('set-syncing-mode');
+      } else {
+        // this will be the last step for web for now
+        // fix me later
+        createLocalWorkspace(name)
+          .then(id => {
+            onCreate(id);
+          })
+          .catch(err => {
+            logger.error(err);
+          });
+      }
+    },
+    [createLocalWorkspace, onCreate]
+  );
+
+  const nameWorkspaceNode =
+    step === 'name-workspace' ? (
+      <NameWorkspaceContent
+        // go to previous step instead?
+        onClose={onClose}
+        onConfirmName={onConfirmName}
+      />
+    ) : null;
+
+  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;
+
+  return (
+    <Modal open={mode !== false && !!step} onClose={onClose}>
+      <ModalWrapper width={560} style={{ padding: '10px' }}>
+        <div className={style.header}>
+          <ModalCloseButton top={6} right={6} onClick={onClose} />
+        </div>
+        {nameWorkspaceNode}
+        {setDBLocationNode}
+        {setSyncingModeNode}
+      </ModalWrapper>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,50 @@
+import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
+interface EnableAffineCloudModalProps {
+  open: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}
+
+export const EnableAffineCloudModal: React.FC<EnableAffineCloudModalProps> = ({
+  onConfirm,
+  open,
+  onClose,
+}) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <Modal open={open} onClose={onClose} data-testid="logout-modal">
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>{t['Enable AFFiNE Cloud']()}?</ContentTitle>
+          <StyleTips>{t['Enable AFFiNE Cloud Description']()}</StyleTips>
+          {/* <StyleTips>{t('Retain cached cloud data')}</StyleTips> */}
+          <div>
+            <StyleButton
+              data-testid="confirm-enable-affine-cloud-button"
+              shape="round"
+              type="primary"
+              onClick={onConfirm}
+            >
+              {t['Sign in and Enable']()}
+            </StyleButton>
+            <StyleButton shape="round" onClick={onClose}>
+              {t['Not now']()}
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};

apps/core/src/components/affine/enable-affine-cloud-modal/style.ts

@@ -0,0 +1,40 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+  flexShrink: 0,
+});
+
+export const Content = styled('div')({
+  textAlign: 'center',
+});
+
+export const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    margin: 'auto',
+    marginBottom: '32px',
+    marginTop: '12px',
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});

apps/core/src/components/affine/language-menu/index.tsx

@@ -0,0 +1,79 @@
+import {
+  type ButtonProps,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  styled,
+} from '@affine/component';
+import { LOCALES } from '@affine/i18n';
+import { useI18N } from '@affine/i18n';
+import type { FC, ReactElement } from 'react';
+import { useCallback } from 'react';
+
+export const StyledListItem = styled(MenuItem)(() => ({
+  width: '132px',
+  height: '38px',
+  textTransform: 'capitalize',
+}));
+
+const LanguageMenuContent: FC<{
+  currentLanguage?: string;
+}> = ({ currentLanguage }) => {
+  const i18n = useI18N();
+  const changeLanguage = useCallback(
+    (event: string) => {
+      return i18n.changeLanguage(event);
+    },
+    [i18n]
+  );
+  return (
+    <>
+      {LOCALES.map(option => {
+        return (
+          <StyledListItem
+            key={option.name}
+            active={currentLanguage === option.originalName}
+            title={option.name}
+            onClick={() => {
+              changeLanguage(option.tag).catch(err => {
+                throw new Error('Failed to change language', err);
+              });
+            }}
+          >
+            {option.originalName}
+          </StyledListItem>
+        );
+      })}
+    </>
+  );
+};
+export const LanguageMenu: FC<{ triggerProps: ButtonProps }> = ({
+  triggerProps,
+}) => {
+  const i18n = useI18N();
+
+  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
+
+  return (
+    <Menu
+      content={
+        (
+          <LanguageMenuContent
+            currentLanguage={currentLanguage?.originalName}
+          />
+        ) as ReactElement
+      }
+      placement="bottom-end"
+      trigger="click"
+      disablePortal={true}
+    >
+      <MenuTrigger
+        data-testid="language-menu-button"
+        style={{ textTransform: 'capitalize' }}
+        {...triggerProps}
+      >
+        {currentLanguage?.originalName}
+      </MenuTrigger>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,112 @@
+import { Button, Input, Modal, ModalCloseButton } from '@affine/component';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useCallback, useState } from 'react';
+
+import type { AffineOfficialWorkspace } from '../../../../../shared';
+import { toast } from '../../../../../utils';
+import {
+  StyledButtonContent,
+  StyledInputContent,
+  StyledModalHeader,
+  StyledModalWrapper,
+  StyledTextContent,
+  StyledWorkspaceName,
+} from './style';
+
+interface WorkspaceDeleteProps {
+  open: boolean;
+  onClose: () => void;
+  workspace: AffineOfficialWorkspace;
+  onDeleteWorkspace: (id: string) => Promise<void>;
+}
+
+export const WorkspaceDeleteModal = ({
+  open,
+  onClose,
+  workspace,
+  onDeleteWorkspace,
+}: WorkspaceDeleteProps) => {
+  const [workspaceName] = useBlockSuiteWorkspaceName(
+    workspace.blockSuiteWorkspace
+  );
+  const [deleteStr, setDeleteStr] = useState<string>('');
+  const allowDelete = deleteStr === workspaceName;
+  const t = useAFFiNEI18N();
+
+  const handleDelete = useCallback(() => {
+    onDeleteWorkspace(workspace.id)
+      .then(() => {
+        toast(t['Successfully deleted'](), {
+          portal: document.body,
+        });
+        onClose();
+      })
+      .catch(() => {
+        // ignore error
+      });
+  }, [onClose, onDeleteWorkspace, t, workspace.id]);
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <StyledModalWrapper>
+        <ModalCloseButton onClick={onClose} />
+        <StyledModalHeader>{t['Delete Workspace']()}?</StyledModalHeader>
+        {workspace.flavour === WorkspaceFlavour.LOCAL ? (
+          <StyledTextContent>
+            <Trans i18nKey="Delete Workspace Description">
+              Deleting (
+              <StyledWorkspaceName>
+                {{ workspace: workspaceName } as any}
+              </StyledWorkspaceName>
+              ) cannot be undone, please proceed with caution. All contents will
+              be lost.
+            </Trans>
+          </StyledTextContent>
+        ) : (
+          <StyledTextContent>
+            <Trans i18nKey="Delete Workspace Description2">
+              Deleting (
+              <StyledWorkspaceName>
+                {{ workspace: workspaceName } as any}
+              </StyledWorkspaceName>
+              ) will delete both local and cloud data, this operation cannot be
+              undone, please proceed with caution.
+            </Trans>
+          </StyledTextContent>
+        )}
+        <StyledInputContent>
+          <Input
+            ref={ref => {
+              if (ref) {
+                setTimeout(() => ref.focus(), 0);
+              }
+            }}
+            onChange={setDeleteStr}
+            data-testid="delete-workspace-input"
+            placeholder={t['Placeholder of delete workspace']()}
+            width={315}
+            height={42}
+          />
+        </StyledInputContent>
+        <StyledButtonContent>
+          <Button shape="circle" onClick={onClose}>
+            {t['Cancel']()}
+          </Button>
+          <Button
+            data-testid="delete-workspace-confirm-button"
+            disabled={!allowDelete}
+            onClick={handleDelete}
+            type="danger"
+            shape="circle"
+            style={{ marginLeft: '24px' }}
+          >
+            {t['Delete']()}
+          </Button>
+        </StyledButtonContent>
+      </StyledModalWrapper>
+    </Modal>
+  );
+};

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts

@@ -0,0 +1,76 @@
+import { styled } from '@affine/component';
+
+export const StyledModalWrapper = styled('div')(() => {
+  return {
+    position: 'relative',
+    padding: '0px',
+    width: '560px',
+    background: 'var(--affine-white)',
+    borderRadius: '12px',
+    // height: '312px',
+  };
+});
+
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    margin: '44px 0px 12px 0px',
+    width: '560px',
+    fontWeight: '600',
+    fontSize: '20px;',
+    textAlign: 'center',
+  };
+});
+
+// export const StyledModalContent = styled('div')(({ theme }) => {});
+
+export const StyledTextContent = styled('div')(() => {
+  return {
+    margin: 'auto',
+    width: '425px',
+    fontFamily: 'Avenir Next',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '26px',
+    textAlign: 'left',
+  };
+});
+
+export const StyledInputContent = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    margin: '24px 0',
+    fontSize: 'var(--affine-font-base)',
+  };
+});
+
+export const StyledButtonContent = styled('div')(() => {
+  return {
+    marginBottom: '42px',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  };
+});
+
+export const StyledWorkspaceName = styled('span')(() => {
+  return {
+    fontWeight: '600',
+  };
+});
+
+// export const StyledCancelButton = styled(Button)(({ theme }) => {
+//   return {
+//     width: '100px',
+//     justifyContent: 'center',
+//   };
+// });
+
+// export const StyledDeleteButton = styled(Button)(({ theme }) => {
+//   return {
+//     width: '100px',
+//     justifyContent: 'center',
+//   };
+// });

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

@@ -0,0 +1,59 @@
+import { SettingRow } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ArrowRightSmallIcon } from '@blocksuite/icons';
+import { type FC, useState } from 'react';
+
+import type { AffineOfficialWorkspace } from '../../../../shared';
+import type { WorkspaceSettingDetailProps } from '../index';
+import { WorkspaceDeleteModal } from './delete';
+import { WorkspaceLeave } from './leave';
+
+export const DeleteLeaveWorkspace: FC<{
+  workspace: AffineOfficialWorkspace;
+  onDeleteWorkspace: WorkspaceSettingDetailProps['onDeleteWorkspace'];
+}> = ({ workspace, onDeleteWorkspace }) => {
+  const t = useAFFiNEI18N();
+  // fixme: cloud regression
+  const isOwner = true;
+
+  const [showDelete, setShowDelete] = useState(false);
+  const [showLeave, setShowLeave] = useState(false);
+  return (
+    <>
+      <SettingRow
+        name={
+          <span style={{ color: 'var(--affine-error-color)' }}>
+            {isOwner
+              ? t['com.affine.settings.workspace.remove']()
+              : t['Leave Workspace']()}
+          </span>
+        }
+        desc={t['com.affine.settings.workspace.remove.message']()}
+        style={{ cursor: 'pointer' }}
+        onClick={() => {
+          setShowDelete(true);
+        }}
+        testId="delete-workspace-button"
+      >
+        <ArrowRightSmallIcon />
+      </SettingRow>
+      {isOwner ? (
+        <WorkspaceDeleteModal
+          onDeleteWorkspace={onDeleteWorkspace}
+          open={showDelete}
+          onClose={() => {
+            setShowDelete(false);
+          }}
+          workspace={workspace}
+        />
+      ) : (
+        <WorkspaceLeave
+          open={showLeave}
+          onClose={() => {
+            setShowLeave(false);
+          }}
+        />
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,50 @@
+import { Modal } from '@affine/component';
+import { ModalCloseButton } from '@affine/component';
+import { Button } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+import {
+  StyledButtonContent,
+  StyledModalHeader,
+  StyledModalWrapper,
+  StyledTextContent,
+} from './style';
+
+interface WorkspaceDeleteProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const WorkspaceLeave = ({ open, onClose }: WorkspaceDeleteProps) => {
+  // const { leaveWorkSpace } = useWorkspaceHelper();
+  const t = useAFFiNEI18N();
+  const handleLeave = async () => {
+    // await leaveWorkSpace();
+    onClose();
+  };
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <StyledModalWrapper>
+        <ModalCloseButton onClick={onClose} />
+        <StyledModalHeader>{t['Leave Workspace']()}</StyledModalHeader>
+        <StyledTextContent>
+          {t['Leave Workspace Description']()}
+        </StyledTextContent>
+        <StyledButtonContent>
+          <Button shape="circle" onClick={onClose}>
+            {t['Cancel']()}
+          </Button>
+          <Button
+            onClick={handleLeave}
+            type="danger"
+            shape="circle"
+            style={{ marginLeft: '24px' }}
+          >
+            {t['Leave']()}
+          </Button>
+        </StyledButtonContent>
+      </StyledModalWrapper>
+    </Modal>
+  );
+};

apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/style.ts

@@ -0,0 +1,45 @@
+import { styled } from '@affine/component';
+
+export const StyledModalWrapper = styled('div')(() => {
+  return {
+    position: 'relative',
+    padding: '0px',
+    width: '460px',
+    background: 'var(--affine-white)',
+    borderRadius: '12px',
+  };
+});
+
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    margin: '44px 0px 12px 0px',
+    width: '460px',
+    fontWeight: '600',
+    fontSize: '20px;',
+    textAlign: 'center',
+  };
+});
+
+// export const StyledModalContent = styled('div')(({ theme }) => {});
+
+export const StyledTextContent = styled('div')(() => {
+  return {
+    margin: 'auto',
+    width: '425px',
+    fontFamily: 'Avenir Next',
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: '18px',
+    lineHeight: '26px',
+    textAlign: 'center',
+  };
+});
+
+export const StyledButtonContent = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    margin: '0px 0 32px 0',
+  };
+});

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

@@ -0,0 +1,34 @@
+import { Button, toast } from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { FC } from 'react';
+
+import type { AffineOfficialWorkspace } from '../../../shared';
+
+export const ExportPanel: FC<{
+  workspace: AffineOfficialWorkspace;
+}> = ({ workspace }) => {
+  const workspaceId = workspace.id;
+  const t = useAFFiNEI18N();
+  return (
+    <>
+      <SettingRow name={t['Export']()} desc={t['Export Description']()}>
+        <Button
+          size="small"
+          data-testid="export-affine-backup"
+          onClick={async () => {
+            const result = await window.apis?.dialog.saveDBFileAs(workspaceId);
+            if (result?.error) {
+              // @ts-expect-error: result.error is dynamic
+              toast(t[result.error]());
+            } else if (!result?.canceled) {
+              toast(t['Export success']());
+            }
+          }}
+        >
+          {t['Export']()}
+        </Button>
+      </SettingRow>
+    </>
+  );
+};

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

@@ -0,0 +1,91 @@
+import {
+  SettingHeader,
+  SettingRow,
+  SettingWrapper,
+} from '@affine/component/setting-components';
+import type {
+  WorkspaceFlavour,
+  WorkspaceRegistry,
+} from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { type FC, useMemo } from 'react';
+
+import { useWorkspace } from '../../../hooks/use-workspace';
+import { DeleteLeaveWorkspace } from './delete-leave-workspace';
+import { ExportPanel } from './export';
+import { ProfilePanel } from './profile';
+import { PublishPanel } from './publish';
+import { StoragePanel } from './storage';
+
+export type WorkspaceSettingDetailProps = {
+  workspaceId: string;
+  onDeleteWorkspace: (id: string) => Promise<void>;
+  onTransferWorkspace: <
+    From extends WorkspaceFlavour,
+    To extends WorkspaceFlavour,
+  >(
+    from: From,
+    to: To,
+    workspace: WorkspaceRegistry[From]
+  ) => void;
+};
+
+export const WorkspaceSettingDetail: FC<WorkspaceSettingDetailProps> = ({
+  workspaceId,
+  onDeleteWorkspace,
+  ...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['You can customize your workspace here.']()}
+      />
+      <SettingWrapper title={t['Info']()}>
+        <SettingRow
+          name={t['Workspace Profile']()}
+          desc={t[
+            'Only an owner can edit the the Workspace avatar and name.Changes will be shown for everyone.'
+          ]()}
+          spreadCol={false}
+        >
+          <ProfilePanel workspace={workspace} />
+        </SettingRow>
+      </SettingWrapper>
+      <SettingWrapper title={t['AFFiNE Cloud']()}>
+        <PublishPanel
+          workspace={workspace}
+          onDeleteWorkspace={onDeleteWorkspace}
+          {...props}
+        />
+      </SettingWrapper>
+      {storageAndExportSetting}
+      <SettingWrapper>
+        <DeleteLeaveWorkspace
+          workspace={workspace}
+          onDeleteWorkspace={onDeleteWorkspace}
+        />
+      </SettingWrapper>
+    </>
+  );
+};

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

@@ -0,0 +1,103 @@
+import { IconButton, Input, toast } from '@affine/component';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { DoneIcon } from '@blocksuite/icons';
+import { useBlockSuiteWorkspaceAvatarUrl } from '@toeverything/hooks/use-block-suite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { type FC, useCallback, useState } from 'react';
+
+import type { AffineOfficialWorkspace } from '../../../shared';
+import { Upload } from '../../pure/file-upload';
+import * as style from './style.css';
+
+const CameraIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6236 4.25001C10.635 4.25001 10.6467 4.25002 10.6584 4.25002H13.3416C13.3533 4.25002 13.365 4.25001 13.3764 4.25001C13.5609 4.24995 13.7105 4.2499 13.8543 4.26611C14.5981 4.34997 15.2693 4.75627 15.6826 5.38026C15.7624 5.50084 15.83 5.63398 15.9121 5.79586C15.9173 5.80613 15.9226 5.81652 15.9279 5.82703C15.9538 5.87792 15.9679 5.90562 15.9789 5.9261C15.9832 5.9341 15.9857 5.93861 15.9869 5.94065C16.0076 5.97069 16.0435 5.99406 16.0878 5.99905L16.0849 5.99877C16.0849 5.99877 16.0907 5.99918 16.1047 5.99947C16.1286 5.99998 16.1604 6.00002 16.2181 6.00002L17.185 6.00001C17.6577 6 18.0566 5.99999 18.3833 6.02627C18.7252 6.05377 19.0531 6.11364 19.3656 6.27035C19.8402 6.50842 20.2283 6.88944 20.4723 7.36077C20.6336 7.67233 20.6951 7.99944 20.7232 8.33858C20.75 8.66166 20.75 9.05554 20.75 9.51992V16.2301C20.75 16.6945 20.75 17.0884 20.7232 17.4114C20.6951 17.7506 20.6336 18.0777 20.4723 18.3893C20.2283 18.8606 19.8402 19.2416 19.3656 19.4797C19.0531 19.6364 18.7252 19.6963 18.3833 19.7238C18.0566 19.75 17.6578 19.75 17.185 19.75H6.81497C6.34225 19.75 5.9434 19.75 5.61668 19.7238C5.27477 19.6963 4.94688 19.6364 4.63444 19.4797C4.15978 19.2416 3.77167 18.8606 3.52771 18.3893C3.36644 18.0777 3.30494 17.7506 3.27679 17.4114C3.24998 17.0884 3.24999 16.6945 3.25 16.2302V9.51987C3.24999 9.05551 3.24998 8.66164 3.27679 8.33858C3.30494 7.99944 3.36644 7.67233 3.52771 7.36077C3.77167 6.88944 4.15978 6.50842 4.63444 6.27035C4.94688 6.11364 5.27477 6.05377 5.61668 6.02627C5.9434 5.99999 6.34225 6 6.81498 6.00001L7.78191 6.00002C7.83959 6.00002 7.87142 5.99998 7.8953 5.99947C7.90607 5.99924 7.91176 5.99897 7.91398 5.99884C7.95747 5.99343 7.99267 5.9703 8.01312 5.94066C8.01429 5.93863 8.01684 5.93412 8.02113 5.9261C8.0321 5.90561 8.04622 5.87791 8.07206 5.82703C8.07739 5.81653 8.08266 5.80615 8.08787 5.79588C8.17004 5.63397 8.23759 5.50086 8.31745 5.38026C8.73067 4.75627 9.40192 4.34997 10.1457 4.26611C10.2895 4.2499 10.4391 4.24995 10.6236 4.25001ZM10.6584 5.75002C10.422 5.75002 10.3627 5.75114 10.3138 5.75666C10.0055 5.79142 9.73316 5.95919 9.56809 6.20845C9.54218 6.24758 9.51544 6.29761 9.40943 6.50633C9.40611 6.51287 9.40274 6.5195 9.39934 6.52622C9.36115 6.60161 9.31758 6.68761 9.26505 6.76694C8.9964 7.17261 8.56105 7.4354 8.08026 7.48961C7.98625 7.50021 7.89021 7.50011 7.80434 7.50003C7.79678 7.50002 7.7893 7.50002 7.78191 7.50002H6.84445C6.33444 7.50002 5.99634 7.50058 5.73693 7.52144C5.48594 7.54163 5.37478 7.57713 5.30693 7.61115C5.11257 7.70864 4.95675 7.86306 4.85983 8.05029C4.82733 8.11308 4.79194 8.21816 4.77165 8.46266C4.7506 8.71626 4.75 9.0474 4.75 9.55001V16.2C4.75 16.7026 4.7506 17.0338 4.77165 17.2874C4.79194 17.5319 4.82733 17.6369 4.85983 17.6997C4.95675 17.887 5.11257 18.0414 5.30693 18.1389C5.37478 18.1729 5.48594 18.2084 5.73693 18.2286C5.99634 18.2494 6.33444 18.25 6.84445 18.25H17.1556C17.6656 18.25 18.0037 18.2494 18.2631 18.2286C18.5141 18.2084 18.6252 18.1729 18.6931 18.1389C18.8874 18.0414 19.0433 17.887 19.1402 17.6997C19.1727 17.6369 19.2081 17.5319 19.2283 17.2874C19.2494 17.0338 19.25 16.7026 19.25 16.2V9.55001C19.25 9.0474 19.2494 8.71626 19.2283 8.46266C19.2081 8.21816 19.1727 8.11308 19.1402 8.05029C19.0433 7.86306 18.8874 7.70864 18.6931 7.61115C18.6252 7.57713 18.5141 7.54163 18.2631 7.52144C18.0037 7.50058 17.6656 7.50002 17.1556 7.50002H16.2181C16.2107 7.50002 16.2032 7.50002 16.1957 7.50003C16.1098 7.50011 16.0138 7.50021 15.9197 7.48961C15.4389 7.4354 15.0036 7.17261 14.735 6.76694C14.6824 6.68761 14.6389 6.60163 14.6007 6.52622C14.5973 6.5195 14.5939 6.51287 14.5906 6.50633C14.4846 6.29763 14.4578 6.24758 14.4319 6.20846C14.2668 5.95919 13.9945 5.79142 13.6862 5.75666C13.6373 5.75114 13.578 5.75002 13.3416 5.75002H10.6584ZM12 11C10.9303 11 10.0833 11.8506 10.0833 12.875C10.0833 13.8995 10.9303 14.75 12 14.75C13.0697 14.75 13.9167 13.8995 13.9167 12.875C13.9167 11.8506 13.0697 11 12 11ZM8.58333 12.875C8.58333 11 10.1242 9.50002 12 9.50002C13.8758 9.50002 15.4167 11 15.4167 12.875C15.4167 14.7501 13.8758 16.25 12 16.25C10.1242 16.25 8.58333 14.7501 8.58333 12.875Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export const ProfilePanel: FC<{
+  workspace: AffineOfficialWorkspace;
+}> = ({ workspace }) => {
+  const t = useAFFiNEI18N();
+
+  const [, update] = useBlockSuiteWorkspaceAvatarUrl(
+    workspace.blockSuiteWorkspace
+  );
+
+  const [name, setName] = useBlockSuiteWorkspaceName(
+    workspace.blockSuiteWorkspace
+  );
+
+  const [input, setInput] = useState<string>(name);
+
+  const handleUpdateWorkspaceName = useCallback(
+    (name: string) => {
+      setName(name);
+      toast(t['Update workspace name success']());
+    },
+    [setName, t]
+  );
+
+  return (
+    <div className={style.profileWrapper}>
+      <div className={style.avatarWrapper}>
+        <Upload
+          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
+          fileChange={update}
+          data-testid="upload-avatar"
+        >
+          <>
+            <div className="camera-icon-wrapper">
+              <CameraIcon />
+            </div>
+            <WorkspaceAvatar
+              size={56}
+              workspace={workspace.blockSuiteWorkspace}
+            />
+          </>
+        </Upload>
+      </div>
+      <div className={style.profileHandlerWrapper}>
+        <Input
+          width={280}
+          height={32}
+          defaultValue={input}
+          data-testid="workspace-name-input"
+          placeholder={t['Workspace Name']()}
+          maxLength={64}
+          minLength={0}
+          onChange={setInput}
+        />
+        {input === workspace.blockSuiteWorkspace.meta.name ? null : (
+          <IconButton
+            size="middle"
+            data-testid="save-workspace-name"
+            onClick={() => {
+              handleUpdateWorkspaceName(input);
+            }}
+            style={{
+              color: 'var(--affine-primary-color)',
+              marginLeft: '12px',
+            }}
+          >
+            <DoneIcon />
+          </IconButton>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,176 @@
+import { Button, FlexWrapper, Switch, Tooltip } from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import { Unreachable } from '@affine/env/constant';
+import type {
+  AffineCloudWorkspace,
+  LocalWorkspace,
+} from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import type { FC } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+import type { AffineOfficialWorkspace } from '../../../shared';
+import { toast } from '../../../utils';
+import { EnableAffineCloudModal } from '../enable-affine-cloud-modal';
+import { TmpDisableAffineCloudModal } from '../tmp-disable-affine-cloud-modal';
+import type { WorkspaceSettingDetailProps } from './index';
+import * as style from './style.css';
+
+export type PublishPanelProps = Omit<
+  WorkspaceSettingDetailProps,
+  'workspaceId'
+> & {
+  workspace: AffineOfficialWorkspace;
+};
+export type PublishPanelLocalProps = Omit<
+  WorkspaceSettingDetailProps,
+  'workspaceId'
+> & {
+  workspace: LocalWorkspace;
+};
+export type PublishPanelAffineProps = Omit<
+  WorkspaceSettingDetailProps,
+  'workspaceId'
+> & {
+  workspace: AffineCloudWorkspace;
+};
+
+const PublishPanelAffine: FC<PublishPanelAffineProps> = props => {
+  const { workspace } = props;
+  const t = useAFFiNEI18N();
+  // const toggleWorkspacePublish = useToggleWorkspacePublish(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 (
+    <>
+      <SettingRow
+        name={t['Publish']()}
+        desc={
+          // workspace.public ? t['Unpublished hint']() : t['Published hint']()
+          'UNFINISHED'
+        }
+      >
+        {/* <Switch
+          checked={workspace.public}
+          onChange={checked => toggleWorkspacePublish(checked)}
+        /> */}
+      </SettingRow>
+      <FlexWrapper justifyContent="space-between">
+        <Button
+          className={style.urlButton}
+          size="middle"
+          onClick={useCallback(() => {
+            window.open(shareUrl, '_blank');
+          }, [shareUrl])}
+          title={shareUrl}
+        >
+          {shareUrl}
+        </Button>
+        <Button size="middle" onClick={copyUrl}>
+          {t['Copy']()}
+        </Button>
+      </FlexWrapper>
+    </>
+  );
+};
+
+const FakePublishPanelAffine: FC<{
+  workspace: AffineOfficialWorkspace;
+}> = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <Tooltip
+      content={t['com.affine.settings.workspace.publish.local-tooltip']()}
+      placement="top"
+    >
+      <div className={style.fakeWrapper}>
+        <SettingRow name={t['Publish']()} desc={t['Unpublished hint']()}>
+          <Switch checked={false} />
+        </SettingRow>
+      </div>
+    </Tooltip>
+  );
+};
+const PublishPanelLocal: FC<PublishPanelLocalProps> = ({
+  workspace,
+  onTransferWorkspace,
+}) => {
+  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}
+          onClose={() => {
+            setOpen(false);
+          }}
+          onConfirm={() => {
+            onTransferWorkspace(
+              WorkspaceFlavour.LOCAL,
+              WorkspaceFlavour.AFFINE_CLOUD,
+              workspace
+            );
+            setOpen(false);
+          }}
+        />
+      ) : (
+        <TmpDisableAffineCloudModal
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export const PublishPanel: FC<PublishPanelProps> = props => {
+  if (props.workspace.flavour === WorkspaceFlavour.AFFINE_CLOUD) {
+    return <PublishPanelAffine {...props} workspace={props.workspace} />;
+  } else if (props.workspace.flavour === WorkspaceFlavour.LOCAL) {
+    return <PublishPanelLocal {...props} workspace={props.workspace} />;
+  }
+  throw new Unreachable();
+};

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

@@ -0,0 +1,123 @@
+import { Button, FlexWrapper, toast, Tooltip } from '@affine/component';
+import { SettingRow } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useMemo } from 'react';
+import { type FC, useCallback, useEffect, useState } from 'react';
+
+import type { AffineOfficialWorkspace } from '../../../shared';
+import * as style from './style.css';
+
+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);
+        }
+      });
+    }
+  }, [workspaceId]);
+  return path;
+};
+
+export const StoragePanel: FC<{
+  workspace: AffineOfficialWorkspace;
+}> = ({ workspace }) => {
+  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 => {
+        if (!result?.error && !result?.canceled) {
+          toast(t['Move folder success']());
+        } else if (result?.error) {
+          // @ts-expect-error: result.error is dynamic
+          toast(t[result.error]());
+        }
+      })
+      .catch(() => {
+        toast(t['UNKNOWN_ERROR']());
+      })
+      .finally(() => {
+        setMoveToInProgress(false);
+      });
+  }, [moveToInProgress, t, workspaceId]);
+
+  const rowContent = useMemo(
+    () =>
+      secondaryPath ? (
+        <FlexWrapper justifyContent="space-between">
+          <Tooltip
+            zIndex={1000}
+            content={t['com.affine.settings.storage.db-location.change-hint']()}
+            placement="top-start"
+          >
+            <Button
+              data-testid="move-folder"
+              className={style.urlButton}
+              size="middle"
+              onClick={handleMoveTo}
+            >
+              {secondaryPath}
+            </Button>
+          </Tooltip>
+          <Button
+            size="small"
+            data-testid="reveal-folder"
+            data-disabled={moveToInProgress}
+            onClick={onRevealDBFile}
+          >
+            {t['Open folder']()}
+          </Button>
+        </FlexWrapper>
+      ) : (
+        <Button
+          size="small"
+          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>
+  );
+};

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

@@ -0,0 +1,73 @@
+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 avatarWrapper = style({
+  width: '56px',
+  height: '56px',
+  borderRadius: '50%',
+  position: 'relative',
+  overflow: 'hidden',
+  cursor: 'pointer',
+  flexShrink: '0',
+  selectors: {
+    '&.disable': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+});
+globalStyle(`${avatarWrapper}:hover .camera-icon-wrapper`, {
+  display: 'flex',
+});
+globalStyle(`${avatarWrapper} .camera-icon-wrapper`, {
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  display: 'none',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: 'rgba(60, 61, 63, 0.5)',
+  zIndex: '1',
+});
+
+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',
+    },
+  },
+});

apps/core/src/components/affine/onboarding-modal.tsx

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

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

@@ -0,0 +1,3 @@
+export const AccountSetting = () => {
+  return <div>AccountSetting</div>;
+};

apps/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/',
+  },
+];

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

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

@@ -0,0 +1,135 @@
+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['About AFFiNE']()}
+        subtitle={t['com.affine.settings.about.message']()}
+        data-testid="about-title"
+      />
+      <SettingWrapper title={t['Version']()}>
+        <SettingRow name={t['App Version']()} desc={runtimeConfig.appVersion} />
+        <SettingRow
+          name={t['Editor Version']()}
+          desc={runtimeConfig.editorVersion}
+        />
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+          <>
+            <SettingRow
+              name={t['Check for updates']()}
+              desc={t['New version is ready']()}
+            ></SettingRow>
+            <SettingRow
+              name={t['Check for updates automatically']()}
+              desc={t['com.affine.settings.about.update.check.message']()}
+            >
+              <Switch
+                checked={appSettings.autoCheckUpdate}
+                onChange={checked => changeSwitch('autoCheckUpdate', checked)}
+              />
+            </SettingRow>
+            <SettingRow
+              name={t['Download updates automatically']()}
+              desc={t['com.affine.settings.about.update.download.message']()}
+            >
+              <Switch
+                checked={appSettings.autoCheckUpdate}
+                onChange={checked => changeSwitch('autoCheckUpdate', checked)}
+              />
+            </SettingRow>
+            <SettingRow
+              name={t[`Discover what's new`]()}
+              desc={t['View the AFFiNE Changelog.']()}
+              style={{ cursor: 'pointer' }}
+              onClick={() => {
+                window.open(
+                  'https://affine.pro/blog/what-is-new-affine-0717',
+                  '_blank'
+                );
+              }}
+            >
+              <ArrowRightSmallIcon />
+            </SettingRow>
+          </>
+        ) : null}
+      </SettingWrapper>
+      <SettingWrapper title={t['Contact with us']()}>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://affine.pro"
+          target="_blank"
+        >
+          {t['Official Website']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://community.affine.pro"
+          target="_blank"
+        >
+          {t['AFFiNE Community']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+      </SettingWrapper>
+      <SettingWrapper title={t['Communities']()}>
+        <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['Info of legal']()}>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://affine.pro/privacy"
+          target="_blank"
+        >
+          {t['Privacy']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+        <a
+          className={link}
+          rel="noreferrer"
+          href="https://affine.pro/terms"
+          target="_blank"
+        >
+          {t['Terms of Use']()}
+          <OpenInNewIcon className="icon" />
+        </a>
+      </SettingWrapper>
+    </>
+  );
+};

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

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

@@ -0,0 +1,58 @@
+import { Menu, MenuItem, MenuTrigger } from '@affine/component';
+import dayjs from 'dayjs';
+import { type FC, useCallback } from 'react';
+
+import {
+  dateFormatOptions,
+  type DateFormats,
+  useAppSetting,
+} from '../../../../../atoms/settings';
+
+const DateFormatMenuContent: FC<{
+  currentOption: DateFormats;
+  onSelect: (option: DateFormats) => void;
+}> = ({ onSelect, currentOption }) => {
+  return (
+    <>
+      {dateFormatOptions.map(option => {
+        return (
+          <MenuItem
+            key={option}
+            active={currentOption === option}
+            onClick={() => {
+              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
+      content={
+        <DateFormatMenuContent
+          onSelect={handleSelect}
+          currentOption={appearanceSettings.dateFormat}
+        />
+      }
+      placement="bottom-end"
+      trigger="click"
+      disablePortal={true}
+    >
+      <MenuTrigger data-testid="date-format-menu-trigger">
+        {dayjs(new Date()).format(appearanceSettings.dateFormat)}
+      </MenuTrigger>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,221 @@
+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}
+      defaultValue={theme}
+      onValueChange={useCallback(
+        (value: string) => {
+          setTheme(value);
+        },
+        [setTheme]
+      )}
+    >
+      <RadioButton
+        bold={true}
+        value="system"
+        data-testid="system-theme-trigger"
+      >
+        {t['system']()}
+      </RadioButton>
+      <RadioButton bold={true} value="light" data-testid="light-theme-trigger">
+        {t['light']()}
+      </RadioButton>
+      <RadioButton bold={true} value="dark" data-testid="dark-theme-trigger">
+        {t['dark']()}
+      </RadioButton>
+    </RadioButtonGroup>
+  );
+};
+
+const FontFamilySettings = () => {
+  const [appSettings, setAppSettings] = useAppSetting();
+  return (
+    <RadioButtonGroup
+      width={250}
+      className={settingWrapper}
+      defaultValue={appSettings.fontStyle}
+      onValueChange={useCallback(
+        (key: AppSetting['fontStyle']) => {
+          setAppSettings({ fontStyle: key });
+        },
+        [setAppSettings]
+      )}
+    >
+      {fontStyleOptions.map(({ key, value }) => {
+        return (
+          <RadioButton
+            key={key}
+            bold={true}
+            value={key}
+            data-testid="system-font-style-trigger"
+            style={{
+              fontFamily: value,
+            }}
+          >
+            {key}
+          </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['Appearance Settings']()}
+        subtitle={t['Customize your  AFFiNE Appearance']()}
+      />
+
+      <SettingWrapper title={t['Theme']()}>
+        <SettingRow
+          name={t['Color Scheme']()}
+          desc={t['Choose your color scheme']()}
+        >
+          <ThemeSettings />
+        </SettingRow>
+        <SettingRow
+          name={t['Font Style']()}
+          desc={t['Choose your font style']()}
+        >
+          <FontFamilySettings />
+        </SettingRow>
+        <SettingRow
+          name={t['Display Language']()}
+          desc={t['Select the language for the interface.']()}
+        >
+          <div className={settingWrapper}>
+            <LanguageMenu triggerProps={{ size: 'small' }} />
+          </div>
+        </SettingRow>
+        {environment.isDesktop ? (
+          <SettingRow
+            name={t['Client Border Style']()}
+            desc={t['Customize the appearance of the client.']()}
+          >
+            <Switch
+              checked={appSettings.clientBorder}
+              onChange={checked => changeSwitch('clientBorder', checked)}
+            />
+          </SettingRow>
+        ) : null}
+
+        <SettingRow
+          name={t['Full width Layout']()}
+          desc={t['Maximum display of content within a page.']()}
+        >
+          <Switch
+            data-testid="full-width-layout-trigger"
+            checked={appSettings.fullWidthLayout}
+            onChange={checked => changeSwitch('fullWidthLayout', checked)}
+          />
+        </SettingRow>
+        {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
+          <SettingRow
+            name={t['Window frame style']()}
+            desc={t['Customize appearance of Windows Client.']()}
+          >
+            <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[option]()}
+                  </RadioButton>
+                );
+              })}
+            </RadioButtonGroup>
+          </SettingRow>
+        ) : null}
+      </SettingWrapper>
+      {runtimeConfig.enableNewSettingUnstableApi ? (
+        <SettingWrapper title={t['Date']()}>
+          <SettingRow
+            name={t['Date Format']()}
+            desc={t['Customize your date style.']()}
+          >
+            <div className={settingWrapper}>
+              <DateFormatSetting />
+            </div>
+          </SettingRow>
+          <SettingRow
+            name={t['Start Week On Monday']()}
+            desc={t['By default, the week starts on Sunday.']()}
+          >
+            <Switch
+              checked={appSettings.startWeekOnMonday}
+              onChange={checked => changeSwitch('startWeekOnMonday', checked)}
+            />
+          </SettingRow>
+        </SettingWrapper>
+      ) : null}
+
+      {environment.isDesktop ? (
+        <SettingWrapper title={t['Sidebar']()}>
+          <SettingRow
+            name={t['com.affine.settings.appearance.sidebar.noise']()}
+            desc={t['com.affine.settings.appearance.sidebar.noise.message']()}
+          >
+            <Switch
+              checked={appSettings.enableNoisyBackground}
+              onChange={checked =>
+                changeSwitch('enableNoisyBackground', checked)
+              }
+            />
+          </SettingRow>
+          <SettingRow
+            name={t['com.affine.settings.appearance.sidebar.translucent']()}
+            desc={t[
+              'com.affine.settings.appearance.sidebar.translucent.message'
+            ]()}
+          >
+            <Switch
+              checked={appSettings.enableBlurBackground}
+              onChange={checked =>
+                changeSwitch('enableBlurBackground', checked)
+              }
+            />
+          </SettingRow>
+        </SettingWrapper>
+      ) : null}
+    </>
+  );
+};

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

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

@@ -0,0 +1,75 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  AiIcon,
+  AppearanceIcon,
+  InformationIcon,
+  KeyboardIcon,
+} from '@blocksuite/icons';
+import type { FC, 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';
+
+export type GeneralSettingList = {
+  key: GeneralSettingKeys;
+  title: string;
+  icon: FC<SVGProps<SVGSVGElement>>;
+  testId: string;
+}[];
+
+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['Keyboard Shortcuts'](),
+      icon: KeyboardIcon,
+      testId: 'shortcuts-panel-trigger',
+    },
+    {
+      key: 'plugins',
+      title: 'Plugins',
+      icon: AiIcon,
+      testId: 'plugins-panel-trigger',
+    },
+    {
+      key: 'about',
+      title: t['About AFFiNE'](),
+      icon: InformationIcon,
+      testId: 'about-panel-trigger',
+    },
+  ];
+};
+
+export const GeneralSetting = ({
+  generalKey,
+}: {
+  generalKey: GeneralSettingKeys;
+}) => {
+  switch (generalKey) {
+    case 'shortcuts':
+      return <Shortcuts />;
+    case 'appearance':
+      return <AppearanceSettings />;
+    case 'plugins':
+      return <Plugins />;
+    case 'about':
+      return <AboutAffine />;
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,22 @@
+import { SettingHeader } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { affinePluginsAtom } from '@toeverything/plugin-infra/manager';
+import { useAtomValue } from 'jotai';
+
+export const Plugins = () => {
+  const t = useAFFiNEI18N();
+  const plugins = useAtomValue(affinePluginsAtom);
+  return (
+    <>
+      <SettingHeader
+        title={'Plugins'}
+        subtitle={t['None yet']()}
+        data-testid="plugins-title"
+      />
+      {Object.values(plugins).map(({ definition, uiAdapter }) => {
+        const Content = uiAdapter.debugContent;
+        return <div key={definition.id}>{Content && <Content />}</div>;
+      })}
+    </>
+  );
+};

apps/core/src/components/affine/setting-modal/general-setting/plugins/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',
+});

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

@@ -0,0 +1,70 @@
+import { SettingHeader } from '@affine/component/setting-components';
+import { SettingWrapper } from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+import {
+  useEdgelessShortcuts,
+  useGeneralShortcuts,
+  useMarkdownShortcuts,
+  usePageShortcuts,
+} from '../../../../../hooks/affine/use-shortcuts';
+import { shortcutRow } from './style.css';
+
+export const Shortcuts = () => {
+  const t = useAFFiNEI18N();
+
+  const markdownShortcuts = useMarkdownShortcuts();
+  const pageShortcuts = usePageShortcuts();
+  const edgelessShortcuts = useEdgelessShortcuts();
+  const generalShortcuts = useGeneralShortcuts();
+
+  return (
+    <>
+      <SettingHeader
+        title={t['Keyboard Shortcuts']()}
+        subtitle={t['Check Keyboard Shortcuts quickly']()}
+        data-testid="keyboard-shortcuts-title"
+      />
+      <SettingWrapper title={t['General']()}>
+        {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
+          return (
+            <div key={title} className={shortcutRow}>
+              <span>{title}</span>
+              <span className="shortcut">{shortcuts}</span>
+            </div>
+          );
+        })}
+      </SettingWrapper>
+      <SettingWrapper title={t['Page']()}>
+        {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
+          return (
+            <div key={title} className={shortcutRow}>
+              <span>{title}</span>
+              <span className="shortcut">{shortcuts}</span>
+            </div>
+          );
+        })}
+      </SettingWrapper>
+      <SettingWrapper title={t['Edgeless']()}>
+        {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
+          return (
+            <div key={title} className={shortcutRow}>
+              <span>{title}</span>
+              <span className="shortcut">{shortcuts}</span>
+            </div>
+          );
+        })}
+      </SettingWrapper>
+      <SettingWrapper title={t['Markdown Syntax']()}>
+        {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
+          return (
+            <div key={title} className={shortcutRow}>
+              <span>{title}</span>
+              <span className="shortcut">{shortcuts}</span>
+            </div>
+          );
+        })}
+      </SettingWrapper>
+    </>
+  );
+};

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

@@ -0,0 +1,21 @@
+import { globalStyle, 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',
+    },
+  },
+});
+
+globalStyle(`${shortcutRow} .shortcut`, {
+  border: '1px solid var(--affine-border-color)',
+  borderRadius: '8px',
+  padding: '4px 18px',
+});

apps/core/src/components/affine/setting-modal/index.tsx

@@ -0,0 +1,100 @@
+import {
+  SettingModal as SettingModalBase,
+  type SettingModalProps,
+} from '@affine/component/setting-components';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ContactWithUsIcon } from '@blocksuite/icons';
+import type React from 'react';
+import { useCallback } from 'react';
+
+import { AccountSetting } from './account-setting';
+import {
+  GeneralSetting,
+  type GeneralSettingKeys,
+  useGeneralSettingList,
+} from './general-setting';
+import { SettingSidebar } from './setting-sidebar';
+import { settingContent } from './style.css';
+import { WorkspaceSetting } from './workspace-setting';
+
+type ActiveTab = GeneralSettingKeys | 'workspace' | 'account';
+export type SettingProps = {
+  activeTab: ActiveTab;
+  workspaceId: string | null;
+  onSettingClick: (params: {
+    activeTab: ActiveTab;
+    workspaceId: string | null;
+  }) => void;
+};
+export const SettingModal: React.FC<SettingModalProps & SettingProps> = ({
+  open,
+  setOpen,
+  activeTab = 'appearance',
+  workspaceId = null,
+  onSettingClick,
+}) => {
+  const t = useAFFiNEI18N();
+
+  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 (
+    <SettingModalBase open={open} setOpen={setOpen}>
+      <SettingSidebar
+        generalSettingList={generalSettingList}
+        onGeneralSettingClick={onGeneralSettingClick}
+        onWorkspaceSettingClick={onWorkspaceSettingClick}
+        selectedGeneralKey={activeTab}
+        selectedWorkspaceId={workspaceId}
+        onAccountSettingClick={onAccountSettingClick}
+      />
+
+      <div data-testid="setting-modal-content" className={settingContent}>
+        <div className="wrapper">
+          <div className="content">
+            {activeTab === 'workspace' && workspaceId ? (
+              <WorkspaceSetting key={workspaceId} workspaceId={workspaceId} />
+            ) : null}
+            {generalSettingList.find(v => v.key === activeTab) ? (
+              <GeneralSetting generalKey={activeTab as GeneralSettingKeys} />
+            ) : null}
+            {activeTab === 'account' ? <AccountSetting /> : null}
+          </div>
+          <div className="footer">
+            <ContactWithUsIcon />
+            <a
+              href="https://community.affine.pro/home"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {t[
+                'Need more customization options? You can suggest them to us in the community.'
+              ]()}
+            </a>
+          </div>
+        </div>
+      </div>
+    </SettingModalBase>
+  );
+};

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

@@ -0,0 +1,142 @@
+import {
+  WorkspaceListItemSkeleton,
+  WorkspaceListSkeleton,
+} from '@affine/component/setting-components';
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import { useStaticBlockSuiteWorkspace } from '@toeverything/plugin-infra/__internal__/react';
+import clsx from 'clsx';
+import { useAtomValue } from 'jotai';
+import type { FC } from 'react';
+import { Suspense } from 'react';
+
+import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
+import type {
+  GeneralSettingKeys,
+  GeneralSettingList,
+} from '../general-setting';
+import {
+  settingSlideBar,
+  sidebarItemsWrapper,
+  sidebarSelectItem,
+  sidebarSubtitle,
+  sidebarTitle,
+} from './style.css';
+
+export const SettingSidebar: FC<{
+  generalSettingList: GeneralSettingList;
+  onGeneralSettingClick: (key: GeneralSettingKeys) => void;
+  onWorkspaceSettingClick: (workspaceId: string) => void;
+  selectedWorkspaceId: string | null;
+  selectedGeneralKey: string | null;
+  onAccountSettingClick: () => void;
+}> = ({
+  generalSettingList,
+  onGeneralSettingClick,
+  onWorkspaceSettingClick,
+  selectedWorkspaceId,
+  selectedGeneralKey,
+}) => {
+  const t = useAFFiNEI18N();
+  return (
+    <div className={settingSlideBar} data-testid="settings-sidebar">
+      <div className={sidebarTitle}>{t['Settings']()}</div>
+      <div className={sidebarSubtitle}>{t['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.settings.workspace']()}
+      </div>
+      <div className={clsx(sidebarItemsWrapper, 'scroll')}>
+        <Suspense fallback={<WorkspaceListSkeleton />}>
+          <WorkspaceList
+            onWorkspaceSettingClick={onWorkspaceSettingClick}
+            selectedWorkspaceId={selectedWorkspaceId}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export const WorkspaceList: FC<{
+  onWorkspaceSettingClick: (workspaceId: string) => void;
+  selectedWorkspaceId: string | null;
+}> = ({ onWorkspaceSettingClick, selectedWorkspaceId }) => {
+  const workspaces = useAtomValue(rootWorkspacesMetadataAtom);
+  const [currentWorkspace] = useCurrentWorkspace();
+  return (
+    <>
+      {workspaces.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 workspace = useStaticBlockSuiteWorkspace(meta.id);
+  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
+  return (
+    <div
+      className={clsx(sidebarSelectItem, { active: isActive })}
+      title={workspaceName}
+      onClick={onClick}
+      data-testid="workspace-list-item"
+    >
+      <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
+      <span className="setting-name">{workspaceName}</span>
+      {isCurrent ? (
+        <div className="current-label" data-testid="current-workspace-label">
+          Current
+        </div>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,132 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const settingSlideBar = style({
+  width: '25%',
+  maxWidth: '242px',
+  background: 'var(--affine-background-secondary-color)',
+  padding: '20px 16px',
+  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)',
+  paddingLeft: '8px',
+});
+
+export const sidebarSubtitle = style({
+  fontSize: 'var(--affine-font-sm)',
+  lineHeight: 'var(--affine-line-height)',
+  color: 'var(--affine-text-secondary-color)',
+  paddingLeft: '8px',
+  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',
+  padding: '0 8px',
+  height: '30px',
+  marginBottom: '4px',
+  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,
+});
+globalStyle(`${settingSlideBar} .current-label`, {
+  height: '20px',
+  borderRadius: '8px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '0 5px',
+  // TODO: use color variable
+  background: '#1E96EB',
+  fontSize: 'var(--affine-font-xs)',
+  fontWeight: '600',
+  color: 'var(--affine-white)',
+  marginLeft: '10px',
+  flexShrink: 0,
+});
+
+export const accountButton = style({
+  height: '42px',
+  padding: '4px 8px',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+  },
+});
+
+globalStyle(`${accountButton} .avatar`, {
+  border: '1px solid',
+  borderColor: 'var(--affine-white)',
+  marginRight: '10px',
+});
+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,
+});

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

@@ -0,0 +1,42 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const settingContent = style({
+  flexGrow: '1',
+  height: '100%',
+  padding: '40px 15px 20px',
+  overflow: 'auto',
+});
+
+globalStyle(`${settingContent} .wrapper`, {
+  width: '66%',
+  minWidth: '450px',
+  height: '100%',
+  maxWidth: '560px',
+  margin: '0 auto',
+});
+
+globalStyle(`${settingContent} .wrapper::-webkit-scrollbar`, {
+  display: 'none',
+});
+globalStyle(`${settingContent} .content`, {
+  minHeight: '100%',
+  paddingBottom: '80px',
+});
+globalStyle(`${settingContent} .footer`, {
+  cursor: 'pointer',
+  paddingTop: '40px',
+  marginTop: '-80px',
+  fontSize: 'var(--affine-font-sm)',
+  display: 'flex',
+});
+
+globalStyle(`${settingContent} .footer a`, {
+  color: 'var(--affine-text-primary-color)',
+});
+
+globalStyle(`${settingContent} .footer > svg`, {
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-icon-color)',
+  marginRight: '12px',
+  marginTop: '2px',
+});

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

@@ -0,0 +1,44 @@
+import { WorkspaceDetailSkeleton } from '@affine/component/setting-components';
+import { usePassiveWorkspaceEffect } from '@toeverything/plugin-infra/__internal__/react';
+import { useSetAtom } from 'jotai';
+import { Suspense, useCallback } from 'react';
+
+import { getUIAdapter } from '../../../../adapters/workspace';
+import { openSettingModalAtom } from '../../../../atoms';
+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 workspace = useWorkspace(workspaceId);
+  usePassiveWorkspaceEffect(workspace.blockSuiteWorkspace);
+  const setSettingModal = useSetAtom(openSettingModalAtom);
+  const helper = useAppHelper();
+  const { jumpToIndex } = useNavigateHelper();
+
+  const { NewSettingsDetail } = getUIAdapter(workspace.flavour);
+
+  const onDeleteWorkspace = useCallback(
+    async (id: string) => {
+      await helper.deleteWorkspace(id);
+      setSettingModal(prev => ({ ...prev, open: false, workspaceId: null }));
+      jumpToIndex(RouteLogic.REPLACE);
+    },
+    [helper, jumpToIndex, setSettingModal]
+  );
+  const onTransformWorkspace = useOnTransformWorkspace();
+
+  return (
+    <Suspense fallback={<WorkspaceDetailSkeleton />}>
+      <NewSettingsDetail
+        onTransformWorkspace={onTransformWorkspace}
+        onDeleteWorkspace={onDeleteWorkspace}
+        currentWorkspaceId={workspaceId}
+      />
+    </Suspense>
+  );
+};

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

@@ -0,0 +1,77 @@
+import { Empty, IconButton, Modal, ModalWrapper } from '@affine/component';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import {
+  Content,
+  ContentTitle,
+  Header,
+  StyleButton,
+  StyleButtonContainer,
+  StyleImage,
+  StyleTips,
+} from './style';
+
+interface TmpDisableAffineCloudModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TmpDisableAffineCloudModal: React.FC<
+  TmpDisableAffineCloudModalProps
+> = ({ open, onClose }) => {
+  const t = useAFFiNEI18N();
+  return (
+    <Modal
+      data-testid="disable-affine-cloud-modal"
+      open={open}
+      onClose={onClose}
+    >
+      <ModalWrapper width={480}>
+        <Header>
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>
+            {t['com.affine.cloudTempDisable.title']()}
+          </ContentTitle>
+          <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 shape="round" type="primary" onClick={onClose}>
+              {t['Got it']()}
+            </StyleButton>
+          </StyleButtonContainer>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { Button, displayFlex, styled } from '@affine/component';
+
+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 {
+    fontSize: 'var(--affine-font-h6)',
+    lineHeight: '28px',
+    fontWeight: 600,
+  };
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    margin: '20px 0',
+    a: {
+      color: 'var(--affine-primary-color)',
+    },
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    textAlign: 'center',
+    margin: '20px 0',
+    borderRadius: '8px',
+    backgroundColor: 'var(--affine-primary-color)',
+    span: {
+      margin: '0',
+    },
+  };
+});
+export const StyleButtonContainer = styled('div')(() => {
+  return {
+    width: '100%',
+    ...displayFlex('flex-end', 'center'),
+  };
+});
+export const StyleImage = styled('div')(() => {
+  return {
+    width: '100%',
+  };
+});

apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx

@@ -0,0 +1,57 @@
+import { IconButton, Modal, ModalWrapper } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
+
+export type TransformWorkspaceToAffineModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onConform: () => void;
+};
+
+export const TransformWorkspaceToAffineModal: React.FC<
+  TransformWorkspaceToAffineModalProps
+> = ({ open, onClose, onConform }) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      data-testid="enable-affine-cloud-modal"
+    >
+      <ModalWrapper width={560} height={292}>
+        <Header>
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        </Header>
+        <Content>
+          <ContentTitle>{t['Enable AFFiNE Cloud']()}?</ContentTitle>
+          <StyleTips>{t['Enable AFFiNE Cloud Description']()}</StyleTips>
+          {/* <StyleTips>{t('Retain cached cloud data')}</StyleTips> */}
+          <div>
+            <StyleButton
+              data-testid="confirm-enable-cloud-button"
+              shape="round"
+              type="primary"
+              onClick={onConform}
+            >
+              {t['Sign in and Enable']()}
+            </StyleButton>
+            <StyleButton
+              shape="round"
+              onClick={() => {
+                onClose();
+              }}
+            >
+              {t['Not now']()}
+            </StyleButton>
+          </div>
+        </Content>
+      </ModalWrapper>
+    </Modal>
+  );
+};

apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts

@@ -0,0 +1,40 @@
+import { Button, styled } from '@affine/component';
+
+export const Header = styled('div')({
+  height: '44px',
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  paddingRight: '10px',
+  paddingTop: '10px',
+  flexShrink: 0,
+});
+
+export const Content = styled('div')({
+  textAlign: 'center',
+});
+
+export const ContentTitle = styled('h1')({
+  fontSize: '20px',
+  lineHeight: '28px',
+  fontWeight: 600,
+  textAlign: 'center',
+});
+
+export const StyleTips = styled('div')(() => {
+  return {
+    userSelect: 'none',
+    width: '400px',
+    margin: 'auto',
+    marginBottom: '32px',
+    marginTop: '12px',
+  };
+});
+
+export const StyleButton = styled(Button)(() => {
+  return {
+    width: '284px',
+    display: 'block',
+    margin: 'auto',
+    marginTop: '16px',
+  };
+});

apps/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';

apps/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',
+  },
+]);

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

@@ -0,0 +1,243 @@
+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 { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import type { PageMeta } from '@blocksuite/store';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { getPagePreviewText } from '@toeverything/hooks/use-block-suite-page-preview';
+import { useAtom } from 'jotai';
+import type React from 'react';
+import { useMemo } from 'react';
+
+import { allPageModeSelectAtom } from '../../../atoms';
+import { useBlockSuiteMetaHelper } from '../../../hooks/affine/use-block-suite-meta-helper';
+import { useGetPageInfoById } from '../../../hooks/use-get-page-info';
+import type { BlockSuiteWorkspace } from '../../../shared';
+import { toast } from '../../../utils';
+import { filterPage } from '../../../utils/filter';
+import { emptyDescButton, emptyDescKbd, pageListEmptyStyle } from './index.css';
+import { usePageHelper } from './utils';
+
+export type BlockSuitePageListProps = {
+  blockSuiteWorkspace: BlockSuiteWorkspace;
+  listType: 'all' | 'trash' | 'shared' | 'public';
+  isPublic?: true;
+  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,
+};
+
+const PageListEmpty = (props: {
+  createPage?: () => void;
+  listType: BlockSuitePageListProps['listType'];
+}) => {
+  const { listType, createPage } = props;
+  const t = useAFFiNEI18N();
+
+  const getEmptyDescription = () => {
+    if (listType === 'all') {
+      const CreateNewPageButton = () => (
+        <button className={emptyDescButton} onClick={createPage}>
+          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: React.FC<BlockSuitePageListProps> = ({
+  blockSuiteWorkspace,
+  onOpenPage,
+  listType,
+  isPublic = false,
+  collection,
+}) => {
+  const pageMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
+  const {
+    toggleFavorite,
+    removeToTrash,
+    restoreFromTrash,
+    permanentlyDeletePage,
+    cancelPublicPage,
+  } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const [filterMode] = useAtom(allPageModeSelectAtom);
+  const { createPage, createEdgeless, importFile, isPreferredEdgeless } =
+    usePageHelper(blockSuiteWorkspace);
+  const t = useAFFiNEI18N();
+  const getPageInfo = useGetPageInfoById(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 => {
+      const page = blockSuiteWorkspace.getPage(pageMeta.id);
+      const preview = page ? getPagePreviewText(page) : undefined;
+      return {
+        icon: isPreferredEdgeless(pageMeta.id) ? (
+          <EdgelessIcon />
+        ) : (
+          <PageIcon />
+        ),
+        pageId: pageMeta.id,
+        title: pageMeta.title,
+        preview,
+        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['restored']({ title: pageMeta.title || 'Untitled' }));
+        },
+        onPermanentlyDeletePage: () => {
+          permanentlyDeletePage(pageMeta.id);
+          toast(t['Permanently deleted']());
+        },
+      };
+    });
+    return (
+      <PageListTrashView
+        list={pageList}
+        fallback={<PageListEmpty listType={listType} />}
+      />
+    );
+  }
+
+  const pageList: ListData[] = list.map(pageMeta => {
+    const page = blockSuiteWorkspace.getPage(pageMeta.id);
+    const preview = page ? getPagePreviewText(page) : undefined;
+    return {
+      icon: isPreferredEdgeless(pageMeta.id) ? <EdgelessIcon /> : <PageIcon />,
+      pageId: pageMeta.id,
+      title: pageMeta.title,
+      preview,
+      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: () => {
+        removeToTrash(pageMeta.id);
+        toast(t['Successfully deleted']());
+      },
+      onRestorePage: () => {
+        restoreFromTrash(pageMeta.id);
+        toast(t['restored']({ title: pageMeta.title || 'Untitled' }));
+      },
+      bookmarkPage: () => {
+        const status = pageMeta.favorite;
+        toggleFavorite(pageMeta.id);
+        toast(
+          status ? t['Removed from Favorites']() : t['Added to Favorites']()
+        );
+      },
+      onDisablePublicSharing: () => {
+        cancelPublicPage(pageMeta.id);
+        toast('Successfully disabled', {
+          portal: document.body,
+        });
+      },
+    };
+  });
+  return (
+    <PageList
+      workspaceId={blockSuiteWorkspace.id}
+      propertiesMeta={blockSuiteWorkspace.meta.properties}
+      getPageInfo={getPageInfo}
+      onCreateNewPage={createPage}
+      onCreateNewEdgeless={createEdgeless}
+      onImportFile={importFile}
+      isPublicWorkspace={isPublic}
+      list={pageList}
+      fallback={<PageListEmpty createPage={createPage} listType={listType} />}
+    />
+  );
+};

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

@@ -0,0 +1,37 @@
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } 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 } = 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(() => {
+    const page = createPage();
+    return openPage(blockSuiteWorkspace.id, page.id);
+  }, [blockSuiteWorkspace.id, createPage, openPage]);
+  const createEdgelessAndOpen = useCallback(() => {
+    const page = createPage();
+    setPageMode(page.id, 'edgeless');
+    return openPage(blockSuiteWorkspace.id, page.id);
+  }, [blockSuiteWorkspace.id, createPage, openPage, setPageMode]);
+  const importFileAndOpen = useCallback(async () => {
+    const { showImportModal } = await import('@blocksuite/blocks');
+    showImportModal({ workspace: blockSuiteWorkspace });
+  }, [blockSuiteWorkspace]);
+  return {
+    createPage: createPageAndOpen,
+    createEdgeless: createEdgelessAndOpen,
+    importFile: importFileAndOpen,
+    isPreferredEdgeless: isPreferredEdgeless,
+  };
+};

apps/core/src/components/blocksuite/workspace-header/download-tips.tsx

@@ -0,0 +1,27 @@
+import { DownloadTips } from '@affine/component/affine-banner';
+import { isDesktop } from '@affine/env/constant';
+
+export const DownloadClientTip = ({
+  show,
+  onClose,
+}: {
+  // const [showDownloadClientTips, setShowDownloadClientTips] = useAtom(
+  //   guideDownloadClientTipAtom
+  // );
+  // const onCloseDownloadClient = useCallback(() => {
+  //   setShowDownloadClientTips(false);
+  // }, [setShowDownloadClientTips]);
+
+  // if (!showDownloadClientTips || isDesktop) {
+  //   return <></>;
+  // }
+
+  show: boolean;
+  onClose: () => void;
+}) => {
+  if (!show || isDesktop) {
+    return null;
+  }
+  return <DownloadTips onClose={onClose} />;
+};
+export default DownloadClientTip;

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/animation-data/edgeless-hover.json

@@ -0,0 +1,669 @@
+{
+  "v": "5.9.0",
+  "fr": 29.9700012207031,
+  "ip": 0,
+  "op": 60.0000024438501,
+  "w": 500,
+  "h": 500,
+  "nm": "edgeless-hover",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Layer 3/paper-edgeless-icons Outlines",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [183.5, 183.5, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 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, -5.604],
+                    [0, 0],
+                    [-5.614, 0],
+                    [0, 0],
+                    [0, 5.605],
+                    [0, 0],
+                    [5.615, 0]
+                  ],
+                  "o": [
+                    [-5.614, 0],
+                    [0, 0],
+                    [0, 5.605],
+                    [0, 0],
+                    [5.615, 0],
+                    [0, 0],
+                    [0, -5.604],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-30.525, -40.7],
+                    [-40.699, -30.525],
+                    [-40.699, 30.524],
+                    [-30.525, 40.699],
+                    [30.525, 40.699],
+                    [40.699, 30.524],
+                    [40.699, -30.525],
+                    [30.525, -40.7]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [22.447, 0],
+                    [0, 0],
+                    [0, 22.437],
+                    [0, 0],
+                    [-22.446, 0],
+                    [0, 0],
+                    [0, -22.437],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-22.446, 0],
+                    [0, 0],
+                    [0, -22.437],
+                    [0, 0],
+                    [22.447, 0],
+                    [0, 0],
+                    [0, 22.437]
+                  ],
+                  "v": [
+                    [30.525, 71.224],
+                    [-30.525, 71.224],
+                    [-71.225, 30.524],
+                    [-71.225, -30.525],
+                    [-30.525, -71.225],
+                    [30.525, -71.225],
+                    [71.224, -30.525],
+                    [71.224, 30.524]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "mm",
+              "mm": 1,
+              "nm": "Merge Paths 1",
+              "mn": "ADBE Vector Filter - Merge",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [295.322, 295.323],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [315.322, 315.323],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [295.322, 295.323] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 1",
+          "np": 4,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [8.426, 0],
+                    [0, 8.426],
+                    [0, 0],
+                    [-8.426, 0],
+                    [0, -8.426],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-8.426, 0],
+                    [0, 0],
+                    [0, -8.426],
+                    [8.426, 0],
+                    [0, 0],
+                    [0, 8.426]
+                  ],
+                  "v": [
+                    [0, 30.525],
+                    [-15.262, 15.263],
+                    [-15.262, -15.262],
+                    [0, -30.525],
+                    [15.262, -15.262],
+                    [15.262, 15.263]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [76.561, 183.399],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [56.561, 183.399],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [76.561, 183.399] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 2",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [8.426, 0],
+                    [0, 8.426],
+                    [5.395, 13.057],
+                    [9.956, 9.956],
+                    [13.037, 5.406],
+                    [14.1, 0],
+                    [0, 8.426],
+                    [-8.426, 0],
+                    [-16.753, -6.955],
+                    [-12.808, -12.818],
+                    [-6.955, -16.773],
+                    [0, -18.105]
+                  ],
+                  "o": [
+                    [-8.426, 0],
+                    [0, -14.09],
+                    [-5.416, -13.016],
+                    [-9.957, -9.956],
+                    [-13.026, -5.385],
+                    [-8.426, 0],
+                    [0, -8.426],
+                    [18.134, 0],
+                    [16.763, 6.936],
+                    [12.788, 12.778],
+                    [6.936, 16.773],
+                    [0, 8.426]
+                  ],
+                  "v": [
+                    [61.049, 76.312],
+                    [45.788, 61.05],
+                    [37.66, 20.151],
+                    [14.497, -14.487],
+                    [-20.161, -37.659],
+                    [-61.049, -45.787],
+                    [-76.311, -61.049],
+                    [-61.049, -76.312],
+                    [-8.475, -65.839],
+                    [36.09, -36.069],
+                    [65.858, 8.486],
+                    [76.311, 61.05]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [254.447, 112.349],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [274.447, 92.349],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [254.447, 112.349] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 3",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 3,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [22.446, 0],
+                    [0, -22.437],
+                    [-22.446, 0],
+                    [0, 22.436]
+                  ],
+                  "o": [
+                    [-22.446, 0],
+                    [0, 22.436],
+                    [22.446, 0],
+                    [0, -22.437]
+                  ],
+                  "v": [
+                    [0, -40.7],
+                    [-40.7, 0],
+                    [0, 40.699],
+                    [40.7, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [39.269, 0],
+                    [0, 39.268],
+                    [-39.269, 0],
+                    [0, -39.269]
+                  ],
+                  "o": [
+                    [-39.269, 0],
+                    [0, -39.269],
+                    [39.269, 0],
+                    [0, 39.268]
+                  ],
+                  "v": [
+                    [0, 71.224],
+                    [-71.224, 0],
+                    [0, -71.225],
+                    [71.224, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "mm",
+              "mm": 1,
+              "nm": "Merge Paths 1",
+              "mn": "ADBE Vector Filter - Merge",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [71.474, 295.323],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [51.474, 315.323],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [71.474, 295.323] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 4",
+          "np": 4,
+          "cix": 2,
+          "bm": 0,
+          "ix": 4,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [22.446, 0],
+                    [0, -22.437],
+                    [-22.446, 0],
+                    [0, 22.436]
+                  ],
+                  "o": [
+                    [-22.446, 0],
+                    [0, 22.436],
+                    [22.446, 0],
+                    [0, -22.437]
+                  ],
+                  "v": [
+                    [0, -40.7],
+                    [-40.7, 0.001],
+                    [0, 40.7],
+                    [40.7, 0.001]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [39.269, 0],
+                    [0, 39.268],
+                    [-39.269, 0],
+                    [0, -39.269]
+                  ],
+                  "o": [
+                    [-39.269, 0],
+                    [0, -39.269],
+                    [39.269, 0],
+                    [0, 39.268]
+                  ],
+                  "v": [
+                    [0, 71.225],
+                    [-71.224, 0.001],
+                    [0, -71.225],
+                    [71.224, 0.001]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "mm",
+              "mm": 1,
+              "nm": "Merge Paths 1",
+              "mn": "ADBE Vector Filter - Merge",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [71.474, 71.475],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [51.474, 51.475],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [71.474, 71.475] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 5",
+          "np": 4,
+          "cix": 2,
+          "bm": 0,
+          "ix": 5,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 60.0000024438501,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/animation-data/page-hover.json

@@ -0,0 +1,521 @@
+{
+  "v": "5.9.0",
+  "fr": 29.9700012207031,
+  "ip": 0,
+  "op": 60.0000024438501,
+  "w": 500,
+  "h": 500,
+  "nm": "page-hover",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Layer 1/paper-edgeless-icons Outlines",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [250, 250, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [183, 183, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [22.557, 0],
+                    [0, 0],
+                    [0, 8.639],
+                    [-8.64, 0],
+                    [0, 0],
+                    [-2.201, 1.651],
+                    [0, 9.536],
+                    [0, 0],
+                    [-8.64, 0],
+                    [0, -8.64],
+                    [0, 0],
+                    [16.892, -16.892]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-8.64, 0],
+                    [0, -8.64],
+                    [0, 0],
+                    [17.442, 0],
+                    [10.412, -10.453],
+                    [0, 0],
+                    [0, -8.64],
+                    [8.639, 0],
+                    [0, 0],
+                    [0, 18.155],
+                    [-9.027, 8.987]
+                  ],
+                  "v": [
+                    [46.947, 182.579],
+                    [-109.545, 182.579],
+                    [-125.194, 166.93],
+                    [-109.545, 151.281],
+                    [46.947, 151.281],
+                    [78.001, 145.086],
+                    [93.895, 114.766],
+                    [93.895, -166.93],
+                    [109.545, -182.579],
+                    [125.194, -166.93],
+                    [125.194, 114.766],
+                    [99.743, 167.561]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [240.204, 182.829],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [260.204, 202.829],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [240.204, 182.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": "Transform"
+            }
+          ],
+          "nm": "Group 1",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [8.64, 0],
+                    [0, 8.639],
+                    [0, 0],
+                    [-16.892, 16.882],
+                    [-22.598, 0],
+                    [0, 0],
+                    [0, -8.64],
+                    [8.639, 0],
+                    [0, 0],
+                    [2.171, -1.65],
+                    [0, -9.546],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [-8.64, 0],
+                    [0, 0],
+                    [0, -18.145],
+                    [8.976, -8.986],
+                    [0, 0],
+                    [8.639, 0],
+                    [0, 8.64],
+                    [0, 0],
+                    [-17.453, 0],
+                    [-10.443, 10.484],
+                    [0, 0],
+                    [0, 8.639]
+                  ],
+                  "v": [
+                    [-109.545, 182.579],
+                    [-125.194, 166.93],
+                    [-125.194, -114.766],
+                    [-99.743, -167.562],
+                    [-46.948, -182.579],
+                    [109.545, -182.579],
+                    [125.194, -166.93],
+                    [109.545, -151.281],
+                    [-46.948, -151.281],
+                    [-77.972, -145.107],
+                    [-93.896, -114.766],
+                    [-93.896, 166.93]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [125.443, 182.829],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [105.443, 162.829],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [125.443, 182.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": "Transform"
+            }
+          ],
+          "nm": "Group 2",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 2,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [8.64, 0],
+                    [0, 0],
+                    [0, 8.639],
+                    [-8.64, 0],
+                    [0, 0],
+                    [0, -8.64]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-8.64, 0],
+                    [0, -8.64],
+                    [0, 0],
+                    [8.64, 0],
+                    [0, 8.639]
+                  ],
+                  "v": [
+                    [67.813, 15.649],
+                    [-67.813, 15.649],
+                    [-83.463, 0],
+                    [-67.813, -15.649],
+                    [67.813, -15.649],
+                    [83.462, 0]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [182.824, 271.513],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [212.824, 281.513],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [182.824, 271.513] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 3",
+          "np": 2,
+          "cix": 2,
+          "bm": 0,
+          "ix": 3,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ind": 0,
+              "ty": "sh",
+              "ix": 1,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [0, 0],
+                    [0, -5.757],
+                    [0, 0],
+                    [-5.756, 0],
+                    [0, 0],
+                    [0, 5.756],
+                    [0, 0],
+                    [5.747, 0]
+                  ],
+                  "o": [
+                    [-5.756, 0],
+                    [0, 0],
+                    [0, 5.756],
+                    [0, 0],
+                    [5.747, 0],
+                    [0, 0],
+                    [0, -5.757],
+                    [0, 0]
+                  ],
+                  "v": [
+                    [-41.732, -31.294],
+                    [-52.165, -20.86],
+                    [-52.165, 20.87],
+                    [-41.732, 31.303],
+                    [41.73, 31.303],
+                    [52.163, 20.87],
+                    [52.163, -20.86],
+                    [41.73, -31.294]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 1",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ind": 1,
+              "ty": "sh",
+              "ix": 2,
+              "ks": {
+                "a": 0,
+                "k": {
+                  "i": [
+                    [23.006, 0],
+                    [0, 0],
+                    [0, 23.015],
+                    [0, 0],
+                    [-23.015, 0],
+                    [0, 0],
+                    [0, -23.016],
+                    [0, 0]
+                  ],
+                  "o": [
+                    [0, 0],
+                    [-23.015, 0],
+                    [0, 0],
+                    [0, -23.016],
+                    [0, 0],
+                    [23.006, 0],
+                    [0, 0],
+                    [0, 23.015]
+                  ],
+                  "v": [
+                    [41.73, 62.592],
+                    [-41.732, 62.592],
+                    [-83.463, 20.87],
+                    [-83.463, -20.86],
+                    [-41.732, -62.592],
+                    [41.73, -62.592],
+                    [83.463, -20.86],
+                    [83.463, 20.87]
+                  ],
+                  "c": true
+                },
+                "ix": 2
+              },
+              "nm": "Path 2",
+              "mn": "ADBE Vector Shape - Group",
+              "hd": false
+            },
+            {
+              "ty": "mm",
+              "mm": 1,
+              "nm": "Merge Paths 1",
+              "mn": "ADBE Vector Filter - Merge",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0.466666696586, 0.458823559331, 0.490196108351, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "bm": 0,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": {
+                "a": 1,
+                "k": [
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 0,
+                    "s": [182.824, 141.088],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  {
+                    "i": { "x": 0.833, "y": 0.833 },
+                    "o": { "x": 0.167, "y": 0.167 },
+                    "t": 30,
+                    "s": [152.824, 131.088],
+                    "to": [0, 0],
+                    "ti": [0, 0]
+                  },
+                  { "t": 58.0000023623884, "s": [182.824, 141.088] }
+                ],
+                "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": "Transform"
+            }
+          ],
+          "nm": "Group 4",
+          "np": 4,
+          "cix": 2,
+          "bm": 0,
+          "ix": 4,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 60.0000024438501,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx

@@ -0,0 +1,105 @@
+import { Tooltip } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useAtom } from 'jotai';
+import type { CSSProperties } from 'react';
+import { useEffect } from 'react';
+
+import { pageSettingFamily } from '../../../../atoms';
+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 (
+    <div>
+      {t['Switch']()}
+      <StyledKeyboardItem>
+        {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
+      </StyledKeyboardItem>
+    </div>
+  );
+};
+export const EditorModeSwitch = ({
+  style,
+  blockSuiteWorkspace,
+  pageId,
+}: EditorModeSwitchProps) => {
+  const [setting, setSetting] = useAtom(pageSettingFamily(pageId));
+  const currentMode = setting?.mode ?? 'page';
+  const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
+    meta => meta.id === pageId
+  );
+  const t = useAFFiNEI18N();
+  assertExists(pageMeta);
+  const { trash } = pageMeta;
+  useEffect(() => {
+    const keydown = (e: KeyboardEvent) => {
+      if (
+        !environment.isServer && environment.isMacOs
+          ? e.key === 'ß'
+          : e.key === 's' && e.altKey
+      ) {
+        e.preventDefault();
+        setSetting(setting => {
+          if (setting?.mode !== 'page') {
+            toast(t['com.affine.pageMode']());
+            return { ...setting, mode: 'page' };
+          } else {
+            toast(t['com.affine.edgelessMode']());
+            return { ...setting, mode: 'edgeless' };
+          }
+        });
+      }
+    };
+    document.addEventListener('keydown', keydown, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', keydown, { capture: true });
+  }, [setSetting, 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'}
+          onClick={() => {
+            setSetting(setting => {
+              if (setting?.mode !== 'page') {
+                toast(t['com.affine.pageMode']());
+              }
+              return { ...setting, mode: 'page' };
+            });
+          }}
+        />
+        <EdgelessSwitchItem
+          data-testid="switch-edgeless-mode-button"
+          active={currentMode === 'edgeless'}
+          hide={trash && currentMode !== 'edgeless'}
+          onClick={() => {
+            setSetting(setting => {
+              if (setting?.mode !== 'edgeless') {
+                toast(t['com.affine.edgelessMode']());
+              }
+              return { ...setting, mode: 'edgeless' };
+            });
+          }}
+        />
+      </StyledEditorModeSwitch>
+    </Tooltip>
+  );
+};

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/style.ts

@@ -0,0 +1,66 @@
+import { displayFlex, styled } from '@affine/component';
+
+export const StyledEditorModeSwitch = styled('div')<{
+  switchLeft: boolean;
+  showAlone?: boolean;
+}>(({ switchLeft, showAlone }) => {
+  return {
+    width: showAlone ? '40px' : '78px',
+    height: '32px',
+    background: showAlone
+      ? 'transparent'
+      : 'var(--affine-background-secondary-color)',
+    borderRadius: '12px',
+    ...displayFlex('space-between', 'center'),
+    padding: '0 8px',
+    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' : '38px'})`,
+      transition: 'all .15s',
+    },
+  };
+});
+
+export const StyledSwitchItem = styled('button')<{
+  active?: boolean;
+  hide?: boolean;
+}>(({ active = false, hide = false }) => {
+  return {
+    width: '24px',
+    height: '24px',
+    borderRadius: '8px',
+    WebkitAppRegion: 'no-drag',
+    boxShadow: active ? 'var(--affine-shadow-1)' : 'none',
+    color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
+    display: hide ? 'none' : 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    zIndex: 2,
+    fontSize: '20px',
+    path: {
+      fill: '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',
+  };
+});

apps/core/src/components/blocksuite/workspace-header/editor-mode-switch/switch-items.tsx

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

apps/core/src/components/blocksuite/workspace-header/header-right-items/editor-option-menu.tsx

@@ -0,0 +1,164 @@
+// fixme(himself65): refactor this file
+import { FlexWrapper, IconButton, Menu, MenuItem } from '@affine/component';
+import { Export, MoveToTrash } from '@affine/component/page-list';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import {
+  EdgelessIcon,
+  FavoritedIcon,
+  FavoriteIcon,
+  MoreVerticalIcon,
+  PageIcon,
+} from '@blocksuite/icons';
+import {
+  useBlockSuitePageMeta,
+  usePageMetaHelper,
+} from '@toeverything/hooks/use-block-suite-page-meta';
+import { currentPageIdAtom } from '@toeverything/plugin-infra/manager';
+import { useAtom, useAtomValue } from 'jotai';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { pageSettingFamily } from '../../../../atoms';
+import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
+import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
+import { toast } from '../../../../utils';
+import { MenuThemeModeSwitch } from '../header-right-items/theme-mode-switch';
+import * as styles from '../styles.css';
+import { LanguageMenu } from './language-menu';
+const CommonMenu = () => {
+  const content = (
+    <div
+      onClick={e => {
+        e.stopPropagation();
+      }}
+    >
+      <MenuThemeModeSwitch />
+      <LanguageMenu />
+    </div>
+  );
+  return (
+    <FlexWrapper alignItems="center" justifyContent="center">
+      <Menu
+        content={content}
+        placement="bottom"
+        disablePortal={true}
+        trigger="click"
+      >
+        <IconButton data-testid="editor-option-menu" iconSize={[24, 24]}>
+          <MoreVerticalIcon />
+        </IconButton>
+      </Menu>
+    </FlexWrapper>
+  );
+};
+const PageMenu = () => {
+  const t = useAFFiNEI18N();
+  // fixme(himself65): remove these hooks ASAP
+  const [workspace] = useCurrentWorkspace();
+  const pageId = useAtomValue(currentPageIdAtom);
+  assertExists(workspace);
+  assertExists(pageId);
+  const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
+  const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
+    meta => meta.id === pageId
+  );
+  assertExists(pageMeta);
+  const [setting, setSetting] = useAtom(pageSettingFamily(pageId));
+  const mode = setting?.mode ?? 'page';
+
+  const favorite = pageMeta.favorite ?? false;
+  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const [openConfirm, setOpenConfirm] = useState(false);
+  const { removeToTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+  const EditMenu = (
+    <>
+      <>
+        <MenuItem
+          data-testid="editor-option-menu-favorite"
+          onClick={() => {
+            setPageMeta(pageId, { favorite: !favorite });
+            toast(
+              favorite
+                ? t['Removed from Favorites']()
+                : t['Added to Favorites']()
+            );
+          }}
+          icon={
+            favorite ? (
+              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+            ) : (
+              <FavoriteIcon />
+            )
+          }
+        >
+          {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
+        </MenuItem>
+        <MenuItem
+          icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+          data-testid="editor-option-menu-edgeless"
+          onClick={() => {
+            setSetting(setting => ({
+              mode: setting?.mode === 'page' ? 'edgeless' : 'page',
+            }));
+          }}
+        >
+          {t['Convert to ']()}
+          {mode === 'page' ? t['Edgeless']() : t['Page']()}
+        </MenuItem>
+        <Export />
+        <MoveToTrash
+          data-testid="editor-option-menu-delete"
+          onItemClick={() => {
+            setOpenConfirm(true);
+          }}
+        />
+        <div className={styles.horizontalDividerContainer}>
+          <div className={styles.horizontalDivider} />
+        </div>
+      </>
+
+      <div
+        onClick={e => {
+          e.stopPropagation();
+        }}
+      >
+        <MenuThemeModeSwitch />
+        <LanguageMenu />
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      <FlexWrapper alignItems="center" justifyContent="center">
+        <Menu
+          content={EditMenu}
+          placement="bottom-end"
+          disablePortal={true}
+          trigger="click"
+        >
+          <IconButton data-testid="editor-option-menu" iconSize={[24, 24]}>
+            <MoreVerticalIcon />
+          </IconButton>
+        </Menu>
+        <MoveToTrash.ConfirmModal
+          open={openConfirm}
+          title={pageMeta.title}
+          onConfirm={() => {
+            removeToTrash(pageMeta.id);
+            toast(t['Moved to Trash']());
+            setOpenConfirm(false);
+          }}
+          onCancel={() => {
+            setOpenConfirm(false);
+          }}
+        />
+      </FlexWrapper>
+    </>
+  );
+};
+export const EditorOptionMenu = () => {
+  const { pageId } = useParams();
+  return pageId ? <PageMenu /> : <CommonMenu />;
+};

apps/core/src/components/blocksuite/workspace-header/header-right-items/language-menu.tsx

@@ -0,0 +1,135 @@
+import { Button, displayFlex, Menu, MenuItem, styled } from '@affine/component';
+import { LOCALES } from '@affine/i18n';
+import { useI18N } from '@affine/i18n';
+import { ArrowDownSmallIcon, LanguageIcon } from '@blocksuite/icons';
+import type { FC, ReactElement } from 'react';
+import { useCallback } from 'react';
+
+const LanguageMenuContent: FC = () => {
+  const i18n = useI18N();
+  const changeLanguage = useCallback(
+    (event: string) => {
+      i18n.changeLanguage(event).catch(err => {
+        console.error(err);
+      });
+    },
+    [i18n]
+  );
+  return (
+    <>
+      {LOCALES.map(option => {
+        return (
+          <StyledListItem
+            key={option.name}
+            title={option.name}
+            onClick={() => {
+              changeLanguage(option.tag);
+            }}
+          >
+            {option.originalName}
+          </StyledListItem>
+        );
+      })}
+    </>
+  );
+};
+export const LanguageMenu: React.FC = () => {
+  const i18n = useI18N();
+
+  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
+
+  return (
+    <StyledContainer>
+      <StyledIconContainer>
+        <LanguageIcon />
+      </StyledIconContainer>
+      <StyledButtonContainer>
+        <Menu
+          content={(<LanguageMenuContent />) as ReactElement}
+          placement="bottom"
+          trigger="click"
+          disablePortal={true}
+        >
+          <StyledButton
+            icon={
+              <StyledArrowDownContainer>
+                <ArrowDownSmallIcon />
+              </StyledArrowDownContainer>
+            }
+            iconPosition="end"
+            noBorder={true}
+            data-testid="language-menu-button"
+          >
+            <StyledCurrentLanguage>
+              {currentLanguage?.originalName}
+            </StyledCurrentLanguage>
+          </StyledButton>
+        </Menu>
+      </StyledButtonContainer>
+    </StyledContainer>
+  );
+};
+
+const StyledListItem = styled(MenuItem)(() => ({
+  width: '132px',
+  height: '38px',
+  fontSize: 'var(--affine-font-base)',
+  textTransform: 'capitalize',
+}));
+
+const StyledContainer = styled('div')(() => {
+  return {
+    width: '100%',
+    height: '48px',
+    backgroundColor: 'transparent',
+    ...displayFlex('flex-start', 'center'),
+    padding: '0 14px',
+  };
+});
+const StyledIconContainer = styled('div')(() => {
+  return {
+    width: '20px',
+    height: '20px',
+    color: 'var(--affine-icon-color)',
+    fontSize: '20px',
+    ...displayFlex('flex-start', 'center'),
+  };
+});
+const StyledButtonContainer = styled('div')(() => {
+  return {
+    width: '100%',
+    height: '32px',
+    borderRadius: '4px',
+    border: `1px solid var(--affine-border-color)`,
+    backgroundColor: 'transparent',
+    ...displayFlex('flex-start', 'center'),
+    marginLeft: '12px',
+  };
+});
+const StyledButton = styled(Button)(() => {
+  return {
+    width: '100%',
+    height: '32px',
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+    ...displayFlex('space-between', 'center'),
+    textTransform: 'capitalize',
+    padding: '0',
+  };
+});
+const StyledArrowDownContainer = styled('div')(() => {
+  return {
+    height: '32px',
+    borderLeft: `1px solid var(--affine-border-color)`,
+    backgroundColor: 'transparent',
+    ...displayFlex('flex-start', 'center'),
+    padding: '4px 6px',
+    fontSize: '24px',
+  };
+});
+const StyledCurrentLanguage = styled('div')(() => {
+  return {
+    marginLeft: '12px',
+    color: 'var(--affine-text-color)',
+  };
+});

apps/core/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/icons.tsx

@@ -0,0 +1,44 @@
+import type { CSSProperties, DOMAttributes } from 'react';
+type IconProps = {
+  style?: CSSProperties;
+} & DOMAttributes<SVGElement>;
+
+export const MoonIcon = ({ style = {}, ...props }: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      style={style}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.54893 3.31407C9.33328 3.08158 9.27962 2.74521 9.41255 2.45912C9.54547 2.17302 9.83936 1.99233 10.1595 1.99986C13.4456 2.07712 16.5114 4.08044 17.7359 7.29071C19.3437 11.5057 17.1672 16.2024 12.8744 17.781C9.60251 18.9843 6.04745 18.0285 3.82974 15.6428C3.61375 15.4104 3.55978 15.0739 3.69257 14.7876C3.82537 14.5014 4.11931 14.3205 4.43962 14.3279C5.27228 14.3474 6.12412 14.2171 6.94979 13.9135C10.415 12.6391 12.172 8.84782 10.8741 5.44537C10.5657 4.63692 10.1061 3.91474 9.54893 3.31407Z"
+      />
+    </svg>
+  );
+};
+
+export const SunIcon = ({ style = {}, ...props }: IconProps) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      style={style}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.8002 2.5002C10.8002 2.05837 10.442 1.7002 10.0002 1.7002C9.55837 1.7002 9.2002 2.05837 9.2002 2.5002V3.33353C9.2002 3.77536 9.55837 4.13353 10.0002 4.13353C10.442 4.13353 10.8002 3.77536 10.8002 3.33353V2.5002ZM5.14921 4.01784C4.83679 3.70542 4.33026 3.70542 4.01784 4.01784C3.70542 4.33026 3.70542 4.83679 4.01784 5.14921L4.69627 5.82764C5.00869 6.14006 5.51522 6.14006 5.82764 5.82764C6.14006 5.51522 6.14006 5.00869 5.82764 4.69627L5.14921 4.01784ZM15.9825 5.1492C16.2949 4.83678 16.2949 4.33025 15.9825 4.01783C15.6701 3.70542 15.1636 3.70543 14.8511 4.01785L14.1727 4.69628C13.8603 5.00871 13.8603 5.51524 14.1728 5.82765C14.4852 6.14007 14.9917 6.14006 15.3041 5.82763L15.9825 5.1492ZM10.0002 5.86686C7.71742 5.86686 5.86686 7.71742 5.86686 10.0002C5.86686 12.283 7.71742 14.1335 10.0002 14.1335C12.283 14.1335 14.1335 12.283 14.1335 10.0002C14.1335 7.71742 12.283 5.86686 10.0002 5.86686ZM2.5002 9.2002C2.05837 9.2002 1.7002 9.55837 1.7002 10.0002C1.7002 10.442 2.05837 10.8002 2.5002 10.8002H3.33353C3.77536 10.8002 4.13353 10.442 4.13353 10.0002C4.13353 9.55837 3.77536 9.2002 3.33353 9.2002H2.5002ZM16.6669 9.2002C16.225 9.2002 15.8669 9.55837 15.8669 10.0002C15.8669 10.442 16.225 10.8002 16.6669 10.8002H17.5002C17.942 10.8002 18.3002 10.442 18.3002 10.0002C18.3002 9.55837 17.942 9.2002 17.5002 9.2002H16.6669ZM5.82623 15.309C6.13943 14.9973 6.14069 14.4908 5.82906 14.1776C5.51742 13.8644 5.01089 13.8631 4.69769 14.1748L4.01926 14.8498C3.70606 15.1615 3.70479 15.668 4.01643 15.9812C4.32807 16.2944 4.8346 16.2956 5.1478 15.984L5.82623 15.309ZM15.3027 14.1748C14.9895 13.8631 14.483 13.8644 14.1713 14.1776C13.8597 14.4908 13.861 14.9973 14.1742 15.3089L14.8526 15.984C15.1658 16.2956 15.6723 16.2944 15.9839 15.9812C16.2956 15.668 16.2943 15.1615 15.9811 14.8498L15.3027 14.1748ZM10.8002 16.6669C10.8002 16.225 10.442 15.8669 10.0002 15.8669C9.55837 15.8669 9.2002 16.225 9.2002 16.6669V17.5002C9.2002 17.942 9.55837 18.3002 10.0002 18.3002C10.442 18.3002 10.8002 17.942 10.8002 17.5002V16.6669Z"
+      />
+    </svg>
+  );
+};

apps/core/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/index.tsx

@@ -0,0 +1,61 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { DarkModeIcon, LightModeIcon } from '@blocksuite/icons';
+import { useTheme } from 'next-themes';
+
+import {
+  StyledSwitchItem,
+  StyledThemeButton,
+  StyledThemeButtonContainer,
+  StyledThemeModeContainer,
+  StyledThemeModeSwitch,
+  StyledVerticalDivider,
+} from './style';
+
+export const MenuThemeModeSwitch = () => {
+  const { setTheme, resolvedTheme, theme } = useTheme();
+  const t = useAFFiNEI18N();
+  return (
+    <StyledThemeModeContainer>
+      <StyledThemeModeSwitch data-testid="change-theme-container" inMenu={true}>
+        <StyledSwitchItem active={resolvedTheme === 'light'} inMenu={true}>
+          <LightModeIcon />
+        </StyledSwitchItem>
+        <StyledSwitchItem active={resolvedTheme === 'dark'} inMenu={true}>
+          <DarkModeIcon />
+        </StyledSwitchItem>
+      </StyledThemeModeSwitch>
+      <StyledThemeButtonContainer>
+        <StyledThemeButton
+          data-testid="change-theme-light"
+          active={theme === 'light'}
+          onClick={() => {
+            setTheme('light');
+          }}
+        >
+          {t['light']()}
+        </StyledThemeButton>
+        <StyledVerticalDivider />
+        <StyledThemeButton
+          data-testid="change-theme-dark"
+          active={theme === 'dark'}
+          onClick={() => {
+            setTheme('dark');
+          }}
+        >
+          {t['dark']()}
+        </StyledThemeButton>
+        <StyledVerticalDivider />
+        <StyledThemeButton
+          active={theme === 'system'}
+          onClick={() => {
+            setTheme('system');
+          }}
+        >
+          {t['system']()}
+        </StyledThemeButton>
+      </StyledThemeButtonContainer>
+    </StyledThemeModeContainer>
+  );
+};
+
+export default MenuThemeModeSwitch;

apps/core/src/components/blocksuite/workspace-header/header-right-items/theme-mode-switch/style.ts

@@ -0,0 +1,120 @@
+import { css, displayFlex, keyframes, styled } from '@affine/component';
+// @ts-expect-error: no types for css-spring
+import spring, { toString } from 'css-spring';
+
+const ANIMATE_DURATION = 400;
+export const StyledThemeModeContainer = styled('div')(() => {
+  return {
+    width: '100%',
+    height: '48px',
+    borderRadius: '6px',
+    backgroundColor: 'transparent',
+    color: 'var(--affine-icon-color)',
+    fontSize: '16px',
+    ...displayFlex('flex-start', 'center'),
+    padding: '0 14px',
+  };
+});
+export const StyledThemeButtonContainer = styled('div')(() => {
+  return {
+    height: '32px',
+    border: `1px solid var(--affine-border-color)`,
+    borderRadius: '4px',
+    cursor: 'pointer',
+    ...displayFlex('space-evenly', 'center'),
+    flexGrow: 1,
+    marginLeft: '12px',
+  };
+});
+export const StyledThemeButton = styled('button')<{
+  active: boolean;
+}>(({ active }) => {
+  return {
+    padding: '0 8px',
+    height: '100%',
+    flex: 1,
+    cursor: 'pointer',
+    color: active ? 'var(--affine-primary-color)' : 'var(--affine-icon-color)',
+    whiteSpace: 'nowrap',
+  };
+});
+export const StyledVerticalDivider = styled('div')(() => {
+  return {
+    width: '1px',
+    height: '100%',
+    borderLeft: `1px solid var(--affine-border-color)`,
+  };
+});
+export const StyledThemeModeSwitch = styled('button')<{
+  inMenu?: boolean;
+}>(({ inMenu }) => {
+  return {
+    width: inMenu ? '20px' : '32px',
+    height: inMenu ? '20px' : '32px',
+    borderRadius: '6px',
+    overflow: 'hidden',
+    WebkitAppRegion: 'no-drag',
+    backgroundColor: 'transparent',
+    position: 'relative',
+    color: 'var(--affine-icon-color)',
+    fontSize: inMenu ? '20px' : '24px',
+  };
+});
+export const StyledSwitchItem = styled('div')<{
+  active: boolean;
+  isHover?: boolean;
+  inMenu?: boolean;
+}>(({ active, isHover, inMenu }) => {
+  const activeRaiseAnimate = toString(
+    spring({ top: '0' }, { top: '-100%' }, { preset: 'gentle' })
+  );
+  const raiseAnimate = toString(
+    spring({ top: '100%' }, { top: '0' }, { preset: 'gentle' })
+  );
+  const activeDeclineAnimate = toString(
+    spring({ top: '-100%' }, { top: '0' }, { preset: 'gentle' })
+  );
+  const declineAnimate = toString(
+    spring({ top: '0' }, { top: '100%' }, { preset: 'gentle' })
+  );
+
+  const activeStyle = active
+    ? {
+        color: 'var(--affine-icon-color)',
+        top: '0',
+        animation: css`
+          ${keyframes`${
+            isHover ? activeRaiseAnimate : activeDeclineAnimate
+          }`} ${ANIMATE_DURATION}ms forwards
+        `,
+        animationDirection: isHover ? 'normal' : 'alternate',
+      }
+    : {
+        top: '100%',
+        color: 'var(--affine-primary-color)',
+        backgroundColor: 'var(--affine-hover-color)',
+        animation: css`
+          ${keyframes`${
+            isHover ? raiseAnimate : declineAnimate
+          }`} ${ANIMATE_DURATION}ms forwards
+        `,
+        animationDirection: isHover ? 'normal' : 'alternate',
+      };
+  return css`
+    ${css(displayFlex('center', 'center'))}
+    width:${inMenu ? '20px' : '32px'} ;
+    height: ${inMenu ? '20px' : '32px'} ;
+    position: absolute;
+    left: 0;
+    cursor: pointer;
+    color: ${activeStyle.color}
+    top: ${activeStyle.top};
+    background-color: ${activeStyle.backgroundColor};
+    animation: ${activeStyle.animation};
+    animation-direction: ${activeStyle.animationDirection};
+    //svg {
+    //  width: 24px;
+    //  height: 24px;
+    //},
+  `;
+});

apps/core/src/components/blocksuite/workspace-header/header-right-items/trash-button-group.tsx

@@ -0,0 +1,74 @@
+import { Button, Confirm } from '@affine/component';
+import { WorkspaceSubPath } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { currentPageIdAtom } from '@toeverything/plugin-infra/manager';
+import { useAtomValue } from 'jotai';
+import { useCallback, useState } from 'react';
+
+import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
+import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
+import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
+
+export const TrashButtonGroup = () => {
+  // fixme(himself65): remove these hooks ASAP
+  const [workspace] = useCurrentWorkspace();
+  const pageId = useAtomValue(currentPageIdAtom);
+  assertExists(workspace);
+  assertExists(pageId);
+  const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
+  const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
+    meta => meta.id === pageId
+  );
+  assertExists(pageMeta);
+  const t = useAFFiNEI18N();
+  const { jumpToSubPath } = useNavigateHelper();
+  const { restoreFromTrash } = useBlockSuiteMetaHelper(blockSuiteWorkspace);
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        bold={true}
+        shape="round"
+        style={{ marginRight: '24px' }}
+        onClick={() => {
+          restoreFromTrash(pageId);
+        }}
+      >
+        {t['Restore it']()}
+      </Button>
+      <Button
+        bold={true}
+        shape="round"
+        type="danger"
+        onClick={() => {
+          setOpen(true);
+        }}
+      >
+        {t['Delete permanently']()}
+      </Button>
+      <Confirm
+        title={t['TrashButtonGroupTitle']()}
+        content={t['TrashButtonGroupDescription']()}
+        confirmText={t['Delete']()}
+        confirmType="danger"
+        open={open}
+        onConfirm={useCallback(() => {
+          jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
+          blockSuiteWorkspace.removePage(pageId);
+        }, [blockSuiteWorkspace, jumpToSubPath, pageId, workspace.id])}
+        onCancel={() => {
+          setOpen(false);
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+};
+
+export default TrashButtonGroup;

apps/core/src/components/blocksuite/workspace-header/header-right-items/user-avatar.tsx

@@ -0,0 +1,101 @@
+import { Menu, MenuItem } from '@affine/component';
+import { AffineLogoSBlue2_1Icon, SignOutIcon } from '@blocksuite/icons';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
+
+const EditMenu = (
+  <MenuItem data-testid="editor-option-menu-favorite" icon={<SignOutIcon />}>
+    Sign Out
+  </MenuItem>
+);
+
+export const UserAvatar = () => {
+  // fixme: cloud regression
+  const user: any = null;
+  return (
+    <Menu
+      width={276}
+      content={EditMenu}
+      placement="bottom"
+      disablePortal={true}
+      trigger="click"
+    >
+      {user ? (
+        <WorkspaceAvatar
+          size={24}
+          name={user.name}
+          avatar={user.avatar_url}
+        ></WorkspaceAvatar>
+      ) : (
+        <WorkspaceAvatar size={24}></WorkspaceAvatar>
+      )}
+    </Menu>
+  );
+};
+
+interface WorkspaceAvatarProps {
+  size: number;
+  name?: string;
+  avatar?: string;
+  style?: CSSProperties;
+}
+
+export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
+  function WorkspaceAvatar(props, ref) {
+    const size = props.size || 20;
+    const sizeStr = size + 'px';
+
+    return (
+      <>
+        {props.avatar ? (
+          <div
+            style={{
+              ...props.style,
+              width: sizeStr,
+              height: sizeStr,
+              color: '#fff',
+              borderRadius: '50%',
+              overflow: 'hidden',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            ref={ref}
+          >
+            <picture>
+              <img
+                style={{ width: sizeStr, height: sizeStr }}
+                src={props.avatar}
+                alt=""
+                referrerPolicy="no-referrer"
+              />
+            </picture>
+          </div>
+        ) : (
+          <div
+            style={{
+              ...props.style,
+              width: sizeStr,
+              height: sizeStr,
+              border: '1px solid #fff',
+              color: '#fff',
+              fontSize: Math.ceil(0.5 * size) + 'px',
+              borderRadius: '50%',
+              textAlign: 'center',
+              lineHeight: size + 'px',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            ref={ref}
+          >
+            {props.name ? (
+              props.name.substring(0, 1)
+            ) : (
+              <AffineLogoSBlue2_1Icon fontSize={24} color={'#5438FF'} />
+            )}
+          </div>
+        )}
+      </>
+    );
+  }
+);
+export default UserAvatar;

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -0,0 +1,236 @@
+import { BrowserWarning } from '@affine/component/affine-banner';
+import {
+  appSidebarFloatingAtom,
+  appSidebarOpenAtom,
+} from '@affine/component/app-sidebar';
+import { SidebarSwitch } from '@affine/component/app-sidebar/sidebar-header';
+import { isDesktop } from '@affine/env/constant';
+import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
+import type { Page } from '@blocksuite/store';
+import { affinePluginsAtom } from '@toeverything/plugin-infra/manager';
+import type { PluginUIAdapter } from '@toeverything/plugin-infra/type';
+import { useAtomValue } from 'jotai';
+import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { contentLayoutAtom } from '../../../atoms/layout';
+import { currentModeAtom } from '../../../atoms/mode';
+import type { AffineOfficialWorkspace } from '../../../shared';
+import { EditorOptionMenu } from './header-right-items/editor-option-menu';
+import TrashButtonGroup from './header-right-items/trash-button-group';
+import * as styles from './styles.css';
+import { OSWarningMessage, shouldShowWarning } from './utils';
+
+export type BaseHeaderProps<
+  Workspace extends AffineOfficialWorkspace = AffineOfficialWorkspace,
+> = {
+  workspace: Workspace;
+  currentPage: Page | null;
+  isPublic: boolean;
+  leftSlot?: ReactNode;
+};
+
+export enum HeaderRightItemName {
+  EditorOptionMenu = 'editorOptionMenu',
+  TrashButtonGroup = 'trashButtonGroup',
+  // some windows only items
+  WindowsAppControls = 'windowsAppControls',
+}
+
+type HeaderItem = {
+  Component: FC<BaseHeaderProps>;
+  // todo: public workspace should be one of the flavour
+  availableWhen: (
+    workspace: AffineOfficialWorkspace,
+    currentPage: Page | null,
+    status: {
+      isPublic: boolean;
+    }
+  ) => boolean;
+};
+
+const HeaderRightItems: Record<HeaderRightItemName, HeaderItem> = {
+  [HeaderRightItemName.TrashButtonGroup]: {
+    Component: TrashButtonGroup,
+    availableWhen: (_, currentPage) => {
+      return currentPage?.meta.trash === true;
+    },
+  },
+  [HeaderRightItemName.EditorOptionMenu]: {
+    Component: EditorOptionMenu,
+    availableWhen: (_, currentPage, { isPublic }) => {
+      return !isPublic;
+    },
+  },
+  [HeaderRightItemName.WindowsAppControls]: {
+    Component: () => {
+      const handleMinimizeApp = useCallback(() => {
+        window.apis?.ui.handleMinimizeApp().catch(err => {
+          console.error(err);
+        });
+      }, []);
+      const handleMaximizeApp = useCallback(() => {
+        window.apis?.ui.handleMaximizeApp().catch(err => {
+          console.error(err);
+        });
+      }, []);
+      const handleCloseApp = useCallback(() => {
+        window.apis?.ui.handleCloseApp().catch(err => {
+          console.error(err);
+        });
+      }, []);
+      return (
+        <div
+          data-platform-target="win32"
+          className={styles.windowAppControlsWrapper}
+        >
+          <button
+            data-type="minimize"
+            className={styles.windowAppControl}
+            onClick={handleMinimizeApp}
+          >
+            <MinusIcon />
+          </button>
+          <button
+            data-type="maximize"
+            className={styles.windowAppControl}
+            onClick={handleMaximizeApp}
+          >
+            <RoundedRectangleIcon />
+          </button>
+          <button
+            data-type="close"
+            className={styles.windowAppControl}
+            onClick={handleCloseApp}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+      );
+    },
+    availableWhen: () => {
+      return isDesktop && globalThis.platform === 'win32';
+    },
+  },
+};
+
+export type HeaderProps = BaseHeaderProps;
+
+const PluginHeaderItemAdapter = memo<{
+  headerItem: PluginUIAdapter['headerItem'];
+}>(function PluginHeaderItemAdapter({ headerItem }) {
+  return (
+    <div>
+      {headerItem({
+        contentLayoutAtom,
+      })}
+    </div>
+  );
+});
+
+const PluginHeader = () => {
+  const affinePluginsMap = useAtomValue(affinePluginsAtom);
+  const plugins = useMemo(
+    () => Object.values(affinePluginsMap),
+    [affinePluginsMap]
+  );
+
+  return (
+    <div>
+      {plugins
+        .filter(plugin => plugin.uiAdapter.headerItem != null)
+        .map(plugin => {
+          const headerItem = plugin.uiAdapter
+            .headerItem as PluginUIAdapter['headerItem'];
+          return (
+            <PluginHeaderItemAdapter
+              key={plugin.definition.id}
+              headerItem={headerItem}
+            />
+          );
+        })}
+    </div>
+  );
+};
+
+export const Header = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<HeaderProps> & HTMLAttributes<HTMLDivElement>
+>((props, ref) => {
+  const [showWarning, setShowWarning] = useState(false);
+  // const [shouldShowGuideDownloadClientTip] = useAtom(
+  //   guideDownloadClientTipAtom
+  // );
+  useEffect(() => {
+    setShowWarning(shouldShowWarning());
+  }, []);
+  const open = useAtomValue(appSidebarOpenAtom);
+  const appSidebarFloating = useAtomValue(appSidebarFloatingAtom);
+
+  const mode = useAtomValue(currentModeAtom);
+
+  return (
+    <div
+      className={styles.headerContainer}
+      ref={ref}
+      data-has-warning={showWarning}
+      data-open={open}
+      data-sidebar-floating={appSidebarFloating}
+    >
+      <BrowserWarning
+        show={showWarning}
+        message={<OSWarningMessage />}
+        onClose={() => {
+          setShowWarning(false);
+        }}
+      />
+
+      <div
+        className={styles.header}
+        data-has-warning={showWarning}
+        data-testid="editor-header-items"
+        data-is-edgeless={mode === 'edgeless'}
+      >
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          {!open && <SidebarSwitch />}
+          {props.leftSlot}
+        </div>
+
+        {props.children}
+        <div className={styles.headerRightSide}>
+          <PluginHeader />
+          {useMemo(() => {
+            return Object.entries(HeaderRightItems).map(
+              ([name, { availableWhen, Component }]) => {
+                if (
+                  availableWhen(props.workspace, props.currentPage, {
+                    isPublic: props.isPublic,
+                  })
+                ) {
+                  return (
+                    <Component
+                      workspace={props.workspace}
+                      currentPage={props.currentPage}
+                      isPublic={props.isPublic}
+                      key={name}
+                    />
+                  );
+                }
+                return null;
+              }
+            );
+          }, [props])}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+Header.displayName = 'Header';

apps/core/src/components/blocksuite/workspace-header/index.tsx

@@ -0,0 +1,65 @@
+import { assertExists } from '@blocksuite/global/utils';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useSetAtom } from 'jotai';
+import type {
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactElement,
+} from 'react';
+import { useRef } from 'react';
+
+import { openQuickSearchModalAtom } from '../../../atoms';
+import { QuickSearchButton } from '../../pure/quick-search-button';
+import { EditorModeSwitch } from './editor-mode-switch';
+import type { BaseHeaderProps } from './header';
+import { Header } from './header';
+import * as styles from './styles.css';
+
+export type WorkspaceHeaderProps = BaseHeaderProps;
+
+export const BlockSuiteEditorHeader: FC<
+  PropsWithChildren<WorkspaceHeaderProps> & HTMLAttributes<HTMLDivElement>
+> = (props): ReactElement => {
+  const { workspace, currentPage, children, isPublic } = props;
+  // fixme(himself65): remove this atom and move it to props
+  const setOpenQuickSearch = useSetAtom(openQuickSearchModalAtom);
+  const pageMeta = useBlockSuitePageMeta(workspace.blockSuiteWorkspace).find(
+    meta => meta.id === currentPage?.id
+  );
+  const headerRef = useRef<HTMLDivElement>(null);
+  assertExists(pageMeta);
+  const title = pageMeta.title;
+
+  return (
+    <Header ref={headerRef} {...props}>
+      {children}
+      {!isPublic && currentPage && (
+        <div className={styles.titleContainer}>
+          <div className={styles.titleWrapper}>
+            <div className={styles.switchWrapper}>
+              <EditorModeSwitch
+                blockSuiteWorkspace={workspace.blockSuiteWorkspace}
+                pageId={currentPage.id}
+                style={{
+                  marginRight: '12px',
+                }}
+              />
+            </div>
+            <div className={styles.title}>{title || 'Untitled'}</div>
+
+            <div className={styles.searchArrowWrapper}>
+              <QuickSearchButton
+                onClick={() => {
+                  setOpenQuickSearch(true);
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </Header>
+  );
+};
+
+BlockSuiteEditorHeader.displayName = 'BlockSuiteEditorHeader';

apps/core/src/components/blocksuite/workspace-header/styles.css.ts

@@ -0,0 +1,240 @@
+import type { ComplexStyleRule } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
+
+export const headerContainer = style({
+  height: '52px',
+  flexShrink: 0,
+  position: 'sticky',
+  top: 0,
+  background: 'var(--affine-background-primary-color)',
+  zIndex: 'var(--affine-z-index-popover)',
+  selectors: {
+    '&[data-has-warning="true"]': {
+      height: '96px',
+    },
+    '&[data-sidebar-floating="false"]': {
+      WebkitAppRegion: 'drag',
+    },
+  },
+  '@media': {
+    print: {
+      display: 'none',
+    },
+  },
+  ':has([data-popper-placement])': {
+    WebkitAppRegion: 'no-drag',
+  },
+} as ComplexStyleRule);
+
+export const header = style({
+  flexShrink: 0,
+  height: '52px',
+  width: '100%',
+  padding: '0 20px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  background: 'var(--affine-background-primary-color)',
+  zIndex: 99,
+  position: 'relative',
+  selectors: {
+    '&[data-is-edgeless="true"]': {
+      borderBottom: `1px solid var(--affine-border-color)`,
+    },
+  },
+});
+
+export const titleContainer = style({
+  width: '100%',
+  height: '100%',
+  margin: 'auto',
+  position: 'absolute',
+  inset: 'auto auto auto 50%',
+  transform: 'translate(-50%, 0px)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  alignContent: 'unset',
+  fontSize: 'var(--affine-font-base)',
+});
+
+export const title = style({
+  maxWidth: '620px',
+  transition: 'max-width .15s',
+  userSelect: 'none',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  '@media': {
+    '(max-width: 768px)': {
+      selectors: {
+        '&[data-open="true"]': {
+          WebkitAppRegion: 'no-drag',
+        },
+      },
+    },
+  },
+} as ComplexStyleRule);
+
+export const titleWrapper = style({
+  height: '100%',
+  position: 'relative',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const headerRightSide = style({
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+  zIndex: 1,
+});
+
+export const browserWarning = style({
+  backgroundColor: 'var(--affine-background-warning-color)',
+  color: 'var(--affine-warning-color)',
+  height: '36px',
+  fontSize: 'var(--affine-font-sm)',
+  display: 'none',
+  justifyContent: 'center',
+  alignItems: 'center',
+  selectors: {
+    '&[data-show="true"]': {
+      display: 'flex',
+    },
+  },
+});
+
+export const closeButton = style({
+  width: '36px',
+  height: '36px',
+  color: 'var(--affine-icon-color)',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  right: '15px',
+  top: 0,
+});
+
+export const switchWrapper = style({
+  position: 'absolute',
+  right: '100%',
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const searchArrowWrapper = style({
+  position: 'absolute',
+  left: 'calc(100% + 4px)',
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const pageListTitleWrapper = style({
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-text-primary-color)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+export const allPageListTitleWrapper = style({
+  fontSize: 'var(--affine-font-base)',
+  color: 'var(--affine-text-primary-color)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});
+export const pageListTitleIcon = style({
+  fontSize: '20px',
+  height: '1em',
+  marginRight: '12px',
+});
+
+export const quickSearchTipButton = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: '12px',
+  color: '#FFFFFF',
+  width: '48px',
+  height: ' 26px',
+  fontSize: 'var(--affine-font-sm)',
+  lineHeight: '22px',
+  background: 'var(--affine-primary-color)',
+  borderRadius: '8px',
+  textAlign: 'center',
+  cursor: 'pointer',
+});
+
+export const quickSearchTipContent = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-end',
+  flexDirection: 'column',
+});
+
+export const horizontalDivider = style({
+  width: '100%',
+  borderTop: `1px solid var(--affine-border-color)`,
+});
+
+export const horizontalDividerContainer = style({
+  width: '100%',
+  padding: '14px',
+});
+
+export const windowAppControlsWrapper = style({
+  display: 'flex',
+  gap: '2px',
+  transform: 'translateX(8px)',
+  height: '100%',
+});
+
+export const windowAppControl = style({
+  WebkitAppRegion: 'no-drag',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  width: '42px',
+  height: 'calc(100% - 10px)',
+  paddingTop: '10px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '0',
+  selectors: {
+    '&[data-type="close"]': {
+      width: '56px',
+      paddingRight: '14px',
+      marginRight: '-14px',
+    },
+    '&[data-type="close"]:hover': {
+      background: 'var(--affine-error-color)',
+      color: '#FFFFFF',
+    },
+    '&:hover': {
+      background: 'var(--affine-background-tertiary-color)',
+    },
+  },
+} as ComplexStyleRule);

apps/core/src/components/blocksuite/workspace-header/utils.tsx

@@ -0,0 +1,52 @@
+import { isDesktop } from '@affine/env/constant';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type React from 'react';
+import { useEffect, useState } from 'react';
+
+const minimumChromeVersion = 102;
+
+export const shouldShowWarning = () => {
+  if (isDesktop) {
+    // even though desktop has compatibility issues,
+    //  we don't want to show the warning
+    return false;
+  }
+  if (!environment.isBrowser) {
+    // disable in SSR
+    return false;
+  }
+  if (environment.isChrome) {
+    return environment.chromeVersion < minimumChromeVersion;
+  } else {
+    return !environment.isMobile;
+  }
+};
+
+export const OSWarningMessage: React.FC = () => {
+  const t = useAFFiNEI18N();
+  const [notChrome, setNotChrome] = useState(false);
+  const [notGoodVersion, setNotGoodVersion] = useState(false);
+  useEffect(() => {
+    setNotChrome(environment.isBrowser && !environment.isChrome);
+    setNotGoodVersion(
+      environment.isBrowser &&
+        environment.isChrome &&
+        environment.chromeVersion < minimumChromeVersion
+    );
+  }, []);
+
+  if (notChrome) {
+    return (
+      <span>
+        <Trans i18nKey="recommendBrowser">
+          We recommend the <strong>Chrome</strong> browser for optimal
+          experience.
+        </Trans>
+      </span>
+    );
+  } else if (notGoodVersion) {
+    return <span>{t['upgradeBrowser']()}</span>;
+  }
+  return null;
+};

apps/core/src/components/filter-container.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const filterContainerStyle = style({
+  padding: '12px',
+  display: 'flex',
+  position: 'relative',
+  '::after': {
+    content: '""',
+    display: 'block',
+    width: '100%',
+    height: '1px',
+    background: 'var(--affine-border-color)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    margin: '0 1px',
+  },
+});

apps/core/src/components/page-detail-editor.css.ts

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+
+export const pluginContainer = style({
+  height: '100%',
+  width: '100%',
+});
+
+export const editor = style({
+  height: 'calc(100% - 52px)',
+  selectors: {
+    '&.full-screen': {
+      vars: {
+        '--affine-editor-width': '100%',
+        '--affine-editor-side-padding': '15px',
+      },
+    },
+  },
+});

apps/core/src/components/page-detail-editor.tsx

@@ -0,0 +1,206 @@
+import './page-detail-editor.css';
+
+import { PageNotFoundError } from '@affine/env/constant';
+import { rootBlockHubAtom } from '@affine/workspace/atom';
+import type { EditorContainer } from '@blocksuite/editor';
+import { assertExists } from '@blocksuite/global/utils';
+import type { Page, Workspace } from '@blocksuite/store';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
+import { affinePluginsAtom } from '@toeverything/plugin-infra/manager';
+import type {
+  AffinePlugin,
+  LayoutNode,
+  PluginUIAdapter,
+} from '@toeverything/plugin-infra/type';
+import type { PluginBlockSuiteAdapter } from '@toeverything/plugin-infra/type';
+import clsx from 'clsx';
+import { useAtomValue, useSetAtom } from 'jotai';
+import type { CSSProperties, FC, ReactElement } from 'react';
+import { memo, Suspense, useCallback, useMemo } from 'react';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+
+import { pageSettingFamily } from '../atoms';
+import { contentLayoutAtom } from '../atoms/layout';
+import { fontStyleOptions, useAppSetting } from '../atoms/settings';
+import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
+import { editor } from './page-detail-editor.css';
+import { pluginContainer } from './page-detail-editor.css';
+
+export type PageDetailEditorProps = {
+  isPublic?: boolean;
+  workspace: Workspace;
+  pageId: string;
+  onInit: (page: Page, editor: Readonly<EditorContainer>) => void;
+  onLoad?: (page: Page, editor: EditorContainer) => () => void;
+};
+
+const EditorWrapper = memo(function EditorWrapper({
+  workspace,
+  pageId,
+  onInit,
+  onLoad,
+  isPublic,
+}: PageDetailEditorProps) {
+  const affinePluginsMap = useAtomValue(affinePluginsAtom);
+  const plugins = useMemo(
+    () => Object.values(affinePluginsMap),
+    [affinePluginsMap]
+  );
+  const page = useBlockSuiteWorkspacePage(workspace, pageId);
+  if (!page) {
+    throw new PageNotFoundError(workspace, pageId);
+  }
+  const meta = useBlockSuitePageMeta(workspace).find(
+    meta => meta.id === pageId
+  );
+  const pageSettingAtom = pageSettingFamily(pageId);
+  const pageSetting = useAtomValue(pageSettingAtom);
+  const currentMode = pageSetting?.mode ?? 'page';
+
+  const setBlockHub = useSetAtom(rootBlockHubAtom);
+  const [appSettings] = useAppSetting();
+
+  assertExists(meta);
+  const value = useMemo(() => {
+    const fontStyle = fontStyleOptions.find(
+      option => option.key === appSettings.fontStyle
+    );
+    assertExists(fontStyle);
+    return fontStyle.value;
+  }, [appSettings.fontStyle]);
+
+  return (
+    <Editor
+      className={clsx(editor, {
+        'full-screen': appSettings.fullWidthLayout,
+      })}
+      style={
+        {
+          '--affine-font-family': value,
+        } as CSSProperties
+      }
+      key={`${workspace.id}-${pageId}`}
+      mode={isPublic ? 'page' : currentMode}
+      page={page}
+      onInit={useCallback(
+        (page: Page, editor: Readonly<EditorContainer>) => {
+          onInit(page, editor);
+        },
+        [onInit]
+      )}
+      setBlockHub={setBlockHub}
+      onLoad={useCallback(
+        (page: Page, editor: EditorContainer) => {
+          page.workspace.setPageMeta(page.id, {
+            updatedDate: Date.now(),
+          });
+          localStorage.setItem('last_page_id', page.id);
+          let dispose = () => {};
+          if (onLoad) {
+            dispose = onLoad(page, editor);
+          }
+          const uiDecorators = plugins
+            .map(plugin => plugin.blockSuiteAdapter.uiDecorator)
+            .filter((ui): ui is PluginBlockSuiteAdapter['uiDecorator'] =>
+              Boolean(ui)
+            );
+          const disposes = uiDecorators.map(ui => ui(editor));
+          return () => {
+            disposes.forEach(fn => fn());
+            dispose();
+          };
+        },
+        [plugins, onLoad]
+      )}
+    />
+  );
+});
+
+const PluginContentAdapter = memo<{
+  detailContent: PluginUIAdapter['detailContent'];
+}>(function PluginContentAdapter({ detailContent }) {
+  return (
+    <div className={pluginContainer}>
+      {detailContent({
+        contentLayoutAtom,
+      })}
+    </div>
+  );
+});
+
+type LayoutPanelProps = {
+  node: LayoutNode;
+  editorProps: PageDetailEditorProps;
+  plugins: AffinePlugin<string>[];
+};
+
+const LayoutPanel = memo(function LayoutPanel(
+  props: LayoutPanelProps
+): ReactElement {
+  const node = props.node;
+  if (typeof node === 'string') {
+    if (node === 'editor') {
+      return <EditorWrapper {...props.editorProps} />;
+    } else {
+      const plugin = props.plugins.find(
+        plugin => plugin.definition.id === node
+      );
+      const Content = plugin?.uiAdapter.detailContent;
+      assertExists(Content);
+      return <PluginContentAdapter detailContent={Content} />;
+    }
+  } else {
+    return (
+      <PanelGroup
+        style={{
+          height: 'calc(100% - 52px)',
+        }}
+        direction={node.direction}
+      >
+        <Panel defaultSize={node.splitPercentage}>
+          <Suspense>
+            <LayoutPanel
+              node={node.first}
+              editorProps={props.editorProps}
+              plugins={props.plugins}
+            />
+          </Suspense>
+        </Panel>
+        <PanelResizeHandle />
+        <Panel defaultSize={100 - node.splitPercentage}>
+          <Suspense>
+            <LayoutPanel
+              node={node.second}
+              editorProps={props.editorProps}
+              plugins={props.plugins}
+            />
+          </Suspense>
+        </Panel>
+      </PanelGroup>
+    );
+  }
+});
+
+export const PageDetailEditor: FC<PageDetailEditorProps> = props => {
+  const { workspace, pageId } = props;
+  const page = useBlockSuiteWorkspacePage(workspace, pageId);
+  if (!page) {
+    throw new PageNotFoundError(workspace, pageId);
+  }
+
+  const layout = useAtomValue(contentLayoutAtom);
+  const affinePluginsMap = useAtomValue(affinePluginsAtom);
+  const plugins = useMemo(
+    () => Object.values(affinePluginsMap),
+    [affinePluginsMap]
+  );
+
+  return (
+    <>
+      <Suspense>
+        <LayoutPanel node={layout} editorProps={props} plugins={plugins} />
+      </Suspense>
+    </>
+  );
+};

apps/core/src/components/pure/file-upload/index.tsx

@@ -0,0 +1,57 @@
+import { Button } from '@affine/component';
+import { styled } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { ChangeEvent } from 'react';
+import type React from 'react';
+import { useRef } from 'react';
+
+export type UploadProps = React.PropsWithChildren<{
+  uploadType?: string;
+  accept?: string;
+  fileChange: (file: File) => void;
+}>;
+
+export const Upload: React.FC<UploadProps> = ({
+  fileChange,
+  accept,
+  children,
+  ...props
+}) => {
+  const t = useAFFiNEI18N();
+  const input_ref = useRef<HTMLInputElement>(null);
+  const _chooseFile = () => {
+    if (input_ref.current) {
+      input_ref.current.click();
+    }
+  };
+  const _handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) {
+      return;
+    }
+    const file = files[0];
+    fileChange(file);
+    if (input_ref.current) {
+      input_ref.current.value = '';
+    }
+  };
+  return (
+    <UploadStyle onClick={_chooseFile}>
+      {children ?? <Button>{t['Upload']()}</Button>}
+      <input
+        ref={input_ref}
+        type="file"
+        style={{ display: 'none' }}
+        onChange={_handleInputChange}
+        accept={accept}
+        {...props}
+      />
+    </UploadStyle>
+  );
+};
+
+const UploadStyle = styled('div')(() => {
+  return {
+    display: 'inline-block',
+  };
+});

apps/core/src/components/pure/footer/index.tsx

@@ -0,0 +1,97 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloudWorkspaceIcon } from '@blocksuite/icons';
+import { useSetAtom } from 'jotai';
+import { type CSSProperties, type FC, forwardRef } from 'react';
+
+import { openDisableCloudAlertModalAtom } from '../../../atoms';
+import { stringToColour } from '../../../utils';
+import { StyledFooter, StyledSignInButton } from './styles';
+
+export const Footer: FC = () => {
+  const t = useAFFiNEI18N();
+  const setOpen = useSetAtom(openDisableCloudAlertModalAtom);
+  return (
+    <StyledFooter data-testid="workspace-list-modal-footer">
+      <StyledSignInButton
+        data-testid="sign-in-button"
+        noBorder
+        bold
+        icon={
+          <div className="circle">
+            <CloudWorkspaceIcon />
+          </div>
+        }
+        onClick={async () => {
+          if (!runtimeConfig.enableCloud) {
+            setOpen(true);
+          }
+        }}
+      >
+        {t['Sign in']()}
+      </StyledSignInButton>
+    </StyledFooter>
+  );
+};
+
+interface WorkspaceAvatarProps {
+  size: number;
+  name: string | undefined;
+  avatar: string | undefined;
+  style?: CSSProperties;
+}
+
+export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
+  function WorkspaceAvatar(props, ref) {
+    const size = props.size || 20;
+    const sizeStr = size + 'px';
+
+    return (
+      <>
+        {props.avatar ? (
+          <div
+            style={{
+              ...props.style,
+              width: sizeStr,
+              height: sizeStr,
+              color: '#fff',
+              borderRadius: '50%',
+              overflow: 'hidden',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            ref={ref}
+          >
+            <picture>
+              <img
+                style={{ width: sizeStr, height: sizeStr }}
+                src={props.avatar}
+                alt=""
+                referrerPolicy="no-referrer"
+              />
+            </picture>
+          </div>
+        ) : (
+          <div
+            style={{
+              ...props.style,
+              width: sizeStr,
+              height: sizeStr,
+              border: '1px solid #fff',
+              color: '#fff',
+              fontSize: Math.ceil(0.5 * size) + 'px',
+              background: stringToColour(props.name || 'AFFiNE'),
+              borderRadius: '50%',
+              textAlign: 'center',
+              lineHeight: size + 'px',
+              display: 'inline-block',
+              verticalAlign: 'middle',
+            }}
+            ref={ref}
+          >
+            {(props.name || 'AFFiNE').substring(0, 1)}
+          </div>
+        )}
+      </>
+    );
+  }
+);

apps/core/src/components/pure/footer/styles.ts

@@ -0,0 +1,146 @@
+import {
+  displayFlex,
+  displayInlineFlex,
+  styled,
+  textEllipsis,
+} from '@affine/component';
+import { Button } from '@affine/component';
+
+export const StyledSplitLine = styled('div')(() => {
+  return {
+    width: '1px',
+    height: '20px',
+    background: 'var(--affine-border-color)',
+    marginRight: '24px',
+  };
+});
+
+export const StyleWorkspaceInfo = styled('div')(() => {
+  return {
+    marginLeft: '15px',
+    width: '202px',
+    p: {
+      height: '20px',
+      fontSize: 'var(--affine-font-sm)',
+      ...displayFlex('flex-start', 'center'),
+    },
+    svg: {
+      marginRight: '10px',
+      fontSize: '16px',
+      flexShrink: 0,
+    },
+    span: {
+      flexGrow: 1,
+      ...textEllipsis(1),
+    },
+  };
+});
+
+export const StyleWorkspaceTitle = styled('div')(() => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    fontWeight: 600,
+    lineHeight: '24px',
+    marginBottom: '10px',
+    maxWidth: '200px',
+    ...textEllipsis(1),
+  };
+});
+
+export const StyledFooter = styled('div')({
+  padding: '20px 40px',
+  flexShrink: 0,
+  ...displayFlex('space-between', 'center'),
+});
+
+export const StyleUserInfo = styled('div')(() => {
+  return {
+    textAlign: 'left',
+    marginLeft: '16px',
+    flex: 1,
+    p: {
+      lineHeight: '24px',
+      color: 'var(--affine-icon-color)',
+    },
+    'p:first-of-type': {
+      color: 'var(--affine-text-primary-color)',
+      fontWeight: 600,
+    },
+  };
+});
+
+export const StyledModalHeaderLeft = styled('div')(() => {
+  return { ...displayFlex('flex-start', 'center') };
+});
+export const StyledModalTitle = styled('div')(() => {
+  return {
+    fontWeight: 600,
+    fontSize: 'var(--affine-font-h6)',
+  };
+});
+
+export const StyledHelperContainer = styled('div')(() => {
+  return {
+    color: 'var(--affine-icon-color)',
+    marginLeft: '15px',
+    fontWeight: 400,
+    fontSize: 'var(--affine-font-h6)',
+    ...displayFlex('center', 'center'),
+  };
+});
+
+export const StyledModalContent = styled('div')({
+  height: '534px',
+  padding: '8px 40px',
+  marginTop: '72px',
+  overflow: 'auto',
+  ...displayFlex('space-between', 'flex-start', 'flex-start'),
+  flexWrap: 'wrap',
+});
+export const StyledOperationWrapper = styled('div')(() => {
+  return {
+    ...displayFlex('flex-end', 'center'),
+  };
+});
+
+export const StyleWorkspaceAdd = styled('div')(() => {
+  return {
+    width: '58px',
+    height: '58px',
+    borderRadius: '100%',
+    background: '#f4f5fa',
+    border: '1.5px dashed #f4f5fa',
+    transition: 'background .2s',
+    ...displayFlex('center', 'center'),
+  };
+});
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    width: '100%',
+    height: '72px',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderRadius: '24px 24px 0 0',
+    padding: '0 40px',
+    ...displayFlex('space-between', 'center'),
+  };
+});
+
+export const StyledSignInButton = styled(Button)(() => {
+  return {
+    fontWeight: 600,
+    paddingLeft: 0,
+    '.circle': {
+      width: '40px',
+      height: '40px',
+      borderRadius: '20px',
+      backgroundColor: 'var(--affine-hover-color)',
+      color: 'var(--affine-primary-color)',
+      fontSize: '24px',
+      flexShrink: 0,
+      marginRight: '16px',
+      ...displayInlineFlex('center', 'center'),
+    },
+  };
+});

apps/core/src/components/pure/help-island/icons.tsx

@@ -0,0 +1,49 @@
+export const HelpIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.0041 3.8002C7.47536 3.8002 3.8041 7.47146 3.8041 12.0002C3.8041 13.311 4.1111 14.5479 4.65639 15.6449C4.92133 16.1779 4.91348 16.8471 4.85228 17.3998C4.7869 17.9901 4.63749 18.6238 4.47572 19.1908C4.3722 19.5537 4.26086 19.8987 4.1573 20.2002H12.0041C16.5328 20.2002 20.2041 16.5289 20.2041 12.0002C20.2041 7.47146 16.5328 3.8002 12.0041 3.8002ZM2.26631 20.6926L2.2668 20.6914L2.26948 20.685L2.28104 20.6567C2.29139 20.6312 2.30687 20.5928 2.32657 20.5429C2.36599 20.4431 2.42218 20.2979 2.48795 20.1192C2.61992 19.7607 2.78833 19.2734 2.93712 18.7519C3.08715 18.226 3.21054 17.6884 3.262 17.2236C3.31765 16.7212 3.2707 16.4518 3.22364 16.3571C2.57081 15.0438 2.2041 13.5637 2.2041 12.0002C2.2041 6.58781 6.59171 2.2002 12.0041 2.2002C17.4165 2.2002 21.8041 6.5878 21.8041 12.0002C21.8041 17.4126 17.4165 21.8002 12.0041 21.8002H3.0049C2.73745 21.8002 2.4876 21.6665 2.33922 21.444C2.19087 21.2215 2.16356 20.9395 2.26631 20.6926ZM11.9672 9.0502C11.4091 9.0502 10.9382 9.43186 10.8049 9.9496C10.6948 10.3775 10.2587 10.6351 9.83079 10.5249C9.40291 10.4148 9.14532 9.97867 9.25545 9.55079C9.56623 8.3433 10.6614 7.4502 11.9672 7.4502C13.5136 7.4502 14.7672 8.7038 14.7672 10.2502C14.7672 11.1058 14.3536 11.6751 13.8978 12.115C13.7108 12.2955 13.4978 12.4721 13.2997 12.6362C13.2705 12.6604 13.2416 12.6844 13.2132 12.7081C12.982 12.9004 12.7556 13.0932 12.5329 13.3159C12.2205 13.6283 11.7139 13.6283 11.4015 13.3159C11.0891 13.0035 11.0891 12.4969 11.4015 12.1845C11.6788 11.9072 11.9525 11.6756 12.19 11.478C12.2213 11.4519 12.2517 11.4267 12.2812 11.4022C12.4849 11.2332 12.6465 11.0991 12.7866 10.9638C13.0808 10.6799 13.1672 10.4992 13.1672 10.2502C13.1672 9.58745 12.6299 9.0502 11.9672 9.0502ZM11.9772 16.5502H11.9672C11.5254 16.5502 11.1672 16.192 11.1672 15.7502C11.1672 15.3084 11.5254 14.9502 11.9672 14.9502H11.9772C12.419 14.9502 12.7772 15.3084 12.7772 15.7502C12.7772 16.192 12.419 16.5502 11.9772 16.5502Z"
+      />
+    </svg>
+  );
+};
+
+export const ContactIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.16957 3.25H14.8304C15.3646 3.24999 15.8104 3.24998 16.1747 3.27974C16.5546 3.31078 16.9112 3.37789 17.2485 3.54973C17.7659 3.81338 18.1866 4.23408 18.4503 4.75153C18.6221 5.08879 18.6892 5.44545 18.7203 5.82533C18.75 6.18956 18.75 6.6354 18.75 7.16955V8.36732C18.9209 8.40912 19.0869 8.46741 19.2485 8.54973C19.7659 8.81339 20.1866 9.23408 20.4503 9.75153C20.6221 10.0888 20.6892 10.4454 20.7203 10.8253C20.75 11.1896 20.75 11.6354 20.75 12.1695V20C20.75 20.2766 20.5978 20.5307 20.3539 20.6613C20.11 20.7918 19.8141 20.7775 19.584 20.624L17.3901 19.1615C17.069 18.9474 16.9819 18.8925 16.8945 18.8544C16.8046 18.8151 16.7104 18.7866 16.6138 18.7694C16.52 18.7527 16.4171 18.75 16.0311 18.75H11.1695C10.6354 18.75 10.1896 18.75 9.82533 18.7203C9.44545 18.6892 9.08879 18.6221 8.75153 18.4503C8.23408 18.1866 7.81339 17.7659 7.54973 17.2485C7.52446 17.1989 7.50144 17.1488 7.48046 17.0983L4.33541 18.6708C4.10292 18.7871 3.82681 18.7746 3.6057 18.638C3.38459 18.5013 3.25 18.2599 3.25 18L3.25 7.16957C3.24999 6.63541 3.24998 6.18956 3.27974 5.82533C3.31078 5.44545 3.37789 5.08879 3.54973 4.75153C3.81338 4.23408 4.23408 3.81338 4.75153 3.54973C5.08879 3.37789 5.44545 3.31078 5.82533 3.27974C6.18956 3.24998 6.63541 3.24999 7.16957 3.25ZM7.25322 15.5349C7.25 15.318 7.25 15.0803 7.25 14.8211L7.25 12.1696C7.24999 11.6354 7.24998 11.1896 7.27974 10.8253C7.31078 10.4454 7.37789 10.0888 7.54973 9.75153C7.81339 9.23408 8.23408 8.81339 8.75153 8.54973C9.08879 8.37789 9.44545 8.31078 9.82533 8.27974C10.1896 8.24998 10.6354 8.24999 11.1696 8.25H16.8304C16.9769 8.25 17.1167 8.24999 17.25 8.25061V7.2C17.25 6.62757 17.2494 6.24336 17.2252 5.94748C17.2018 5.66036 17.1599 5.52307 17.1138 5.43251C16.9939 5.19731 16.8027 5.00608 16.5675 4.88624C16.4769 4.8401 16.3396 4.79822 16.0525 4.77476C15.7566 4.75058 15.3724 4.75 14.8 4.75H7.2C6.62757 4.75 6.24336 4.75058 5.94748 4.77476C5.66036 4.79822 5.52307 4.8401 5.43251 4.88624C5.19731 5.00608 5.00608 5.19731 4.88624 5.43251C4.8401 5.52307 4.79822 5.66036 4.77476 5.94748C4.75058 6.24336 4.75 6.62757 4.75 7.2V16.7865L7.25322 15.5349ZM9.94748 9.77476C9.66036 9.79822 9.52307 9.8401 9.43251 9.88624C9.19731 10.0061 9.00608 10.1973 8.88624 10.4325C8.8401 10.5231 8.79822 10.6604 8.77476 10.9475C8.75058 11.2434 8.75 11.6276 8.75 12.2V14.8C8.75 15.3018 8.7503 15.6608 8.7673 15.9461C8.78877 16.3064 8.83405 16.465 8.88624 16.5675C9.00608 16.8027 9.19731 16.9939 9.43251 17.1138C9.52307 17.1599 9.66036 17.2018 9.94748 17.2252C10.2434 17.2494 10.6276 17.25 11.2 17.25H16.0311C16.049 17.25 16.0666 17.25 16.084 17.25C16.3929 17.2499 16.6362 17.2497 16.877 17.2927C17.0895 17.3306 17.2968 17.3933 17.4947 17.4797C17.7189 17.5775 17.9213 17.7126 18.1782 17.884C18.1927 17.8937 18.2073 17.9035 18.2222 17.9134L19.25 18.5986V12.2C19.25 11.6276 19.2494 11.2434 19.2252 10.9475C19.2018 10.6604 19.1599 10.5231 19.1138 10.4325C18.9939 10.1973 18.8027 10.0061 18.5675 9.88624C18.4769 9.8401 18.3396 9.79822 18.0525 9.77476C17.7566 9.75058 17.3724 9.75 16.8 9.75H11.2C10.6276 9.75 10.2434 9.75058 9.94748 9.77476Z"
+      />
+    </svg>
+  );
+};
+
+export const KeyboardIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M19.745 5C20.3417 5 20.914 5.23705 21.336 5.65901C21.7579 6.08097 21.995 6.65326 21.995 7.25V16.755C21.995 17.3517 21.7579 17.924 21.336 18.346C20.914 18.7679 20.3417 19.005 19.745 19.005H4.25C3.95453 19.005 3.66194 18.9468 3.38896 18.8337C3.11598 18.7207 2.86794 18.5549 2.65901 18.346C2.45008 18.1371 2.28434 17.889 2.17127 17.616C2.0582 17.3431 2 17.0505 2 16.755V7.25C2 6.65326 2.23705 6.08097 2.65901 5.65901C3.08097 5.23705 3.65326 5 4.25 5H19.745ZM19.745 6.5H4.25C4.05109 6.5 3.86032 6.57902 3.71967 6.71967C3.57902 6.86032 3.5 7.05109 3.5 7.25V16.755C3.5 17.169 3.836 17.505 4.25 17.505H19.745C19.9439 17.505 20.1347 17.426 20.2753 17.2853C20.416 17.1447 20.495 16.9539 20.495 16.755V7.25C20.495 7.05109 20.416 6.86032 20.2753 6.71967C20.1347 6.57902 19.9439 6.5 19.745 6.5ZM6.75 14.5H17.25C17.44 14.5001 17.6229 14.5722 17.7618 14.702C17.9006 14.8317 17.9851 15.0093 17.998 15.1989C18.011 15.3885 17.9515 15.5759 17.8316 15.7233C17.7117 15.8707 17.5402 15.9671 17.352 15.993L17.25 16H6.75C6.55998 15.9999 6.37706 15.9278 6.23821 15.798C6.09936 15.6683 6.01493 15.4907 6.00197 15.3011C5.98902 15.1115 6.04852 14.9241 6.16843 14.7767C6.28835 14.6293 6.45975 14.5329 6.648 14.507L6.75 14.5H17.25H6.75ZM16.5 11C16.7652 11 17.0196 11.1054 17.2071 11.2929C17.3946 11.4804 17.5 11.7348 17.5 12C17.5 12.2652 17.3946 12.5196 17.2071 12.7071C17.0196 12.8946 16.7652 13 16.5 13C16.2348 13 15.9804 12.8946 15.7929 12.7071C15.6054 12.5196 15.5 12.2652 15.5 12C15.5 11.7348 15.6054 11.4804 15.7929 11.2929C15.9804 11.1054 16.2348 11 16.5 11ZM10.505 11C10.7702 11 11.0246 11.1054 11.2121 11.2929C11.3996 11.4804 11.505 11.7348 11.505 12C11.505 12.2652 11.3996 12.5196 11.2121 12.7071C11.0246 12.8946 10.7702 13 10.505 13C10.2398 13 9.98543 12.8946 9.79789 12.7071C9.61036 12.5196 9.505 12.2652 9.505 12C9.505 11.7348 9.61036 11.4804 9.79789 11.2929C9.98543 11.1054 10.2398 11 10.505 11ZM7.505 11C7.77022 11 8.02457 11.1054 8.21211 11.2929C8.39964 11.4804 8.505 11.7348 8.505 12C8.505 12.2652 8.39964 12.5196 8.21211 12.7071C8.02457 12.8946 7.77022 13 7.505 13C7.23978 13 6.98543 12.8946 6.79789 12.7071C6.61036 12.5196 6.505 12.2652 6.505 12C6.505 11.7348 6.61036 11.4804 6.79789 11.2929C6.98543 11.1054 7.23978 11 7.505 11ZM13.505 11C13.7702 11 14.0246 11.1054 14.2121 11.2929C14.3996 11.4804 14.505 11.7348 14.505 12C14.505 12.2652 14.3996 12.5196 14.2121 12.7071C14.0246 12.8946 13.7702 13 13.505 13C13.2398 13 12.9854 12.8946 12.7979 12.7071C12.6104 12.5196 12.505 12.2652 12.505 12C12.505 11.7348 12.6104 11.4804 12.7979 11.2929C12.9854 11.1054 13.2398 11 13.505 11ZM6 8C6.26522 8 6.51957 8.10536 6.70711 8.29289C6.89464 8.48043 7 8.73478 7 9C7 9.26522 6.89464 9.51957 6.70711 9.70711C6.51957 9.89464 6.26522 10 6 10C5.73478 10 5.48043 9.89464 5.29289 9.70711C5.10536 9.51957 5 9.26522 5 9C5 8.73478 5.10536 8.48043 5.29289 8.29289C5.48043 8.10536 5.73478 8 6 8ZM8.995 8C9.26022 8 9.51457 8.10536 9.70211 8.29289C9.88964 8.48043 9.995 8.73478 9.995 9C9.995 9.26522 9.88964 9.51957 9.70211 9.70711C9.51457 9.89464 9.26022 10 8.995 10C8.72978 10 8.47543 9.89464 8.28789 9.70711C8.10036 9.51957 7.995 9.26522 7.995 9C7.995 8.73478 8.10036 8.48043 8.28789 8.29289C8.47543 8.10536 8.72978 8 8.995 8ZM11.995 8C12.2602 8 12.5146 8.10536 12.7021 8.29289C12.8896 8.48043 12.995 8.73478 12.995 9C12.995 9.26522 12.8896 9.51957 12.7021 9.70711C12.5146 9.89464 12.2602 10 11.995 10C11.7298 10 11.4754 9.89464 11.2879 9.70711C11.1004 9.51957 10.995 9.26522 10.995 9C10.995 8.73478 11.1004 8.48043 11.2879 8.29289C11.4754 8.10536 11.7298 8 11.995 8ZM14.995 8C15.2602 8 15.5146 8.10536 15.7021 8.29289C15.8896 8.48043 15.995 8.73478 15.995 9C15.995 9.26522 15.8896 9.51957 15.7021 9.70711C15.5146 9.89464 15.2602 10 14.995 10C14.7298 10 14.4754 9.89464 14.2879 9.70711C14.1004 9.51957 13.995 9.26522 13.995 9C13.995 8.73478 14.1004 8.48043 14.2879 8.29289C14.4754 8.10536 14.7298 8 14.995 8ZM17.995 8C18.2602 8 18.5146 8.10536 18.7021 8.29289C18.8896 8.48043 18.995 8.73478 18.995 9C18.995 9.26522 18.8896 9.51957 18.7021 9.70711C18.5146 9.89464 18.2602 10 17.995 10C17.7298 10 17.4754 9.89464 17.2879 9.70711C17.1004 9.51957 16.995 9.26522 16.995 9C16.995 8.73478 17.1004 8.48043 17.2879 8.29289C17.4754 8.10536 17.7298 8 17.995 8Z" />
+    </svg>
+  );
+};

apps/core/src/components/pure/help-island/index.tsx

@@ -0,0 +1,134 @@
+import { MuiFade, Tooltip } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
+import { useSetAtom } from 'jotai/react';
+import { useAtomValue } from 'jotai/react';
+import { useCallback, useState } from 'react';
+
+import { openOnboardingModalAtom, openSettingModalAtom } from '../../../atoms';
+import { currentModeAtom } from '../../../atoms/mode';
+import { ShortcutsModal } from '../shortcuts-modal';
+import { ContactIcon, HelpIcon, KeyboardIcon } from './icons';
+import {
+  StyledAnimateWrapper,
+  StyledIconWrapper,
+  StyledIsland,
+  StyledTriggerWrapper,
+} from './style';
+
+const DEFAULT_SHOW_LIST: IslandItemNames[] = [
+  'whatNew',
+  'contact',
+  'shortcuts',
+];
+const DESKTOP_SHOW_LIST: IslandItemNames[] = [...DEFAULT_SHOW_LIST, 'guide'];
+export type IslandItemNames = 'whatNew' | 'contact' | 'shortcuts' | 'guide';
+export const HelpIsland = ({
+  showList = environment.isDesktop ? DESKTOP_SHOW_LIST : DEFAULT_SHOW_LIST,
+}: {
+  showList?: IslandItemNames[];
+}) => {
+  const mode = useAtomValue(currentModeAtom);
+  const setOpenOnboarding = useSetAtom(openOnboardingModalAtom);
+  const setOpenSettingModalAtom = useSetAtom(openSettingModalAtom);
+  const [spread, setShowSpread] = useState(false);
+  const t = useAFFiNEI18N();
+
+  const [openShortCut, setOpenShortCut] = useState(false);
+
+  const openAbout = useCallback(() => {
+    setShowSpread(false);
+
+    setOpenSettingModalAtom({
+      open: true,
+      activeTab: 'about',
+      workspaceId: null,
+    });
+  }, [setOpenSettingModalAtom]);
+
+  return (
+    <>
+      <StyledIsland
+        spread={spread}
+        data-testid="help-island"
+        onClick={() => {
+          setShowSpread(!spread);
+        }}
+        inEdgelessPage={mode === 'edgeless'}
+      >
+        <StyledAnimateWrapper
+          style={{ height: spread ? `${showList.length * 44}px` : 0 }}
+        >
+          {showList.includes('whatNew') && (
+            <Tooltip content={t["Discover what's new!"]()} placement="left-end">
+              <StyledIconWrapper
+                data-testid="right-bottom-change-log-icon"
+                onClick={() => {
+                  window.open(runtimeConfig.changelogUrl, '_blank');
+                }}
+              >
+                <NewIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          )}
+          {showList.includes('contact') && (
+            <Tooltip content={t['Contact Us']()} placement="left-end">
+              <StyledIconWrapper
+                data-testid="right-bottom-contact-us-icon"
+                onClick={openAbout}
+              >
+                <ContactIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          )}
+          {showList.includes('shortcuts') && (
+            <Tooltip content={t['Keyboard Shortcuts']()} placement="left-end">
+              <StyledIconWrapper
+                data-testid="shortcuts-icon"
+                onClick={() => {
+                  setShowSpread(false);
+                  setOpenShortCut(true);
+                }}
+              >
+                <KeyboardIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          )}
+          {showList.includes('guide') && (
+            <Tooltip
+              content={t['com.affine.helpIsland.gettingStarted']()}
+              placement="left-end"
+            >
+              <StyledIconWrapper
+                data-testid="easy-guide"
+                onClick={() => {
+                  setShowSpread(false);
+                  setOpenOnboarding(true);
+                }}
+              >
+                <UserGuideIcon />
+              </StyledIconWrapper>
+            </Tooltip>
+          )}
+        </StyledAnimateWrapper>
+
+        <Tooltip content={t['Help and Feedback']()} placement="left-end">
+          <MuiFade in={!spread} data-testid="faq-icon">
+            <StyledTriggerWrapper>
+              <HelpIcon />
+            </StyledTriggerWrapper>
+          </MuiFade>
+        </Tooltip>
+        <MuiFade in={spread}>
+          <StyledTriggerWrapper spread>
+            <CloseIcon />
+          </StyledTriggerWrapper>
+        </MuiFade>
+      </StyledIsland>
+      <ShortcutsModal
+        open={openShortCut}
+        onClose={() => setOpenShortCut(false)}
+      />
+    </>
+  );
+};

apps/core/src/components/pure/help-island/style.ts

@@ -0,0 +1,79 @@
+import { displayFlex, positionAbsolute, styled } from '@affine/component';
+
+export const StyledIsland = styled('div')<{
+  spread: boolean;
+  inEdgelessPage?: boolean;
+}>(({ spread, inEdgelessPage }) => {
+  return {
+    transition: 'box-shadow 0.2s',
+    width: '44px',
+    position: 'relative',
+    boxShadow: spread
+      ? 'var(--affine-menu-shadow)'
+      : inEdgelessPage
+      ? 'var(--affine-menu-shadow)'
+      : 'unset',
+    padding: '0 4px 44px',
+    borderRadius: '10px',
+    background: spread
+      ? 'var(--affine-background-overlay-panel-color)'
+      : 'var(--affine-background-primary-color)',
+    ':hover': {
+      background: spread ? null : 'var(--affine-white)',
+      boxShadow: spread ? null : 'var(--affine-menu-shadow)',
+    },
+    '::after': {
+      content: '""',
+      width: '36px',
+      height: '1px',
+      background: spread ? 'var(--affine-border-color)' : 'transparent',
+      ...positionAbsolute({
+        left: 0,
+        right: 0,
+        bottom: '44px',
+      }),
+      margin: 'auto',
+      transition: 'background 0.15s',
+    },
+  };
+});
+export const StyledIconWrapper = styled('div')(() => {
+  return {
+    color: 'var(--affine-icon-color)',
+    ...displayFlex('center', 'center'),
+    cursor: 'pointer',
+    fontSize: '24px',
+    borderRadius: '5px',
+    width: '36px',
+    height: '36px',
+    margin: '4px auto 4px',
+    transition: 'background-color 0.2s',
+    position: 'relative',
+    ':hover': {
+      backgroundColor: 'var(--affine-hover-color)',
+    },
+  };
+});
+
+export const StyledAnimateWrapper = styled('div')(() => ({
+  transition: 'height 0.2s cubic-bezier(0, 0, 0.55, 1.6)',
+  overflow: 'hidden',
+}));
+
+export const StyledTriggerWrapper = styled('div')<{
+  spread?: boolean;
+}>(({ spread }) => {
+  return {
+    width: '36px',
+    height: '36px',
+    cursor: 'pointer',
+    color: 'var(--affine-icon-color)',
+    borderRadius: '5px',
+    fontSize: '24px',
+    ...displayFlex('center', 'center'),
+    ...positionAbsolute({ left: '4px', bottom: '4px' }),
+    ':hover': {
+      backgroundColor: spread ? 'var(--affine-hover-color)' : null,
+    },
+  };
+});

apps/core/src/components/pure/icons/index.tsx

@@ -0,0 +1,28 @@
+import {
+  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
+  CollaborationIcon as DefaultJoinedWorkspaceIcon,
+  LocalDataIcon as DefaultLocalDataIcon,
+  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
+  PublishIcon as DefaultPublishIcon,
+} from '@blocksuite/icons';
+
+// Here are some icons with special color or size
+
+export const JoinedWorkspaceIcon = () => {
+  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
+};
+export const LocalWorkspaceIcon = () => {
+  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
+};
+
+export const CloudWorkspaceIcon = () => {
+  return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
+};
+
+export const LocalDataIcon = () => {
+  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
+};
+
+export const PublishIcon = () => {
+  return <DefaultPublishIcon style={{ color: '#8699FF' }} />;
+};

apps/core/src/components/pure/quick-search-button/index.tsx

@@ -0,0 +1,38 @@
+import type { IconButtonProps } from '@affine/component';
+import { IconButton } from '@affine/component';
+import { styled } from '@affine/component';
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+
+const StyledIconButtonWithAnimate = styled(IconButton)(() => {
+  return {
+    svg: {
+      transition: 'transform 0.15s ease-in-out',
+    },
+    ':hover': {
+      svg: {
+        transform: 'translateY(3px)',
+      },
+      '::after': {
+        background: 'var(--affine-background-primary-color)',
+      },
+    },
+  };
+});
+
+// fixme(himself65): need to refactor
+export const QuickSearchButton = ({
+  onClick,
+  ...props
+}: Omit<IconButtonProps, 'children'>) => {
+  return (
+    <StyledIconButtonWithAnimate
+      data-testid="header-quickSearchButton"
+      {...props}
+      onClick={e => {
+        onClick?.(e);
+      }}
+    >
+      <ArrowDownSmallIcon />
+    </StyledIconButtonWithAnimate>
+  );
+};

apps/core/src/components/pure/quick-search-modal/config.ts

@@ -0,0 +1,50 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  DeleteTemporarilyIcon,
+  FolderIcon,
+  SettingsIcon,
+} from '@blocksuite/icons';
+import { useAtom } from 'jotai';
+import type { FC, SVGProps } from 'react';
+import { useMemo } from 'react';
+
+import { openSettingModalAtom } from '../../../atoms';
+import { pathGenerator } from '../../../shared';
+
+export const useSwitchToConfig = (
+  workspaceId: string
+): {
+  title: string;
+  href?: string;
+  onClick?: () => void;
+  icon: FC<SVGProps<SVGSVGElement>>;
+}[] => {
+  const t = useAFFiNEI18N();
+  const [, setOpenSettingModalAtom] = useAtom(openSettingModalAtom);
+  return useMemo(
+    () => [
+      {
+        title: t['All pages'](),
+        href: pathGenerator.all(workspaceId),
+        icon: FolderIcon,
+      },
+      {
+        title: t['Workspace Settings'](),
+        onClick: () => {
+          setOpenSettingModalAtom({
+            open: true,
+            activeTab: 'workspace',
+            workspaceId,
+          });
+        },
+        icon: SettingsIcon,
+      },
+      {
+        title: t['Trash'](),
+        href: pathGenerator.trash(workspaceId),
+        icon: DeleteTemporarilyIcon,
+      },
+    ],
+    [t, workspaceId, setOpenSettingModalAtom]
+  );
+};

apps/core/src/components/pure/quick-search-modal/footer.tsx

@@ -0,0 +1,68 @@
+import { initEmptyPage } from '@affine/env/blocksuite';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { PageBlockModel } from '@blocksuite/blocks';
+import { assertEquals } from '@blocksuite/global/utils';
+import { PlusIcon } from '@blocksuite/icons';
+import { nanoid } from '@blocksuite/store';
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { Command } from 'cmdk';
+import type React from 'react';
+import { useCallback } from 'react';
+
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
+import type { BlockSuiteWorkspace } from '../../../shared';
+import { StyledModalFooterContent } from './style';
+
+export type FooterProps = {
+  query: string;
+  onClose: () => void;
+  blockSuiteWorkspace: BlockSuiteWorkspace;
+};
+
+export const Footer: React.FC<FooterProps> = ({
+  query,
+  onClose,
+  blockSuiteWorkspace,
+}) => {
+  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
+  const t = useAFFiNEI18N();
+  const { jumpToPage } = useNavigateHelper();
+  const MAX_QUERY_SHOW_LENGTH = 20;
+  const normalizedQuery =
+    query.length > MAX_QUERY_SHOW_LENGTH
+      ? query.slice(0, MAX_QUERY_SHOW_LENGTH) + '...'
+      : query;
+  return (
+    <Command.Item
+      data-testid="quick-search-add-new-page"
+      onSelect={useCallback(async () => {
+        const id = nanoid();
+        const page = createPage(id);
+        assertEquals(page.id, id);
+        await initEmptyPage(page);
+        const block = page.getBlockByFlavour(
+          'affine:page'
+        )[0] as PageBlockModel;
+        if (block) {
+          block.title.insert(query, 0);
+        } else {
+          console.warn('No page block found');
+        }
+        blockSuiteWorkspace.setPageMeta(page.id, {
+          title: query,
+        });
+        onClose();
+        jumpToPage(blockSuiteWorkspace.id, page.id);
+      }, [blockSuiteWorkspace, createPage, jumpToPage, onClose, query])}
+    >
+      <StyledModalFooterContent>
+        <PlusIcon />
+        {query ? (
+          <span>{t['New Keyword Page']({ query: normalizedQuery })}</span>
+        ) : (
+          <span>{t['New Page']()}</span>
+        )}
+      </StyledModalFooterContent>
+    </Command.Item>
+  );
+};

apps/core/src/components/pure/quick-search-modal/index.tsx

@@ -0,0 +1,170 @@
+import { Modal, ModalWrapper } from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Command } from 'cmdk';
+import { startTransition } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import type { AllWorkspace } from '../../../shared';
+import { Footer } from './footer';
+import { Results } from './results';
+import { SearchInput } from './search-input';
+import {
+  StyledContent,
+  StyledModalDivider,
+  StyledModalFooter,
+  StyledModalHeader,
+  StyledShortcut,
+} from './style';
+
+export type QuickSearchModalProps = {
+  workspace: AllWorkspace;
+  open: boolean;
+  setOpen: (value: boolean) => void;
+};
+
+export const QuickSearchModal: React.FC<QuickSearchModalProps> = ({
+  open,
+  setOpen,
+  workspace,
+}) => {
+  const blockSuiteWorkspace = workspace?.blockSuiteWorkspace;
+  const t = useAFFiNEI18N();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [query, _setQuery] = useState('');
+  const setQuery = useCallback((query: string) => {
+    startTransition(() => {
+      _setQuery(query);
+    });
+  }, []);
+  const location = useLocation();
+  const isPublicWorkspace = useMemo(
+    () => location.pathname.startsWith('/public-workspace'),
+    [location]
+  );
+  const [showCreatePage, setShowCreatePage] = useState(true);
+  const isPublicAndNoQuery = useCallback(() => {
+    return isPublicWorkspace && query.length === 0;
+  }, [isPublicWorkspace, query.length]);
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  // Add  ‘⌘+K’ shortcut keys as switches
+  useEffect(() => {
+    const keydown = (e: KeyboardEvent) => {
+      if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
+        const selection = window.getSelection();
+        // prevent search bar focus in firefox
+        e.preventDefault();
+        setQuery('');
+        if (selection?.toString()) {
+          setOpen(false);
+          return;
+        }
+        setOpen(!open);
+      }
+    };
+    document.addEventListener('keydown', keydown, { capture: true });
+    return () =>
+      document.removeEventListener('keydown', keydown, { capture: true });
+  }, [open, setOpen, setQuery]);
+  useEffect(() => {
+    if (open) {
+      // Waiting for DOM rendering
+      requestAnimationFrame(() => {
+        const inputElement = inputRef.current;
+        inputElement?.focus();
+      });
+    }
+  }, [open]);
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      wrapperPosition={['top', 'center']}
+      data-testid="quickSearch"
+    >
+      <ModalWrapper
+        width={608}
+        style={{
+          maxHeight: '80vh',
+          minHeight: isPublicAndNoQuery() ? '72px' : '412px',
+          top: '80px',
+          overflow: 'hidden',
+        }}
+      >
+        {/* <NavigationPath
+          blockSuiteWorkspace={blockSuiteWorkspace}
+          onJumpToPage={() => {
+            setOpen(false);
+          }}
+        /> */}
+        <Command
+          shouldFilter={false}
+          //Handle KeyboardEvent conflicts with blocksuite
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (
+              e.key === 'ArrowDown' ||
+              e.key === 'ArrowUp' ||
+              e.key === 'ArrowLeft' ||
+              e.key === 'ArrowRight'
+            ) {
+              e.stopPropagation();
+            }
+          }}
+        >
+          <StyledModalHeader>
+            <SearchInput
+              ref={inputRef}
+              onValueChange={value => {
+                setQuery(value);
+              }}
+              onKeyDown={e => {
+                // Avoid triggering the cmdk onSelect event when the input method is in use
+                if (e.nativeEvent.isComposing) {
+                  e.stopPropagation();
+                  return;
+                }
+              }}
+              placeholder={t['Quick search placeholder']()}
+            />
+            <StyledShortcut>
+              {environment.isBrowser && environment.isMacOs
+                ? '⌘ + K'
+                : 'Ctrl + K'}
+            </StyledShortcut>
+          </StyledModalHeader>
+          <StyledModalDivider
+            style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+          />
+          <Command.List>
+            <StyledContent
+              style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+            >
+              <Results
+                query={query}
+                onClose={handleClose}
+                workspace={workspace}
+                setShowCreatePage={setShowCreatePage}
+              />
+            </StyledContent>
+            {isPublicWorkspace ? null : showCreatePage ? (
+              <>
+                <StyledModalDivider />
+                <StyledModalFooter>
+                  <Footer
+                    query={query}
+                    onClose={handleClose}
+                    blockSuiteWorkspace={blockSuiteWorkspace}
+                  />
+                </StyledModalFooter>
+              </>
+            ) : null}
+          </Command.List>
+        </Command>
+      </ModalWrapper>
+    </Modal>
+  );
+};
+
+export default QuickSearchModal;

apps/core/src/components/pure/quick-search-modal/results.tsx

@@ -0,0 +1,147 @@
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env/constant';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { assertExists } from '@blocksuite/global/utils';
+import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
+import { Command } from 'cmdk';
+import { useAtomValue } from 'jotai';
+import type { Dispatch, FC, SetStateAction } from 'react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { recentPageSettingsAtom } from '../../../atoms';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
+import type { AllWorkspace } from '../../../shared';
+import { useSwitchToConfig } from './config';
+import { StyledListItem, StyledNotFound } from './style';
+
+export type ResultsProps = {
+  workspace: AllWorkspace;
+  query: string;
+  onClose: () => void;
+  setShowCreatePage: Dispatch<SetStateAction<boolean>>;
+};
+export const Results: FC<ResultsProps> = ({
+  query,
+  workspace,
+  setShowCreatePage,
+  onClose,
+}) => {
+  const blockSuiteWorkspace = workspace.blockSuiteWorkspace;
+  useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
+  const pageList = useBlockSuitePageMeta(blockSuiteWorkspace);
+  assertExists(blockSuiteWorkspace.id);
+  const List = useSwitchToConfig(workspace.id);
+
+  const recentPageSetting = useAtomValue(recentPageSettingsAtom);
+  const t = useAFFiNEI18N();
+  const navigate = useNavigate();
+  const { jumpToPage } = useNavigateHelper();
+  const results = blockSuiteWorkspace.search({ query });
+
+  // remove `space:` prefix
+  const pageIds = [...results.values()].map(id => id.slice(6));
+
+  const resultsPageMeta = pageList.filter(
+    page => pageIds.indexOf(page.id) > -1 && !page.trash
+  );
+
+  const recentlyViewedItem = recentPageSetting.filter(recent => {
+    const page = pageList.find(page => recent.id === page.id);
+    if (!page) {
+      return false;
+    } else {
+      return page.trash !== true;
+    }
+  });
+  useEffect(() => {
+    setShowCreatePage(!resultsPageMeta.length);
+    //Determine whether to display the  ‘+ New page’
+  }, [resultsPageMeta.length, setShowCreatePage]);
+  if (!query) {
+    return (
+      <>
+        {recentlyViewedItem.length > 0 && (
+          <Command.Group heading={t['Recent']()}>
+            {recentlyViewedItem.map(recent => {
+              const page = pageList.find(page => recent.id === page.id);
+              assertExists(page);
+              return (
+                <Command.Item
+                  key={page.id}
+                  value={page.id}
+                  onSelect={() => {
+                    onClose();
+                    jumpToPage(blockSuiteWorkspace.id, page.id);
+                  }}
+                >
+                  <StyledListItem>
+                    {recent.mode === 'edgeless' ? (
+                      <EdgelessIcon />
+                    ) : (
+                      <PageIcon />
+                    )}
+                    <span>{page.title || UNTITLED_WORKSPACE_NAME}</span>
+                  </StyledListItem>
+                </Command.Item>
+              );
+            })}
+          </Command.Group>
+        )}
+        <Command.Group heading={t['Jump to']()}>
+          {List.map(link => {
+            return (
+              <Command.Item
+                key={link.title}
+                value={link.title}
+                onSelect={() => {
+                  onClose();
+                  link.href && navigate(link.href);
+                  link.onClick?.();
+                }}
+              >
+                <StyledListItem>
+                  <link.icon />
+                  <span>{link.title}</span>
+                </StyledListItem>
+              </Command.Item>
+            );
+          })}
+        </Command.Group>
+      </>
+    );
+  }
+  if (!resultsPageMeta.length) {
+    return (
+      <StyledNotFound>
+        <span>{t['Find 0 result']()}</span>
+        <image href="/imgs/no-result.svg" width={200} height={200} />
+      </StyledNotFound>
+    );
+  }
+  return (
+    <Command.Group
+      heading={t['Find results']({ number: `${resultsPageMeta.length}` })}
+    >
+      {resultsPageMeta.map(result => {
+        return (
+          <Command.Item
+            key={result.id}
+            onSelect={() => {
+              onClose();
+              assertExists(blockSuiteWorkspace.id);
+              jumpToPage(blockSuiteWorkspace.id, result.id);
+            }}
+            value={result.id}
+          >
+            <StyledListItem>
+              {result.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />}
+              <span>{result.title || UNTITLED_WORKSPACE_NAME}</span>
+            </StyledListItem>
+          </Command.Item>
+        );
+      })}
+    </Command.Group>
+  );
+};

apps/core/src/components/pure/quick-search-modal/search-input.tsx

@@ -0,0 +1,33 @@
+import { SearchIcon } from '@blocksuite/icons';
+import { Command } from 'cmdk';
+import { forwardRef } from 'react';
+
+import { StyledInputContent, StyledLabel } from './style';
+
+export const SearchInput = forwardRef<
+  HTMLInputElement,
+  Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'type'
+  > & {
+    /**
+     * Optional controlled state for the value of the search input.
+     */
+    value?: string;
+    /**
+     * Event handler called when the search value changes.
+     */
+    onValueChange?: (search: string) => void;
+  } & React.RefAttributes<HTMLInputElement>
+>((props, ref) => {
+  return (
+    <StyledInputContent>
+      <StyledLabel htmlFor=":r5:">
+        <SearchIcon />
+      </StyledLabel>
+      <Command.Input ref={ref} {...props} />
+    </StyledInputContent>
+  );
+});
+
+SearchInput.displayName = 'SearchInput';

apps/core/src/components/pure/quick-search-modal/style.ts

@@ -0,0 +1,180 @@
+import { displayFlex, styled, textEllipsis } from '@affine/component';
+
+export const StyledContent = styled('div')(() => {
+  return {
+    minHeight: '290px',
+    maxHeight: '70vh',
+    width: '100%',
+    overflow: 'auto',
+    marginBottom: '10px',
+    ...displayFlex('flex-start', 'flex-start'),
+    flexDirection: 'column',
+    color: 'var(--affine-text-primary-color)',
+    transition: 'all 0.15s',
+    letterSpacing: '0.06em',
+    '[cmdk-group]': {
+      width: '100%',
+    },
+    '[cmdk-group-heading]': {
+      ...displayFlex('start', 'center'),
+      margin: '0 16px',
+      height: '36px',
+      lineHeight: '22px',
+      fontSize: 'var(--affine-font-sm)',
+      color: 'var(--affine-text-secondary-color)',
+    },
+    '[cmdk-item]': {
+      margin: '0 4px',
+    },
+    '[aria-selected="true"]': {
+      transition: 'all 0.15s',
+      borderRadius: '4px',
+      color: 'var(--affine-primary-color)',
+      backgroundColor: 'var(--affine-hover-color)',
+      padding: '0 2px',
+    },
+  };
+});
+export const StyledJumpTo = styled('div')(() => {
+  return {
+    ...displayFlex('center', 'start'),
+    flexDirection: 'column',
+    padding: '10px 10px 10px 0',
+    fontSize: 'var(--affine-font-base)',
+    strong: {
+      fontWeight: '500',
+      marginBottom: '10px',
+    },
+  };
+});
+export const StyledNotFound = styled('div')(() => {
+  return {
+    width: '612px',
+    ...displayFlex('center', 'center'),
+    flexDirection: 'column',
+    padding: '0 16px',
+    fontSize: 'var(--affine-font-sm)',
+    lineHeight: '22px',
+    color: 'var(--affine-text-secondary-color)',
+    span: {
+      ...displayFlex('flex-start', 'center'),
+      width: '100%',
+      fontWeight: '400',
+      height: '36px',
+    },
+
+    img: {
+      marginTop: '10px',
+    },
+  };
+});
+export const StyledInputContent = styled('div')(() => {
+  return {
+    ...displayFlex('space-between', 'center'),
+    input: {
+      width: '492px',
+      height: '22px',
+      padding: '0 12px',
+      fontSize: 'var(--affine-font-base)',
+      ...displayFlex('space-between', 'center'),
+      letterSpacing: '0.06em',
+      color: 'var(--affine-text-primary-color)',
+      '::placeholder': {
+        color: 'var(--affine-placeholder-color)',
+      },
+    },
+  };
+});
+export const StyledShortcut = styled('div')(() => {
+  return {
+    color: 'var(--affine-placeholder-color)',
+    fontSize: 'var(--affine-font-sm)',
+    whiteSpace: 'nowrap',
+  };
+});
+
+export const StyledLabel = styled('label')(() => {
+  return {
+    width: '20px',
+    height: '20px',
+    color: 'var(--affine-icon-color)',
+    fontSize: '20px',
+  };
+});
+
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    height: '36px',
+    margin: '12px 16px 0px 16px',
+    ...displayFlex('space-between', 'center'),
+  };
+});
+export const StyledModalDivider = styled('div')(() => {
+  return {
+    width: 'auto',
+    height: '0',
+    margin: '6px 16px',
+    borderTop: '0.5px solid var(--affine-border-color)',
+  };
+});
+
+export const StyledModalFooter = styled('div')(() => {
+  return {
+    fontSize: 'inherit',
+    lineHeight: '22px',
+    marginBottom: '8px',
+    textAlign: 'center',
+    color: 'var(--affine-text-primary-color)',
+    ...displayFlex('center', 'center'),
+    transition: 'all .15s',
+    '[cmdk-item]': {
+      margin: '0 4px',
+    },
+    '[aria-selected="true"]': {
+      transition: 'all 0.15s',
+      borderRadius: '4px',
+      color: 'var(--affine-primary-color)',
+      backgroundColor: 'var(--affine-hover-color)',
+      'span,svg': {
+        transition: 'all 0.15s',
+        transform: 'scale(1.02)',
+      },
+    },
+  };
+});
+export const StyledModalFooterContent = styled('button')(() => {
+  return {
+    width: '600px',
+    height: '32px',
+    fontSize: 'var(--affine-font-base)',
+    lineHeight: '22px',
+    textAlign: 'center',
+    ...displayFlex('center', 'center'),
+    color: 'inherit',
+    borderRadius: '4px',
+    transition: 'background .15s, color .15s',
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});
+export const StyledListItem = styled('button')(() => {
+  return {
+    width: '100%',
+    height: '32px',
+    fontSize: 'inherit',
+    color: 'inherit',
+    padding: '0 12px',
+    borderRadius: '4px',
+    transition: 'all .15s',
+    ...displayFlex('flex-start', 'center'),
+    span: {
+      ...textEllipsis(1),
+    },
+    '> svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});

apps/core/src/components/pure/shortcuts-modal/icons.tsx

@@ -0,0 +1,27 @@
+export const CloseIcon = () => {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M7.94 7.00014L13.4667 1.47348C13.5759 1.34594 13.633 1.18189 13.6265 1.01411C13.62 0.846324 13.5504 0.687165 13.4317 0.568435C13.313 0.449706 13.1538 0.38015 12.986 0.37367C12.8183 0.367189 12.6542 0.42426 12.5267 0.533477L7 6.06014L1.47334 0.526811C1.3478 0.401275 1.17754 0.33075 1 0.33075C0.822468 0.33075 0.652205 0.401275 0.526669 0.526811C0.401133 0.652346 0.330608 0.82261 0.330608 1.00014C0.330608 1.17768 0.401133 1.34794 0.526669 1.47348L6.06 7.00014L0.526669 12.5268C0.456881 12.5866 0.400201 12.6601 0.360186 12.7428C0.32017 12.8255 0.297683 12.9156 0.294137 13.0074C0.290591 13.0993 0.306061 13.1908 0.339577 13.2764C0.373094 13.3619 0.423932 13.4396 0.488902 13.5046C0.553872 13.5695 0.63157 13.6204 0.71712 13.6539C0.80267 13.6874 0.894225 13.7029 0.986038 13.6993C1.07785 13.6958 1.16794 13.6733 1.25065 13.6333C1.33336 13.5933 1.4069 13.5366 1.46667 13.4668L7 7.94014L12.5267 13.4668C12.6542 13.576 12.8183 13.6331 12.986 13.6266C13.1538 13.6201 13.313 13.5506 13.4317 13.4319C13.5504 13.3131 13.62 13.154 13.6265 12.9862C13.633 12.8184 13.5759 12.6543 13.4667 12.5268L7.94 7.00014Z" />
+    </svg>
+  );
+};
+
+export const KeyboardIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="15"
+      viewBox="0 0 20 15"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M17.745 0C18.3417 0 18.914 0.237053 19.336 0.65901C19.7579 1.08097 19.995 1.65326 19.995 2.25V11.755C19.995 12.3517 19.7579 12.924 19.336 13.346C18.914 13.7679 18.3417 14.005 17.745 14.005H2.25C1.95453 14.005 1.66194 13.9468 1.38896 13.8337C1.11598 13.7207 0.867941 13.5549 0.65901 13.346C0.450078 13.1371 0.284344 12.889 0.171271 12.616C0.058198 12.3431 0 12.0505 0 11.755V2.25C0 1.65326 0.237053 1.08097 0.65901 0.65901C1.08097 0.237053 1.65326 0 2.25 0H17.745ZM17.745 1.5H2.25C2.05109 1.5 1.86032 1.57902 1.71967 1.71967C1.57902 1.86032 1.5 2.05109 1.5 2.25V11.755C1.5 12.169 1.836 12.505 2.25 12.505H17.745C17.9439 12.505 18.1347 12.426 18.2753 12.2853C18.416 12.1447 18.495 11.9539 18.495 11.755V2.25C18.495 2.05109 18.416 1.86032 18.2753 1.71967C18.1347 1.57902 17.9439 1.5 17.745 1.5ZM4.75 9.5H15.25C15.44 9.50006 15.6229 9.57224 15.7618 9.70197C15.9006 9.8317 15.9851 10.0093 15.998 10.1989C16.011 10.3885 15.9515 10.5759 15.8316 10.7233C15.7117 10.8707 15.5402 10.9671 15.352 10.993L15.25 11H4.75C4.55998 10.9999 4.37706 10.9278 4.23821 10.798C4.09936 10.6683 4.01493 10.4907 4.00197 10.3011C3.98902 10.1115 4.04852 9.92411 4.16843 9.7767C4.28835 9.62929 4.45975 9.5329 4.648 9.507L4.75 9.5H15.25H4.75ZM14.5 6C14.7652 6 15.0196 6.10536 15.2071 6.29289C15.3946 6.48043 15.5 6.73478 15.5 7C15.5 7.26522 15.3946 7.51957 15.2071 7.70711C15.0196 7.89464 14.7652 8 14.5 8C14.2348 8 13.9804 7.89464 13.7929 7.70711C13.6054 7.51957 13.5 7.26522 13.5 7C13.5 6.73478 13.6054 6.48043 13.7929 6.29289C13.9804 6.10536 14.2348 6 14.5 6ZM8.505 6C8.77022 6 9.02457 6.10536 9.21211 6.29289C9.39964 6.48043 9.505 6.73478 9.505 7C9.505 7.26522 9.39964 7.51957 9.21211 7.70711C9.02457 7.89464 8.77022 8 8.505 8C8.23978 8 7.98543 7.89464 7.79789 7.70711C7.61036 7.51957 7.505 7.26522 7.505 7C7.505 6.73478 7.61036 6.48043 7.79789 6.29289C7.98543 6.10536 8.23978 6 8.505 6ZM5.505 6C5.77022 6 6.02457 6.10536 6.21211 6.29289C6.39964 6.48043 6.505 6.73478 6.505 7C6.505 7.26522 6.39964 7.51957 6.21211 7.70711C6.02457 7.89464 5.77022 8 5.505 8C5.23978 8 4.98543 7.89464 4.79789 7.70711C4.61036 7.51957 4.505 7.26522 4.505 7C4.505 6.73478 4.61036 6.48043 4.79789 6.29289C4.98543 6.10536 5.23978 6 5.505 6ZM11.505 6C11.7702 6 12.0246 6.10536 12.2121 6.29289C12.3996 6.48043 12.505 6.73478 12.505 7C12.505 7.26522 12.3996 7.51957 12.2121 7.70711C12.0246 7.89464 11.7702 8 11.505 8C11.2398 8 10.9854 7.89464 10.7979 7.70711C10.6104 7.51957 10.505 7.26522 10.505 7C10.505 6.73478 10.6104 6.48043 10.7979 6.29289C10.9854 6.10536 11.2398 6 11.505 6ZM4 3C4.26522 3 4.51957 3.10536 4.70711 3.29289C4.89464 3.48043 5 3.73478 5 4C5 4.26522 4.89464 4.51957 4.70711 4.70711C4.51957 4.89464 4.26522 5 4 5C3.73478 5 3.48043 4.89464 3.29289 4.70711C3.10536 4.51957 3 4.26522 3 4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM6.995 3C7.26022 3 7.51457 3.10536 7.70211 3.29289C7.88964 3.48043 7.995 3.73478 7.995 4C7.995 4.26522 7.88964 4.51957 7.70211 4.70711C7.51457 4.89464 7.26022 5 6.995 5C6.72978 5 6.47543 4.89464 6.28789 4.70711C6.10036 4.51957 5.995 4.26522 5.995 4C5.995 3.73478 6.10036 3.48043 6.28789 3.29289C6.47543 3.10536 6.72978 3 6.995 3ZM9.995 3C10.2602 3 10.5146 3.10536 10.7021 3.29289C10.8896 3.48043 10.995 3.73478 10.995 4C10.995 4.26522 10.8896 4.51957 10.7021 4.70711C10.5146 4.89464 10.2602 5 9.995 5C9.72978 5 9.47543 4.89464 9.28789 4.70711C9.10036 4.51957 8.995 4.26522 8.995 4C8.995 3.73478 9.10036 3.48043 9.28789 3.29289C9.47543 3.10536 9.72978 3 9.995 3ZM12.995 3C13.2602 3 13.5146 3.10536 13.7021 3.29289C13.8896 3.48043 13.995 3.73478 13.995 4C13.995 4.26522 13.8896 4.51957 13.7021 4.70711C13.5146 4.89464 13.2602 5 12.995 5C12.7298 5 12.4754 4.89464 12.2879 4.70711C12.1004 4.51957 11.995 4.26522 11.995 4C11.995 3.73478 12.1004 3.48043 12.2879 3.29289C12.4754 3.10536 12.7298 3 12.995 3ZM15.995 3C16.2602 3 16.5146 3.10536 16.7021 3.29289C16.8896 3.48043 16.995 3.73478 16.995 4C16.995 4.26522 16.8896 4.51957 16.7021 4.70711C16.5146 4.89464 16.2602 5 15.995 5C15.7298 5 15.4754 4.89464 15.2879 4.70711C15.1004 4.51957 14.995 4.26522 14.995 4C14.995 3.73478 15.1004 3.48043 15.2879 3.29289C15.4754 3.10536 15.7298 3 15.995 3Z" />
+    </svg>
+  );
+};

apps/core/src/components/pure/shortcuts-modal/index.tsx

@@ -0,0 +1,103 @@
+import {
+  ModalCloseButton,
+  MuiClickAwayListener,
+  MuiSlide,
+} from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+import {
+  useEdgelessShortcuts,
+  useGeneralShortcuts,
+  useMarkdownShortcuts,
+  usePageShortcuts,
+} from '../../../hooks/affine/use-shortcuts';
+import { KeyboardIcon } from './icons';
+import {
+  StyledListItem,
+  StyledModalHeader,
+  StyledShortcutsModal,
+  StyledSubTitle,
+  StyledTitle,
+} from './style';
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
+  const t = useAFFiNEI18N();
+
+  const markdownShortcuts = useMarkdownShortcuts();
+  const pageShortcuts = usePageShortcuts();
+  const edgelessShortcuts = useEdgelessShortcuts();
+  const generalShortcuts = useGeneralShortcuts();
+
+  return (
+    <MuiSlide direction="left" in={open} mountOnEnter unmountOnExit>
+      <StyledShortcutsModal data-testid="shortcuts-modal">
+        <MuiClickAwayListener
+          onClickAway={() => {
+            onClose();
+          }}
+        >
+          <div>
+            <StyledModalHeader>
+              <StyledTitle>
+                <KeyboardIcon />
+                {t['Shortcuts']()}
+              </StyledTitle>
+
+              <ModalCloseButton
+                top={6}
+                right={6}
+                size={[24, 24]}
+                iconSize={[15, 15]}
+                onClick={() => {
+                  onClose();
+                }}
+              />
+            </StyledModalHeader>
+            <StyledSubTitle style={{ marginTop: 0 }}>
+              {t['General']()}
+            </StyledSubTitle>
+            {Object.entries(generalShortcuts).map(([title, shortcuts]) => {
+              return (
+                <StyledListItem key={title}>
+                  <span>{title}</span>
+                  <span>{shortcuts}</span>
+                </StyledListItem>
+              );
+            })}
+            <StyledSubTitle>{t['Page']()}</StyledSubTitle>
+            {Object.entries(pageShortcuts).map(([title, shortcuts]) => {
+              return (
+                <StyledListItem key={title}>
+                  <span>{title}</span>
+                  <span>{shortcuts}</span>
+                </StyledListItem>
+              );
+            })}
+            <StyledSubTitle>{t['Edgeless']()}</StyledSubTitle>
+            {Object.entries(edgelessShortcuts).map(([title, shortcuts]) => {
+              return (
+                <StyledListItem key={title}>
+                  <span>{title}</span>
+                  <span>{shortcuts}</span>
+                </StyledListItem>
+              );
+            })}
+            <StyledSubTitle>{t['Markdown Syntax']()}</StyledSubTitle>
+            {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
+              return (
+                <StyledListItem key={title}>
+                  <span>{title}</span>
+                  <span>{shortcuts}</span>
+                </StyledListItem>
+              );
+            })}
+          </div>
+        </MuiClickAwayListener>
+      </StyledShortcutsModal>
+    </MuiSlide>
+  );
+};

apps/core/src/components/pure/shortcuts-modal/style.ts

@@ -0,0 +1,56 @@
+import { displayFlex, styled } from '@affine/component';
+
+export const StyledShortcutsModal = styled('div')(() => ({
+  width: '288px',
+  height: '74vh',
+  paddingBottom: '28px',
+  backgroundColor: 'var(--affine-white)',
+  boxShadow: 'var(--affine-popover-shadow)',
+  borderRadius: `var(--affine-popover-radius)`,
+  overflow: 'auto',
+  boxRadius: '10px',
+  position: 'fixed',
+  right: '12px',
+  top: '0',
+  bottom: '0',
+  margin: 'auto',
+  zIndex: 'var(--affine-z-index-modal)',
+}));
+export const StyledTitle = styled('div')(() => ({
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: '500',
+  fontSize: 'var(--affine-font-sm)',
+  height: '44px',
+  ...displayFlex('center', 'center'),
+  svg: {
+    width: '20px',
+    marginRight: '14px',
+    color: 'var(--affine-primary-color)',
+  },
+}));
+export const StyledSubTitle = styled('div')(() => ({
+  fontWeight: '500',
+  fontSize: 'var(--affine-font-sm)',
+  height: '34px',
+  lineHeight: '36px',
+  marginTop: '28px',
+  padding: '0 16px',
+}));
+export const StyledModalHeader = styled('div')(() => ({
+  ...displayFlex('space-between', 'center'),
+  paddingTop: '8px 4px 0 4px',
+  width: '100%',
+  padding: '8px 16px 0 16px',
+  position: 'sticky',
+  left: '0',
+  top: '0',
+  background: 'var(--affine-white)',
+  transition: 'background-color 0.5s',
+}));
+
+export const StyledListItem = styled('div')(() => ({
+  height: '34px',
+  ...displayFlex('space-between', 'center'),
+  fontSize: 'var(--affine-font-sm)',
+  padding: '0 16px',
+}));

apps/core/src/components/pure/workspace-list-modal/index.tsx

@@ -0,0 +1,235 @@
+import {
+  Menu,
+  MenuItem,
+  Modal,
+  ModalCloseButton,
+  ModalWrapper,
+  Tooltip,
+} from '@affine/component';
+import { ScrollableContainer } from '@affine/component';
+import { WorkspaceList } from '@affine/component/workspace-list';
+import type {
+  AffineCloudWorkspace,
+  LocalWorkspace,
+} from '@affine/env/workspace';
+import { WorkspaceFlavour } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
+import { HelpIcon, ImportIcon, PlusIcon } from '@blocksuite/icons';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { useCallback, useRef } from 'react';
+
+import type { AllWorkspace } from '../../../shared';
+import { Footer } from '../footer';
+import {
+  StyledCreateWorkspaceCard,
+  StyledCreateWorkspaceCardPill,
+  StyledCreateWorkspaceCardPillContainer,
+  StyledCreateWorkspaceCardPillContent,
+  StyledCreateWorkspaceCardPillIcon,
+  StyledCreateWorkspaceCardPillTextSecondary,
+  StyledHelperContainer,
+  StyledModalContent,
+  StyledModalHeader,
+  StyledModalHeaderLeft,
+  StyledModalTitle,
+  StyledOperationWrapper,
+  StyleWorkspaceAdd,
+  StyleWorkspaceInfo,
+  StyleWorkspaceTitle,
+} from './styles';
+
+interface WorkspaceModalProps {
+  disabled?: boolean;
+  workspaces: RootWorkspaceMetadata[];
+  currentWorkspaceId: AllWorkspace['id'] | null;
+  open: boolean;
+  onClose: () => void;
+  onClickWorkspace: (workspace: RootWorkspaceMetadata['id']) => void;
+  onClickWorkspaceSetting: (workspace: RootWorkspaceMetadata['id']) => void;
+  onNewWorkspace: () => void;
+  onAddWorkspace: () => void;
+  onMoveWorkspace: (activeId: string, overId: string) => void;
+}
+
+const CreateWorkspaceCard = ({
+  onNewWorkspace,
+  onAddWorkspace,
+}: {
+  onNewWorkspace: () => void;
+  onAddWorkspace: () => void;
+}) => {
+  const t = useAFFiNEI18N();
+  const anchorEL = useRef<HTMLDivElement>(null);
+
+  if (runtimeConfig.enableSQLiteProvider && environment.isDesktop) {
+    return (
+      <Menu
+        placement="auto"
+        trigger={['click']}
+        zIndex={1000}
+        content={
+          <StyledCreateWorkspaceCardPillContainer>
+            <StyledCreateWorkspaceCardPill>
+              <MenuItem
+                style={{
+                  height: 'auto',
+                  padding: '8px 12px',
+                }}
+                onClick={onNewWorkspace}
+                data-testid="new-workspace"
+              >
+                <StyledCreateWorkspaceCardPillContent>
+                  <div>
+                    <p>{t['New Workspace']()}</p>
+                    <StyledCreateWorkspaceCardPillTextSecondary>
+                      <p>{t['Create your own workspace']()}</p>
+                    </StyledCreateWorkspaceCardPillTextSecondary>
+                  </div>
+                  <StyledCreateWorkspaceCardPillIcon>
+                    <PlusIcon />
+                  </StyledCreateWorkspaceCardPillIcon>
+                </StyledCreateWorkspaceCardPillContent>
+              </MenuItem>
+            </StyledCreateWorkspaceCardPill>
+            <StyledCreateWorkspaceCardPill>
+              <MenuItem
+                onClick={onAddWorkspace}
+                data-testid="add-workspace"
+                style={{
+                  height: 'auto',
+                  padding: '8px 12px',
+                }}
+              >
+                <StyledCreateWorkspaceCardPillContent>
+                  <div>
+                    <p>{t['Add Workspace']()}</p>
+                    <StyledCreateWorkspaceCardPillTextSecondary>
+                      <p>{t['Add Workspace Hint']()}</p>
+                    </StyledCreateWorkspaceCardPillTextSecondary>
+                  </div>
+                  <StyledCreateWorkspaceCardPillIcon>
+                    <ImportIcon />
+                  </StyledCreateWorkspaceCardPillIcon>
+                </StyledCreateWorkspaceCardPillContent>
+              </MenuItem>
+            </StyledCreateWorkspaceCardPill>
+          </StyledCreateWorkspaceCardPillContainer>
+        }
+      >
+        <StyledCreateWorkspaceCard
+          ref={anchorEL}
+          data-testid="add-or-new-workspace"
+        >
+          <StyleWorkspaceAdd className="add-icon">
+            <PlusIcon />
+          </StyleWorkspaceAdd>
+
+          <StyleWorkspaceInfo>
+            <StyleWorkspaceTitle>{t['New Workspace']()}</StyleWorkspaceTitle>
+            <p>{t['Create Or Import']()}</p>
+          </StyleWorkspaceInfo>
+        </StyledCreateWorkspaceCard>
+      </Menu>
+    );
+  } else {
+    return (
+      <div>
+        <StyledCreateWorkspaceCard
+          onClick={onNewWorkspace}
+          data-testid="new-workspace"
+        >
+          <StyleWorkspaceAdd className="add-icon">
+            <PlusIcon />
+          </StyleWorkspaceAdd>
+
+          <StyleWorkspaceInfo>
+            <StyleWorkspaceTitle>{t['New Workspace']()}</StyleWorkspaceTitle>
+            <p>{t['Create Or Import']()}</p>
+          </StyleWorkspaceInfo>
+        </StyledCreateWorkspaceCard>
+      </div>
+    );
+  }
+};
+
+export const WorkspaceListModal = ({
+  disabled,
+  open,
+  onClose,
+  workspaces,
+  onClickWorkspace,
+  onClickWorkspaceSetting,
+  onNewWorkspace,
+  onAddWorkspace,
+  currentWorkspaceId,
+  onMoveWorkspace,
+}: WorkspaceModalProps) => {
+  const t = useAFFiNEI18N();
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalWrapper
+        width={720}
+        height={690}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <StyledModalHeader>
+          <StyledModalHeaderLeft>
+            <StyledModalTitle>{t['My Workspaces']()}</StyledModalTitle>
+            <Tooltip
+              content={t['Workspace description']()}
+              placement="top-start"
+              disablePortal={true}
+            >
+              <StyledHelperContainer>
+                <HelpIcon />
+              </StyledHelperContainer>
+            </Tooltip>
+          </StyledModalHeaderLeft>
+
+          <StyledOperationWrapper>
+            <ModalCloseButton
+              data-testid="close-workspace-modal"
+              onClick={() => {
+                onClose();
+              }}
+              absolute={false}
+            />
+          </StyledOperationWrapper>
+        </StyledModalHeader>
+        <ScrollableContainer>
+          <StyledModalContent>
+            <WorkspaceList
+              disabled={disabled}
+              items={
+                workspaces.filter(
+                  ({ flavour }) => flavour !== WorkspaceFlavour.PUBLIC
+                ) as (AffineCloudWorkspace | LocalWorkspace)[]
+              }
+              currentWorkspaceId={currentWorkspaceId}
+              onClick={onClickWorkspace}
+              onSettingClick={onClickWorkspaceSetting}
+              onDragEnd={useCallback(
+                (event: DragEndEvent) => {
+                  const { active, over } = event;
+                  if (active.id !== over?.id) {
+                    onMoveWorkspace(active.id as string, over?.id as string);
+                  }
+                },
+                [onMoveWorkspace]
+              )}
+            />
+            <CreateWorkspaceCard
+              onNewWorkspace={onNewWorkspace}
+              onAddWorkspace={onAddWorkspace}
+            />
+          </StyledModalContent>
+        </ScrollableContainer>
+        <Footer />
+      </ModalWrapper>
+    </Modal>
+  );
+};

apps/core/src/components/pure/workspace-list-modal/styles.ts

@@ -0,0 +1,172 @@
+import { displayFlex, styled, textEllipsis } from '@affine/component';
+
+export const StyledSplitLine = styled('div')(() => {
+  return {
+    width: '1px',
+    height: '20px',
+    background: 'var(--affine-border-color)',
+    marginRight: '12px',
+  };
+});
+
+export const StyleWorkspaceInfo = styled('div')(() => {
+  return {
+    marginLeft: '15px',
+    width: '202px',
+    p: {
+      height: '20px',
+      fontSize: 'var(--affine-font-sm)',
+      ...displayFlex('flex-start', 'center'),
+    },
+    svg: {
+      marginRight: '10px',
+      fontSize: '16px',
+      flexShrink: 0,
+    },
+    span: {
+      flexGrow: 1,
+      ...textEllipsis(1),
+    },
+  };
+});
+
+export const StyleWorkspaceTitle = styled('div')(() => {
+  return {
+    fontSize: 'var(--affine-font-base)',
+    fontWeight: 600,
+    lineHeight: '24px',
+    marginBottom: '10px',
+    maxWidth: '200px',
+    ...textEllipsis(1),
+  };
+});
+
+export const StyledCreateWorkspaceCard = styled('div')(() => {
+  return {
+    width: '310px',
+    height: '124px',
+    marginBottom: '24px',
+    cursor: 'pointer',
+    padding: '16px',
+    boxShadow: 'var(--affine-shadow-1)',
+    borderRadius: '12px',
+    transition: 'all .1s',
+    background: 'var(--affine-white-80)',
+    ...displayFlex('flex-start', 'flex-start'),
+    color: 'var(--affine-text-secondary-color)',
+
+    ':hover': {
+      background: 'var(--affine-hover-color)',
+      color: 'var(--affine-text-primary-color)',
+      '.add-icon': {
+        borderColor: 'var(--affine-white)',
+        color: 'var(--affine-primary-color)',
+      },
+    },
+    '@media (max-width: 720px)': {
+      width: '100%',
+    },
+  };
+});
+export const StyledCreateWorkspaceCardPillContainer = styled('div')(() => {
+  return {
+    padding: '12px',
+    borderRadius: '10px',
+    display: 'flex',
+    margin: '-8px -4px',
+    flexFlow: 'column',
+    gap: '12px',
+    background: 'var(--affine-background-overlay-panel-color)',
+  };
+});
+
+export const StyledCreateWorkspaceCardPill = styled('div')(() => {
+  return {
+    borderRadius: '5px',
+    display: 'flex',
+    boxShadow: '0px 0px 6px 0px rgba(0, 0, 0, 0.1)',
+    background: 'var(--affine-background-primary-color)',
+  };
+});
+
+export const StyledCreateWorkspaceCardPillContent = styled('div')(() => {
+  return {
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  };
+});
+
+export const StyledCreateWorkspaceCardPillIcon = styled('div')(() => {
+  return {
+    fontSize: '20px',
+    width: '1em',
+    height: '1em',
+  };
+});
+
+export const StyledCreateWorkspaceCardPillTextSecondary = styled('div')(() => {
+  return {
+    fontSize: '12px',
+    color: 'var(--affine-text-secondary-color)',
+  };
+});
+
+export const StyledModalHeaderLeft = styled('div')(() => {
+  return { ...displayFlex('flex-start', 'center') };
+});
+export const StyledModalTitle = styled('div')(() => {
+  return {
+    fontWeight: 600,
+    fontSize: 'var(--affine-font-h6)',
+  };
+});
+
+export const StyledHelperContainer = styled('div')(() => {
+  return {
+    color: 'var(--affine-icon-color)',
+    marginLeft: '15px',
+    fontWeight: 400,
+    fontSize: 'var(--affine-font-h6)',
+    ...displayFlex('center', 'center'),
+  };
+});
+
+export const StyledModalContent = styled('div')({
+  height: '540px',
+  padding: '8px 40px',
+  ...displayFlex('space-between', 'flex-start', 'flex-start'),
+  flexWrap: 'wrap',
+});
+export const StyledOperationWrapper = styled('div')(() => {
+  return {
+    ...displayFlex('flex-end', 'center'),
+  };
+});
+
+export const StyleWorkspaceAdd = styled('div')(() => {
+  return {
+    width: '58px',
+    height: '58px',
+    borderRadius: '100%',
+    background: 'var(--affine-white-80)',
+    border: '1.5px dashed #f4f5fa',
+    transition: 'background .2s',
+    fontSize: '24px',
+    ...displayFlex('center', 'center'),
+    borderColor: 'var(--affine-white)',
+    color: 'var(--affine-primary-color)',
+  };
+});
+export const StyledModalHeader = styled('div')(() => {
+  return {
+    width: '100%',
+    marginTop: '10px',
+    left: 0,
+    top: 0,
+    borderRadius: '24px 24px 0 0',
+    padding: '10px 40px',
+    ...displayFlex('space-between', 'center'),
+  };
+});

apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.css.ts

@@ -0,0 +1,4 @@
+import { style } from '@vanilla-extract/css';
+export const workspaceAvatarStyle = style({
+  flexShrink: 0,
+});

apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/index.ts

@@ -0,0 +1 @@
+export * from './workspace-selector';

apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/styles.ts

@@ -0,0 +1,48 @@
+import { displayFlex, textEllipsis } from '@affine/component';
+import { styled } from '@affine/component';
+export const StyledSelectorContainer = styled('div')(() => {
+  return {
+    height: '58px',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0 6px',
+    margin: '0 -6px',
+    borderRadius: '8px',
+    color: 'var(--affine-text-primary-color)',
+    ':hover': {
+      cursor: 'pointer',
+      background: 'var(--affine-hover-color)',
+    },
+  };
+});
+
+export const StyledSelectorWrapper = styled('div')(() => {
+  return {
+    marginLeft: '8px',
+    flexGrow: 1,
+    overflow: 'hidden',
+  };
+});
+export const StyledWorkspaceName = styled('div')(() => {
+  return {
+    lineHeight: '24px',
+    fontWeight: 600,
+    userSelect: 'none',
+    ...textEllipsis(1),
+  };
+});
+
+export const StyledWorkspaceStatus = styled('div')(() => {
+  return {
+    height: '22px',
+    ...displayFlex('flex-start', 'center'),
+    fontSize: 'var(--affine-font-sm)',
+    color: 'var(--affine-text-secondary-color)',
+    userSelect: 'none',
+    svg: {
+      color: 'var(--affine-icon-color)',
+      fontSize: 'var(--affine-font-base)',
+      marginRight: '4px',
+    },
+  };
+});

apps/core/src/components/pure/workspace-slider-bar/WorkspaceSelector/workspace-selector.tsx

@@ -0,0 +1,79 @@
+import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
+import { CloudWorkspaceIcon, LocalWorkspaceIcon } from '@blocksuite/icons';
+import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
+import type React from 'react';
+import { useCallback } from 'react';
+
+import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
+import type { AllWorkspace } from '../../../../shared';
+import { workspaceAvatarStyle } from './index.css';
+import {
+  StyledSelectorContainer,
+  StyledSelectorWrapper,
+  StyledWorkspaceName,
+  StyledWorkspaceStatus,
+} from './styles';
+
+export type WorkspaceSelectorProps = {
+  currentWorkspace: AllWorkspace;
+  onClick: () => void;
+};
+
+/**
+ * @todo-Doma Co-locate WorkspaceListModal with {@link WorkspaceSelector},
+ *            because it's never used elsewhere.
+ */
+export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({
+  currentWorkspace,
+  onClick,
+}) => {
+  const [name] = useBlockSuiteWorkspaceName(
+    currentWorkspace?.blockSuiteWorkspace
+  );
+  const [workspace] = useCurrentWorkspace();
+
+  // Open dialog when `Enter` or `Space` pressed
+  // TODO-Doma Refactor with `@radix-ui/react-dialog` or other libraries that handle these out of the box and be accessible by default
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        // TODO-Doma Rename this callback to `onOpenDialog` or something to reduce ambiguity.
+        onClick();
+      }
+    },
+    [onClick]
+  );
+
+  return (
+    <StyledSelectorContainer
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      data-testid="current-workspace"
+    >
+      <WorkspaceAvatar
+        data-testid="workspace-avatar"
+        className={workspaceAvatarStyle}
+        size={40}
+        workspace={currentWorkspace?.blockSuiteWorkspace ?? null}
+      />
+      <StyledSelectorWrapper>
+        <StyledWorkspaceName data-testid="workspace-name">
+          {name}
+        </StyledWorkspaceName>
+        {workspace && (
+          <StyledWorkspaceStatus>
+            {workspace.flavour === 'local' ? (
+              <LocalWorkspaceIcon />
+            ) : (
+              <CloudWorkspaceIcon />
+            )}
+            {workspace.flavour === 'local' ? 'Local' : 'AFFiNE Cloud'}
+          </StyledWorkspaceStatus>
+        )}
+      </StyledSelectorWrapper>
+    </StyledSelectorContainer>
+  );
+};

apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -0,0 +1,271 @@
+import { Menu } from '@affine/component';
+import { MenuItem } from '@affine/component/app-sidebar';
+import {
+  EditCollectionModel,
+  useCollectionManager,
+  useSavedCollections,
+} from '@affine/component/page-list';
+import type { Collection } from '@affine/env/filter';
+import type { GetPageInfoById } from '@affine/env/page-info';
+import { WorkspaceSubPath } from '@affine/env/workspace';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  DeleteIcon,
+  FilterIcon,
+  MoreHorizontalIcon,
+  UnpinIcon,
+  ViewLayersIcon,
+} from '@blocksuite/icons';
+import type { PageMeta, Workspace } from '@blocksuite/store';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { useDroppable } from '@dnd-kit/core';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import type { ReactElement } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { useGetPageInfoById } from '../../../../hooks/use-get-page-info';
+import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
+import { filterPage } from '../../../../utils/filter';
+import type { CollectionsListProps } from '../index';
+import { Page } from './page';
+import * as styles from './styles.css';
+
+const Collections_DROP_AREA_PREFIX = 'collections-';
+const isCollectionsDropArea = (id?: string | number) => {
+  return typeof id === 'string' && id.startsWith(Collections_DROP_AREA_PREFIX);
+};
+export const processCollectionsDrag = (e: DragEndEvent) => {
+  if (
+    isCollectionsDropArea(e.over?.id) &&
+    String(e.active.id).startsWith('page-list-item-')
+  ) {
+    e.over?.data.current?.addToCollection?.(e.active.data.current?.pageId);
+  }
+};
+const CollectionOperations = ({
+  view,
+  showUpdateCollection,
+  setting,
+}: {
+  view: Collection;
+  showUpdateCollection: () => void;
+  setting: ReturnType<typeof useCollectionManager>;
+}) => {
+  const t = useAFFiNEI18N();
+  const actions = useMemo<
+    Array<
+      | {
+          icon: ReactElement;
+          name: string;
+          click: () => void;
+          className?: string;
+          element?: undefined;
+        }
+      | {
+          element: ReactElement;
+        }
+    >
+  >(
+    () => [
+      {
+        icon: <FilterIcon />,
+        name: t['Edit Filter'](),
+        click: showUpdateCollection,
+      },
+      {
+        icon: <UnpinIcon />,
+        name: t['Unpin'](),
+        click: () => {
+          return setting.updateCollection({
+            ...view,
+            pinned: false,
+          });
+        },
+      },
+      {
+        element: <div key="divider" className={styles.menuDividerStyle}></div>,
+      },
+      {
+        icon: <DeleteIcon />,
+        name: t['Delete'](),
+        click: () => {
+          return setting.deleteCollection(view.id);
+        },
+        className: styles.deleteFolder,
+      },
+    ],
+    [setting, showUpdateCollection, t, view]
+  );
+  return (
+    <div style={{ minWidth: 150 }}>
+      {actions.map(action => {
+        if (action.element) {
+          return action.element;
+        }
+        return (
+          <MenuItem
+            data-testid="collection-option"
+            key={action.name}
+            className={action.className}
+            icon={action.icon}
+            onClick={action.click}
+          >
+            {action.name}
+          </MenuItem>
+        );
+      })}
+    </div>
+  );
+};
+const CollectionRenderer = ({
+  collection,
+  pages,
+  workspace,
+  getPageInfo,
+}: {
+  collection: Collection;
+  pages: PageMeta[];
+  workspace: Workspace;
+  getPageInfo: GetPageInfoById;
+}) => {
+  const [collapsed, setCollapsed] = React.useState(true);
+  const setting = useCollectionManager(workspace.id);
+  const { jumpToSubPath } = useNavigateHelper();
+  const clickCollection = useCallback(() => {
+    jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
+    setting.selectCollection(collection.id);
+  }, [jumpToSubPath, workspace.id, setting, collection.id]);
+  const { setNodeRef, isOver } = useDroppable({
+    id: `${Collections_DROP_AREA_PREFIX}${collection.id}`,
+    data: {
+      addToCollection: (id: string) => {
+        setting.addPage(collection.id, id).catch(err => {
+          console.error(err);
+        });
+      },
+    },
+  });
+  const allPagesMeta = useMemo(
+    () => Object.fromEntries(pages.map(v => [v.id, v])),
+    [pages]
+  );
+  const [show, showUpdateCollection] = useState(false);
+  const allowList = useMemo(
+    () => new Set(collection.allowList),
+    [collection.allowList]
+  );
+  const excludeList = useMemo(
+    () => new Set(collection.excludeList),
+    [collection.excludeList]
+  );
+  const removeFromAllowList = useCallback(
+    (id: string) => {
+      return setting.updateCollection({
+        ...collection,
+        allowList: collection.allowList?.filter(v => v != id),
+      });
+    },
+    [collection, setting]
+  );
+  const addToExcludeList = useCallback(
+    (id: string) => {
+      return setting.updateCollection({
+        ...collection,
+        excludeList: [id, ...(collection.excludeList ?? [])],
+      });
+    },
+    [collection, setting]
+  );
+  const pagesToRender = pages.filter(
+    page => filterPage(collection, page) && !page.trash
+  );
+  return (
+    <Collapsible.Root open={!collapsed}>
+      <EditCollectionModel
+        propertiesMeta={workspace.meta.properties}
+        getPageInfo={getPageInfo}
+        init={collection}
+        onConfirm={setting.saveCollection}
+        open={show}
+        onClose={() => showUpdateCollection(false)}
+      />
+      <MenuItem
+        data-testid="collection-item"
+        ref={setNodeRef}
+        onCollapsedChange={setCollapsed}
+        active={isOver}
+        icon={<ViewLayersIcon />}
+        postfix={
+          <Menu
+            trigger="click"
+            placement="bottom-start"
+            content={
+              <CollectionOperations
+                view={collection}
+                showUpdateCollection={() => showUpdateCollection(true)}
+                setting={setting}
+              />
+            }
+          >
+            <div data-testid="collection-options" className={styles.more}>
+              <MoreHorizontalIcon></MoreHorizontalIcon>
+            </div>
+          </Menu>
+        }
+        collapsed={pagesToRender.length > 0 ? collapsed : undefined}
+        onClick={clickCollection}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <div>{collection.name}</div>
+        </div>
+      </MenuItem>
+      <Collapsible.Content>
+        <div style={{ marginLeft: 8 }}>
+          {pagesToRender.map(page => {
+            return (
+              <Page
+                inAllowList={allowList.has(page.id)}
+                removeFromAllowList={removeFromAllowList}
+                inExcludeList={excludeList.has(page.id)}
+                addToExcludeList={addToExcludeList}
+                allPageMeta={allPagesMeta}
+                page={page}
+                key={page.id}
+                workspace={workspace}
+              />
+            );
+          })}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
+export const CollectionsList = ({ workspace }: CollectionsListProps) => {
+  const metas = useBlockSuitePageMeta(workspace);
+  const { savedCollections } = useSavedCollections(workspace.id);
+  const getPageInfo = useGetPageInfoById(workspace);
+  return (
+    <div data-testid="collections" className={styles.wrapper}>
+      {savedCollections
+        .filter(v => v.pinned)
+        .map(view => {
+          return (
+            <CollectionRenderer
+              getPageInfo={getPageInfo}
+              key={view.id}
+              collection={view}
+              pages={metas}
+              workspace={workspace}
+            />
+          );
+        })}
+    </div>
+  );
+};

apps/core/src/components/pure/workspace-slider-bar/collections/index.tsx

@@ -0,0 +1,3 @@
+export * from './collections-list';
+export { Page } from './page';
+export { PageOperations } from './page';

apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx

@@ -0,0 +1,201 @@
+import { Menu } from '@affine/component';
+import { MenuItem } from '@affine/component/app-sidebar';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import {
+  DeleteIcon,
+  EdgelessIcon,
+  FilterMinusIcon,
+  FilterUndoIcon,
+  MoreHorizontalIcon,
+  PageIcon,
+} from '@blocksuite/icons';
+import type { PageMeta, Workspace } from '@blocksuite/store';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useBlockSuitePageReferences } from '@toeverything/hooks/use-block-suite-page-references';
+import { useAtomValue } from 'jotai/index';
+import type { ReactElement } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { pageSettingFamily } from '../../../../atoms';
+import { useBlockSuiteMetaHelper } from '../../../../hooks/affine/use-block-suite-meta-helper';
+import { useNavigateHelper } from '../../../../hooks/use-navigate-helper';
+import { ReferencePage } from '../components/reference-page';
+import * as styles from './styles.css';
+
+export const PageOperations = ({
+  page,
+  inAllowList,
+  addToExcludeList,
+  removeFromAllowList,
+  inExcludeList,
+  workspace,
+}: {
+  workspace: Workspace;
+  page: PageMeta;
+  inAllowList: boolean;
+  removeFromAllowList: (id: string) => void;
+  inExcludeList: boolean;
+  addToExcludeList: (id: string) => void;
+}) => {
+  const { removeToTrash } = useBlockSuiteMetaHelper(workspace);
+  const t = useAFFiNEI18N();
+  const actions = useMemo<
+    Array<
+      | {
+          icon: ReactElement;
+          name: string;
+          click: () => void;
+          className?: string;
+          element?: undefined;
+        }
+      | {
+          element: ReactElement;
+        }
+    >
+  >(
+    () => [
+      ...(inAllowList
+        ? [
+            {
+              icon: <FilterMinusIcon />,
+              name: t['Remove special filter'](),
+              click: () => removeFromAllowList(page.id),
+            },
+          ]
+        : []),
+      ...(!inExcludeList
+        ? [
+            {
+              icon: <FilterUndoIcon />,
+              name: t['Exclude from filter'](),
+              click: () => addToExcludeList(page.id),
+            },
+          ]
+        : []),
+      {
+        element: <div key="divider" className={styles.menuDividerStyle}></div>,
+      },
+      {
+        icon: <DeleteIcon />,
+        name: t['Delete'](),
+        click: () => {
+          removeToTrash(page.id);
+        },
+        className: styles.deleteFolder,
+      },
+    ],
+    [
+      inAllowList,
+      t,
+      inExcludeList,
+      removeFromAllowList,
+      page.id,
+      addToExcludeList,
+      removeToTrash,
+    ]
+  );
+  return (
+    <>
+      {actions.map(action => {
+        if (action.element) {
+          return action.element;
+        }
+        return (
+          <MenuItem
+            data-testid="collection-page-option"
+            key={action.name}
+            className={action.className}
+            icon={action.icon}
+            onClick={action.click}
+          >
+            {action.name}
+          </MenuItem>
+        );
+      })}
+    </>
+  );
+};
+export const Page = ({
+  page,
+  workspace,
+  allPageMeta,
+  inAllowList,
+  inExcludeList,
+  removeFromAllowList,
+  addToExcludeList,
+}: {
+  page: PageMeta;
+  inAllowList: boolean;
+  removeFromAllowList: (id: string) => void;
+  inExcludeList: boolean;
+  addToExcludeList: (id: string) => void;
+  workspace: Workspace;
+  allPageMeta: Record<string, PageMeta>;
+}) => {
+  const [collapsed, setCollapsed] = React.useState(true);
+  const params = useParams();
+  const { jumpToPage } = useNavigateHelper();
+  const t = useAFFiNEI18N();
+  const pageId = page.id;
+  const active = params.pageId === pageId;
+  const setting = useAtomValue(pageSettingFamily(pageId));
+  const icon = setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
+  const references = useBlockSuitePageReferences(workspace, pageId);
+  const clickPage = useCallback(() => {
+    jumpToPage(workspace.id, page.id);
+  }, [jumpToPage, page.id, workspace.id]);
+  const referencesToRender = references.filter(id => !allPageMeta[id]?.trash);
+  return (
+    <Collapsible.Root open={!collapsed}>
+      <MenuItem
+        data-testid="collection-page"
+        icon={icon}
+        onClick={clickPage}
+        className={styles.title}
+        active={active}
+        collapsed={referencesToRender.length > 0 ? collapsed : undefined}
+        onCollapsedChange={setCollapsed}
+        postfix={
+          <Menu
+            trigger="click"
+            placement="bottom-start"
+            content={
+              <div style={{ width: 220 }}>
+                <PageOperations
+                  inAllowList={inAllowList}
+                  removeFromAllowList={removeFromAllowList}
+                  inExcludeList={inExcludeList}
+                  addToExcludeList={addToExcludeList}
+                  page={page}
+                  workspace={workspace}
+                />
+              </div>
+            }
+          >
+            <div data-testid="collection-page-options" className={styles.more}>
+              <MoreHorizontalIcon></MoreHorizontalIcon>
+            </div>
+          </Menu>
+        }
+      >
+        {page.title || t['Untitled']()}
+      </MenuItem>
+      <Collapsible.Content>
+        <div style={{ marginLeft: 8 }}>
+          {referencesToRender.map(id => {
+            return (
+              <ReferencePage
+                key={id}
+                workspace={workspace}
+                pageId={id}
+                metaMapping={allPageMeta}
+                parentIds={new Set([pageId])}
+              />
+            );
+          })}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

apps/core/src/components/pure/workspace-slider-bar/collections/styles.css.ts

@@ -0,0 +1,54 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  userSelect: 'none',
+  // marginLeft:8,
+});
+export const collapsedIcon = style({
+  transition: 'transform 0.2s ease-in-out',
+  selectors: {
+    '&[data-collapsed="true"]': {
+      transform: 'rotate(-90deg)',
+    },
+  },
+});
+export const view = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+export const viewTitle = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+export const title = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+export const more = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: 4,
+  padding: 4,
+  ':hover': {
+    backgroundColor: 'var(--affine-hover-color)',
+  },
+});
+export const deleteFolder = style({
+  ':hover': {
+    color: 'var(--affine-error-color)',
+    backgroundColor: 'var(--affine-background-error-color)',
+  },
+});
+globalStyle(`${deleteFolder}:hover svg`, {
+  color: 'var(--affine-error-color)',
+});
+export const menuDividerStyle = style({
+  marginTop: '2px',
+  marginBottom: '2px',
+  marginLeft: '12px',
+  marginRight: '8px',
+  height: '1px',
+  background: 'var(--affine-border-color)',
+});

apps/core/src/components/pure/workspace-slider-bar/components/reference-page.tsx

@@ -0,0 +1,83 @@
+import { MenuLinkItem } from '@affine/component/app-sidebar';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
+import type { PageMeta, Workspace } from '@blocksuite/store';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { useBlockSuitePageReferences } from '@toeverything/hooks/use-block-suite-page-references';
+import { useAtomValue } from 'jotai/react';
+import { useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { pageSettingFamily } from '../../../../atoms';
+import * as styles from '../favorite/styles.css';
+interface ReferencePageProps {
+  workspace: Workspace;
+  pageId: string;
+  metaMapping: Record<string, PageMeta>;
+  parentIds: Set<string>;
+}
+
+export const ReferencePage = ({
+  workspace,
+  pageId,
+  metaMapping,
+  parentIds,
+}: ReferencePageProps) => {
+  const params = useParams();
+  const setting = useAtomValue(pageSettingFamily(pageId));
+  const active = params.pageId === pageId;
+  const icon = setting?.mode === 'edgeless' ? <EdgelessIcon /> : <PageIcon />;
+  const references = useBlockSuitePageReferences(workspace, pageId);
+  const referencesToShow = useMemo(() => {
+    return [
+      ...new Set(
+        references.filter(
+          ref => !parentIds.has(ref) && !metaMapping[ref]?.trash
+        )
+      ),
+    ];
+  }, [references, parentIds, metaMapping]);
+  const [collapsed, setCollapsed] = useState(true);
+  const collapsible = referencesToShow.length > 0;
+  const nestedItem = parentIds.size > 0;
+  const untitled = !metaMapping[pageId]?.title;
+  const t = useAFFiNEI18N();
+  return (
+    <Collapsible.Root
+      className={styles.favItemWrapper}
+      data-nested={nestedItem}
+      open={!collapsed}
+    >
+      <MenuLinkItem
+        data-type="favorite-list-item"
+        data-testid={`favorite-list-item-${pageId}`}
+        active={active}
+        href={`/workspace/${workspace.id}/${pageId}`}
+        icon={icon}
+        collapsed={collapsible ? collapsed : undefined}
+        onCollapsedChange={setCollapsed}
+      >
+        <span className={styles.label} data-untitled={untitled}>
+          {metaMapping[pageId]?.title || t['Untitled']()}
+        </span>
+      </MenuLinkItem>
+      {collapsible && (
+        <Collapsible.Content className={styles.collapsibleContent}>
+          <div className={styles.collapsibleContentInner}>
+            {referencesToShow.map(ref => {
+              return (
+                <ReferencePage
+                  key={ref}
+                  workspace={workspace}
+                  pageId={ref}
+                  metaMapping={metaMapping}
+                  parentIds={new Set([...parentIds, pageId])}
+                />
+              );
+            })}
+          </div>
+        </Collapsible.Content>
+      )}
+    </Collapsible.Root>
+  );
+};

apps/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx

@@ -0,0 +1,11 @@
+import { MenuItem } from '@affine/component/app-sidebar';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+
+export const EmptyItem = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <MenuItem disabled={true}>{t['Favorite pages for easy access']()}</MenuItem>
+  );
+};
+
+export default EmptyItem;

apps/core/src/components/pure/workspace-slider-bar/favorite/favorite-list.tsx

@@ -0,0 +1,48 @@
+import type { PageMeta } from '@blocksuite/store';
+import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
+import { useMemo } from 'react';
+
+import { ReferencePage } from '../components/reference-page';
+import type { FavoriteListProps } from '../index';
+import EmptyItem from './empty-item';
+
+export const FavoriteList = ({ workspace }: FavoriteListProps) => {
+  const metas = useBlockSuitePageMeta(workspace);
+
+  const favoriteList = useMemo(
+    () => metas.filter(p => p.favorite && !p.trash),
+    [metas]
+  );
+
+  const metaMapping = useMemo(
+    () =>
+      metas.reduce(
+        (acc, meta) => {
+          acc[meta.id] = meta;
+          return acc;
+        },
+        {} as Record<string, PageMeta>
+      ),
+    [metas]
+  );
+
+  return (
+    <>
+      {favoriteList.map((pageMeta, index) => {
+        return (
+          <ReferencePage
+            key={`${pageMeta}-${index}`}
+            metaMapping={metaMapping}
+            pageId={pageMeta.id}
+            // memo?
+            parentIds={new Set()}
+            workspace={workspace}
+          />
+        );
+      })}
+      {favoriteList.length === 0 && <EmptyItem />}
+    </>
+  );
+};
+
+export default FavoriteList;

apps/core/src/components/pure/workspace-slider-bar/favorite/index.tsx

@@ -0,0 +1 @@
+export * from './favorite-list';

apps/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts

@@ -0,0 +1,57 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+export const label = style({
+  selectors: {
+    '&[data-untitled="true"]': {
+      opacity: 0.6,
+    },
+  },
+});
+
+export const favItemWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+  selectors: {
+    '&[data-nested="true"]': {
+      marginLeft: '12px',
+      width: 'calc(100% - 12px)',
+    },
+  },
+});
+
+const slideDown = keyframes({
+  '0%': {
+    height: '0px',
+  },
+  '100%': {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+});
+
+const slideUp = keyframes({
+  '0%': {
+    height: 'var(--radix-collapsible-content-height)',
+  },
+  '100%': {
+    height: '0px',
+  },
+});
+
+export const collapsibleContent = style({
+  overflow: 'hidden',
+  selectors: {
+    '&[data-state="open"]': {
+      animation: `${slideDown} 0.2s ease-out`,
+    },
+    '&[data-state="closed"]': {
+      animation: `${slideUp} 0.2s ease-out`,
+    },
+  },
+});
+
+export const collapsibleContentInner = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+});