feat: mock login

.github/CODEOWNERS

@@ -0,0 +1,2 @@
+**/project.json @darkskygit
+**/pnpm-lock.yaml @darkskygit

packages/app/next.config.js

@@ -4,6 +4,11 @@ const { dependencies } = require('./package.json');
 const path = require('node:path');
 const printer = require('./scripts/printer').printer;
 
+const enableDebugLocal = path.isAbsolute(process.env.LOCAL_BLOCK_SUITE ?? '');
+const EDITOR_VERSION = enableDebugLocal
+  ? 'local-version'
+  : dependencies['@blocksuite/editor'];
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   productionBrowserSourceMaps: true,
@@ -16,7 +21,7 @@ const nextConfig = {
     CI: process.env.CI || null,
     VERSION: getGitVersion(),
     COMMIT_HASH: getCommitHash(),
-    EDITOR_VERSION: dependencies['@blocksuite/editor'],
+    EDITOR_VERSION,
   },
   webpack: config => {
     config.experiments = { ...config.experiments, topLevelAwait: true };
@@ -63,11 +68,25 @@ const baseDir = process.env.LOCAL_BLOCK_SUITE ?? '/';
 const withDebugLocal = require('next-debug-local')(
   {
     '@blocksuite/editor': path.resolve(baseDir, 'packages', 'editor'),
+    '@blocksuite/blocks/models': path.resolve(
+      baseDir,
+      'packages',
+      'blocks',
+      'src',
+      'models'
+    ),
+    '@blocksuite/blocks/std': path.resolve(
+      baseDir,
+      'packages',
+      'blocks',
+      'src',
+      'std'
+    ),
     '@blocksuite/blocks': path.resolve(baseDir, 'packages', 'blocks'),
     '@blocksuite/store': path.resolve(baseDir, 'packages', 'store'),
   },
   {
-    enable: path.isAbsolute(process.env.LOCAL_BLOCK_SUITE ?? ''),
+    enable: enableDebugLocal,
   }
 );
 

packages/app/package.json

@@ -45,7 +45,7 @@
     "@types/react": "18.0.20",
     "@types/react-dom": "18.0.6",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "chalk-next": "^6.1.5",
+    "chalk": "^4.1.2",
     "eslint": "8.22.0",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "^8.5.0",

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>
   );
 };

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,27 +51,31 @@ 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;
   onClose: () => void;
 };
 
-export const ContactModal = ({ open, onClose }: TransitionsModalProps) => {
+export const ContactModal = ({
+  open,
+  onClose,
+}: TransitionsModalProps): JSX.Element => {
+  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 +113,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 +132,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>

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'}

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 from Favourites') : t('Added to Favourites')
+          );
         }}
         icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
-        {favorite ? 'Remove' : 'Add'} to favourites
+        {favorite ? t('Remove from 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?',
+            title: t('Delete page?'),
-            content: `${title || 'Untitled'} will be moved to Trash`,
+            content: t('will be moved to Trash', {
-            confirmText: 'Delete',
+              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>
     </>
   );

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}

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}

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>

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 from 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.5}>{t('Title')}</TableCell>
-            <TableCell proportion={0.2}>Created</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/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 from Favourites') : t('Added to Favourites')
+          );
         }}
         icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
-        {favorite ? 'Remove' : 'Add'} to favourites
+        {favorite ? t('Remove from 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?',
+            title: t('Delete page?'),
-            content: `${pageMeta.title || 'Untitled'} will be moved to Trash`,
+            content: t('will be moved to Trash', {
-            confirmText: 'Delete',
+              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?',
+            title: t('Delete permanently?'),
-            content: "Once deleted, you can't undo this action.",
+            content: t("Once deleted, you can't undo this action."),
-            confirmText: 'Delete',
+            confirmText: t('Delete'),
             confirmType: 'danger',
           }).then(confirm => {
             confirm && permanentlyDeletePage(id);
-            toast('Permanently deleted');
+            toast(t('Permanently deleted'));
           });
         }}
       >

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

@@ -1,21 +1,29 @@
 import { AllPagesIcon, FavouritesIcon, TrashIcon } from '@blocksuite/icons';
+import { useTranslation } from 'react-i18next';
 
-export const config = (currentWorkspaceId: string) => {
+export const useSwitchToConfig = (
+  currentWorkspaceId: string
+): {
+  title: string;
+  href: string;
+  icon: React.FC<React.SVGProps<SVGSVGElement>>;
+}[] => {
+  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/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>

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

@@ -5,8 +5,9 @@ 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';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 export const Results = (props: {
@@ -25,8 +26,9 @@ 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(() => {
     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

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

@@ -1,71 +1,88 @@
-export const macKeyboardShortcuts = {
+import { useTranslation } from 'react-i18next';
-  Undo: '⌘+Z',
+interface ShortcutTip {
-  Redo: '⌘+⇧+Z',
+  [x: string]: string;
-  Bold: '⌘+B',
+}
-  Italic: '⌘+I',
+export const useMacKeyboardShortcuts = (): ShortcutTip => {
-  Underline: '⌘+U',
+  const { t } = useTranslation();
-  Strikethrough: '⌘+⇧+S',
+  return {
-  'Inline code': ' ⌘+E',
+    [t('Undo')]: '⌘+Z',
-  'Code block': '⌘+⌥+C',
+    [t('Redo')]: '⌘+⇧+Z',
-  Link: '⌘+K',
+    [t('Bold')]: '⌘+B',
-  'Body text': '⌘+⌥+0',
+    [t('Italic')]: '⌘+I',
-  'Heading 1': '⌘+⌥+1',
+    [t('Underline')]: '⌘+U',
-  'Heading 2': '⌘+⌥+2',
+    [t('Strikethrough')]: '⌘+⇧+S',
-  'Heading 3': '⌘+⌥+3',
+    [t('Inline code')]: ' ⌘+E',
-  'Heading 4': '⌘+⌥+4',
+    [t('Code block')]: '⌘+⌥+C',
-  'Heading 5': '⌘+⌥+5',
+    [t('Link')]: '⌘+K',
-  'Heading 6': '⌘+⌥+6',
+    [t('Body text')]: '⌘+⌥+0',
-  'Increase indent': 'Tab',
+    [t('Heading', { number: '1' })]: '⌘+⌥+1',
-  'Reduce indent': '⇧+Tab',
+    [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 = {
+export const useMacMarkdownShortcuts = (): ShortcutTip => {
-  Bold: '**Text** ',
+  const { t } = useTranslation();
-  Italic: '*Text* ',
+  return {
-  Underline: '~Text~ ',
+    [t('Bold')]: '**Text** ',
-  Strikethrough: '~~Text~~ ',
+    [t('Italic')]: '*Text* ',
-  Divider: '***',
+    [t('Underline')]: '~Text~ ',
-  'Inline code': '`Text` ',
+    [t('Strikethrough')]: '~~Text~~ ',
-  'Code block': '``` Space',
+    [t('Divider')]: '***',
-  'Heading 1': '# Text',
+    [t('Inline code')]: '`Text` ',
-  'Heading 2': '## Text',
+    [t('Code block')]: '``` Space',
-  'Heading 3': '### Text',
+    [t('Heading', { number: '1' })]: '# Text',
-  'Heading 4': '#### Text',
+    [t('Heading', { number: '2' })]: '## Text',
-  'Heading 5': '##### Text',
+    [t('Heading', { number: '3' })]: '### Text',
-  'Heading 6': '###### Text',
+    [t('Heading', { number: '4' })]: '#### Text',
+    [t('Heading', { number: '5' })]: '##### Text',
+    [t('Heading', { number: '6' })]: '###### Text',
+  };
 };
 
-export const windowsKeyboardShortcuts = {
+export const useWindowsKeyboardShortcuts = (): ShortcutTip => {
-  Undo: 'Ctrl+Z',
+  const { t } = useTranslation();
-  Redo: 'Ctrl+Y',
+  return {
-  Bold: 'Ctrl+B',
+    [t('Undo')]: 'Ctrl+Z',
-  Italic: 'Ctrl+I',
+    [t('Redo')]: 'Ctrl+Y',
-  Underline: 'Ctrl+U',
+    [t('Bold')]: 'Ctrl+B',
-  Strikethrough: 'Ctrl+Shift+S',
+    [t('Italic')]: 'Ctrl+I',
-  'Inline code': ' Ctrl+E',
+    [t('Underline')]: 'Ctrl+U',
-  'Code block': 'Ctrl+Alt+C',
+    [t('Strikethrough')]: 'Ctrl+Shift+S',
-  Link: 'Ctrl+K',
+    [t('Inline code')]: ' Ctrl+E',
-  'Body text': 'Ctrl+Shift+0',
+    [t('Code block')]: 'Ctrl+Alt+C',
-  'Heading 1': 'Ctrl+Shift+1',
+    [t('Link')]: 'Ctrl+K',
-  'Heading 2': 'Ctrl+Shift+2',
+    [t('Body text')]: 'Ctrl+Shift+0',
-  'Heading 3': 'Ctrl+Shift+3',
+    [t('Heading', { number: '1' })]: 'Ctrl+Shift+1',
-  'Heading 4': 'Ctrl+Shift+4',
+    [t('Heading', { number: '2' })]: 'Ctrl+Shift+2',
-  'Heading 5': 'Ctrl+Shift+5',
+    [t('Heading', { number: '3' })]: 'Ctrl+Shift+3',
-  'Heading 6': 'Ctrl+Shift+6',
+    [t('Heading', { number: '4' })]: 'Ctrl+Shift+4',
-  'Increase indent': 'Tab',
+    [t('Heading', { number: '5' })]: 'Ctrl+Shift+5',
-  'Reduce indent': 'Shift+Tab',
+    [t('Heading', { number: '6' })]: 'Ctrl+Shift+6',
+    [t('Increase indent')]: 'Tab',
+    [t('Reduce indent')]: 'Shift+Tab',
+  };
 };
-export const winMarkdownShortcuts = {
+export const useWinMarkdownShortcuts = (): ShortcutTip => {
-  Bold: '**Text** ',
+  const { t } = useTranslation();
-  Italic: '*Text* ',
+  return {
-  Underline: '~Text~ ',
+    [t('Bold')]: '**Text** ',
-  Strikethrough: '~~Text~~ ',
+    [t('Italic')]: '*Text* ',
-  'Inline code': '`Text` ',
+    [t('Underline')]: '~Text~ ',
-  'Code block': '``` Text',
+    [t('Strikethrough')]: '~~Text~~ ',
-  'Heading 1': '# Text',
+    [t('Divider')]: '***',
-  'Heading 2': '## Text',
+    [t('Inline code')]: '`Text` ',
-  'Heading 3': '### Text',
+    [t('Code block')]: '``` Text',
-  'Heading 4': '#### Text',
+    [t('Heading', { number: '1' })]: '# Text',
-  'Heading 5': '##### Text',
+    [t('Heading', { number: '2' })]: '## Text',
-  'Heading 6': '###### 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,14 +8,15 @@ import {
   StyledTitle,
 } from './style';
 import {
-  macKeyboardShortcuts,
+  useMacKeyboardShortcuts,
-  macMarkdownShortcuts,
+  useMacMarkdownShortcuts,
-  windowsKeyboardShortcuts,
+  useWindowsKeyboardShortcuts,
-  winMarkdownShortcuts,
+  useWinMarkdownShortcuts,
 } from '@/components/shortcuts-modal/config';
 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;
@@ -26,12 +27,18 @@ const isMac = () => {
 };
 
 export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
+  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">
@@ -39,7 +46,7 @@ export const ShortcutsModal = ({ open, onClose }: ModalProps) => {
           <StyledModalHeader>
             <StyledTitle>
               <KeyboardIcon />
-              Shortcuts
+              {t('Shortcuts')}
             </StyledTitle>
 
             <ModalCloseButton
@@ -53,7 +60,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 +70,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}>

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

@@ -40,6 +40,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
         >
           <Header>
             <ContentTitle>My Workspaces</ContentTitle>
+            {/* <LanguageMenu /> */}
             <ModalCloseButton
               top={6}
               right={6}

packages/app/src/components/workspace-modal/languageMenu.tsx

@@ -0,0 +1,95 @@
+import { LOCALES } from '@/libs/i18n/resources/index';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import type { TooltipProps } from '@mui/material';
+import { styled } from '@/styles';
+import { Button, Tooltip } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LanguageMenu = () => {
+  const { i18n } = useTranslation();
+  const changeLanguage = (event: string) => {
+    i18n.changeLanguage(event);
+  };
+  const [show, setShow] = useState(false);
+  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
+  const [languageName, setLanguageName] = useState(
+    currentLanguage?.originalName
+  );
+  return (
+    <StyledTooltip
+      title={
+        <>
+          {LOCALES.map(option => {
+            return (
+              <ListItem
+                key={option.name}
+                title={option.name}
+                onClick={() => {
+                  changeLanguage(option.tag);
+                  setShow(false);
+                  setLanguageName(option.originalName);
+                }}
+              >
+                {option.originalName}
+              </ListItem>
+            );
+          })}
+        </>
+      }
+      open={show}
+    >
+      <StyledTitleButton
+        variant="text"
+        onClick={() => {
+          setShow(!show);
+        }}
+      >
+        <StyledContainer>
+          <StyledText>{languageName}</StyledText>
+          <UnfoldMoreIcon />
+        </StyledContainer>
+      </StyledTitleButton>
+    </StyledTooltip>
+  );
+};
+
+const StyledContainer = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const StyledText = styled('span')(({ theme }) => ({
+  marginRight: '4px',
+  marginLeft: '16px',
+  fontSize: theme.font.sm,
+  fontWeight: '500',
+  textTransform: 'capitalize',
+}));
+const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  zIndex: theme.zIndex.modal,
+  '& .MuiTooltip-tooltip': {
+    backgroundColor: theme.colors.popoverBackground,
+    boxShadow: theme.shadow.modal,
+    color: theme.colors.popoverColor,
+  },
+}));
+
+const ListItem = styled(Button)(({ theme }) => ({
+  display: 'block',
+  width: '100%',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+  textTransform: 'capitalize',
+}));
+
+const StyledTitleButton = styled(Button)(({ theme }) => ({
+  position: 'absolute',
+  right: '50px',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+}));

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -27,18 +27,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 useLocalStorage from '@/hooks/use-local-storage';
 import usePageMetaList from '@/hooks/use-page-meta-list';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { WorkspaceSetting } from '@/components/workspace-setting';
+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}>
@@ -61,7 +61,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
         );
       })}
       {favoriteList.length === 0 && (
-        <StyledSubListItem disable={true}>No item</StyledSubListItem>
+        <StyledSubListItem disable={true}>{t('No item')}</StyledSubListItem>
       )}
     </Collapse>
   );
@@ -72,7 +72,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);
 
@@ -90,7 +90,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}
         >
@@ -124,17 +124,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}
@@ -170,12 +170,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
@@ -186,7 +186,7 @@ export const WorkSpaceSliderBar = () => {
               }
             }}
           >
-            <AddIcon /> New Page
+            <AddIcon /> {t('New Page')}
           </StyledNewPageButton>
         </StyledSliderBarWrapper>
       </StyledSliderBar>

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

@@ -1,22 +1 @@
-{
+{}
-    "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-    "Add A Below Block": "নীচে একটি ব্লক যোগ করুন",
-    "WarningTips": {
-        "IsNotfsApiSupported": "অ্যাফাইন ডেমোতে স্বাগতম। পরিবর্তনগুলি সংরক্ষণ করা শুরু করতে আপনি Chrome/Edge এর মতো ক্রোমিয়াম ভিত্তিক ব্রাউজারের সর্বশেষ সংস্করণের মাধ্যমে ডিস্কে ডেটা সিঙ্ক করতে পারেন",
-        "DoNotStore": "অ্যাফাইন সক্রিয় ডেভেলপমেন্ট এর অধীনে এবং বর্তমান সংস্করণটি অস্থিতিশীল।  দয়া করে কোন তথ্য বা ডেটা সঞ্চয় করবেন না"
-    },
-    "Language": "ভাষা",
-    "Settings": "সেটিংস",
-    "Share": "শেয়ার করুন",
-    "Comment": "মন্তব্য",
-    "Delete": "মুছে ফেলুন",
-    "Copy Page Link": "পেজ লিংক কপি করুন",
-    "Duplicate Page": "সদৃশ পৃষ্ঠা তৈরি করুন",
-    "Logout": "লগআউট",
-    "Divide Here As A New Group": "একটি নতুন গ্রুপ হিসেবে বিভক্ত করুন",
-    "ComingSoon": "লেআউট সেটিংস শীঘ্রই আসছে...",
-    "Clear Workspace": "ওয়ার্কস্পেস পরিষ্কার করুন",
-    "Layout": "লেআউট",
-    "Turn into": "রূপান্তর করুন",
-    "Sync to Disk": "ডিস্ক এ সিঙ্ক করুন"
-}

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

@@ -1,28 +1,65 @@
 {
-  "Sync to Disk": "Sync to Disk",
+  "Quick search": "Quick search",
-  "Share": "Share",
+  "All pages": "All pages",
-  "WarningTips": {
+  "Favourites": "Favourites",
-    "IsNotfsApiSupported": "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",
+  "No item": "No item",
-    "IsNotLocalWorkspace": "Welcome to the AFFiNE demo. To begin saving changes you can SYNC TO DISK.",
+  "Import": "Import",
-    "DoNotStore": "AFFiNE is under active development and the current version is UNSTABLE. Please DO NOT store information or data"
+  "Trash": "Trash",
-  },
+  "New Page": "New Page",
-  "Layout": "Layout",
+  "New Keyword Page": "New '{{query}}' page",
-  "Comment": "Comment",
+  "Find 0 result": "Find 0 result",
-  "Settings": "Settings",
+  "Find results": "Find {{number}} results",
-  "ComingSoon": "Layout Settings Coming Soon...",
+  "Collapse sidebar": "Collapse sidebar",
-  "Duplicate Page": "Duplicate Page",
+  "Expand sidebar": "Expand sidebar",
-  "Copy Page Link": "Copy Page Link",
+  "Removed from Favourites": "Removed from Favourites",
-  "Language": "Language",
+  "Remove from favourites": "Remove from favourites",
-  "Clear Workspace": "Clear Workspace",
+  "Added to Favourites": "Added to Favourites",
-  "Export As Markdown": "Export As Markdown",
+  "Add to favourites": "Add to favourites",
-  "Export As HTML": "Export As HTML",
+  "Paper": "Paper",
-  "Export As PDF (Unsupported)": "Export As PDF (Unsupported)",
+  "Edgeless": "Edgeless",
-  "Import Workspace": "Import Workspace",
+  "Switch to": "Switch to",
-  "Export Workspace": "Export Workspace",
+  "Convert to ": "Convert to ",
-  "Last edited by": "Last edited by {{name}}",
+  "Page": "Page",
-  "Logout": "Logout",
+  "Export": "Export",
+  "Export to HTML": "Export to HTML",
+  "Export to Markdown": "Export to Markdown",
   "Delete": "Delete",
-  "Turn into": "Turn into",
+  "Title": "Title",
-  "Add A Below Block": "Add A Below Block",
+  "Untitled": "Untitled",
-  "Divide Here As A New Group": "Divide Here As A New Group"
+  "Created": "Created",
+  "Updated": "Updated",
+  "Open in new tab": "Open in new tab",
+  "Favourite": "Favourite",
+  "Favourited": "Favourited",
+  "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.",
+  "Moved to Trash": "Moved to Trash",
+  "Permanently deleted": "Permanently deleted",
+  "restored": "{{title}} restored",
+  "Cancel": "Cancel",
+  "Keyboard Shortcuts": "Keyboard Shortcuts",
+  "Contact Us": "Contact Us",
+  "Official Website": "Official Website",
+  "Get in touch!": "Get in touch!",
+  "AFFiNE Community": "AFFiNE Community",
+  "How is AFFiNE Alpha different?": "How is AFFiNE Alpha different?",
+  "Shortcuts": "Shortcuts",
+  "Undo": "Undo",
+  "Redo": "Redo",
+  "Bold": "Bold",
+  "Italic": "Italic",
+  "Underline": "Underline",
+  "Strikethrough": "Strikethrough",
+  "Inline code": "Inline code",
+  "Code block": "Code block",
+  "Link": "Link",
+  "Body text": "Body text",
+  "Heading": "Heading {{number}}",
+  "Increase indent": "Increase indent",
+  "Reduce indent": "Reduce indent",
+  "Markdown Syntax": "Markdown Syntax",
+  "Divider": "Divider",
+  "404 - Page Not Found": "404 - Page Not Found"
 }

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

@@ -1,29 +1 @@
-{
+{}
-    "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-    "ComingSoon": "Bientôt disponible",
-    "Duplicate Page": "Dupliquer la page",
-    "Copy Page Link": "Copier le lien de la page",
-    "Delete": "Supprimer",
-    "Comment": "Commentaire",
-    "Export As HTML": "Exporter en HTML",
-    "Export As Markdown": "Exporter en Markdown",
-    "Export As PDF (Unsupported)": "exporter en PDF (non supporté)",
-    "Logout": "Déconnexion",
-    "Export Workspace": "Exporter l'espace de travail",
-    "Import Workspace": "Importer l'espace de travail",
-    "Language": "Langue",
-    "Last edited by": "Dernière édition par {{name}}",
-    "Layout": "Mise en forme",
-    "Settings": "Réglages",
-    "Share": "Partager",
-    "Sync to Disk": "Synchroniser sur le disque",
-    "Turn into": "Transformer en",
-    "WarningTips": {
-        "DoNotStore": "Affine est en développement actif ; la version actuelle est INSTABLE. Veuillez NE PAS stocker d'informations ou de données",
-        "IsNotLocalWorkspace": "Bienvenue sur la démo d'AFFiNE. Pour commencer à sauvegarder vos modifications, vous pouvez SYNCHRONISER SUR LE DISQUE",
-        "IsNotfsApiSupported": "Bienvenue sur la démo d'AFFiNE. Pour commencer à sauvegarder vos modifications, vous pouvez SYNCHRONISER SUR LE DISQUE\navec la dernière version d'un navigateur basé sur Chromium tel que Chrome ou Edge."
-    },
-    "Add A Below Block": "Ajouter un bloc en-dessous",
-    "Divide Here As A New Group": "Séparer ici en un nouveau groupe",
-    "Clear Workspace": "Vider l'espace de travail"
-}

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

@@ -1,27 +1 @@
-{
+{}
-    "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-    "Clear Workspace": "Očisti radni prostor",
-    "ComingSoon": "Podešavanja za izgled dolaze",
-    "Comment": "Komentar",
-    "Copy Page Link": "Kopiraj link stranice",
-    "Delete": "Obriši",
-    "Duplicate Page": "Dupliraj stranicu",
-    "Export As HTML": "Izvezi kao HTML",
-    "Export As Markdown": "Izvezi kao Markdown",
-    "Export As PDF (Unsupported)": "Izvezi kao PDF (nepodržano)",
-    "Export Workspace": "Izvezi radnu površinu",
-    "Import Workspace": "Poboljšaj radnu površinu",
-    "Language": "Jezik",
-    "Last edited by": "Zadnju promenu uradio {{ime}}",
-    "Layout": "Izgled",
-    "Logout": "Odjava",
-    "Settings": "Podešavanja",
-    "Share": "Podeli",
-    "Sync to Disk": "Sinhroniziraj sa diskom",
-    "Turn into": "Promeni u",
-    "WarningTips": {
-        "DoNotStore": "AFFiNE je u stanju aktivnog razvoja i trenutna verzija je NESTABILNA. Molimo vas, NEMOJTE čuvati informacije ili podatke.",
-        "IsNotLocalWorkspace": "Dobrodošli u AFFiNE demo. Da bi započeli proces čuvanja promena možete kliknuti SINHRONIZUJ SA DISKOM.",
-        "IsNotfsApiSupported": "Dobrodošli u AFFiNE demo. Da bi započeli proces čuvanja promena možete SINHRONIZOVATI NA DISK sa poslednjom verzijom pretraživača tipa Chromium, kao što su Chrome/Edge."
-    }
-}

packages/app/src/libs/i18n/resources/zh-Hans.json

@@ -1,29 +1,65 @@
 {
-  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
+  "Quick search": "快速搜索",
-  "Sync to Disk": "同步到磁盘",
+  "All pages": "全部页面",
-  "Share": "分享",
+  "Favourites": "收藏夹",
-  "WarningTips": {
+  "No item": "没有项目",
-    "IsNotfsApiSupported": "欢迎来到AFFiNE 的演示界面。您可以使用最新版本的基于Chrome的浏览器（如Chrome/Edge）将数据同步到磁盘来进行保存",
+  "Import": "导入",
-    "IsNotLocalWorkspace": "欢迎来到AFFiNE 的演示界面，您可以同步到磁盘来进行保存操作。",
+  "Trash": "回收站",
-    "DoNotStore": "AFFiNE 正在积极开发中，当前版本不稳定。请不要存储信息或数据。"
+  "New Page": "新建文章",
-  },
+  "New Keyword Page": "新建 '{{query}}' 为标题的文章",
-  "ComingSoon": "布局设置即将到来",
+  "Find 0 result": "找到 0 个结果",
-  "Layout": "布局",
+  "Find results": "找到 {{number}} 个结果",
-  "Comment": "评论",
+  "Collapse sidebar": "关闭侧边栏",
-  "Settings": "设置",
+  "Expand sidebar": "展开侧边栏",
-  "Duplicate Page": "复制页面",
+  "Removed from Favourites": "已从收藏中移除",
-  "Copy Page Link": "复制页面链接",
+  "Remove from favourites": "从收藏中移除",
-  "Language": "当前语言",
+  "Added to Favourites": "已添加到收藏",
-  "Clear Workspace": "清空工作区域",
+  "Add to favourites": "添加到收藏",
-  "Export As Markdown": "导出 markdown",
+  "Paper": "文章",
-  "Export As HTML": "导出 HTML",
+  "Edgeless": "无边模式",
-  "Export As PDF (Unsupported)": "导出 PDF (暂不支持)",
+  "Switch to": "跳转到",
-  "Import Workspace": "导入 Workspace",
+  "Convert to ": "转换成 ",
-  "Export Workspace": "导出 Workspace",
+  "Page": "文章",
-  "Last edited by": "最后编辑者为 {{name}}",
+  "Export": "导出",
-  "Logout": "退出登录",
+  "Export to HTML": "导出到 HTML",
+  "Export to Markdown": "导出到 Markdown",
   "Delete": "删除",
-  "Turn into": "转换为",
+  "Title": "标题",
-  "Add A Below Block": "在下方添加一个新块",
+  "Untitled": "无标题",
-  "Divide Here As A New Group": "从这里划分一个新组"
+  "Created": "创建时间",
+  "Updated": "更新时间",
+  "Open in new tab": "在新页面打开",
+  "Favourite": "收藏",
+  "Favourited": "已收藏",
+  "Delete page?": "删除文章?",
+  "Delete permanently?": "永久删除?",
+  "will be moved to Trash": "{{title}} 将被移动到回收站",
+  "Once deleted, you can't undo this action.": "一次性删除，无法恢复。",
+  "Moved to Trash": "已移动到回收站",
+  "Permanently deleted": "已永久删除",
+  "restored": "{{title}} 已恢复",
+  "Cancel": "取消",
+  "Keyboard Shortcuts": "快捷键",
+  "Contact Us": "联系我们",
+  "Official Website": "官网",
+  "Get in touch!": "Get in touch!",
+  "AFFiNE Community": "AFFiNE Community",
+  "How is AFFiNE Alpha different?": "How is AFFiNE Alpha different?",
+  "Shortcuts": "Shortcuts",
+  "Undo": "Undo",
+  "Redo": "Redo",
+  "Bold": "Bold",
+  "Italic": "Italic",
+  "Underline": "Underline",
+  "Strikethrough": "Strikethrough",
+  "Inline code": "Inline code",
+  "Code block": "Code block",
+  "Link": "Link",
+  "Body text": "Body text",
+  "Heading": "Heading {{number}}",
+  "Increase indent": "Increase indent",
+  "Reduce indent": "Reduce indent",
+  "Markdown Syntax": "Markdown Syntax",
+  "Divider": "Divider",
+  "404 - Page Not Found": "404 - Page Not Found"
 }

packages/app/src/libs/i18n/resources/zh-Hant.json

@@ -1,29 +1 @@
-{
+{}
-  "// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.": "",
-  "Add A Below Block": "在下方新添塊",
-  "Clear Workspace": "清空工作區",
-  "ComingSoon": "自定義佈局功能即將與您見面",
-  "Comment": "評論",
-  "Copy Page Link": "拷貝頁面鏈接",
-  "Delete": "刪除",
-  "Divide Here As A New Group": "從此地劃分成新組",
-  "Duplicate Page": "複製界面",
-  "Export As HTML": "導出 HTML",
-  "Export As Markdown": "以 Markdown 導出",
-  "Export As PDF (Unsupported)": "導出為 PDF（即將可用）",
-  "Export Workspace": "導出 Workspace",
-  "Import Workspace": "導入 Workspace",
-  "Language": "語言",
-  "Last edited by": "最後編輯者為  {{name}}",
-  "Layout": "佈局",
-  "Logout": "退出登錄",
-  "Settings": "設置",
-  "Share": "分享",
-  "Sync to Disk": "同步到磁盤",
-  "Turn into": "轉換為",
-  "WarningTips": {
-    "DoNotStore": "我們正在積極開發 AFFiNE，目前版本尚不穩定，請避免存儲信息或數據。",
-    "IsNotLocalWorkspace": "歡迎來到 AFFiNE 演示界面。您可以通過「同步到磁盤」來保存更改。",
-    "IsNotfsApiSupported": "歡迎進入AFFiNE演示！使用最新版本的基於 Chromium 內核的瀏覽器如Chrome/Edge，您可以通過「同步到磁盤」來保存更改"
-  }
-}

packages/app/src/pages/_app.tsx

@@ -18,6 +18,7 @@ import { useEffect } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
 import { PageLoading } from '@/components/loading';
 import Head from 'next/head';
+import '@/libs/i18n';
 
 const ThemeProvider = dynamic(() => import('@/providers/themeProvider'), {
   ssr: false,

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}

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)} />
     </>
   );

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} />
     </>
   );

packages/app/src/templates/Welcome-to-AFFiNE-Alpha-v2.0.md

@@ -27,7 +27,7 @@ Let us know what you think of this latest version.
 
 ### Playground:
 
-[] Try a horiztaonl line: `---`
+[] Try a horizontal line: `---`
 
 [] What about a code block? ```
 

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;
@@ -28,6 +29,7 @@ export const Confirm = ({
   cancelText = 'Cancel',
 }: ConfirmProps) => {
   const [open, setOpen] = useState(true);
+  const { t } = useTranslation();
   return (
     <Modal open={open}>
       <StyledModalWrapper>
@@ -50,7 +52,7 @@ export const Confirm = ({
             }}
             style={{ marginRight: '24px' }}
           >
-            {cancelText}
+            {cancelText === 'Cancel' ? t('Cancel') : cancelText}
           </Button>
           <Button
             type={confirmType}

packages/data-center/src/apis/token.ts

@@ -60,7 +60,9 @@ class Token {
   }
 
   async initToken(token: string) {
-    this._setToken(await login({ token, type: 'Google' }));
+    const tokens = await login({ token, type: 'Google' });
+    this._setToken(tokens);
+    return this._user;
   }
 
   async refreshToken(token?: string) {
@@ -153,10 +155,27 @@ export const getAuthorizer = () => {
 
     const googleAuthProvider = new GoogleAuthProvider();
 
+    const getToken = async () => {
+      const currentUser = firebaseAuth.currentUser;
+      if (currentUser) {
+        await currentUser.getIdTokenResult(true);
+        if (!currentUser.isAnonymous) {
+          return currentUser.getIdToken();
+        }
+      }
+      return;
+    };
+
     const signInWithGoogle = async () => {
-      const user = await signInWithPopup(firebaseAuth, googleAuthProvider);
+      const idToken = await getToken();
-      const idToken = await user.user.getIdToken();
+      if (idToken) {
-      await token.initToken(idToken);
+        await token.initToken(idToken);
+      } else {
+        const user = await signInWithPopup(firebaseAuth, googleAuthProvider);
+        const idToken = await user.user.getIdToken();
+        await token.initToken(idToken);
+      }
+      return firebaseAuth.currentUser;
     };
 
     const onAuthStateChanged = (callback: (user: User | null) => void) => {

packages/data-center/src/datacenter.ts

@@ -1,6 +1,6 @@
 import assert from 'assert';
 import { BlockSchema } from '@blocksuite/blocks/models';
-import { Workspace } from '@blocksuite/store';
+import { Workspace, Signal } from '@blocksuite/store';
 
 import { getLogger } from './index.js';
 import { getApis, Apis } from './apis/index.js';
@@ -16,6 +16,17 @@ type LoadConfig = {
   config?: Record<string, any>;
 };
 
+export type DataCenterSignals = DataCenter['signals'];
+type WorkspaceItem = {
+  // provider id
+  provider: string;
+  // data exists locally
+  locally: boolean;
+};
+type WorkspaceLoadEvent = WorkspaceItem & {
+  workspace: string;
+};
+
 export class DataCenter {
   private readonly _apis: Apis;
   private readonly _providers = new Map<string, typeof BaseProvider>();
@@ -23,6 +34,11 @@ export class DataCenter {
   private readonly _config;
   private readonly _logger;
 
+  readonly signals = {
+    listAdd: new Signal<WorkspaceLoadEvent>(),
+    listRemove: new Signal<string>(),
+  };
+
   static async init(debug: boolean): Promise<DataCenter> {
     const dc = new DataCenter(debug);
     dc.addProvider(AffineProvider);
@@ -36,6 +52,16 @@ export class DataCenter {
     this._config = getKVConfigure('sys');
     this._logger = getLogger('dc');
     this._logger.enabled = debug;
+
+    this.signals.listAdd.on(e => {
+      this._config.set(`list:${e.workspace}`, {
+        provider: e.provider,
+        locally: e.locally,
+      });
+    });
+    this.signals.listRemove.on(workspace => {
+      this._config.delete(`list:${workspace}`);
+    });
   }
 
   get apis(): Readonly<Apis> {
@@ -86,9 +112,9 @@ export class DataCenter {
     await provider.init({
       apis: this._apis,
       config,
-      globalConfig: getKVConfigure(`provider:${providerId}`),
       debug: this._logger.enabled,
       logger: this._logger.extend(`${Provider.id}:${id}`),
+      signals: this.signals,
       workspace,
     });
     await provider.initData();
@@ -97,6 +123,21 @@ export class DataCenter {
     return provider;
   }
 
+  async auth(providerId: string, globalConfig?: Record<string, any>) {
+    const Provider = this._providers.get(providerId);
+    if (Provider) {
+      // initial configurator
+      const config = getKVConfigure(`provider:${providerId}`);
+      // set workspace configs
+      const values = Object.entries(globalConfig || {});
+      if (values.length) await config.setMany(values);
+
+      const logger = this._logger.extend(`auth:${providerId}`);
+      logger.enabled = this._logger.enabled;
+      await Provider.auth(config, logger, this.signals);
+    }
+  }
+
   /**
    * load workspace data to memory
    * @param workspaceId workspace id
@@ -154,21 +195,14 @@ export class DataCenter {
    * data state is also map, the key is the provider id, and the data exists locally when the value is true, otherwise it does not exist
    */
   async list(): Promise<Record<string, Record<string, boolean>>> {
-    const lists = await Promise.all(
+    const entries: [string, WorkspaceItem][] = await this._config.entries();
-      Array.from(this._providers.entries()).map(([providerId, provider]) =>
+    return entries.reduce((acc, [k, i]) => {
-        provider
+      if (k.startsWith('list:')) {
-          .list(getKVConfigure(`provider:${providerId}`))
+        const key = k.slice(5);
-          .then(list => [providerId, list || []] as const)
+        acc[key] = acc[key] || {};
-      )
+        acc[key][i.provider] = i.locally;
-    );
-
-    return lists.reduce((ret, [providerId, list]) => {
-      for (const [item, isLocal] of list) {
-        const workspace = ret[item] || {};
-        workspace[providerId] = isLocal;
-        ret[item] = workspace;
       }
-      return ret;
+      return acc;
     }, {} as Record<string, Record<string, boolean>>);
   }
 

packages/data-center/src/index.ts

@@ -7,6 +7,17 @@ const _initializeDataCenter = () => {
   return (debug = true) => {
     if (!_dataCenterInstance) {
       _dataCenterInstance = DataCenter.init(debug);
+      _dataCenterInstance.then(dc => {
+        try {
+          if (window) {
+            (window as any).dc = dc;
+          }
+        } catch (_) {
+          // ignore
+        }
+
+        return dc;
+      });
     }
 
     return _dataCenterInstance;

packages/data-center/src/provider/affine/index.ts

@@ -1,11 +1,17 @@
 import assert from 'assert';
-import { applyUpdate } from 'yjs';
+import { applyUpdate, Doc } from 'yjs';
 
-import type { InitialParams } from '../index.js';
+import type {
-import { token, Callback } from '../../apis/index.js';
+  ConfigStore,
+  DataCenterSignals,
+  InitialParams,
+  Logger,
+} from '../index.js';
+import { token, Callback, getApis } from '../../apis/index.js';
 import { LocalProvider } from '../local/index.js';
 
 import { WebsocketProvider } from './sync.js';
+import { IndexedDBProvider } from '../local/indexeddb.js';
 
 export class AffineProvider extends LocalProvider {
   static id = 'affine';
@@ -55,7 +61,14 @@ export class AffineProvider extends LocalProvider {
   }
 
   async initData() {
-    await super.initData();
+    const databases = await indexedDB.databases();
+    await super.initData(
+      // set locally to true if exists a same name db
+      databases
+        .map(db => db.name)
+        .filter(v => v)
+        .includes(this._workspace.room)
+    );
 
     const workspace = this._workspace;
     const doc = workspace.doc;
@@ -64,23 +77,29 @@ export class AffineProvider extends LocalProvider {
 
     if (workspace.room && token.isLogin) {
       try {
-        const updates = await this._apis.downloadWorkspace(workspace.room);
+        // init data from cloud
-        if (updates) {
+        await AffineProvider._initCloudDoc(
-          await new Promise(resolve => {
+          workspace.room,
-            doc.once('update', resolve);
+          doc,
-            applyUpdate(doc, new Uint8Array(updates));
+          this._logger,
-          });
+          this._signals
-          // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
+        );
-          this._ws = new WebsocketProvider('/', workspace.room, doc);
+
-          await new Promise<void>((resolve, reject) => {
+        // Wait for ws synchronization to complete, otherwise the data will be modified in reverse, which can be optimized later
-            // TODO: synced will also be triggered on reconnection after losing sync
+        this._ws = new WebsocketProvider('/', workspace.room, doc);
-            // There needs to be an event mechanism to emit the synchronization state to the upper layer
+        await new Promise<void>((resolve, reject) => {
-            assert(this._ws);
+          // TODO: synced will also be triggered on reconnection after losing sync
-            this._ws.once('synced', () => resolve());
+          // There needs to be an event mechanism to emit the synchronization state to the upper layer
-            this._ws.once('lost-connection', () => resolve());
+          assert(this._ws);
-            this._ws.once('connection-error', () => reject());
+          this._ws.once('synced', () => resolve());
-          });
+          this._ws.once('lost-connection', () => resolve());
-        }
+          this._ws.once('connection-error', () => reject());
+        });
+        this._signals.listAdd.emit({
+          workspace: workspace.room,
+          provider: this.id,
+          locally: true,
+        });
       } catch (e) {
         this._logger('Failed to init cloud workspace', e);
       }
@@ -91,4 +110,66 @@ export class AffineProvider extends LocalProvider {
     // just a workaround for yjs
     doc.getMap('space:meta');
   }
+
+  private static async _initCloudDoc(
+    workspace: string,
+    doc: Doc,
+    logger: Logger,
+    signals: DataCenterSignals
+  ) {
+    const apis = getApis();
+    logger(`Loading ${workspace}...`);
+    const updates = await apis.downloadWorkspace(workspace);
+    if (updates) {
+      await new Promise(resolve => {
+        doc.once('update', resolve);
+        applyUpdate(doc, new Uint8Array(updates));
+      });
+      logger(`Loaded: ${workspace}`);
+
+      // only add to list as online workspace
+      signals.listAdd.emit({
+        workspace,
+        provider: this.id,
+        // at this time we always download full workspace
+        // but after we support sub doc, we can only download metadata
+        locally: false,
+      });
+    }
+  }
+
+  static async auth(
+    config: Readonly<ConfigStore<string>>,
+    logger: Logger,
+    signals: DataCenterSignals
+  ) {
+    const refreshToken = await config.get('token');
+    if (refreshToken) {
+      await token.refreshToken(refreshToken);
+      if (token.isLogin && !token.isExpired) {
+        logger('check login success');
+        // login success
+        return;
+      }
+    }
+
+    logger('start login');
+    // login with google
+    const apis = getApis();
+    assert(apis.signInWithGoogle);
+    const user = await apis.signInWithGoogle();
+    assert(user);
+    logger(`login success: ${user.displayName}`);
+
+    // TODO: refresh local workspace data
+    const workspaces = await apis.getWorkspaces();
+    await Promise.all(
+      workspaces.map(async ({ id }) => {
+        const doc = new Doc();
+        const idb = new IndexedDBProvider(id, doc);
+        await idb.whenSynced;
+        await this._initCloudDoc(id, doc, logger, signals);
+      })
+    );
+  }
 }

packages/data-center/src/provider/base.ts

@@ -1,14 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import type { Workspace } from '@blocksuite/store';
 
-import type { Apis, Logger, InitialParams, ConfigStore } from './index';
+import type {
+  Apis,
+  DataCenterSignals,
+  Logger,
+  InitialParams,
+  ConfigStore,
+} from './index';
 
 export class BaseProvider {
   static id = 'base';
   protected _apis!: Readonly<Apis>;
   protected _config!: Readonly<ConfigStore>;
-  protected _globalConfig!: Readonly<ConfigStore>;
   protected _logger!: Logger;
+  protected _signals!: DataCenterSignals;
   protected _workspace!: Workspace;
 
   constructor() {
@@ -22,8 +28,8 @@ export class BaseProvider {
   async init(params: InitialParams) {
     this._apis = params.apis;
     this._config = params.config;
-    this._globalConfig = params.globalConfig;
     this._logger = params.logger;
+    this._signals = params.signals;
     this._workspace = params.workspace;
     this._logger.enabled = params.debug;
   }
@@ -55,6 +61,14 @@ export class BaseProvider {
     return this._workspace;
   }
 
+  static async auth(
+    _config: Readonly<ConfigStore>,
+    logger: Logger,
+    _signals: DataCenterSignals
+  ) {
+    logger("This provider doesn't require authentication");
+  }
+
   // get workspace list，return a map of workspace id and boolean
   // if value is true, it exists locally, otherwise it does not exist locally
   static async list(

packages/data-center/src/provider/index.ts

@@ -1,6 +1,7 @@
 import type { Workspace } from '@blocksuite/store';
 
 import type { Apis } from '../apis';
+import type { DataCenterSignals } from '../datacenter';
 import type { getLogger } from '../index';
 import type { ConfigStore } from '../store';
 
@@ -9,13 +10,13 @@ export type Logger = ReturnType<typeof getLogger>;
 export type InitialParams = {
   apis: Apis;
   config: Readonly<ConfigStore>;
-  globalConfig: Readonly<ConfigStore>;
   debug: boolean;
   logger: Logger;
+  signals: DataCenterSignals;
   workspace: Workspace;
 };
 
-export type { Apis, ConfigStore, Workspace };
+export type { Apis, ConfigStore, DataCenterSignals, Workspace };
 export type { BaseProvider } from './base.js';
 export { AffineProvider } from './affine/index.js';
 export { LocalProvider } from './local/index.js';

packages/data-center/src/provider/local/index.ts

@@ -21,7 +21,7 @@ export class LocalProvider extends BaseProvider {
     this._blobs = blobs;
   }
 
-  async initData() {
+  async initData(locally = true) {
     assert(this._workspace.room);
     this._logger('Loading local data');
     this._idb = new IndexedDBProvider(
@@ -32,14 +32,19 @@ export class LocalProvider extends BaseProvider {
     await this._idb.whenSynced;
     this._logger('Local data loaded');
 
-    await this._globalConfig.set(this._workspace.room, true);
+    this._signals.listAdd.emit({
+      workspace: this._workspace.room,
+      provider: this.id,
+      locally,
+    });
   }
 
   async clear() {
+    assert(this._workspace.room);
     await super.clear();
     await this._blobs.clear();
     await this._idb?.clearData();
-    await this._globalConfig.delete(this._workspace.room!);
+    this._signals.listRemove.emit(this._workspace.room);
   }
 
   async destroy(): Promise<void> {
@@ -59,6 +64,10 @@ export class LocalProvider extends BaseProvider {
     config: Readonly<ConfigStore<boolean>>
   ): Promise<Map<string, boolean> | undefined> {
     const entries = await config.entries();
-    return new Map(entries);
+    return new Map(
+      entries
+        .filter(([key]) => key.startsWith('list:'))
+        .map(([key, value]) => [key.slice(5), value])
+    );
   }
 }

packages/data-center/tests/local/workspace.spec.ts

@@ -35,7 +35,7 @@ test.describe('Workspace', () => {
 
     await dataCenter.reload('test3', { providerId: 'affine' });
     expect(await dataCenter.list()).toStrictEqual({
-      test3: { affine: true, local: true },
+      test3: { affine: true },
       test4: { local: true },
       test5: { local: true },
       test6: { local: true },

pnpm-lock.yaml

@@ -63,7 +63,7 @@ importers:
       '@types/react': 18.0.20
       '@types/react-dom': 18.0.6
       '@types/wicg-file-system-access': ^2020.9.5
-      chalk-next: ^6.1.5
+      chalk: ^4.1.2
       cmdk: ^0.1.20
       css-spring: ^4.1.0
       dayjs: ^1.11.7
@@ -120,7 +120,7 @@ importers:
       '@types/react': 18.0.20
       '@types/react-dom': 18.0.6
       '@types/wicg-file-system-access': 2020.9.5
-      chalk-next: 6.1.5
+      chalk: 4.1.2
       eslint: 8.22.0
       eslint-config-next: 12.3.1_76twfck5d7crjqrmw4yltga7zm
       eslint-config-prettier: 8.5.0_eslint@8.22.0
@@ -4163,14 +4163,6 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
-  /axios/0.21.4:
-    resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
-    dependencies:
-      follow-redirects: 1.15.2
-    transitivePeerDependencies:
-      - debug
-    dev: true
-
   /axobject-query/2.2.0:
     resolution: {integrity: sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==}
     dev: true
@@ -4449,18 +4441,6 @@ packages:
   /caniuse-lite/1.0.30001419:
     resolution: {integrity: sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==}
 
-  /chalk-next/6.1.5:
-    resolution: {integrity: sha512-OAx9F3vSk18qpfCohk0849/j3GyaoIpv8eXjmpdbmLZt+5+sWYq8xwt3B5ue25irLcxFcLL2hAbxxHSsBxupbw==}
-    engines: {node: '>=10'}
-    dependencies:
-      ansi-styles: 4.3.0
-      axios: 0.21.4
-      fs: 0.0.1-security
-      supports-color: 7.2.0
-    transitivePeerDependencies:
-      - debug
-    dev: true
-
   /chalk/2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -5838,16 +5818,6 @@ packages:
     resolution: {integrity: sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==}
     dev: false
 
-  /follow-redirects/1.15.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: true
-
   /form-data-encoder/2.1.4:
     resolution: {integrity: sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==}
     engines: {node: '>= 14.17'}
@@ -5892,10 +5862,6 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
 
-  /fs/0.0.1-security:
-    resolution: {integrity: sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==}
-    dev: true
-
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}

tests/console.spec.ts

@@ -12,10 +12,7 @@ test.describe('web console', () => {
     //Later on, call this function with some arguments.
     // const msg = await getEditoVersionHandle.evaluate((post, args) => post);
     // console.log(getEditoVersionHandle);
-    await page.waitForTimeout(500);
+    const editoVersion = await page.evaluate(() => window.__editoVersion);
-    const editoVersion = await page.evaluate(
-      () => (window as any).__editoVersion
-    );
     // const documentEditorVersion = await page.inputValue('input#editor-version');
     const pkgEditorVersion = pkg.dependencies['@blocksuite/editor'];
 

tests/libs/load-page.ts

@@ -8,6 +8,6 @@ export function loadPage() {
   test.beforeEach(async ({ page }: IType) => {
     await page.goto('http://localhost:8080');
     // waiting for page loading end
-    // await page.waitForTimeout(1000);
+    await page.waitForSelector('#__next');
   });
 }