chore: add translation function

packages/app/src/components/workspace-modal/Footer.tsx

@@ -4,6 +4,7 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { IconButton } from '@/ui/button';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyledFooter, StyleUserInfo, StyleSignIn } from './styles';
+import { useTranslation } from '@affine/i18n';
 
 export const Footer = ({
   onLogin,
@@ -13,6 +14,7 @@ export const Footer = ({
   onLogout: () => void;
 }) => {
   const { user } = useAppState();
+  const { t } = useTranslation();
 
   return (
     <StyledFooter>
@@ -48,7 +50,7 @@ export const Footer = ({
           <span>
             <CloudInsyncIcon fontSize={16} />
           </span>
-          Sign in to sync with AFFINE Cloud
+          {t('Sign in')}
         </StyleSignIn>
       )}
     </StyledFooter>

packages/app/src/components/workspace-modal/WorkspaceCard.tsx

@@ -9,6 +9,7 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useAppState } from '@/providers/app-state-provider';
 import { StyleWorkspaceInfo, StyleWorkspaceTitle, StyledCard } from './styles';
 import { Wrapper } from '@/ui/layout';
+import { useTranslation } from '@affine/i18n';
 
 export const WorkspaceCard = ({
   workspaceData,
@@ -18,7 +19,7 @@ export const WorkspaceCard = ({
   onClick: (data: WorkspaceUnit) => void;
 }) => {
   const { currentWorkspace, isOwner } = useAppState();
-
+  const { t } = useTranslation();
   return (
     <StyledCard
       onClick={() => {
@@ -38,29 +39,30 @@ export const WorkspaceCard = ({
           workspaceData.provider === 'local' ? (
             <p>
               <LocalIcon />
-              Local Workspace
+              {t('Local Workspace')}
             </p>
           ) : (
             <p>
               <CloudIcon />
-              Cloud Workspace
+              {t('Cloud Workspace')}
             </p>
           )
         ) : (
           <p>
             <UsersIcon fontSize={20} color={'#FF646B'} />
-            Joined Workspace
+            {t('Joined Workspace')}
           </p>
         )}
         {workspaceData.provider === 'local' && (
           <p>
             <OfflineIcon />
-            All data can be accessed offline
+            {t('Available Offline')}
           </p>
         )}
         {workspaceData.published && (
           <p>
-            <PublishIcon fontSize={16} /> Published to Web
+            <PublishIcon fontSize={16} />
+            {t('Published to Web')}
           </p>
         )}
       </StyleWorkspaceInfo>

packages/app/src/components/workspace-setting/PublishPage.tsx

@@ -1,5 +1,5 @@
 import {
-  StyledCopyButtonContainer,
+  StyledButtonContainer,
   StyledPublishContent,
   StyledPublishCopyContainer,
   StyledPublishExplanation,
@@ -24,13 +24,13 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
     try {
       await publishWorkspace(workspace.id.toString(), flag);
     } catch (e) {
-      toast('Failed to publish workspace');
+      toast(t('Failed to publish workspace'));
     }
   };
 
   const copyUrl = () => {
     navigator.clipboard.writeText(shareUrl);
-    toast('Copied url to clipboard');
+    toast(t('Copied link to clipboard'));
   };
 
   return (
@@ -43,8 +43,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             {workspace.published ? (
               <>
                 <StyledPublishExplanation>
-                  The current workspace has been published to the web, everyone
+                  {t('Published Description')}
-                  can view the contents of this workspace through the link.
                 </StyledPublishExplanation>
 
                 <StyledPublishCopyContainer>
@@ -52,11 +51,11 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                     {t('Share with link')}
                   </StyledSettingH2>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
-                  <StyledCopyButtonContainer>
+                  <StyledButtonContainer>
                     <Button onClick={copyUrl} type="primary" shape="circle">
                       {t('Copy Link')}
                     </Button>
-                  </StyledCopyButtonContainer>
+                  </StyledButtonContainer>
                 </StyledPublishCopyContainer>
               </>
             ) : (
@@ -103,7 +102,7 @@ export const PublishPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
         <StyledPublishContent>
           <>
             <StyledPublishExplanation>
-              Publishing to web requires AFFiNE Cloud service.
+              {t('Publishing')}
             </StyledPublishExplanation>
 
             <div style={{ marginTop: '72px' }}>

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -1,9 +1,9 @@
 import {
-  StyleAsync,
+  StyledButtonContainer,
   StyledPublishContent,
   StyledPublishExplanation,
   StyledWorkspaceName,
-  StyledWorkspaceType,
+  StyledEmail,
 } from './style';
 import { DownloadIcon } from '@blocksuite/icons';
 import { Button } from '@/ui/button';
@@ -26,27 +26,38 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 workspaceUnit={workspace}
                 style={{ marginRight: '12px' }}
               />
-              <StyledWorkspaceName>{workspace.name};</StyledWorkspaceName>
+              <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
-              <StyledWorkspaceType>is a Local Workspace.</StyledWorkspaceType>
+              <span>{t('is a Local Workspace')}</span>
             </StyledPublishExplanation>
-            <StyledWorkspaceType>
+            <div>{t('Local Workspace Description')}</div>
-              All data is stored on the current device. You can enable AFFiNE
+            <StyledButtonContainer>
-              Cloud for this workspace to keep data in sync with the cloud.
-            </StyledWorkspaceType>
-            <StyleAsync>
               <EnableWorkspaceButton></EnableWorkspaceButton>
-            </StyleAsync>
+            </StyledButtonContainer>
           </>
         ) : (
           <>
             <StyledPublishExplanation>
-              <Trans i18nKey="Sync Description2">
+              <WorkspaceUnitAvatar
-                <code>{{ workspaceName: workspace.name ?? 'Affine' }}</code>
+                size={32}
-                is Cloud Workspace. All data will be synchronised and saved to
+                name={workspace.name}
-                the AFFiNE
+                workspaceUnit={workspace}
-              </Trans>
+                style={{ marginRight: '12px' }}
+              />
+              <StyledWorkspaceName>{workspace.name}&nbsp;</StyledWorkspaceName>
+              <span>{t('is a Cloud Workspace')}</span>
             </StyledPublishExplanation>
-            <StyleAsync>
+            <div>
+              <Trans i18nKey="Cloud Workspace Description">
+                All data will be synchronised and saved to the AFFiNE account
+                <StyledEmail>
+                  {{
+                    email: '{' + workspace.owner?.email + '}.',
+                  }}
+                </StyledEmail>
+              </Trans>
+            </div>
+
+            <StyledButtonContainer>
               <Menu
                 content={
                   <>
@@ -56,7 +67,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                       }}
                       icon={<DownloadIcon />}
                     >
-                      {t('Download data to device', { CoreOrAll: 'core' })}
+                      {t('Download data', { CoreOrAll: t('core') })}
                     </MenuItem>
                     <MenuItem
                       onClick={() => {
@@ -64,7 +75,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                       }}
                       icon={<DownloadIcon />}
                     >
-                      {t('Download data to device', { CoreOrAll: 'all' })}
+                      {t('Download data', { CoreOrAll: t('all') })}
                     </MenuItem>
                   </>
                 }
@@ -72,10 +83,10 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                 disablePortal={true}
               >
                 <Button type="primary">
-                  {t('Download data to device', { CoreOrAll: 'all' })}
+                  {t('Download data', { CoreOrAll: '' })}
                 </Button>
               </Menu>
-            </StyleAsync>
+            </StyledButtonContainer>
           </>
         )}
       </StyledPublishContent>

packages/app/src/components/workspace-setting/general/General.tsx

@@ -50,7 +50,7 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
   return workspace ? (
     <StyleGeneral>
       <div style={{ flex: 1, overflow: 'auto' }}>
-        <StyledSettingH2>Workspace Avatar</StyledSettingH2>
+        <StyledSettingH2>{t('Workspace Avatar')}</StyledSettingH2>
         <StyledSettingAvatarContent>
           <StyledAvatar>
             <Upload
@@ -106,18 +106,18 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
             currentWorkspace?.provider === 'local' ? (
               <StyledProviderInfo>
                 <LocalIcon />
-                Local Workspace
+                {t('Local Workspace')}
               </StyledProviderInfo>
             ) : (
               <StyledProviderInfo>
                 <CloudIcon />
-                All data can be accessed offline
+                {t('Available Offline')}
               </StyledProviderInfo>
             )
           ) : (
             <StyledProviderInfo>
               <UsersIcon fontSize={20} color={'#FF646B'} />
-              Joined Workspace
+              {t('Joined Workspace')}
             </StyledProviderInfo>
           )}
         </StyledSettingInputContainer>

packages/app/src/components/workspace-setting/member/MembersPage.tsx

@@ -89,9 +89,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                     <StyledMemberRoleContainer>
                       {member.accepted
                         ? member.type !== 99
-                          ? 'Member'
+                          ? t('Member')
-                          : 'Workspace Owner'
+                          : t('Owner')
-                        : 'Pending'}
+                        : t('Pending')}
                     </StyledMemberRoleContainer>
                     <StyledMoreVerticalButton>
                       <Menu
@@ -100,9 +100,9 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                             <MenuItem
                               onClick={async () => {
                                 const confirmRemove = await confirm({
-                                  title: 'Delete Member?',
+                                  title: t('Delete Member?'),
-                                  content: `will delete member`,
+                                  content: t('will delete member'),
-                                  confirmText: 'Delete',
+                                  confirmText: t('Delete'),
                                   confirmType: 'danger',
                                 });
 
@@ -110,11 +110,15 @@ export const MembersPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                                   return;
                                 }
                                 await removeMember(member.id);
-                                toast(`${user.name} has been removed`);
+                                toast(
+                                  t('Member has been removed', {
+                                    name: user.name,
+                                  })
+                                );
                               }}
                               icon={<TrashIcon />}
                             >
-                              Delete
+                              {t('Delete')}
                             </MenuItem>
                           </>
                         }

packages/app/src/components/workspace-setting/style.ts

@@ -90,7 +90,7 @@ export const StyledSettingH2 = styled('h2')<{
   marginBottom?: number;
 }>(({ marginTop, marginBottom, theme }) => {
   return {
-    fontWeight: '500',
+    // fontWeight: '500',
     fontSize: theme.font.base,
     lineHeight: theme.font.lineHeightBase,
     marginTop: marginTop ? `${marginTop}px` : '0px',
@@ -101,24 +101,18 @@ export const StyledSettingH2 = styled('h2')<{
 export const StyledPublishExplanation = styled('div')(() => {
   return {
     paddingRight: '48px',
-    fontWeight: '500',
+    // fontWeight: '500',
-    fontSize: '18px',
-    lineHeight: '26px',
     marginBottom: '22px',
   };
 });
 export const StyledWorkspaceName = styled('span')(() => {
   return {
     fontWeight: '400',
-    fontSize: '18px',
-    lineHeight: '26px',
   };
 });
 export const StyledWorkspaceType = styled('span')(() => {
   return {
-    fontWeight: '500',
+    // fontWeight: '500',
-    fontSize: '18px',
-    lineHeight: '26px',
   };
 });
 
@@ -136,21 +130,23 @@ export const StyledStopPublishContainer = styled('div')(() => {
   };
 });
 
-export const StyledCopyButtonContainer = styled('div')(() => {
+export const StyledButtonContainer = styled('div')(() => {
   return {
     marginTop: '64px',
   };
 });
+export const StyledEmail = styled('span')(() => {
+  return {
+    color: '#E8178A',
+  };
+});
 
-export const StyledPublishContent = styled('div')(() => {
+export const StyledPublishContent = styled('div')(({ theme }) => {
   return {
     display: 'flex',
+    fontWeight: '500',
     flexDirection: 'column',
-  };
+    fontSize: theme.font.base,
-});
+    lineHeight: theme.font.lineHeightBase,
-
-export const StyleAsync = styled('div')(() => {
-  return {
-    marginTop: '64px',
   };
 });

packages/app/src/hooks/use-workspace-helper.ts

@@ -3,9 +3,11 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 import { toast } from '@/ui/toast';
 import { WorkspaceUnit } from '@affine/datacenter';
 import router from 'next/router';
+import { useTranslation } from '@affine/i18n';
 
 export const useWorkspaceHelper = () => {
   const { confirm } = useConfirm();
+  const { t } = useTranslation();
   const { dataCenter, currentWorkspace, user, login } = useAppState();
   const createWorkspace = async (name: string) => {
     const workspaceInfo = await dataCenter.createWorkspace({
@@ -38,10 +40,10 @@ export const useWorkspaceHelper = () => {
 
   const enableWorkspace = async () => {
     confirm({
-      title: 'Enable AFFiNE Cloud?',
+      title: `${t('Enable AFFiNE Cloud')}?`,
-      content: `If enabled, the data in this workspace will be backed up and synchronized via AFFiNE Cloud.`,
+      content: t('Enable AFFiNE Cloud Description'),
-      confirmText: user ? 'Enable' : 'Sign in and Enable',
+      confirmText: user ? t('Enable') : t('Sign in and Enable'),
-      cancelText: 'Skip',
+      cancelText: t('Skip'),
       confirmType: 'primary',
       buttonDirection: 'column',
     }).then(async confirm => {
@@ -53,7 +55,7 @@ export const useWorkspaceHelper = () => {
           currentWorkspace
         );
         workspace && router.push(`/workspace/${workspace.id}/setting`);
-        toast('Enabled success');
+        toast(t('Enabled success'));
       }
     });
   };

packages/app/src/pages/workspace/[workspaceId]/setting.tsx

@@ -20,41 +20,37 @@ import { WorkspaceUnit } from '@affine/datacenter';
 import { useTranslation } from '@affine/i18n';
 import { PageListHeader } from '@/components/header';
 
-type TabNames = 'General' | 'Sync' | 'Collaboration' | 'Publish' | 'Export';
+const useTabMap = () => {
-
-const tabMap: {
-  name: TabNames;
-  panelRender: (workspace: WorkspaceUnit) => ReactNode;
-}[] = [
-  {
-    name: 'General',
-    panelRender: workspace => <GeneralPage workspace={workspace} />,
-  },
-  {
-    name: 'Sync',
-    panelRender: workspace => <SyncPage workspace={workspace} />,
-  },
-  {
-    name: 'Collaboration',
-    panelRender: workspace => <MembersPage workspace={workspace} />,
-  },
-  {
-    name: 'Publish',
-    panelRender: workspace => <PublishPage workspace={workspace} />,
-  },
-
-  {
-    name: 'Export',
-    panelRender: workspace => <ExportPage workspace={workspace} />,
-  },
-];
-
-const WorkspaceSetting = () => {
   const { t } = useTranslation();
-  const { currentWorkspace, isOwner } = useAppState();
+  const { isOwner } = useAppState();
+  const tabMap: {
+    name: string;
+    panelRender: (workspace: WorkspaceUnit) => ReactNode;
+  }[] = [
+    {
+      name: t('General'),
+      panelRender: workspace => <GeneralPage workspace={workspace} />,
+    },
+    {
+      name: t('Sync'),
+      panelRender: workspace => <SyncPage workspace={workspace} />,
+    },
+    {
+      name: t('Collaboration'),
+      panelRender: workspace => <MembersPage workspace={workspace} />,
+    },
+    {
+      name: t('Publish'),
+      panelRender: workspace => <PublishPage workspace={workspace} />,
+    },
 
-  const [activeTab, setActiveTab] = useState<TabNames>(tabMap[0].name);
+    {
-  const handleTabChange = (tab: TabNames) => {
+      name: t('Export'),
+      panelRender: workspace => <ExportPage workspace={workspace} />,
+    },
+  ];
+  const [activeTab, setActiveTab] = useState<string>(tabMap[0].name);
+  const handleTabChange = (tab: string) => {
     setActiveTab(tab);
   };
 
@@ -62,7 +58,7 @@ const WorkspaceSetting = () => {
     tab => tab.name === activeTab
   )?.panelRender;
   let tableArr: {
-    name: TabNames;
+    name: string;
     panelRender: (workspace: WorkspaceUnit) => ReactNode;
   }[] = tabMap;
   if (!isOwner) {
@@ -73,6 +69,14 @@ const WorkspaceSetting = () => {
       },
     ];
   }
+  return { activeTabPanelRender, tableArr, handleTabChange, activeTab };
+};
+
+const WorkspaceSetting = () => {
+  const { t } = useTranslation();
+  const { currentWorkspace } = useAppState();
+  const { activeTabPanelRender, tableArr, handleTabChange, activeTab } =
+    useTabMap();
   return (
     <>
       <StyledSettingContainer>