update i18n for layout

libs/components/layout/src/header/EditorBoardSwitcher/Switcher.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@toeverything/components/ui';
+import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { StatusText } from './StatusText';
 import { StatusTrack } from './StatusTrack';
@@ -10,6 +11,7 @@ export const Switcher = () => {
     const navigate = useNavigate();
     const params = useParams();
     const { pathname } = useLocation();
+    const { t } = useTranslation();
     const pageViewMode = isBoard(pathname) ? DocMode.board : DocMode.doc;
 
     const switchToPageView = (targetViewMode: DocMode) => {
@@ -36,7 +38,7 @@ export const Switcher = () => {
                 active={pageViewMode === DocMode.doc}
                 onClick={() => switchToPageView(DocMode.doc)}
             >
-                Paper
+                {t('Paper')}
             </StatusText>
             <StatusTrack
                 mode={pageViewMode}
@@ -53,7 +55,7 @@ export const Switcher = () => {
                 active={pageViewMode === DocMode.board}
                 onClick={() => switchToPageView(DocMode.board)}
             >
-                Edgeless
+                {t('Edgeless')}
             </StatusText>
         </StyledContainerForSwitcher>
     );

libs/components/layout/src/header/FileSystem.tsx

@@ -4,7 +4,7 @@ import { CloseIcon } from '@toeverything/components/common';
 import { IconButton, MuiSnackbar, styled } from '@toeverything/components/ui';
 import { services } from '@toeverything/datasource/db-service';
 import { useLocalTrigger } from '@toeverything/datasource/state';
-
+import { useTranslation } from 'react-i18next';
 const cleanupWorkspace = (workspace: string) =>
     new Promise((resolve, reject) => {
         const req = indexedDB.deleteDatabase(workspace);
@@ -75,7 +75,7 @@ export const FileSystem = () => {
         setError(true);
         setTimeout(() => setError(false), 3000);
     }, []);
-
+    const { t } = useTranslation();
     const apiSupported = useMemo(() => fsApiSupported(), []);
 
     if (apiSupported && !selected) {
@@ -105,7 +105,7 @@ export const FileSystem = () => {
                         }
                     }}
                 >
-                    Sync to Disk
+                    {t('Sync to Disk')}
                 </StyledFileSystem>
             </>
         );

libs/components/layout/src/header/LayoutHeader.tsx

@@ -12,6 +12,7 @@ import {
     useShowSettingsSidebar,
 } from '@toeverything/datasource/state';
 
+import { useTranslation } from 'react-i18next';
 import { EditorBoardSwitcher } from './EditorBoardSwitcher';
 import { FileSystem, fsApiSupported } from './FileSystem';
 import { CurrentPageTitle } from './Title';
@@ -20,16 +21,17 @@ export const LayoutHeader = () => {
     const [isLocalWorkspace] = useLocalTrigger();
     const { toggleSettingsSidebar: toggleInfoSidebar, showSettingsSidebar } =
         useShowSettingsSidebar();
+    const { t } = useTranslation();
 
     const warningTips = useMemo(() => {
         if (!fsApiSupported()) {
-            return 'Welcome to the AFFiNE demo. To begin saving changes you can SYNC DATA TO DISK with the latest version of Chromium based browser like Chrome/Edge';
+            return t('warningTips.isNotfsApiSupported');
         } else if (!isLocalWorkspace) {
-            return 'Welcome to the AFFiNE demo. To begin saving changes you can SYNC TO DISK.';
+            return t('warningTips.isNotLocalWorkspace');
         } else {
-            return 'AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data';
+            return t('warningTips.DoNotStore');
         }
-    }, [isLocalWorkspace]);
+    }, [isLocalWorkspace, t]);
 
     return (
         <StyledContainerForHeaderRoot>
@@ -43,7 +45,7 @@ export const LayoutHeader = () => {
                 <FlexContainer>
                     <StyledHelper>
                         <FileSystem />
-                        <StyledShare disabled={true}>Share</StyledShare>
+                        <StyledShare disabled={true}>{t('Share')}</StyledShare>
                         <div style={{ margin: '0px 12px' }}>
                             <IconButton
                                 size="large"