Merge branch 'develop' into feat/quick-search

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

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

packages/app/src/components/edgeless-toolbar/style.ts

@@ -2,7 +2,7 @@ import { styled, displayFlex } from '@/styles';
 
 export const StyledEdgelessToolbar = styled.div(({ theme }) => ({
   height: '320px',
-  position: 'fixed',
+  position: 'absolute',
   left: '12px',
   top: 0,
   bottom: 0,

packages/app/src/components/editor.tsx

@@ -3,7 +3,7 @@ import { useEditor, initDefaultContent } from '@/providers/editor-provider';
 
 export const Editor = () => {
   const editorContainer = useRef<HTMLDivElement>(null);
-  const { editor } = useEditor();
+  const { editor, onHistoryUpdated } = useEditor();
   const ref = useRef<any>();
   useEffect(() => {
     if (editor && ref.current?.page.id !== editor?.page.id) {

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

@@ -142,12 +142,8 @@ const HeaderRight = () => {
 };
 
 export const Header = ({ children }: PropsWithChildren<{}>) => {
-  const { pageList } = useEditor();
-
   const [showWarning, setShowWarning] = useState(shouldShowWarning());
-  const router = useRouter();
-  const currentPageMeta = pageList.find(p => p.id === router.query.pageId);
-  const isTrash = !!currentPageMeta?.trash;
+
   return (
     <StyledHeaderContainer hasWarning={showWarning}>
       <BrowserWarning

packages/app/src/components/header/page-header.tsx

@@ -18,18 +18,17 @@ export const PageHeader = () => {
   const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
 
-  const { editor } = useEditor();
+  const { editor, onPropsUpdated } = useEditor();
   const { triggerQuickSearchModal } = useModal();
+
   useEffect(() => {
-    if (editor?.model) {
-      setTitle(editor.model.title || 'Untitled');
-      editor.model.propsUpdated.on(() => {
-        setTitle(editor.model.title);
-      });
-    }
-    return () => {
-      editor?.model?.propsUpdated.dispose();
-    };
+    onPropsUpdated(editor => {
+      setTitle(editor.model.title);
+    });
+  }, [onPropsUpdated]);
+
+  useEffect(() => {
+    setTitle(editor?.model.title || 'Untitled');
   }, [editor]);
 
   return (

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

@@ -16,7 +16,9 @@ export const DateCell = ({
   // dayjs().format('L LT');
   return (
     <TableCell ellipsis={true}>
-      {dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:MM')}
+      {pageMeta[dateKey] === undefined
+        ? '--'
+        : dayjs(pageMeta[dateKey] as string).format('YYYY-MM-DD HH:mm')}
     </TableCell>
   );
 };

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

@@ -1,16 +1,21 @@
 import { PageMeta, useEditor } from '@/providers/editor-provider';
-import { FavouritedIcon, FavouritesIcon } from '@blocksuite/icons';
+import {
+  FavouritedIcon,
+  FavouritesIcon,
+  PaperIcon,
+  EdgelessIcon,
+} from '@blocksuite/icons';
 import {
   StyledFavoriteButton,
   StyledTableContainer,
   StyledTableRow,
-  StyledTitleContent,
+  StyledTitleLink,
   StyledTitleWrapper,
 } from './styles';
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table';
 import { OperationCell, TrashOperationCell } from './operation-cell';
 import Empty from './empty';
-import Link from 'next/link';
+import { Content } from '@/ui/layout';
 import React from 'react';
 import DateCell from '@/components/page-list/date-cell';
 const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
@@ -50,7 +55,7 @@ export const PageList = ({
             <TableCell proportion={0.5}>Documents</TableCell>
             <TableCell proportion={0.2}>Created</TableCell>
             <TableCell proportion={0.2}>
-              {isTrash ? 'Moved to Trash' : 'Uploaded'}
+              {isTrash ? 'Moved to Trash' : 'Updated'}
             </TableCell>
             <TableCell proportion={0.1}></TableCell>
           </TableRow>
@@ -61,20 +66,25 @@ export const PageList = ({
               <StyledTableRow key={`${pageMeta.id}-${index}`}>
                 <TableCell>
                   <StyledTitleWrapper>
-                    <Link
+                    <StyledTitleLink
                       href={{ pathname: '/', query: { pageId: pageMeta.id } }}
                     >
-                      <StyledTitleContent>
-                        {pageMeta.title || pageMeta.id}
-                      </StyledTitleContent>
-                    </Link>
+                      {pageMeta.mode === 'edgeless' ? (
+                        <EdgelessIcon />
+                      ) : (
+                        <PaperIcon />
+                      )}
+                      <Content ellipsis={true} color="inherit">
+                        {pageMeta.title || 'Untitled'}
+                      </Content>
+                    </StyledTitleLink>
                     {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
                   </StyledTitleWrapper>
                 </TableCell>
                 <DateCell pageMeta={pageMeta} dateKey="createDate" />
                 <DateCell
                   pageMeta={pageMeta}
-                  dateKey={isTrash ? 'trashDate' : 'createDate'}
+                  dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                 />
                 <TableCell style={{ padding: 0 }}>
                   {isTrash ? (

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

@@ -1,5 +1,6 @@
 import { displayFlex, styled, textEllipsis } from '@/styles';
 import { TableRow } from '@/ui/table';
+import Link from 'next/link';
 
 export const StyledTableContainer = styled.div(() => {
   return {
@@ -22,11 +23,23 @@ export const StyledTitleWrapper = styled.div(({ theme }) => {
     },
   };
 });
-export const StyledTitleContent = styled.div(({ theme }) => {
+export const StyledTitleLink = styled(Link)(({ theme }) => {
   return {
-    maxWidth: '90%',
+    maxWidth: '80%',
     marginRight: '18px',
-    ...textEllipsis(1),
+    ...displayFlex('flex-start', 'center'),
+    color: theme.colors.textColor,
+    '>svg': {
+      fontSize: '24px',
+      marginRight: '12px',
+      color: theme.colors.iconColor,
+    },
+    ':hover': {
+      color: theme.colors.textColor,
+      '>svg': {
+        color: theme.colors.primaryColor,
+      },
+    },
   };
 });
 export const StyledFavoriteButton = styled.button<{ favorite: boolean }>(

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

@@ -58,7 +58,7 @@ const FavoriteList = ({ showList }: { showList: boolean }) => {
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal, triggerImportModal } = useModal();
   const [show, setShow] = useState(false);
-  const [showSubFavorite, setShowSubFavorite] = useState(false);
+  const [showSubFavorite, setShowSubFavorite] = useState(true);
   const { createPage, getPageMeta, openPage } = useEditor();
   const router = useRouter();