feat: add sync panel (#1485)

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

@@ -22,6 +22,7 @@ import { CollaborationPanel } from './panel/collaboration';
 import { ExportPanel } from './panel/export';
 import { GeneralPanel } from './panel/general';
 import { PublishPanel } from './panel/publish';
+import { SyncPanel } from './panel/sync';
 import {
   StyledIndicator,
   StyledSettingContainer,
@@ -52,6 +53,12 @@ const panelMap = {
     name: 'General',
     ui: GeneralPanel,
   },
+  [settingPanel.Sync]: {
+    name: 'Sync',
+    enable: (flavour: RemWorkspaceFlavour) =>
+      flavour === RemWorkspaceFlavour.AFFINE,
+    ui: SyncPanel,
+  },
   [settingPanel.Collaboration]: {
     name: 'Collaboration',
     ui: CollaborationPanel,
@@ -67,6 +74,7 @@ const panelMap = {
 } satisfies {
   [Key in SettingPanel]: {
     name: string;
+    enable?: (flavour: RemWorkspaceFlavour) => boolean;
     ui: React.FC<PanelProps>;
   };
 };
@@ -140,7 +148,7 @@ export const WorkspaceSettingDetail: React.FC<
     >
       <StyledTabButtonWrapper>
         {Object.entries(panelMap).map(([key, value]) => {
-          if (!isAffine && key === 'Sync') {
+          if ('enable' in value && !value.enable(workspace.flavour)) {
             return null;
           }
           return (

apps/web/src/components/affine/workspace-setting-detail/panel/sync/index.tsx

@@ -0,0 +1,50 @@
+import { Content, FlexWrapper, styled } from '@affine/component';
+import { Trans, useTranslation } from '@affine/i18n';
+import React from 'react';
+
+import { useCurrentUser } from '../../../../../hooks/current/use-current-user';
+import { useBlockSuiteWorkspaceAvatarUrl } from '../../../../../hooks/use-blocksuite-workspace-avatar-url';
+import { useBlockSuiteWorkspaceName } from '../../../../../hooks/use-blocksuite-workspace-name';
+import { RemWorkspaceFlavour } from '../../../../../shared';
+import { WorkspaceAvatar } from '../../../../pure/footer';
+import { PanelProps } from '../../index';
+
+export const StyledWorkspaceName = styled('span')(({ theme }) => {
+  return {
+    fontWeight: '400',
+    fontSize: theme.font.h6,
+  };
+});
+
+export const SyncPanel: React.FC<PanelProps> = ({ workspace }) => {
+  if (workspace.flavour !== RemWorkspaceFlavour.AFFINE) {
+    throw new TypeError('SyncPanel can only be used with Affine workspace');
+  }
+  const [name] = useBlockSuiteWorkspaceName(workspace.blockSuiteWorkspace);
+  const [avatar] = useBlockSuiteWorkspaceAvatarUrl(
+    workspace.blockSuiteWorkspace
+  );
+  const user = useCurrentUser();
+  const { t } = useTranslation();
+  return (
+    <>
+      <FlexWrapper alignItems="center" style={{ marginBottom: '12px' }}>
+        <WorkspaceAvatar
+          size={32}
+          name={name}
+          avatar={avatar}
+          style={{ marginRight: '12px' }}
+        />
+        <StyledWorkspaceName>{name}</StyledWorkspaceName>
+        &nbsp;
+        <Content weight={500}>{t('is a Cloud Workspace')}</Content>
+      </FlexWrapper>
+      <Trans i18nKey="Cloud Workspace Description">
+        All data will be synchronised and saved to the AFFiNE account
+        {{
+          email: user?.email,
+        }}
+      </Trans>
+    </>
+  );
+};

apps/web/src/shared/index.ts

@@ -94,8 +94,7 @@ export const settingPanel = {
   Collaboration: 'collaboration',
   Publish: 'publish',
   Export: 'export',
-  // TODO: add it back for desktop version
-  // Sync = 'sync'
+  Sync: 'sync',
 } as const;
 export const settingPanelValues = [...Object.values(settingPanel)] as const;
 export type SettingPanel = (typeof settingPanel)[keyof typeof settingPanel];