refactor!: remove next.js (#3267)

2026-02-17 06:16:59 +08:00 · 2023-07-19 00:53:10 +08:00
parent 79227a1e7c
commit 47f12f77f2
296 changed files with 4115 additions and 3617 deletions
--- a/apps/core/src/components/affine/README.md
+++ b/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>
+  );
+};
+```
--- a/apps/core/src/components/affine/affine-error-eoundary.tsx
+++ b/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;
+  }
+}
--- a/apps/core/src/components/affine/app-container.tsx
+++ b/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}
+    />
+  );
+};
--- a/apps/core/src/components/affine/create-workspace-modal/index.css.ts
+++ b/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',
+});
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/enable-affine-cloud-modal/style.ts
+++ b/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',
+  };
+});
--- a/apps/core/src/components/affine/language-menu/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/delete/style.ts
+++ b/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',
+//   };
+// });
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx
+++ b/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);
+          }}
+        />
+      )}
+    </>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/leave/style.ts
+++ b/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',
+  };
+});
--- a/apps/core/src/components/affine/new-workspace-setting-detail/export.tsx
+++ b/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>
+    </>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/index.tsx
+++ b/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>
+    </>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/profile.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
+++ b/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();
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/new-workspace-setting-detail/style.css.ts
+++ b/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',
+    },
+  },
+});
--- a/apps/core/src/components/affine/onboarding-modal.tsx
+++ b/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} />
+  );
+});
--- a/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/account-setting/index.tsx
@@ -0,0 +1,3 @@
+export const AccountSetting = () => {
+  return <div>AccountSetting</div>;
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/about/config.tsx
+++ b/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/',
+  },
+];
--- a/apps/core/src/components/affine/setting-modal/general-setting/about/icons.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/about/index.tsx
+++ b/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>
+    </>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/about/style.css.ts
+++ b/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',
+});
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/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}
+    </>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/style.css.ts
+++ b/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',
+});
--- a/apps/core/src/components/affine/setting-modal/general-setting/index.tsx
+++ b/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;
+  }
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/plugins/index.tsx
+++ b/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>;
+      })}
+    </>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/plugins/style.css.ts
+++ b/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',
+});
--- a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx
+++ b/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>
+    </>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/general-setting/shortcuts/style.css.ts
+++ b/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',
+});
--- a/apps/core/src/components/affine/setting-modal/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/style.css.ts
+++ b/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,
+});
--- a/apps/core/src/components/affine/setting-modal/style.css.ts
+++ b/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',
+});
--- a/apps/core/src/components/affine/setting-modal/workspace-setting/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/tmp-disable-affine-cloud-modal/style.ts
+++ b/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%',
+  };
+});
--- a/apps/core/src/components/affine/transform-workspace-to-affine-modal/index.tsx
+++ b/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>
+  );
+};
--- a/apps/core/src/components/affine/transform-workspace-to-affine-modal/style.ts
+++ b/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',
+  };
+});
--- a/apps/core/src/components/affine/workspace-setting-detail/panel/general/icons.tsx
+++ b/apps/core/src/components/affine/workspace-setting-detail/panel/general/icons.tsx