chore: update i18n keys

packages/app/src/components/header/Header.tsx

@@ -7,7 +7,7 @@ import {
   StyledCloseButton,
 } from './styles';
 import CloseIcon from '@mui/icons-material/Close';
-import { getWarningMessage, shouldShowWarning } from './utils';
+import { useWarningMessage, shouldShowWarning } from './utils';
 import EditorOptionMenu from './header-right-items/EditorOptionMenu';
 import TrashButtonGroup from './header-right-items/TrashButtonGroup';
 import ThemeModeSwitch from './header-right-items/theme-mode-switch';
@@ -22,7 +22,7 @@ const BrowserWarning = ({
 }) => {
   return (
     <StyledBrowserWarning show={show}>
-      {getWarningMessage()}
+      {useWarningMessage()}
       <StyledCloseButton onClick={onClose}>
         <CloseIcon />
       </StyledCloseButton>

packages/app/src/components/header/utils.tsx

@@ -1,4 +1,5 @@
 import getIsMobile from '@/utils/get-is-mobile';
+import { Trans, useTranslation } from 'react-i18next';
 // Inspire by https://stackoverflow.com/a/4900484/8415727
 const getChromeVersion = () => {
   const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
@@ -19,20 +20,20 @@ export const shouldShowWarning = () => {
   );
 };
 
-export const getWarningMessage = () => {
+export const useWarningMessage = () => {
+  const { t } = useTranslation();
   if (!getIsChrome()) {
     return (
       <span>
-        We recommend the <strong>Chrome</strong> browser for optimal experience.
+        <Trans i18nKey="recommendBrowser">
+          We recommend the <strong>Chrome</strong> browser for optimal
+          experience.
+        </Trans>
       </span>
     );
   }
   if (getChromeVersion() < minimumChromeVersion) {
-    return (
+    return <span>{t('upgradeBrowser')}</span>;
-      <span>
-        Please upgrade to the latest version of Chrome for the best experience.
-      </span>
-    );
   }
   return '';
 };

packages/app/src/components/invite-members/index.tsx

@@ -7,6 +7,7 @@ import { useState } from 'react';
 // import { getDataCenter } from '@affine/datacenter';
 import { Avatar } from '@mui/material';
 import { setMember } from '@/hooks/mock-data/mock';
+import { useTranslation } from 'react-i18next';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
@@ -54,6 +55,7 @@ export const InviteMembers = ({
   const [showTip, setShowTip] = useState<boolean>(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [userData, setUserData] = useState<any>({});
+  const { t } = useTranslation();
   const inputChange = (value: string) => {
     setShowMember(true);
     if (gmailReg.test(value)) {
@@ -101,7 +103,7 @@ export const InviteMembers = ({
             />
           </Header>
           <Content>
-            <ContentTitle>Invite members</ContentTitle>
+            <ContentTitle>{t('Invite Members')}</ContentTitle>
             <InviteBox>
               <Input
                 width={360}
@@ -110,12 +112,12 @@ export const InviteMembers = ({
                 onBlur={() => {
                   setShowMember(false);
                 }}
-                placeholder="Search mail (Gmail support only)"
+                placeholder={t('Invite placeholder')}
               ></Input>
               {showMember ? (
                 <Members>
                   {showTip ? (
-                    <NoFind>Non-Gmail is not supported</NoFind>
+                    <NoFind>{t('Non-Gmail is not supported')}</NoFind>
                   ) : (
                     <Member>
                       {userData?.avatar_url ? (
@@ -154,7 +156,7 @@ export const InviteMembers = ({
                 //   });
               }}
             >
-              Invite
+              {t('Invite')}
             </Button>
           </Footer>
         </ModalWrapper>

packages/app/src/components/loading/PageLoading.tsx

@@ -1,5 +1,6 @@
 import { styled } from '@/styles';
 import Loading from './Loading';
+import { useTranslation } from 'react-i18next';
 
 // Used for the full page loading
 const StyledLoadingContainer = styled('div')(() => {
@@ -17,12 +18,13 @@ const StyledLoadingContainer = styled('div')(() => {
   };
 });
 
-export const PageLoading = ({ text = 'Loading...' }: { text?: string }) => {
+export const PageLoading = ({ text }: { text?: string }) => {
+  const { t } = useTranslation();
   return (
     <StyledLoadingContainer>
       <div className="wrapper">
         <Loading />
-        <h1>{text}</h1>
+        <h1>{text ? text : t('Loading')}</h1>
       </div>
     </StyledLoadingContainer>
   );

packages/app/src/components/login-modal/LoginOptionButton.tsx

@@ -3,9 +3,10 @@ import { styled } from '@/styles';
 import { Button } from '@/ui/button';
 // import { useModal } from '@/providers/GlobalModalProvider';
 import { GoogleIcon, StayLogOutIcon } from './Icons';
-
+import { useTranslation } from 'react-i18next';
 export const GoogleLoginButton = () => {
   // const { triggerLoginModal } = useModal();
+  const { t } = useTranslation();
   return (
     <StyledGoogleButton
       onClick={() => {
@@ -24,8 +25,10 @@ export const GoogleLoginButton = () => {
           <GoogleIcon />
         </IconWrapper>
         <TextWrapper>
-          <Title>Continue with Google</Title>
+          <Title>{t('Continue with Google')}</Title>
-          <Description>Set up an AFFiNE account to sync data</Description>
+          <Description>
+            {t('Set up an AFFiNE account to sync data')}
+          </Description>
         </TextWrapper>
       </ButtonWrapper>
     </StyledGoogleButton>
@@ -33,6 +36,7 @@ export const GoogleLoginButton = () => {
 };
 
 export const StayLogOutButton = () => {
+  const { t } = useTranslation();
   return (
     <StyledStayLogOutButton>
       <ButtonWrapper>
@@ -40,8 +44,8 @@ export const StayLogOutButton = () => {
           <StayLogOutIcon />
         </IconWrapper>
         <TextWrapper>
-          <Title>Stay logged out</Title>
+          <Title>{t('Stay logged out')}</Title>
-          <Description>All changes are saved locally</Description>
+          <Description>{t('All changes are saved locally')}</Description>
         </TextWrapper>
       </ButtonWrapper>
     </StyledStayLogOutButton>

packages/app/src/components/login-modal/index.tsx

@@ -3,13 +3,14 @@ import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { TextButton } from '@/ui/button';
 import { GoogleLoginButton, StayLogOutButton } from './LoginOptionButton';
-
+import { useTranslation } from 'react-i18next';
 interface LoginModalProps {
   open: boolean;
   onClose: () => void;
 }
 
 export const LoginModal = ({ open, onClose }: LoginModalProps) => {
+  const { t } = useTranslation();
   return (
     <Modal open={open} onClose={onClose} data-testid="login-modal">
       <ModalWrapper width={620} height={334}>
@@ -23,12 +24,12 @@ export const LoginModal = ({ open, onClose }: LoginModalProps) => {
           />
         </Header>
         <Content>
-          <ContentTitle>Currently not logged in</ContentTitle>
+          <ContentTitle>{t('NotLoggedIn')}</ContentTitle>
           <GoogleLoginButton />
           <StayLogOutButton />
         </Content>
         <Footer>
-          <TextButton icon={<StyledResetIcon />}>Clear local data</TextButton>
+          <TextButton icon={<StyledResetIcon />}>{t('ClearData')}</TextButton>
         </Footer>
       </ModalWrapper>
     </Modal>

packages/app/src/components/mobile-modal/index.tsx

@@ -3,8 +3,10 @@ import Modal, { ModalCloseButton, ModalWrapper } from '@/ui/modal';
 import getIsMobile from '@/utils/get-is-mobile';
 import { StyledButton, StyledContent, StyledTitle } from './styles';
 import bg from './bg.png';
+import { useTranslation } from 'react-i18next';
 export const MobileModal = () => {
   const [showModal, setShowModal] = useState(getIsMobile());
+  const { t } = useTranslation();
   return (
     <Modal
       open={showModal}
@@ -25,20 +27,17 @@ export const MobileModal = () => {
           }}
         />
 
-        <StyledTitle>Ooops!</StyledTitle>
+        <StyledTitle>{t('Ooops!')}</StyledTitle>
         <StyledContent>
-          <p>Looks like you are browsing on a mobile device.</p>
+          <p>{t('mobile device')}</p>
-          <p>
+          <p>{t('mobile device description')}</p>
-            We are still working on mobile support and recommend you use a
-            desktop device.
-          </p>
         </StyledContent>
         <StyledButton
           onClick={() => {
             setShowModal(false);
           }}
         >
-          Got it
+          {t('Got it')}
         </StyledButton>
       </ModalWrapper>
     </Modal>

packages/app/src/components/page-list/Empty.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { Empty } from '@/ui/empty';
-export const PageListEmpty = () => {
+import { useTranslation } from 'react-i18next';
+export const PageListEmpty = (props: { listType: string }) => {
+  const { listType } = props;
+  const { t } = useTranslation();
   return (
     <div style={{ textAlign: 'center' }}>
       <Empty
@@ -8,8 +11,10 @@ export const PageListEmpty = () => {
         height={300}
         sx={{ marginTop: '100px', marginBottom: '30px' }}
       />
-      <p>Tips: Click Add to Favourites/Trash and the page will appear here.</p>
+      {listType === 'all' && <p>{t('emptyAllPages')}</p>}
-      <p>(Designer is grappling with designing)</p>
+      {listType === 'favorite' && <p>{t('emptyFavourite')}</p>}
+      {listType === 'trash' && <p>{t('emptyTrash')}</p>}
+      <p>{t('still designed')}</p>
     </div>
   );
 };

packages/app/src/components/page-list/index.tsx

@@ -67,16 +67,18 @@ export const PageList = ({
   pageList,
   showFavoriteTag = false,
   isTrash = false,
+  listType,
 }: {
   pageList: PageMeta[];
   showFavoriteTag?: boolean;
   isTrash?: boolean;
+  listType?: 'all' | 'trash' | 'favorite';
 }) => {
   const router = useRouter();
   const { currentWorkspaceId } = useAppState();
   const { t } = useTranslation();
   if (pageList.length === 0) {
-    return <Empty />;
+    return <Empty listType={listType} />;
   }
 
   return (

packages/app/src/components/quick-search/Input.tsx

@@ -9,6 +9,7 @@ import { SearchIcon } from '@blocksuite/icons';
 import { StyledInputContent, StyledLabel } from './style';
 import { Command } from 'cmdk';
 import { useAppState } from '@/providers/app-state-provider';
+import { useTranslation } from 'react-i18next';
 export const Input = (props: {
   query: string;
   setQuery: Dispatch<SetStateAction<string>>;
@@ -17,6 +18,7 @@ export const Input = (props: {
   const [isComposition, setIsComposition] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
+  const { t } = useTranslation();
   const { currentWorkspaceId, workspaceList, currentWorkspace } = useAppState();
   const isPublish = workspaceList.find(
     meta => String(meta.id) === String(currentWorkspaceId)
@@ -80,8 +82,10 @@ export const Input = (props: {
         }}
         placeholder={
           isPublish
-            ? `Search in ${currentWorkspace?.meta.name}`
+            ? t('Quick search placeholder2', {
-            : 'Quick Search...'
+                workspace = currentWorkspace?.meta.name,
+              })
+            : t('Quick search placeholder')
         }
       />
     </StyledInputContent>

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

@@ -16,7 +16,7 @@ import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useUserHelper } from '@/hooks/use-user-helper';
-
+import { useTranslation } from 'react-i18next';
 interface WorkspaceModalProps {
   open: boolean;
   onClose: () => void;
@@ -28,6 +28,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const { workspaceList, currentWorkspace } = useAppState();
   const { login, user } = useUserHelper();
   const router = useRouter();
+  const { t } = useTranslation();
   return (
     <div>
       <Modal open={open} onClose={onClose}>
@@ -36,7 +37,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
           style={{ padding: '10px', display: 'flex', flexDirection: 'column' }}
         >
           <Header>
-            <ContentTitle>My Workspaces</ContentTitle>
+            <ContentTitle>{t('My Workspaces')}</ContentTitle>
             {/* <LanguageMenu /> */}
             <ModalCloseButton
               top={6}
@@ -121,13 +122,13 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                       marginRight: '10px',
                     }}
                   />
-                  Create Or Import
+                  {t('Create Or Import')}
                 </Button>
               </li>
             </WorkspaceList>
             <p style={{ fontSize: '14px', color: '#ccc', margin: '12px 0' }}>
-              Tips:Workspace is your virtual space to capture, create and plan
+              {t('Tips')}
-              as just one person or together as a team.
+              {t('Workspace description')}
             </p>
           </Content>
           <Footer>
@@ -135,10 +136,10 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
               <Button
                 onClick={() => {
                   login();
-                  toast('login success');
+                  toast(t('login success'));
                 }}
               >
-                Sign in AFFiNE Cloud
+                {t('Sign in')}
               </Button>
             ) : (
               <Button
@@ -146,7 +147,7 @@ export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
                   SignOut();
                 }}
               >
-                Sign out of AFFiNE Cloud
+                {t('Sign out')}
               </Button>
             )}
           </Footer>

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

@@ -1,6 +1,6 @@
 import { styled } from '@/styles';
 import { Workspace } from '@affine/datacenter';
-
+import { Trans } from 'react-i18next';
 export const ExportPageTitleContainer = styled('div')(() => {
   return {
     display: 'flex',
@@ -12,8 +12,13 @@ export const ExportPageTitleContainer = styled('div')(() => {
 export const ExportPage = ({ workspace }: { workspace: Workspace }) => {
   return (
     <ExportPageTitleContainer>
-      Export Workspace{' '}
+      <Trans i18nKey="Export Workspace">
-      <code style={{ margin: '0 10px' }}>{workspace.name}</code> Is Comming
+        Export Workspace
+        <code style={{ margin: '0 10px' }}>
+          {{ workspace: workspace.name }}
+        </code>
+        Is Comming
+      </Trans>
     </ExportPageTitleContainer>
   );
 };

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

@@ -27,6 +27,7 @@ import { Workspace } from '@affine/datacenter';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { StyledMemberWarp } from './general/style';
 import { useConfirm } from '@/providers/ConfirmProvider';
+import { useTranslation } from 'react-i18next';
 
 // import { useAppState } from '@/providers/app-state-provider';
 export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
@@ -36,6 +37,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
   ]);
   const { user, login, updateWorkspaceMeta } = useTemporaryHelper();
   const { confirm } = useConfirm();
+  const { t } = useTranslation();
   // const refreshMembers = useCallback(() => {
   //   getDataCenter()
   //     .then(dc =>
@@ -66,9 +68,11 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
         <>
           <StyledMemberTitleContainer>
             <StyledMemberNameContainer>
-              Users({members.length})
+              {t('Users')} ({members.length})
             </StyledMemberNameContainer>
-            <StyledMemberRoleContainer>Access level</StyledMemberRoleContainer>
+            <StyledMemberRoleContainer>
+              {t('Access level')}
+            </StyledMemberRoleContainer>
           </StyledMemberTitleContainer>
           <StyledMemberListContainer>
             {members.length ? (
@@ -92,7 +96,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                           ? 'Member'
                           : 'Workspace Owner'
                         : 'Pending'} */}
-                      Pending
+                      {t('Pending')}
                     </StyledMemberRoleContainer>
                     <StyledMoreVerticalButton>
                       <Menu
@@ -123,7 +127,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                               }}
                               icon={<TrashIcon />}
                             >
-                              Delete
+                              {t('Delete')}
                             </MenuItem>
                           </>
                         }
@@ -154,7 +158,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
               type="primary"
               shape="circle"
             >
-              Invite Members
+              {t('Invite Members')}
             </Button>
             <InviteMembers
               onClose={() => {
@@ -172,19 +176,17 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
         </>
       ) : (
         <StyledMemberWarp>
-          <div style={{ flex: 1 }}>
+          <div style={{ flex: 1 }}>{t('Collaboration Description')}</div>
-            Collaborating with other members requires AFFiNE Cloud service.
-          </div>
           <div style={{ height: '40px' }}>
             <Button
               type="primary"
               shape="circle"
               onClick={() => {
                 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'),
                 }).then(confirm => {
                   if (confirm) {
                     if (user) {
@@ -197,7 +199,7 @@ export const MembersPage = ({ workspace }: { workspace: Workspace }) => {
                 });
               }}
             >
-              Enable AFFiNE Cloud
+              {t('Enable AFFiNE Cloud')}
             </Button>
           </div>
         </StyledMemberWarp>

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

@@ -13,12 +13,13 @@ import { useConfirm } from '@/providers/ConfirmProvider';
 // import { useAppState } from '@/providers/app-state-provider3';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
 import { Workspace } from '@affine/datacenter';
+import { useTranslation } from 'react-i18next';
 
 export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
   const shareUrl =
     window.location.host + '/workspace/' + workspace.id + '?share=true';
   const { publishWorkspace } = useWorkspaceHelper();
-
+  const { t } = useTranslation();
   const { confirm } = useConfirm();
 
   const togglePublic = (flag: boolean) => {
@@ -32,11 +33,11 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
 
   const enableAffineCloud = () => {
     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:
-        workspace.provider === 'local' ? 'Enable' : 'Sign in and Enable',
+        workspace.provider === 'local' ? t('Enable') : t('Sign in and Enable'),
-      cancelText: 'Skip',
+      cancelText: t('Skip'),
     }).then(confirm => {
       if (confirm) {
         // if (user) {
@@ -56,22 +57,21 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
             {workspace?.isPublish ? (
               <>
                 <StyledPublishExplanation>
-                  Publishing to web requires AFFiNE Cloud service .
+                  {t('Publishing')}
                 </StyledPublishExplanation>
-                <StyledSettingH2>Share with link</StyledSettingH2>
+                <StyledSettingH2>{t('Share with link')}</StyledSettingH2>
                 <StyledPublishCopyContainer>
                   <Input width={500} value={shareUrl} disabled={true}></Input>
                   <StyledCopyButtonContainer>
                     <Button onClick={copyUrl} type="primary" shape="circle">
-                      Copy Link
+                      {t('Copy Link')}
                     </Button>
                   </StyledCopyButtonContainer>
                 </StyledPublishCopyContainer>
               </>
             ) : (
               <StyledPublishExplanation>
-                After publishing to the web, everyone can view the content of
+                {'Publishing Description'}
-                this workspace through the link.
               </StyledPublishExplanation>
             )}
           </StyledPublishContent>
@@ -83,7 +83,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
               type="primary"
               shape="circle"
             >
-              Stop publishing
+              {t('Stop publishing')}
             </Button>
           ) : (
             <Button
@@ -93,7 +93,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
               type="primary"
               shape="circle"
             >
-              Publish to web
+              {t('Publish to web')}
             </Button>
           )}
         </div>
@@ -101,7 +101,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
         <StyledPublishContent>
           <>
             <StyledPublishExplanation>
-              Publishing to web requires AFFiNE Cloud service.
+              {t('Publishing')}
             </StyledPublishExplanation>
 
             <StyledPublishCopyContainer>
@@ -112,7 +112,7 @@ export const PublishPage = ({ workspace }: { workspace: Workspace }) => {
                 type="primary"
                 shape="circle"
               >
-                Enable AFFiNE Cloud
+                {t('Enable AFFiNE Cloud')}
               </Button>
             </StyledPublishCopyContainer>
           </>

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

@@ -8,9 +8,11 @@ import { Button } from '@/ui/button';
 import { Menu, MenuItem } from '@/ui/menu';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { Workspace } from '@affine/datacenter';
+import { Trans, useTranslation } from 'react-i18next';
 export const SyncPage = ({ workspace }: { workspace: Workspace }) => {
   console.log('workspace: ', workspace);
   const { currentWorkspace, updateWorkspaceMeta } = useTemporaryHelper();
+  const { t } = useTranslation();
 
   return (
     <div>

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

@@ -17,6 +17,7 @@ import { Upload } from '@/components/file-upload';
 import { WorkspaceAvatar } from '@/components/workspace-avatar';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { Workspace } from '@affine/datacenter';
+import { useTranslation } from 'react-i18next';
 export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
   // const { refreshWorkspacesMeta } = useAppState();
   const { updateWorkspaceMeta } = useTemporaryHelper();
@@ -24,6 +25,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
   const [showLeave, setShowLeave] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
   const [workspaceName, setWorkspaceName] = useState<string>('');
+  const { t } = useTranslation();
   // const debouncedRefreshWorkspacesMeta = debounce(() => {
   //   refreshWorkspacesMeta();
   // }, 100);
@@ -68,7 +70,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
 
   return workspace ? (
     <div>
-      <StyledSettingH2 marginTop={56}>Workspace Icon</StyledSettingH2>
+      <StyledSettingH2 marginTop={56}>{t('Workspace Icon')}</StyledSettingH2>
       <StyledSettingAvatarContent>
         <div
           style={{
@@ -83,16 +85,16 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
           accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
           fileChange={fileChange}
         >
-          <Button loading={uploading}>Upload</Button>
+          <Button loading={uploading}>{t('Upload')}</Button>
         </Upload>
         {/* TODO: add upload logic */}
       </StyledSettingAvatarContent>
-      <StyledSettingH2 marginTop={20}>Workspace Name</StyledSettingH2>
+      <StyledSettingH2 marginTop={20}>{t('Workspace Name')}</StyledSettingH2>
       <StyledSettingInputContainer>
         <Input
           width={327}
           value={workspaceName}
-          placeholder="Workspace Name"
+          placeholder={t('Workspace Name')}
           maxLength={14}
           minLength={1}
           onChange={handleChangeWorkSpaceName}
@@ -122,7 +124,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
         ''
       )} */}
 
-      <StyledSettingH2 marginTop={20}>Workspace Type</StyledSettingH2>
+      <StyledSettingH2 marginTop={20}>{t('Workspace Type')}</StyledSettingH2>
       <StyledSettingInputContainer>
         <code>{workspace.provider} </code>
       </StyledSettingInputContainer>
@@ -130,7 +132,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
         {isOwner ? (
           <>
             <Button type="danger" shape="circle" onClick={handleClickDelete}>
-              Delete Workspace
+              {t('Delete Workspace')}
             </Button>
             <WorkspaceDelete
               open={showDelete}
@@ -141,7 +143,7 @@ export const GeneralPage = ({ workspace }: { workspace: Workspace }) => {
         ) : (
           <>
             <Button type="danger" shape="circle" onClick={handleClickLeave}>
-              Leave Workspace
+              {t('Leave Workspace')}
             </Button>
             <WorkspaceLeave
               open={showLeave}

packages/app/src/components/workspace-setting/general/delete/Delete.tsx

@@ -18,7 +18,7 @@ import {
   // Workspace,
 } from '@/hooks/mock-data/mock';
 import { Workspace } from '@affine/datacenter';
-
+import { Trans, useTranslation } from 'react-i18next';
 interface WorkspaceDeleteProps {
   open: boolean;
   onClose: () => void;
@@ -31,6 +31,7 @@ export const WorkspaceDelete = ({
   workspace,
 }: WorkspaceDeleteProps) => {
   const [deleteStr, setDeleteStr] = useState<string>('');
+  const { t } = useTranslation();
   const router = useRouter();
 
   const handlerInputChange = (workspaceName: string) => {
@@ -55,31 +56,40 @@ export const WorkspaceDelete = ({
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
         <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>Delete Workspace</StyledModalHeader>
+        <StyledModalHeader>{t('Delete Workspace')}</StyledModalHeader>
         {workspace.provider === 'local' ? (
           <StyledTextContent>
-            Deleting (
+            <Trans i18nKey="Delete Workspace Description">
-            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) cannot
+              Deleting (
-            be undone, please proceed with caution. along with all its content.
+              <StyledWorkspaceName>
+                {{ workspace: workspace.name }}
+              </StyledWorkspaceName>
+              ) cannot be undone, please proceed with caution. along with all
+              its content.
+            </Trans>
           </StyledTextContent>
         ) : (
           <StyledTextContent>
-            Deleting (
+            <Trans i18nKey="Delete Workspace Description2">
-            <StyledWorkspaceName>{workspace.name}</StyledWorkspaceName>) will
+              Deleting (
-            delete both local and cloud data, this operation cannot be undone,
+              <StyledWorkspaceName>
-            please proceed with caution.
+                {{ workspace: workspace.name }}
+              </StyledWorkspaceName>
+              ) will delete both local and cloud data, this operation cannot be
+              undone, please proceed with caution.
+            </Trans>
           </StyledTextContent>
         )}
         <StyledInputContent>
           <Input
             onChange={handlerInputChange}
-            placeholder="Please type “Delete” to confirm"
+            placeholder={t('Delete Workspace placeholder')}
             value={deleteStr}
           ></Input>
         </StyledInputContent>
         <StyledButtonContent>
           <Button shape="circle" onClick={onClose}>
-            Cancel
+            {t('Cancel')}
           </Button>
           <Button
             disabled={deleteStr.toLowerCase() !== 'delete'}
@@ -88,7 +98,7 @@ export const WorkspaceDelete = ({
             shape="circle"
             style={{ marginLeft: '24px' }}
           >
-            Delete
+            {t('Delete')}
           </Button>
         </StyledButtonContent>
       </StyledModalWrapper>

packages/app/src/components/workspace-setting/general/leave/Leave.tsx

@@ -7,6 +7,7 @@ import {
 } from './style';
 import { ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
+import { useTranslation } from 'react-i18next';
 // import { getDataCenter } from '@affine/datacenter';
 // import { useAppState } from '@/providers/app-state-provider';
 
@@ -22,6 +23,7 @@ export const WorkspaceLeave = ({
   onClose,
   workspaceId,
 }: WorkspaceDeleteProps) => {
+  const { t } = useTranslation();
   console.log('workspaceId: ', workspaceId);
   // const router = useRouter();
   // const { refreshWorkspacesMeta } = useAppState();
@@ -37,14 +39,13 @@ export const WorkspaceLeave = ({
     <Modal open={open} onClose={onClose}>
       <StyledModalWrapper>
         <ModalCloseButton onClick={onClose} />
-        <StyledModalHeader>Leave Workspace</StyledModalHeader>
+        <StyledModalHeader>{t('Leave Workspace')}</StyledModalHeader>
         <StyledTextContent>
-          After you leave, you will not be able to access all the contents of
+          {t('Leave Workspace Description')}
-          this workspace.
         </StyledTextContent>
         <StyledButtonContent>
           <Button shape="circle" onClick={onClose}>
-            Cancel
+            {t('Cancel')}
           </Button>
           <Button
             onClick={handleLeave}
@@ -52,7 +53,7 @@ export const WorkspaceLeave = ({
             shape="circle"
             style={{ marginLeft: '24px' }}
           >
-            Leave
+            {t('Leave')}
           </Button>
         </StyledButtonContent>
       </StyledModalWrapper>

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -157,7 +157,7 @@ export const WorkSpaceSliderBar = () => {
               setShowWorkspaceSetting(true);
             }}
           >
-            <SettingsIcon /> Setting
+            <SettingsIcon /> {t('Settings')}
           </StyledListItem>
 
           <WorkspaceSetting

packages/app/src/libs/i18n/resources/en.json

@@ -1,8 +1,11 @@
 {
   "Quick search": "Quick search",
+  "Quick search placeholder": "Quick Search...",
+  "Quick search placeholder2": "Search in {{workspace}}",
   "All pages": "All pages",
   "Favourites": "Favourites",
   "No item": "No item",
+  "Settings": "Settings",
   "Import": "Import",
   "Trash": "Trash",
   "New Page": "New Page",
@@ -75,5 +78,59 @@
   "Restore it": "Restore it",
   "TrashButtonGroupTitle": "Permanently delete",
   "TrashButtonGroupDescription": "Once deleted, you can't undo this action. Do you confirm?",
-  "Delete permanently": "Delete permanently"
+  "Delete permanently": "Delete permanently",
+  "recommendBrowser": " We recommend the <1>Chrome</1> browser for optimal experience.",
+  "upgradeBrowser": "Please upgrade to the latest version of Chrome for the best experience.",
+  "Invite Members": "Invite Members",
+  "Invite placeholder": "Search mail (Gmail support only)",
+  "Non-Gmail": "Non-Gmail is not supported",
+  "Invite": "Invite",
+  "Loading": "Loading...",
+  "NotLoggedIn": "Currently not logged in",
+  "ClearData": "Clear local data",
+  "Continue with Google": "Continue with Google",
+  "Set up an AFFiNE account to sync data": "Set up an AFFiNE account to sync data",
+  "Stay logged out": "Stay logged out",
+  "All changes are saved locally": "All changes are saved locally",
+  "Ooops!": "Ooops!",
+  "mobile device": "Looks like you are browsing on a mobile device.",
+  "mobile device description": "We are still working on mobile support and recommend you use a desktop device.",
+  "Got it": "Got it",
+  "emptyAllPages": "This workspace is empty. Create a new page to begin editing.",
+  "emptyFavourite": "Click Add to Favourites and the page will appear here.",
+  "emptyTrash": "Click Add to Trash and the page will appear here.",
+  "still designed": "(This page is still being designed.)",
+  "My Workspaces": "My Workspaces",
+  "Create Or Import": "Create Or Import",
+  "Tips": "Tips: ",
+  "login success": "Login success",
+  "Sign in": "Sign in AFFiNE Cloud",
+  "Sign out": "Sign out of AFFiNE Cloud",
+  "Delete Workspace": "Delete Workspace",
+  "Delete Workspace Description": "Deleting (<1>{{workspace}}</1>) cannot be undone, please proceed with caution. along with all its content.",
+  "Delete Workspace Description2": "Deleting (<1>{{workspace}}</1>) will delete both local and cloud data, this operation cannot be undone, please proceed with caution.",
+  "Delete Workspace placeholder": "Please type “Delete” to confirm",
+  "Leave Workspace": "Leave Workspace",
+  "Leave Workspace Description": "After you leave, you will not be able to access all the contents of this workspace.",
+  "Leave": "Leave",
+  "Workspace Icon": "Workspace Icon",
+  "Workspace Name": "Workspace Name",
+  "Workspace Type": "Workspace Type",
+  "Export Workspace": "Export Workspace <1>{{workspace}}</1> Is Coming",
+  "Users": "Users",
+  "Access level": "Access level",
+  "Pending": "Pending",
+  "Collaboration Description": "Collaborating with other members requires AFFiNE Cloud service.",
+  "Enable AFFiNE Cloud": "Enable AFFiNE Cloud",
+  "Enable AFFiNE Cloud Description": "If enabled, the data in this workspace will be backed up and synchronised via AFFiNE Cloud.",
+  "Enable": "Enable",
+  "Sign in and Enable": "Sign in and Enable",
+  "Skip": "Skip",
+  "Publishing": "Publishing to web requires AFFiNE Cloud service.",
+  "Share with link": "Share with link",
+  "Copy Link": "Copy Link",
+  "Publishing Description": "After publishing to the web, everyone can view the content of this workspace through the link.",
+  "Stop publishing": "Stop publishing",
+  "Publish to web": "Publish to web",
+  "Sync Description": "{{workspaceName}} is Local Workspace. All data is stored on the current device. You can enable AFFiNE Cloud for this workspace to keep data in sync with the cloud."
 }

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

@@ -14,6 +14,7 @@ const All = () => {
       <PageList
         pageList={pageMetaList.filter(p => !p.trash)}
         showFavoriteTag={true}
+        listType="all"
       />
     </>
   );

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

@@ -13,7 +13,10 @@ export const Favorite = () => {
       <PageListHeader icon={<FavouritesIcon />}>
         {t('Favourites')}
       </PageListHeader>
-      <PageList pageList={pageMetaList.filter(p => p.favorite && !p.trash)} />
+      <PageList
+        pageList={pageMetaList.filter(p => p.favorite && !p.trash)}
+        listType="favorite"
+      />
     </>
   );
 };

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

@@ -11,7 +11,11 @@ export const Trash = () => {
   return (
     <>
       <PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
-      <PageList pageList={pageMetaList.filter(p => p.trash)} isTrash={true} />
+      <PageList
+        pageList={pageMetaList.filter(p => p.trash)}
+        isTrash={true}
+        listType="trash"
+      />
     </>
   );
 };