Merge branch 'feat/poc' of https://github.com/toeverything/AFFiNE into feat/poc

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>
-              Workspace is your virtual space to capture, create and plan as
-              just one person or together as a team.
-            </p>
+            <p>{t('Workspace description')}</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,12 +19,15 @@ 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();
+  return [
     {
       flavor: 'select',
       icon: <SelectIcon />,
-    toolTip: 'Select',
+      toolTip: t('Select'),
       disable: false,
       callback: () => {
         window.dispatchEvent(
@@ -39,13 +42,13 @@ const toolbarList1 = [
     {
       flavor: 'text',
       icon: <TextIcon />,
-    toolTip: 'Text (coming soon)',
+      toolTip: t('Text'),
       disable: true,
     },
     {
       flavor: 'shape',
       icon: <ShapeIcon />,
-    toolTip: 'Shape',
+      toolTip: t('Shape'),
       disable: false,
       callback: () => {
         window.dispatchEvent(
@@ -62,30 +65,31 @@ const toolbarList1 = [
     {
       flavor: 'sticky',
       icon: <StickerIcon />,
-    toolTip: 'Sticky (coming soon)',
+      toolTip: t('Sticky'),
       disable: true,
     },
     {
       flavor: 'pen',
       icon: <PenIcon />,
-    toolTip: 'Pen (coming soon)',
+      toolTip: t('Pen'),
       disable: true,
     },
 
     {
       flavor: 'connector',
       icon: <ConnectorIcon />,
-    toolTip: 'Connector (coming soon)',
+      toolTip: t('Connector'),
       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',
-            content:
-              "Once deleted, you can't undo this action. Do you confirm?",
-            confirmText: 'Delete',
+            title: t('TrashButtonGroupTitle'),
+            content: t('TrashButtonGroupDescription'),
+            confirmText: t('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

@@ -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"
 }