Merge branch 'develop' into feat/quick-search

packages/app/package.json

@@ -25,6 +25,7 @@
     "@toeverything/pathfinder-logger": "workspace:@pathfinder/logger@*",
     "cmdk": "^0.1.20",
     "css-spring": "^4.1.0",
+    "dayjs": "^1.11.7",
     "lit": "^2.3.1",
     "next": "13.0.1",
     "prettier": "^2.7.1",

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

@@ -75,16 +75,18 @@ const toolbarList2 = [
 const UndoRedo = () => {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  const { editor } = useEditor();
+  const { currentPage } = useEditor();
   useEffect(() => {
-    if (!editor) return;
+    if (!currentPage) return;
-    const { space } = editor;
 
-    space.signals.historyUpdated.on(() => {
+    currentPage.signals.historyUpdated.on(() => {
-      setCanUndo(space.canUndo);
+      setCanUndo(currentPage.canUndo);
-      setCanRedo(space.canRedo);
+      setCanRedo(currentPage.canRedo);
     });
-  }, [editor]);
+    return () => {
+      currentPage.signals.historyUpdated.dispose();
+    };
+  }, [currentPage]);
 
   return (
     <StyledToolbarWrapper>
@@ -92,7 +94,7 @@ const UndoRedo = () => {
         <StyledToolbarItem
           disable={!canUndo}
           onClick={() => {
-            editor?.space?.undo();
+            currentPage?.undo();
           }}
         >
           <UndoIcon />
@@ -102,7 +104,7 @@ const UndoRedo = () => {
         <StyledToolbarItem
           disable={!canRedo}
           onClick={() => {
-            editor?.space?.redo();
+            currentPage?.redo();
           }}
         >
           <RedoIcon />

packages/app/src/components/header/index.tsx

@@ -1,2 +1,3 @@
 export * from './header';
 export * from './page-header';
+export { StyledTitle as HeaderWrapper } from './styles';

packages/app/src/components/import/index.tsx

@@ -1,7 +1,7 @@
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { StyledButtonWrapper, StyledTitle } from './styles';
 import { Button } from '@/ui/button';
-import { Wrapper } from '@/ui/layout';
+import { Wrapper, Content } from '@/ui/layout';
 import { Loading } from '@/components/loading';
 import { useEffect, useState } from 'react';
 type ImportModalProps = {
@@ -9,21 +9,19 @@ type ImportModalProps = {
   onClose: () => void;
 };
 export const ImportModal = ({ open, onClose }: ImportModalProps) => {
-  const [status, setStatus] = useState<'unImported' | 'importing'>(
+  const [status, setStatus] = useState<'unImported' | 'importing'>('importing');
-    'unImported'
-  );
 
   useEffect(() => {
     if (status === 'importing') {
       setTimeout(() => {
         setStatus('unImported');
-      }, 3000);
+      }, 1500);
     }
   }, [status]);
 
   return (
     <Modal open={open} onClose={onClose}>
-      <ModalWrapper width={460} height={240}>
+      <ModalWrapper width={460} minHeight={240}>
         <ModalCloseButton onClick={onClose} />
         <StyledTitle>Import</StyledTitle>
 
@@ -47,8 +45,16 @@ export const ImportModal = ({ open, onClose }: ImportModalProps) => {
         )}
 
         {status === 'importing' && (
-          <Wrapper justifyContent="center" style={{ marginTop: 22 }}>
+          <Wrapper
+            wrap={true}
+            justifyContent="center"
+            style={{ marginTop: 22, paddingBottom: '32px' }}
+          >
             <Loading size={25}></Loading>
+            <Content align="center" weight="500">
+              OOOOPS! Sorry forgot to remind you that we are working on the
+              import function
+            </Content>
           </Wrapper>
         )}
       </ModalWrapper>

packages/app/src/components/import/styles.ts

@@ -23,8 +23,3 @@ export const StyledButtonWrapper = styled.div(() => {
     },
   };
 });
-
-export const StyledLoadingWrapper = styled.div(() => {
-  return {
-  }
-})

packages/app/src/components/page-list/date-cell.tsx

@@ -0,0 +1,24 @@
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import dayjs from 'dayjs';
+import { PageMeta } from '@/providers/editor-provider';
+import { TableCell } from '@/ui/table';
+import React from 'react';
+
+dayjs.extend(localizedFormat);
+
+export const DateCell = ({
+  pageMeta,
+  dateKey,
+}: {
+  pageMeta: PageMeta;
+  dateKey: keyof PageMeta;
+}) => {
+  // dayjs().format('L LT');
+  return (
+    <TableCell ellipsis={true}>
+      {dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:MM')}
+    </TableCell>
+  );
+};
+
+export default DateCell;

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

@@ -12,6 +12,7 @@ import { OperationCell, TrashOperationCell } from './operation-cell';
 import Empty from './empty';
 import Link from 'next/link';
 import React from 'react';
+import DateCell from '@/components/page-list/date-cell';
 const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { toggleFavoritePage } = useEditor();
 
@@ -40,6 +41,7 @@ export const PageList = ({
   if (pageList.length === 0) {
     return <Empty />;
   }
+
   return (
     <StyledTableContainer>
       <Table>
@@ -48,7 +50,7 @@ export const PageList = ({
             <TableCell proportion={0.5}>Documents</TableCell>
             <TableCell proportion={0.2}>Created</TableCell>
             <TableCell proportion={0.2}>
-              {isTrash ? 'Uploaded' : 'Moved to Trash'}
+              {isTrash ? 'Moved to Trash' : 'Uploaded'}
             </TableCell>
             <TableCell proportion={0.1}></TableCell>
           </TableRow>
@@ -69,9 +71,12 @@ export const PageList = ({
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
                   </StyledTitleWrapper>
                 </TableCell>
-                <TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
+                <DateCell pageMeta={pageMeta} dateKey="createDate" />
-                <TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
+                <DateCell
-                <TableCell>
+                  pageMeta={pageMeta}
+                  dateKey={isTrash ? 'trashDate' : 'createDate'}
+                />
+                <TableCell style={{ padding: 0 }}>
                   {isTrash ? (
                     <TrashOperationCell pageMeta={pageMeta} />
                   ) : (

packages/app/src/components/page-list/operation-cell.tsx

@@ -3,7 +3,15 @@ import { useConfirm } from '@/providers/confirm-provider';
 import { Menu, MenuItem } from '@/ui/menu';
 import { Wrapper } from '@/ui/layout';
 import { IconButton } from '@/ui/button';
-import { MoreVerticalIcon, RestoreIcon, DeleteIcon } from '@blocksuite/icons';
+import {
+  MoreVerticalIcon,
+  RestoreIcon,
+  DeleteIcon,
+  FavouritesIcon,
+  FavouritedIcon,
+  OpenInNewIcon,
+  TrashIcon,
+} from '@blocksuite/icons';
 import React from 'react';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
@@ -17,6 +25,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         onClick={() => {
           toggleFavoritePage(id);
         }}
+        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
       >
         {favorite ? 'Remove' : 'Add'} to favourites
       </MenuItem>
@@ -24,6 +33,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         onClick={() => {
           openPage(id);
         }}
+        icon={<OpenInNewIcon />}
       >
         Open in new tab
       </MenuItem>
@@ -39,6 +49,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
             confirm && toggleDeletePage(id);
           });
         }}
+        icon={<TrashIcon />}
       >
         Delete
       </MenuItem>

packages/app/src/components/quick-search/content/searchResult/NotFound.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Command, useCommandState } from 'cmdk';
 
-const NoResult = (props: { query: string }) => {
+const NoResult = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+
   const search = useCommandState(state => state.search);
+  // eslint-disable-next-line react/no-unescaped-entities
   return <Command.Empty>No results found for "{search}".</Command.Empty>;
 };
 

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

@@ -22,7 +22,6 @@ const isMac = () => {
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [query, setQuery] = useState('');
   const { triggerQuickSearchModal } = useModal();
-
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && e.metaKey) {
@@ -38,7 +37,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
     };
     document.addEventListener('keydown', down);
     return () => document.removeEventListener('keydown', down);
-  }, [open]);
+  }, [open, triggerQuickSearchModal]);
   return (
     <Modal open={open} onClose={onClose} wrapperPosition={['top', 'center']}>
       <ModalWrapper

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import {
   StyledArrowButton,
+  StyledLink,
   StyledListItem,
   StyledNewPageButton,
   StyledSliderBar,
@@ -9,7 +10,15 @@ import {
 } from './style';
 import { Arrow } from './icons';
 import Collapse from '@mui/material/Collapse';
-import { ArrowDownIcon } from '@blocksuite/icons';
+import {
+  ArrowDownIcon,
+  SearchIcon,
+  AllPagesIcon,
+  FavouritesIcon,
+  ImportIcon,
+  TrashIcon,
+  AddIcon,
+} from '@blocksuite/icons';
 import Link from 'next/link';
 import { useEditor } from '@/providers/editor-provider';
 import { useModal } from '@/providers/global-modal-provider';
@@ -20,7 +29,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
   const { pageList, openPage } = useEditor();
   const router = useRouter();
 
-  const favoriteList = pageList.filter(p => p.favorite);
+  const favoriteList = pageList.filter(p => p.favorite && !p.trash);
   return (
     <Collapse in={showList}>
       {favoriteList.map((pageMeta, index) => {
@@ -61,20 +70,18 @@ export const WorkSpaceSliderBar = () => {
             triggerQuickSearchModal();
           }}
         >
-          Quick search
+          <SearchIcon /> Quick search
         </StyledListItem>
         <Link href={{ pathname: '/page-list/all' }}>
           <StyledListItem active={router.pathname === '/page-list/all'}>
-            All pages
+            <AllPagesIcon /> All pages
           </StyledListItem>
         </Link>
         <StyledListItem active={router.pathname === '/page-list/favorite'}>
-          <Link
+          <StyledLink href={{ pathname: '/page-list/favorite' }}>
-            href={{ pathname: '/page-list/favorite' }}
+            <FavouritesIcon />
-            style={{ flexGrow: 1, textAlign: 'left', color: 'inherit' }}
-          >
             Favourites
-          </Link>
+          </StyledLink>
           <IconButton
             hoverBackground="#E0E6FF"
             onClick={() => {
@@ -95,12 +102,12 @@ export const WorkSpaceSliderBar = () => {
             triggerImportModal();
           }}
         >
-          Import
+          <ImportIcon /> Import
         </StyledListItem>
 
         <Link href={{ pathname: '/page-list/trash' }}>
           <StyledListItem active={router.pathname === '/page-list/trash'}>
-            Trash
+            <TrashIcon /> Trash
           </StyledListItem>
         </Link>
         <StyledNewPageButton
@@ -110,7 +117,7 @@ export const WorkSpaceSliderBar = () => {
             pageMeta && openPage(pageMeta.id);
           }}
         >
-          New Page
+          <AddIcon /> New Page
         </StyledNewPageButton>
       </StyledSliderBar>
       <StyledArrowButton

packages/app/src/components/workspace-slider-bar/style.ts

@@ -1,4 +1,5 @@
 import { displayFlex, styled, textEllipsis } from '@/styles';
+import Link from 'next/link';
 
 export const StyledSliderBar = styled.div<{ show: boolean }>(
   ({ theme, show }) => {
@@ -54,6 +55,10 @@ export const StyledListItem = styled.button<{ active?: boolean }>(
       paddingLeft: '12px',
       borderRadius: '5px',
       ...displayFlex('flex-start', 'center'),
+      '>svg': {
+        fontSize: '20px',
+        marginRight: '12px',
+      },
       ':hover': {
         color: theme.colors.primaryColor,
         backgroundColor: theme.colors.hoverBackground,
@@ -62,6 +67,21 @@ export const StyledListItem = styled.button<{ active?: boolean }>(
   }
 );
 
+export const StyledLink = styled(Link)(({ theme }) => {
+  return {
+    flexGrow: 1,
+    textAlign: 'left',
+    color: 'inherit',
+    ...displayFlex('flex-start', 'center'),
+    ':visited': {
+      color: 'inherit',
+    },
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});
 export const StyledNewPageButton = styled(StyledListItem)(({ theme }) => {
   return {
     position: 'absolute',

packages/app/src/pages/page-list/all.tsx

@@ -1,12 +1,19 @@
 import { Header } from '@/components/header';
 import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
+import { StyledWrapper } from '@/pages/page-list/styles';
+import { AllPagesIcon } from '@blocksuite/icons';
 
 export const All = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <Header />
+      <Header>
+        <StyledWrapper>
+          <AllPagesIcon />
+          All Pages
+        </StyledWrapper>
+      </Header>
       <PageList
         pageList={allPageList.filter(p => !p.trash)}
         showFavoriteTag={true}

packages/app/src/pages/page-list/favorite.tsx

@@ -1,12 +1,19 @@
 import { Header } from '@/components/header';
 import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
+import { StyledWrapper } from '@/pages/page-list/styles';
+import { FavouritesIcon } from '@blocksuite/icons';
 
 export const Favorite = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <Header />
+      <Header>
+        <StyledWrapper>
+          <FavouritesIcon />
+          Favorites
+        </StyledWrapper>
+      </Header>
       <PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
     </>
   );

packages/app/src/pages/page-list/styles.ts

@@ -0,0 +1,13 @@
+import { HeaderWrapper } from '@/components/header';
+import { styled } from '@/styles';
+
+export const StyledWrapper = styled(HeaderWrapper)(({ theme }) => {
+  return {
+    fontSize: theme.font.sm,
+    color: theme.colors.textColor,
+    '>svg': {
+      fontSize: '20px',
+      marginRight: '12px',
+    },
+  };
+});

packages/app/src/pages/page-list/trash.tsx

@@ -1,12 +1,18 @@
 import { Header } from '@/components/header';
 import { useEditor } from '@/providers/editor-provider';
 import { PageList } from '@/components/page-list';
-
+import { StyledWrapper } from './styles';
+import { TrashIcon } from '@blocksuite/icons';
 export const Trash = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <Header />
+      <Header>
+        <StyledWrapper>
+          <TrashIcon />
+          Trash
+        </StyledWrapper>
+      </Header>
       <PageList pageList={allPageList.filter(p => p.trash)} isTrash={true} />
     </>
   );

packages/app/src/providers/editor-provider/interface.ts

@@ -17,8 +17,6 @@ export type EditorHandlers = {
     query?: { [key: string]: string }
   ) => Promise<boolean>;
   getPageMeta: (pageId: string) => PageMeta | void;
-  deletePage: (pageId: string) => void;
-  recyclePage: (pageId: string) => void;
   toggleDeletePage: (pageId: string) => void;
   favoritePage: (pageId: string) => void;
   unFavoritePage: (pageId: string) => void;

packages/app/src/providers/editor-provider/useEditorHandler.ts

@@ -26,15 +26,10 @@ export const useEditorHandler = (workspace?: Workspace): EditorHandlers => {
         },
       });
     },
-    deletePage: pageId => {
-      workspace!.setPageMeta(pageId, { trash: true });
-    },
-    recyclePage: pageId => {
-      workspace!.setPageMeta(pageId, { trash: false });
-    },
     toggleDeletePage: pageId => {
       const pageMeta = workspace!.meta.pageMetas.find(p => p.id === pageId);
       if (pageMeta) {
+        workspace!.meta.setPage(pageId, { trashDate: new Date().getTime() });
         workspace!.setPageMeta(pageId, { trash: !pageMeta.trash });
       }
     },

packages/app/src/ui/layout/content.tsx

@@ -5,9 +5,10 @@ import { styled, textEllipsis } from '@/styles';
 export type ContentProps = {
   width?: CSSProperties['width'];
   maxWidth?: CSSProperties['maxWidth'];
+  align?: CSSProperties['textAlign'];
   color?: CSSProperties['color'];
   fontSize?: CSSProperties['fontSize'];
-  fontWeight?: CSSProperties['fontWeight'];
+  weight?: CSSProperties['fontWeight'];
   lineHeight?: CSSProperties['lineHeight'];
   ellipsis?: boolean;
   lineNum?: number;
@@ -19,20 +20,22 @@ export const Content = styled.div<ContentProps>(
     theme,
     color,
     fontSize,
-    fontWeight,
+    weight,
     lineHeight,
     ellipsis,
     lineNum,
     width,
     maxWidth,
+    align,
   }) => {
     return {
       width,
       maxWidth,
+      textAlign: align,
       display: 'inline-block',
       color: color ?? theme.colors.textColor,
       fontSize: fontSize ?? theme.font.base,
-      fontWeight: fontWeight ?? 400,
+      fontWeight: weight ?? 400,
       lineHeight: lineHeight ?? 1.5,
       ...(ellipsis ? textEllipsis(lineNum) : {}),
     };

packages/app/src/ui/layout/wrapper.tsx

@@ -6,19 +6,19 @@ export type WrapperProps = {
   flexDirection?: CSSProperties['flexDirection'];
   justifyContent?: CSSProperties['justifyContent'];
   alignItems?: CSSProperties['alignItems'];
-  flexWrap?: CSSProperties['flexWrap'];
+  wrap?: boolean;
   flexShrink?: CSSProperties['flexShrink'];
   flexGrow?: CSSProperties['flexGrow'];
 };
 
 // Sometimes we just want to wrap a component with a div to set flex or other styles, but we don't want to create a new component for it.
-export const Wrapper = styled('button', {
+export const Wrapper = styled('div', {
   shouldForwardProp: prop => {
     return ![
       'display',
       'justifyContent',
       'alignItems',
-      'flexWrap',
+      'wrap',
       'flexDirection',
       'flexShrink',
       'flexGrow',
@@ -29,7 +29,7 @@ export const Wrapper = styled('button', {
     display = 'flex',
     justifyContent = 'flex-start',
     alignItems = 'center',
-    flexWrap = 'nowrap',
+    wrap = false,
     flexDirection = 'row',
     flexShrink = '0',
     flexGrow = '0',
@@ -38,7 +38,7 @@ export const Wrapper = styled('button', {
       display,
       justifyContent,
       alignItems,
-      flexWrap,
+      flexWrap: wrap ? 'wrap' : 'nowrap',
       flexDirection,
       flexShrink,
       flexGrow,

packages/app/src/ui/modal/modal-wrapper.tsx

@@ -4,10 +4,12 @@ import { styled } from '@/styles';
 export const ModalWrapper = styled.div<{
   width?: CSSProperties['width'];
   height?: CSSProperties['height'];
-}>(({ theme, width, height }) => {
+  minHeight?: CSSProperties['minHeight'];
+}>(({ theme, width, height, minHeight }) => {
   return {
     width,
     height,
+    minHeight,
     backgroundColor: theme.colors.popoverBackground,
     borderRadius: '12px',
     position: 'relative',

pnpm-lock.yaml

@@ -41,6 +41,7 @@ importers:
       '@types/react-dom': 18.0.6
       cmdk: ^0.1.20
       css-spring: ^4.1.0
+      dayjs: ^1.11.7
       eslint: 8.22.0
       eslint-config-next: 12.3.1
       eslint-config-prettier: ^8.5.0
@@ -70,6 +71,7 @@ importers:
       '@toeverything/pathfinder-logger': link:../logger
       cmdk: 0.1.20_7ey2zzynotv32rpkwno45fsx4e
       css-spring: 4.1.0
+      dayjs: 1.11.7
       lit: 2.4.0
       next: 13.0.1_biqbaboplfbrettd7655fr4n2y
       prettier: 2.7.1
@@ -1579,6 +1581,10 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: false
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -1877,7 +1883,7 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
+      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
       debug: 3.2.7
       eslint: 8.22.0
       eslint-import-resolver-node: 0.3.6
@@ -1896,7 +1902,7 @@ packages:
       '@typescript-eslint/parser':
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.38.0_eslint@8.22.0
+      '@typescript-eslint/parser': 5.38.0_76twfck5d7crjqrmw4yltga7zm
       array-includes: 3.1.5
       array.prototype.flat: 1.3.0
       debug: 2.6.9