feat: add translation

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

@@ -24,7 +24,7 @@ import { useAppState } from '@/providers/app-state-provider/context';
 import { toast } from '@/ui/toast';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTheme } from '@/providers/themeProvider';
-
+import { useTranslation } from 'react-i18next';
 const FavoriteTag = ({
   pageMeta: { favorite, id },
 }: {
@@ -32,9 +32,10 @@ const FavoriteTag = ({
 }) => {
   const { toggleFavoritePage } = usePageHelper();
   const { theme } = useTheme();
+  const { t } = useTranslation();
   return (
     <Tooltip
-      content={favorite ? 'Favourited' : 'Favourite'}
+      content={favorite ? t('Favourited') : t('Favourite')}
       placement="top-start"
     >
       <IconButton
@@ -43,7 +44,9 @@ const FavoriteTag = ({
         onClick={e => {
           e.stopPropagation();
           toggleFavoritePage(id);
-          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+          toast(
+            !favorite ? t('Removed to Favourites') : t('Added to Favourites')
+          );
         }}
         style={{
           color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
@@ -71,6 +74,7 @@ export const PageList = ({
 }) => {
   const router = useRouter();
   const { currentWorkspaceId } = useAppState();
+  const { t } = useTranslation();
   if (pageList.length === 0) {
     return <Empty />;
   }
@@ -80,10 +84,10 @@ export const PageList = ({
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell proportion={0.5}>Title</TableCell>
-            <TableCell proportion={0.2}>Created</TableCell>
+            <TableCell proportion={0.5}>{t('Title')}</TableCell>
+            <TableCell proportion={0.2}>{t('Created')}</TableCell>
             <TableCell proportion={0.2}>
-              {isTrash ? 'Moved to Trash' : 'Updated'}
+              {isTrash ? t('Moved to Trash') : t('Updated')}
             </TableCell>
             <TableCell proportion={0.1}></TableCell>
           </TableRow>
@@ -108,7 +112,7 @@ export const PageList = ({
                         <PaperIcon />
                       )}
                       <Content ellipsis={true} color="inherit">
-                        {pageMeta.title || 'Untitled'}
+                        {pageMeta.title || t('Untitled')}
                       </Content>
                     </StyledTitleLink>
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}

packages/app/src/components/quick-search/config.ts

@@ -1,21 +1,22 @@
 import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
-
-export const config = (currentWorkspaceId: string) => {
+import { useTranslation } from 'react-i18next';
+export const useSwitchToConfig = (currentWorkspaceId: string) => {
+  const { t } = useTranslation();
   const List = [
     {
-      title: 'All pages',
+      title: t('All pages'),
       href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/all` : '',
       icon: AllPagesIcon,
     },
     {
-      title: 'Favourites',
+      title: t('Favourites'),
       href: currentWorkspaceId
         ? `/workspace/${currentWorkspaceId}/favorite`
         : '',
       icon: FavouritesIcon,
     },
     {
-      title: 'Trash',
+      title: t('Trash'),
       href: currentWorkspaceId ? `/workspace/${currentWorkspaceId}/trash` : '',
       icon: TrashIcon,
     },

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

@@ -5,7 +5,7 @@ import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { config } from './config';
+import { useSwitchToConfig } from './config';
 import { NoResultSVG } from './noResultSVG';
 import { useTranslation } from 'react-i18next';
 import usePageHelper from '@/hooks/use-page-helper';
@@ -26,7 +26,7 @@ export const Results = (props: {
   const router = useRouter();
   const { currentWorkspaceId } = useAppState();
   const { search } = usePageHelper();
-  const List = config(currentWorkspaceId);
+  const List = useSwitchToConfig(currentWorkspaceId);
   const [results, setResults] = useState(new Map<string, string | undefined>());
   const { t } = useTranslation();
   useEffect(() => {

packages/app/src/components/shortcuts-modal/config.ts

@@ -1,71 +1,85 @@
-export const macKeyboardShortcuts = {
-  Undo: '⌘+Z',
-  Redo: '⌘+⇧+Z',
-  Bold: '⌘+B',
-  Italic: '⌘+I',
-  Underline: '⌘+U',
-  Strikethrough: '⌘+⇧+S',
-  'Inline code': ' ⌘+E',
-  'Code block': '⌘+⌥+C',
-  Link: '⌘+K',
-  'Body text': '⌘+⌥+0',
-  'Heading 1': '⌘+⌥+1',
-  'Heading 2': '⌘+⌥+2',
-  'Heading 3': '⌘+⌥+3',
-  'Heading 4': '⌘+⌥+4',
-  'Heading 5': '⌘+⌥+5',
-  'Heading 6': '⌘+⌥+6',
-  'Increase indent': 'Tab',
-  'Reduce indent': '⇧+Tab',
+import { useTranslation } from 'react-i18next';
+export const useMacKeyboardShortcuts = () => {
+  const { t } = useTranslation();
+  return {
+    [t('Undo')]: '⌘+Z',
+    [t('Redo')]: '⌘+⇧+Z',
+    [t('Bold')]: '⌘+B',
+    [t('Italic')]: '⌘+I',
+    [t('Underline')]: '⌘+U',
+    [t('Strikethrough')]: '⌘+⇧+S',
+    [t('Inline code')]: ' ⌘+E',
+    [t('Code block')]: '⌘+⌥+C',
+    [t('Link')]: '⌘+K',
+    [t('Body text')]: '⌘+⌥+0',
+    [t('Heading', { number: '1' })]: '⌘+⌥+1',
+    [t('Heading', { number: '2' })]: '⌘+⌥+2',
+    [t('Heading', { number: '3' })]: '⌘+⌥+3',
+    [t('Heading', { number: '4' })]: '⌘+⌥+4',
+    [t('Heading', { number: '5' })]: '⌘+⌥+5',
+    [t('Heading', { number: '6' })]: '⌘+⌥+6',
+    [t('Increase indent')]: 'Tab',
+    [t('Reduce indent')]: '⇧+Tab',
+  };
 };
 
-export const macMarkdownShortcuts = {
-  Bold: '**Text** ',
-  Italic: '*Text* ',
-  Underline: '~Text~ ',
-  Strikethrough: '~~Text~~ ',
-  Divider: '***',
-  'Inline code': '`Text` ',
-  'Code block': '``` Space',
-  'Heading 1': '# Text',
-  'Heading 2': '## Text',
-  'Heading 3': '### Text',
-  'Heading 4': '#### Text',
-  'Heading 5': '##### Text',
-  'Heading 6': '###### Text',
+export const useMacMarkdownShortcuts = () => {
+  const { t } = useTranslation();
+  return {
+    [t('Bold')]: '**Text** ',
+    [t('Italic')]: '*Text* ',
+    [t('Underline')]: '~Text~ ',
+    [t('Strikethrough')]: '~~Text~~ ',
+    [t('Divider')]: '***',
+    [t('Inline code')]: '`Text` ',
+    [t('Code block')]: '``` Space',
+    [t('Heading', { number: '1' })]: '# Text',
+    [t('Heading', { number: '2' })]: '## Text',
+    [t('Heading', { number: '3' })]: '### Text',
+    [t('Heading', { number: '4' })]: '#### Text',
+    [t('Heading', { number: '5' })]: '##### Text',
+    [t('Heading', { number: '6' })]: '###### Text',
+  };
 };
 
-export const windowsKeyboardShortcuts = {
-  Undo: 'Ctrl+Z',
-  Redo: 'Ctrl+Y',
-  Bold: 'Ctrl+B',
-  Italic: 'Ctrl+I',
-  Underline: 'Ctrl+U',
-  Strikethrough: 'Ctrl+Shift+S',
-  'Inline code': ' Ctrl+E',
-  'Code block': 'Ctrl+Alt+C',
-  Link: 'Ctrl+K',
-  'Body text': 'Ctrl+Shift+0',
-  'Heading 1': 'Ctrl+Shift+1',
-  'Heading 2': 'Ctrl+Shift+2',
-  'Heading 3': 'Ctrl+Shift+3',
-  'Heading 4': 'Ctrl+Shift+4',
-  'Heading 5': 'Ctrl+Shift+5',
-  'Heading 6': 'Ctrl+Shift+6',
-  'Increase indent': 'Tab',
-  'Reduce indent': 'Shift+Tab',
+export const useWindowsKeyboardShortcuts = () => {
+  const { t } = useTranslation();
+  return {
+    [t('Undo')]: 'Ctrl+Z',
+    [t('Redo')]: 'Ctrl+Y',
+    [t('Bold')]: 'Ctrl+B',
+    [t('Italic')]: 'Ctrl+I',
+    [t('Underline')]: 'Ctrl+U',
+    [t('Strikethrough')]: 'Ctrl+Shift+S',
+    [t('Inline code')]: ' Ctrl+E',
+    [t('Code block')]: 'Ctrl+Alt+C',
+    [t('Link')]: 'Ctrl+K',
+    [t('Body text')]: 'Ctrl+Shift+0',
+    [t('Heading', { number: '1' })]: 'Ctrl+Shift+1',
+    [t('Heading', { number: '2' })]: 'Ctrl+Shift+2',
+    [t('Heading', { number: '3' })]: 'Ctrl+Shift+3',
+    [t('Heading', { number: '4' })]: 'Ctrl+Shift+4',
+    [t('Heading', { number: '5' })]: 'Ctrl+Shift+5',
+    [t('Heading', { number: '6' })]: 'Ctrl+Shift+6',
+    [t('Increase indent')]: 'Tab',
+    [t('Reduce indent')]: 'Shift+Tab',
+  };
 };
-export const winMarkdownShortcuts = {
-  Bold: '**Text** ',
-  Italic: '*Text* ',
-  Underline: '~Text~ ',
-  Strikethrough: '~~Text~~ ',
-  'Inline code': '`Text` ',
-  'Code block': '``` Text',
-  'Heading 1': '# Text',
-  'Heading 2': '## Text',
-  'Heading 3': '### Text',
-  'Heading 4': '#### Text',
-  'Heading 5': '##### Text',
-  'Heading 6': '###### Text',
+export const useWinMarkdownShortcuts = () => {
+  const { t } = useTranslation();
+  return {
+    [t('Bold')]: '**Text** ',
+    [t('Italic')]: '*Text* ',
+    [t('Underline')]: '~Text~ ',
+    [t('Strikethrough')]: '~~Text~~ ',
+    [t('Divider')]: '***',
+    [t('Inline code')]: '`Text` ',
+    [t('Code block')]: '``` Text',
+    [t('Heading', { number: '1' })]: '# Text',
+    [t('Heading', { number: '2' })]: '## Text',
+    [t('Heading', { number: '3' })]: '### Text',
+    [t('Heading', { number: '4' })]: '#### Text',
+    [t('Heading', { number: '5' })]: '##### Text',
+    [t('Heading', { number: '6' })]: '###### Text',
+  };
 };

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

@@ -8,10 +8,10 @@ import {
   StyledTitle,
 } from './style';
 import {
-  macKeyboardShortcuts,
-  macMarkdownShortcuts,
-  windowsKeyboardShortcuts,
-  winMarkdownShortcuts,
+  useMacKeyboardShortcuts,
+  useMacMarkdownShortcuts,
+  useWindowsKeyboardShortcuts,
+  useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
 import Slide from '@mui/material/Slide';
 import { ModalCloseButton } from '@/ui/modal';
@@ -27,13 +27,18 @@ const isMac = () => {
 };
 
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
-  const markdownShortcuts = isMac()
-    ? macMarkdownShortcuts()
-    : winMarkdownShortcuts();
-  const keyboardShortcuts = isMac()
-    ? macKeyboardShortcuts()
-    : windowsKeyboardShortcuts();
   const { t } = useTranslation();
+  const macMarkdownShortcuts = useMacMarkdownShortcuts();
+  const winMarkdownShortcuts = useWinMarkdownShortcuts();
+  const macKeyboardShortcuts = useMacKeyboardShortcuts();
+  const windowsKeyboardShortcuts = useWindowsKeyboardShortcuts();
+  const markdownShortcuts = isMac()
+    ? macMarkdownShortcuts
+    : winMarkdownShortcuts;
+  const keyboardShortcuts = isMac()
+    ? macKeyboardShortcuts
+    : windowsKeyboardShortcuts;
+
   return createPortal(
     <Slide direction="left" in={open} mountOnEnter unmountOnExit>
       <StyledShortcutsModal data-testid="shortcuts-modal">