chore: update i18n keys

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

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import Input from '@/ui/input';
 import { useTemporaryHelper } from '@/providers/temporary-helper-provider';
 import { KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 interface ICloseParams {
   workspaceId?: string;
 }
@@ -27,12 +28,13 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
       handleCreateWorkspace();
     }
   };
+  const { t } = useTranslation();
   return (
     <div>
       <Modal open={open} onClose={onClose}>
         <ModalWrapper width={620} height={334} style={{ padding: '10px' }}>
           <Header>
-            <ContentTitle>New Workspace</ContentTitle>
+            <ContentTitle>{t('New Workspace')}</ContentTitle>
             <ModalCloseButton
               top={6}
               right={6}
@@ -42,10 +44,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
             />
           </Header>
           <Content>
-            <p>
+            <p>{t('Workspace description')}</p>
-              Workspace is your virtual space to capture, create and plan as
-              just one person or together as a team.
-            </p>
             <Input
               onKeyDown={handleKeyDown}
               onChange={value => {
@@ -57,7 +56,7 @@ export const CreateWorkspaceModal = ({ open, onClose }: ModalProps) => {
                 handleCreateWorkspace();
               }}
             >
-              Create
+              {t('Create')}
             </Button>
           </Content>
         </ModalWrapper>

packages/app/src/components/edgeless-toolbar/index.tsx

@@ -19,73 +19,77 @@ import Slide from '@mui/material/Slide';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { useAppState } from '@/providers/app-state-provider';
 import useHistoryUpdated from '@/hooks/use-history-update';
+import { useTranslation } from 'react-i18next';
 
-const toolbarList1 = [
+const useToolbarList1 = () => {
-  {
+  const { t } = useTranslation();
-    flavor: 'select',
+  return [
-    icon: <SelectIcon />,
+    {
-    toolTip: 'Select',
+      flavor: 'select',
-    disable: false,
+      icon: <SelectIcon />,
-    callback: () => {
+      toolTip: t('Select'),
-      window.dispatchEvent(
+      disable: false,
-        new CustomEvent('affine.switch-mouse-mode', {
+      callback: () => {
-          detail: {
+        window.dispatchEvent(
-            type: 'default',
+          new CustomEvent('affine.switch-mouse-mode', {
-          },
+            detail: {
-        })
+              type: 'default',
-      );
+            },
+          })
+        );
+      },
     },
-  },
+    {
-  {
+      flavor: 'text',
-    flavor: 'text',
+      icon: <TextIcon />,
-    icon: <TextIcon />,
+      toolTip: t('Text'),
-    toolTip: 'Text (coming soon)',
+      disable: true,
-    disable: true,
+    },
-  },
+    {
-  {
+      flavor: 'shape',
-    flavor: 'shape',
+      icon: <ShapeIcon />,
-    icon: <ShapeIcon />,
+      toolTip: t('Shape'),
-    toolTip: 'Shape',
+      disable: false,
-    disable: false,
+      callback: () => {
-    callback: () => {
+        window.dispatchEvent(
-      window.dispatchEvent(
+          new CustomEvent('affine.switch-mouse-mode', {
-        new CustomEvent('affine.switch-mouse-mode', {
+            detail: {
-          detail: {
+              type: 'shape',
-            type: 'shape',
+              color: 'black',
-            color: 'black',
+              shape: 'rectangle',
-            shape: 'rectangle',
+            },
-          },
+          })
-        })
+        );
-      );
+      },
+    },
+    {
+      flavor: 'sticky',
+      icon: <StickerIcon />,
+      toolTip: t('Sticky'),
+      disable: true,
+    },
+    {
+      flavor: 'pen',
+      icon: <PenIcon />,
+      toolTip: t('Pen'),
+      disable: true,
     },
-  },
-  {
-    flavor: 'sticky',
-    icon: <StickerIcon />,
-    toolTip: 'Sticky (coming soon)',
-    disable: true,
-  },
-  {
-    flavor: 'pen',
-    icon: <PenIcon />,
-    toolTip: 'Pen (coming soon)',
-    disable: true,
-  },
 
-  {
+    {
-    flavor: 'connector',
+      flavor: 'connector',
-    icon: <ConnectorIcon />,
+      icon: <ConnectorIcon />,
-    toolTip: 'Connector (coming soon)',
+      toolTip: t('Connector'),
-    disable: true,
+      disable: true,
-  },
+    },
-];
+  ];
+};
 
 const UndoRedo = () => {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const { currentPage } = useAppState();
   const onHistoryUpdated = useHistoryUpdated();
-
+  const { t } = useTranslation();
   useEffect(() => {
     onHistoryUpdated(page => {
       setCanUndo(page.canUndo);
@@ -95,7 +99,7 @@ const UndoRedo = () => {
 
   return (
     <StyledToolbarWrapper>
-      <Tooltip content="Undo" placement="right-start">
+      <Tooltip content={t('Undo')} placement="right-start">
         <StyledToolbarItem
           disable={!canUndo}
           onClick={() => {
@@ -105,7 +109,7 @@ const UndoRedo = () => {
           <UndoIcon />
         </StyledToolbarItem>
       </Tooltip>
-      <Tooltip content="Redo" placement="right-start">
+      <Tooltip content={t('Redo')} placement="right-start">
         <StyledToolbarItem
           disable={!canRedo}
           onClick={() => {
@@ -131,7 +135,7 @@ export const EdgelessToolbar = () => {
     >
       <StyledEdgelessToolbar aria-label="edgeless-toolbar">
         <StyledToolbarWrapper>
-          {toolbarList1.map(
+          {useToolbarList1().map(
             ({ icon, toolTip, flavor, disable, callback }, index) => {
               return (
                 <Tooltip key={index} content={toolTip} placement="right-start">

packages/app/src/components/file-upload/index.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@/ui/button';
 import { FC, useRef, ChangeEvent, ReactElement } from 'react';
 import { styled } from '@/styles';
+import { useTranslation } from 'react-i18next';
 interface Props {
   uploadType?: string;
   children?: ReactElement;
@@ -9,6 +10,7 @@ interface Props {
 }
 export const Upload: FC<Props> = props => {
   const { fileChange, accept } = props;
+  const { t } = useTranslation();
   const input_ref = useRef<HTMLInputElement>(null);
   const _chooseFile = () => {
     if (input_ref.current) {
@@ -28,7 +30,7 @@ export const Upload: FC<Props> = props => {
   };
   return (
     <UploadStyle onClick={_chooseFile}>
-      {props.children ?? <Button>Upload</Button>}
+      {props.children ?? <Button>{t('Upload')}</Button>}
       <input
         ref={input_ref}
         type="file"

packages/app/src/components/header/header-right-items/trash-button-group.tsx

@@ -4,6 +4,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { useConfirm } from '@/providers/confirm-provider';
 import { useRouter } from 'next/router';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
+import { useTranslation } from 'react-i18next';
 
 export const TrashButtonGroup = () => {
   const { permanentlyDeletePage } = usePageHelper();
@@ -12,7 +13,7 @@ export const TrashButtonGroup = () => {
   const { confirm } = useConfirm();
   const router = useRouter();
   const { id = '' } = useCurrentPageMeta() || {};
-
+  const { t } = useTranslation();
   return (
     <>
       <Button
@@ -23,7 +24,7 @@ export const TrashButtonGroup = () => {
           toggleDeletePage(id);
         }}
       >
-        Restore it
+        {t('Restore it')}
       </Button>
       <Button
         bold={true}
@@ -31,10 +32,9 @@ export const TrashButtonGroup = () => {
         type="danger"
         onClick={() => {
           confirm({
-            title: 'Permanently delete',
+            title: t('TrashButtonGroupTitle'),
-            content:
+            content: t('TrashButtonGroupDescription'),
-              "Once deleted, you can't undo this action. Do you confirm?",
+            confirmText: t('Delete'),
-            confirmText: 'Delete',
             confirmType: 'danger',
           }).then(confirm => {
             if (confirm) {
@@ -44,7 +44,7 @@ export const TrashButtonGroup = () => {
           });
         }}
       >
-        Delete permanently
+        {t('Delete permanently')}
       </Button>
     </>
   );

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

@@ -34,7 +34,7 @@
   "Delete page?": "Delete page?",
   "Delete permanently?": "Delete permanently?",
   "will be moved to Trash": "{{title}} will be moved to Trash",
-  "Once deleted, you can't undo this action.": "Once deleted,you can't undo this action.",
+  "Once deleted, you can't undo this action.": "Once deleted, you can't undo this action.",
   "Moved to Trash": "Moved to Trash",
   "Permanently deleted": "Permanently deleted",
   "restored": "{{title}} restored",
@@ -61,5 +61,19 @@
   "Reduce indent": "Reduce indent",
   "Markdown Syntax": "Markdown Syntax",
   "Divider": "Divider",
-  "404 - Page Not Found": "404 - Page Not Found"
+  "404 - Page Not Found": "404 - Page Not Found",
+  "New Workspace": "New Workspace",
+  "Workspace description": "Workspace is your virtual space to capture, create and plan as just one person or together as a team.",
+  "Create": "Create",
+  "Select": "Select",
+  "Text": "Text (coming soon)",
+  "Shape": "Shape",
+  "Sticky": "Sticky (coming soon)",
+  "Pen": "Pen (coming soon)",
+  "Connector": "Connector (coming soon)",
+  "Upload": "Upload",
+  "Restore it": "Restore it",
+  "TrashButtonGroupTitle": "Permanently delete",
+  "TrashButtonGroupDescription": "Once deleted, you can't undo this action. Do you confirm?",
+  "Delete permanently": "Delete permanently"
 }