feat: add translation

2024-09-21 00:18:02 +03:00 · 2023-01-04 17:10:47 +08:00 · 2023-01-04 17:10:47 +08:00 · 0b61f4a2a0
commit 0b61f4a2a0
parent 1bc2dcd661
16 changed files with 118 additions and 90 deletions
--- a/packages/app/src/components/404/index.tsx
+++ b/packages/app/src/components/404/index.tsx
@ -1,9 +1,10 @@
 import { NotFoundTitle, PageContainer } from './styles';
-
+import { useTranslation } from 'react-i18next';
 export const NotfoundPage = () => {
+  const { t } = useTranslation();
  return (
    <PageContainer>
-      <NotFoundTitle>404 - Page Not Found</NotFoundTitle>
+      <NotFoundTitle>{t('404 - Page Not Found')}</NotFoundTitle>
    </PageContainer>
  );
 };
--- a/packages/app/src/components/contact-modal/index.tsx
+++ b/packages/app/src/components/contact-modal/index.tsx
@ -23,7 +23,7 @@ import {
  StyledModalFooter,
 } from './style';
 import bg from '@/components/contact-modal/bg.png';
-
+import { useTranslation } from 'react-i18next';
 const linkList = [
  {
    icon: <GithubIcon />,
@ -51,20 +51,6 @@ const linkList = [
    link: 'https://discord.gg/Arn7TqJBvG',
  },
 ];
-const rightLinkList = [
-  {
-    icon: <LogoIcon />,
-    title: 'Official Website ',
-    subTitle: 'AFFiNE.pro',
-    link: 'https://affine.pro',
-  },
-  {
-    icon: <DocIcon />,
-    title: 'AFFiNE Community',
-    subTitle: 'community.affine.pro',
-    link: 'https://community.affine.pro',
-  },
-];

 type TransitionsModalProps = {
  open: boolean;
@ -72,6 +58,21 @@ type TransitionsModalProps = {
 };

 export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
+  const { t } = useTranslation();
+  const rightLinkList = [
+    {
+      icon: <LogoIcon />,
+      title: t('Official Website'),
+      subTitle: 'AFFiNE.pro',
+      link: 'https://affine.pro',
+    },
+    {
+      icon: <DocIcon />,
+      title: t('AFFiNE Community'),
+      subTitle: 'community.affine.pro',
+      link: 'https://community.affine.pro',
+    },
+  ];
  return (
    <Modal open={open} onClose={onClose} data-testid="contact-us-modal-content">
      <ModalWrapper
@ -109,7 +110,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
            })}
          </StyledLeftContainer>
          <StyledRightContainer>
-            <StyledSubTitle>Get in touch!</StyledSubTitle>
+            <StyledSubTitle>{t('Get in touch!')}</StyledSubTitle>
            {linkList.map(({ icon, title, link }) => {
              return (
                <StyledSmallLink key={title} href={link} target="_blank">
@ -128,7 +129,7 @@ export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
              target="_blank"
              rel="noreferrer"
            >
-              How is AFFiNE Alpha different？
+              {t('How is AFFiNE Alpha different?')}
            </a>
          </p>
          <p>Copyright &copy; 2022 Toeverything</p>
--- a/packages/app/src/components/editor-mode-switch/index.tsx
+++ b/packages/app/src/components/editor-mode-switch/index.tsx
@ -15,7 +15,7 @@ import { useTheme } from '@/providers/themeProvider';
 import { EdgelessIcon, PaperIcon } from './icons';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { usePageHelper } from '@/hooks/use-page-helper';
-
+import { useTranslation } from 'react-i18next';
 const PaperItem = ({ active }: { active?: boolean }) => {
  const {
    theme: {
@ -96,7 +96,7 @@ export const EditorModeSwitch = ({
    setRadioItemStatus(modifyRadioItemStatus());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isHover, mode]);
-
+  const { t } = useTranslation();
  return (
    <StyledAnimateRadioContainer
      data-testid="editor-mode-switcher"
@ -106,7 +106,7 @@ export const EditorModeSwitch = ({
    >
      <AnimateRadioItem
        isLeft={true}
-        label="Paper"
+        label={t('Paper')}
        icon={<PaperItem />}
        active={mode === 'page'}
        status={radioItemStatus.left}
@ -126,7 +126,7 @@ export const EditorModeSwitch = ({
      <StyledMiddleLine hidden={!isHover} dark={themeMode === 'dark'} />
      <AnimateRadioItem
        isLeft={false}
-        label="Edgeless"
+        label={t('Edgeless')}
        data-testid="switch-edgeless-item"
        icon={<EdgelessItem />}
        active={mode === 'edgeless'}
--- a/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
+++ b/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
@ -16,12 +16,13 @@ import { usePageHelper } from '@/hooks/use-page-helper';
 import { useConfirm } from '@/providers/confirm-provider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
 import { toast } from '@/ui/toast';
-
+import { useTranslation } from 'react-i18next';
 const PopoverContent = () => {
  const { editor } = useAppState();
  const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
  const { changePageMode } = usePageHelper();
  const { confirm } = useConfirm();
+  const { t } = useTranslation();
  const {
    mode = 'page',
    id = '',
@ -35,11 +36,13 @@ const PopoverContent = () => {
        data-testid="editor-option-menu-favorite"
        onClick={() => {
          toggleFavoritePage(id);
-          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+          toast(
+            !favorite ? t('Removed to Favourites') : t('Added to Favourites')
+          );
        }}
        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
      >
-        {favorite ? 'Remove' : 'Add'} to favourites
+        {favorite ? t('Remove to favourites') : t('Add to favourites')}
      </MenuItem>
      <MenuItem
        icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
@ -48,7 +51,8 @@ const PopoverContent = () => {
          changePageMode(id, mode === 'page' ? 'edgeless' : 'page');
        }}
      >
-        Convert to {mode === 'page' ? 'Edgeless' : 'Page'}
+        {t('Convert to ')}
+        {mode === 'page' ? t('Edgeless') : t('Page')}
      </MenuItem>
      <Menu
        placement="left-start"
@ -60,7 +64,7 @@ const PopoverContent = () => {
              }}
              icon={<ExportToHtmlIcon />}
            >
-              Export to HTML
+              {t('Export to HTML')}
            </MenuItem>
            <MenuItem
              onClick={() => {
@ -68,31 +72,33 @@ const PopoverContent = () => {
              }}
              icon={<ExportToMarkdownIcon />}
            >
-              Export to Markdown
+              {t('Export to Markdown')}
            </MenuItem>
          </>
        }
      >
        <MenuItem icon={<ExportIcon />} isDir={true}>
-          Export
+          {t('Export')}
        </MenuItem>
      </Menu>
      <MenuItem
        data-testid="editor-option-menu-delete"
        onClick={() => {
          confirm({
-            title: 'Delete page?',
-            content: `${title || 'Untitled'} will be moved to Trash`,
-            confirmText: 'Delete',
+            title: t('Delete page?'),
+            content: t('will be moved to Trash', {
+              title: title || 'Untitled',
+            }),
+            confirmText: t('Delete'),
            confirmType: 'danger',
          }).then(confirm => {
            confirm && toggleDeletePage(id);
-            confirm && toast('Moved to Trash');
+            confirm && toast(t('Moved to Trash'));
          });
        }}
        icon={<TrashIcon />}
      >
-        Delete
+        {t('Delete')}
      </MenuItem>
    </>
  );
--- a/packages/app/src/components/header/quick-search-button.tsx
+++ b/packages/app/src/components/header/quick-search-button.tsx
@ -3,15 +3,15 @@ import { IconButton, IconButtonProps } from '@/ui/button';
 import { Tooltip } from '@/ui/tooltip';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/global-modal-provider';
-
+import { useTranslation } from 'react-i18next';
 export const QuickSearchButton = ({
  onClick,
  ...props
 }: Omit<IconButtonProps, 'children'>) => {
  const { triggerQuickSearchModal } = useModal();
-
+  const { t } = useTranslation();
  return (
-    <Tooltip content="Switch to" placement="bottom">
+    <Tooltip content={t('Switch to')} placement="bottom">
      <IconButton
        data-testid="header-quickSearchButton"
        {...props}
--- a/packages/app/src/components/help-island/index.tsx
+++ b/packages/app/src/components/help-island/index.tsx
@ -8,6 +8,7 @@ import {
 import { CloseIcon, ContactIcon, HelpIcon, KeyboardIcon } from './icons';
 import Grow from '@mui/material/Grow';
 import { Tooltip } from '@/ui/tooltip';
+import { useTranslation } from 'react-i18next';
 import { useModal } from '@/providers/global-modal-provider';
 import { useTheme } from '@/providers/themeProvider';
 import useCurrentPageMeta from '@/hooks/use-current-page-meta';
@ -22,7 +23,7 @@ export const HelpIsland = ({
  const { mode: editorMode } = useCurrentPageMeta() || {};
  const { triggerShortcutsModal, triggerContactModal } = useModal();
  const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
-
+  const { t } = useTranslation();
  return (
    <>
      <StyledIsland
@ -37,7 +38,7 @@ export const HelpIsland = ({
        <Grow in={showContent}>
          <StyledIslandWrapper>
            {showList.includes('contact') && (
-              <Tooltip content="Contact Us" placement="left-end">
+              <Tooltip content={t('Contact Us')} placement="left-end">
                <StyledIconWrapper
                  data-testid="right-bottom-contact-us-icon"
                  isEdgelessDark={isEdgelessDark}
@ -51,7 +52,7 @@ export const HelpIsland = ({
              </Tooltip>
            )}
            {showList.includes('shortcuts') && (
-              <Tooltip content="Keyboard Shortcuts" placement="left-end">
+              <Tooltip content={t('Keyboard Shortcuts')} placement="left-end">
                <StyledIconWrapper
                  data-testid="shortcuts-icon"
                  isEdgelessDark={isEdgelessDark}
--- a/packages/app/src/components/import/index.tsx
+++ b/packages/app/src/components/import/index.tsx
@ -6,6 +6,7 @@ import Loading from '@/components/loading';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useAppState } from '@/providers/app-state-provider/context';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 // import { Tooltip } from '@/ui/tooltip';
 type ImportModalProps = {
  open: boolean;
@ -19,6 +20,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
  const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
  const { openPage, createPage } = usePageHelper();
  const { currentWorkspace } = useAppState();
+  const { t } = useTranslation();
  const _applyTemplate = function (pageId: string, template: Template) {
    const page = currentWorkspace?.getPage(pageId);

@ -84,7 +86,7 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
    <Modal open={open} onClose={onClose}>
      <ModalWrapper width={460} minHeight={240}>
        <ModalCloseButton onClick={onClose} />
-        <StyledTitle>Import</StyledTitle>
+        <StyledTitle>{t('Import')}</StyledTitle>

        {status === 'unImported' && (
          <StyledButtonWrapper>
--- a/packages/app/src/components/page-list/operation-cell.tsx
+++ b/packages/app/src/components/page-list/operation-cell.tsx
@ -14,23 +14,25 @@ import {
 } from '@blocksuite/icons';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
-
+import { useTranslation } from 'react-i18next';
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
  const { id, favorite } = pageMeta;
  const { openPage } = usePageHelper();
  const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
  const { confirm } = useConfirm();
-
+  const { t } = useTranslation();
  const OperationMenu = (
    <>
      <MenuItem
        onClick={() => {
          toggleFavoritePage(id);
-          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+          toast(
+            !favorite ? t('Removed to Favourites') : t('Added to Favourites')
+          );
        }}
        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
      >
-        {favorite ? 'Remove' : 'Add'} to favourites
+        {favorite ? t('Remove to favourites') : t('Add to favourites')}
      </MenuItem>
      <MenuItem
        onClick={() => {
@ -38,23 +40,25 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
        }}
        icon={<OpenInNewIcon />}
      >
-        Open in new tab
+        {t('Open in new tab')}
      </MenuItem>
      <MenuItem
        onClick={() => {
          confirm({
-            title: 'Delete page?',
-            content: `${pageMeta.title || 'Untitled'} will be moved to Trash`,
-            confirmText: 'Delete',
+            title: t('Delete page?'),
+            content: t('will be moved to Trash', {
+              title: pageMeta.title || 'Untitled',
+            }),
+            confirmText: t('Delete'),
            confirmType: 'danger',
          }).then(confirm => {
            confirm && toggleDeletePage(id);
-            toast('Moved to Trash');
+            toast(t('Moved to Trash'));
          });
        }}
        icon={<TrashIcon />}
      >
-        Delete
+        {t('Delete')}
      </MenuItem>
    </>
  );
@ -74,7 +78,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
  const { openPage, getPageMeta } = usePageHelper();
  const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
  const { confirm } = useConfirm();
-
+  const { t } = useTranslation();
  return (
    <Wrapper>
      <IconButton
@ -82,7 +86,7 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
        style={{ marginRight: '12px' }}
        onClick={() => {
          toggleDeletePage(id);
-          toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
+          toast(t('restored', { title: getPageMeta(id)?.title || 'Untitled' }));
          openPage(id);
        }}
      >
@ -92,13 +96,13 @@ export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
        darker={true}
        onClick={() => {
          confirm({
-            title: 'Delete permanently?',
-            content: "Once deleted, you can't undo this action.",
-            confirmText: 'Delete',
+            title: t('Delete permanently?'),
+            content: t("Once deleted, you can't undo this action."),
+            confirmText: t('Delete'),
            confirmType: 'danger',
          }).then(confirm => {
            confirm && permanentlyDeletePage(id);
-            toast('Permanently deleted');
+            toast(t('Permanently deleted'));
          });
        }}
      >
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@ -4,10 +4,11 @@ import { StyledModalFooterContent } from './style';
 import { useModal } from '@/providers/global-modal-provider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
-
+import { useTranslation } from 'react-i18next';
 export const Footer = (props: { query: string }) => {
  const { triggerQuickSearchModal } = useModal();
  const { openPage, createPage } = usePageHelper();
+  const { t } = useTranslation();
  const query = props.query;

  return (
@ -25,9 +26,9 @@ export const Footer = (props: { query: string }) => {
      <StyledModalFooterContent>
        <AddIcon />
        {query ? (
-          <span>New &quot;{query}&quot; page</span>
+          <span>{t('New Keyword Page', { query: query })}</span>
        ) : (
-          <span>New page</span>
+          <span>{t('New Page')}</span>
        )}
      </StyledModalFooterContent>
    </Command.Item>
--- a/packages/app/src/components/quick-search/results.tsx
+++ b/packages/app/src/components/quick-search/results.tsx
@ -7,6 +7,7 @@ import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { config } from './config';
 import { NoResultSVG } from './noResultSVG';
+import { useTranslation } from 'react-i18next';
 import usePageHelper from '@/hooks/use-page-helper';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 export const Results = (props: {
@ -27,6 +28,7 @@ export const Results = (props: {
  const { search } = usePageHelper();
  const List = config(currentWorkspaceId);
  const [results, setResults] = useState(new Map<string, string | undefined>());
+  const { t } = useTranslation();
  useEffect(() => {
    setResults(search(query));
    setLoading(false);
@ -47,7 +49,9 @@ export const Results = (props: {
    <>
      {query ? (
        resultsPageMeta.length ? (
-          <Command.Group heading={`Find ${resultsPageMeta.length} results`}>
+          <Command.Group
+            heading={t('Find results', { number: resultsPageMeta.length })}
+          >
            {resultsPageMeta.map(result => {
              return (
                <Command.Item
@ -72,12 +76,12 @@ export const Results = (props: {
          </Command.Group>
        ) : (
          <StyledNotFound>
-            <span>Find 0 result</span>
+            <span>{t('Find 0 result')}</span>
            <NoResultSVG />
          </StyledNotFound>
        )
      ) : (
-        <Command.Group heading="Switch to">
+        <Command.Group heading={t('Switch to')}>
          {List.map(link => {
            return (
              <Command.Item
--- a/packages/app/src/components/shortcuts-modal/index.tsx
+++ b/packages/app/src/components/shortcuts-modal/index.tsx
@ -16,6 +16,7 @@ import {
 import Slide from '@mui/material/Slide';
 import { ModalCloseButton } from '@/ui/modal';
 import { getUaHelper } from '@/utils';
+import { useTranslation } from 'react-i18next';
 type ModalProps = {
  open: boolean;
  onClose: () => void;
@ -27,11 +28,12 @@ const isMac = () => {

 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
  const markdownShortcuts = isMac()
-    ? macMarkdownShortcuts
-    : winMarkdownShortcuts;
+    ? macMarkdownShortcuts()
+    : winMarkdownShortcuts();
  const keyboardShortcuts = isMac()
-    ? macKeyboardShortcuts
-    : windowsKeyboardShortcuts;
+    ? macKeyboardShortcuts()
+    : windowsKeyboardShortcuts();
+  const { t } = useTranslation();
  return createPortal(
    <Slide direction="left" in={open} mountOnEnter unmountOnExit>
      <StyledShortcutsModal data-testid="shortcuts-modal">
@ -39,7 +41,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
          <StyledModalHeader>
            <StyledTitle>
              <KeyboardIcon />
-              Shortcuts
+              {t('Shortcuts')}
            </StyledTitle>

            <ModalCloseButton
@ -53,7 +55,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
            />
          </StyledModalHeader>
          <StyledSubTitle style={{ marginTop: 0 }}>
-            Keyboard Shortcuts
+            {t('Keyboard Shortcuts')}
          </StyledSubTitle>
          {Object.entries(keyboardShortcuts).map(([title, shortcuts]) => {
            return (
@ -63,7 +65,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
              </StyledListItem>
            );
          })}
-          <StyledSubTitle>Markdown Syntax</StyledSubTitle>
+          <StyledSubTitle>{t('Markdown Syntax')}</StyledSubTitle>
          {Object.entries(markdownShortcuts).map(([title, shortcuts]) => {
            return (
              <StyledListItem key={title}>
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@ -25,18 +25,18 @@ import Link from 'next/link';
 import { Tooltip } from '@/ui/tooltip';
 import { useModal } from '@/providers/global-modal-provider';
 import { useAppState } from '@/providers/app-state-provider/context';
-
 import { IconButton } from '@/ui/button';
 // import { WorkspaceSelector } from './WorkspaceSelector';
 import useLocalStorage from '@/hooks/use-local-storage';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { useTranslation } from 'react-i18next';

 const FavoriteList = ({ showList }: { showList: boolean }) => {
  const { openPage } = usePageHelper();
  const pageList = usePageMetaList();
  const router = useRouter();
-
+  const { t } = useTranslation();
  const favoriteList = pageList.filter(p => p.favorite && !p.trash);
  return (
    <Collapse in={showList}>
@ -59,7 +59,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
        );
      })}
      {favoriteList.length === 0 && (
-        <StyledSubListItem disable={true}>No item</StyledSubListItem>
+        <StyledSubListItem disable={true}>{t('No item')}</StyledSubListItem>
      )}
    </Collapse>
  );
@ -70,7 +70,7 @@ export const WorkSpaceSliderBar = () => {
  const { currentWorkspaceId } = useAppState();
  const { openPage, createPage } = usePageHelper();
  const router = useRouter();
-
+  const { t } = useTranslation();
  const [showTip, setShowTip] = useState(false);
  const [show, setShow] = useLocalStorage('AFFiNE_SLIDE_BAR', false, true);

@ -86,7 +86,7 @@ export const WorkSpaceSliderBar = () => {
    <>
      <StyledSliderBar show={show}>
        <Tooltip
-          content={show ? 'Collapse sidebar' : 'Expand sidebar'}
+          content={show ? t('Collapse sidebar') : t('Expand sidebar')}
          placement="right"
          visible={showTip}
        >
@ -120,17 +120,17 @@ export const WorkSpaceSliderBar = () => {
            }}
          >
            <SearchIcon />
-            Quick search
+            {t('Quick search')}
          </StyledListItem>
          <Link href={{ pathname: paths.all }}>
            <StyledListItem active={router.asPath === paths.all}>
-              <AllPagesIcon /> <span>All pages</span>
+              <AllPagesIcon /> <span>{t('All pages')}</span>
            </StyledListItem>
          </Link>
          <StyledListItem active={router.asPath === paths.favorite}>
            <StyledLink href={{ pathname: paths.favorite }}>
              <FavouritesIcon />
-              Favourites
+              {t('Favourites')}
            </StyledLink>
            <IconButton
              darker={true}
@ -152,12 +152,12 @@ export const WorkSpaceSliderBar = () => {
              triggerImportModal();
            }}
          >
-            <ImportIcon /> Import
+            <ImportIcon /> {t('Import')}
          </StyledListItem>

          <Link href={{ pathname: paths.trash }}>
            <StyledListItem active={router.asPath === paths.trash}>
-              <TrashIcon /> Trash
+              <TrashIcon /> {t('Trash')}
            </StyledListItem>
          </Link>
          <StyledNewPageButton
@ -168,7 +168,7 @@ export const WorkSpaceSliderBar = () => {
              }
            }}
          >
-            <AddIcon /> New Page
+            <AddIcon /> {t('New Page')}
          </StyledNewPageButton>
        </StyledSliderBarWrapper>
      </StyledSliderBar>
--- a/packages/app/src/pages/workspace/[workspaceId]/all.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/all.tsx
@ -4,13 +4,13 @@ import usePageMetaList from '@/hooks/use-page-meta-list';
 import { PageListHeader } from '@/components/header';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 const All = () => {
  const pageMetaList = usePageMetaList();
-
+  const { t } = useTranslation();
  return (
    <>
-      <PageListHeader icon={<AllPagesIcon />}>All Page</PageListHeader>
+      <PageListHeader icon={<AllPagesIcon />}>{t('All pages')}</PageListHeader>
      <PageList
        pageList={pageMetaList.filter(p => !p.trash)}
        showFavoriteTag={true}
--- a/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/favorite.tsx
@ -4,12 +4,15 @@ import { FavouritesIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 export const Favorite = () => {
  const pageMetaList = usePageMetaList();
+  const { t } = useTranslation();
  return (
    <>
-      <PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
+      <PageListHeader icon={<FavouritesIcon />}>
+        {t('Favourites')}
+      </PageListHeader>
      <PageList pageList={pageMetaList.filter(p => p.favorite && !p.trash)} />
    </>
  );
--- a/packages/app/src/pages/workspace/[workspaceId]/trash.tsx
+++ b/packages/app/src/pages/workspace/[workspaceId]/trash.tsx
@ -4,12 +4,13 @@ import { TrashIcon } from '@blocksuite/icons';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { ReactElement } from 'react';
 import WorkspaceLayout from '@/components/workspace-layout';
-
+import { useTranslation } from 'react-i18next';
 export const Trash = () => {
  const pageMetaList = usePageMetaList();
+  const { t } = useTranslation();
  return (
    <>
-      <PageListHeader icon={<TrashIcon />}>Trash</PageListHeader>
+      <PageListHeader icon={<TrashIcon />}>{t('Trash')}</PageListHeader>
      <PageList pageList={pageMetaList.filter(p => p.trash)} isTrash={true} />
    </>
  );
--- a/packages/app/src/ui/confirm/Confirm.tsx
+++ b/packages/app/src/ui/confirm/Confirm.tsx
@ -7,6 +7,7 @@ import {
  StyledModalWrapper,
 } from '@/ui/confirm/styles';
 import { Button } from '@/ui/button';
+import { useTranslation } from 'react-i18next';
 export type ConfirmProps = {
  title?: string;
  content?: string;
@ -26,6 +27,7 @@ export const Confirm = ({
  onCancel,
 }: ConfirmProps) => {
  const [open, setOpen] = useState(true);
+  const { t } = useTranslation();
  return (
    <Modal open={open}>
      <StyledModalWrapper>
@ -48,7 +50,7 @@ export const Confirm = ({
            }}
            style={{ marginRight: '24px' }}
          >
-            Cancel
+            {t('Cancel')}
          </Button>
          <Button
            type={confirmType}