fix: a series of bugs

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

@@ -6,7 +6,6 @@ import {
   EdgelessIcon,
 } from '@blocksuite/icons';
 import {
-  StyledFavoriteButton,
   StyledTableContainer,
   StyledTableRow,
   StyledTitleLink,
@@ -18,19 +17,31 @@ import Empty from './empty';
 import { Content } from '@/ui/layout';
 import React from 'react';
 import DateCell from '@/components/page-list/date-cell';
-const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
+import { IconButton } from '@/ui/button';
+import { Tooltip } from '@/ui/tooltip';
+import { router } from 'next/client';
+const FavoriteTag = ({
+  pageMeta: { favorite, id },
+}: {
+  pageMeta: PageMeta;
+}) => {
   const { toggleFavoritePage } = useEditor();
-
   return (
-    <StyledFavoriteButton
-      className="favorite-button"
-      favorite={pageMeta.favorite}
-      onClick={() => {
-        toggleFavoritePage(pageMeta.id);
-      }}
+    <Tooltip
+      content={favorite ? 'Favourited' : 'Favourite'}
+      placement="top-start"
     >
-      {pageMeta.favorite ? <FavouritedIcon /> : <FavouritesIcon />}
-    </StyledFavoriteButton>
+      <IconButton
+        darker={true}
+        iconSize={[20, 20]}
+        onClick={e => {
+          e.stopPropagation();
+          toggleFavoritePage(id);
+        }}
+      >
+        {favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+      </IconButton>
+    </Tooltip>
   );
 };
 
@@ -52,7 +63,7 @@ export const PageList = ({
       <Table>
         <TableHead>
           <TableRow>
-            <TableCell proportion={0.5}>Documents</TableCell>
+            <TableCell proportion={0.5}>Title</TableCell>
             <TableCell proportion={0.2}>Created</TableCell>
             <TableCell proportion={0.2}>
               {isTrash ? 'Moved to Trash' : 'Updated'}
@@ -63,12 +74,18 @@ export const PageList = ({
         <TableBody>
           {pageList.map((pageMeta, index) => {
             return (
-              <StyledTableRow key={`${pageMeta.id}-${index}`}>
+              <StyledTableRow
+                key={`${pageMeta.id}-${index}`}
+                onClick={() => {
+                  router.push({
+                    pathname: '/',
+                    query: { pageId: pageMeta.id },
+                  });
+                }}
+              >
                 <TableCell>
                   <StyledTitleWrapper>
-                    <StyledTitleLink
-                      href={{ pathname: '/', query: { pageId: pageMeta.id } }}
-                    >
+                    <StyledTitleLink>
                       {pageMeta.mode === 'edgeless' ? (
                         <EdgelessIcon />
                       ) : (
@@ -87,7 +104,12 @@ export const PageList = ({
                   dateKey={isTrash ? 'trashDate' : 'updatedDate'}
                   backupKey={isTrash ? 'trashDate' : 'createDate'}
                 />
-                <TableCell style={{ padding: 0 }}>
+                <TableCell
+                  style={{ padding: 0 }}
+                  onClick={e => {
+                    e.stopPropagation();
+                  }}
+                >
                   {isTrash ? (
                     <TrashOperationCell pageMeta={pageMeta} />
                   ) : (

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

@@ -12,7 +12,7 @@ import {
   OpenInNewIcon,
   TrashIcon,
 } from '@blocksuite/icons';
-import React from 'react';
+import { toast } from '@/components/toast';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id, favorite } = pageMeta;
@@ -41,11 +41,12 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
         onClick={() => {
           confirm({
             title: 'Delete page?',
-            content: `${pageMeta.title} will be moved to Trash`,
+            content: `${pageMeta.title || 'Untitled'} will be moved to Trash`,
             confirmText: 'Delete',
             confirmType: 'danger',
           }).then(confirm => {
             confirm && toggleDeletePage(id);
+            toast('Moved to Trash');
           });
         }}
         icon={<TrashIcon />}
@@ -57,7 +58,7 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   return (
     <Wrapper alignItems="center" justifyContent="center">
       <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
-        <IconButton hoverBackground="#E0E6FF">
+        <IconButton darker={true}>
           <MoreVerticalIcon />
         </IconButton>
       </Menu>
@@ -67,31 +68,34 @@ export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
 
 export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
   const { id } = pageMeta;
-  const { permanentlyDeletePage, toggleDeletePage } = useEditor();
+  const { permanentlyDeletePage, toggleDeletePage, openPage, getPageMeta } =
+    useEditor();
   const { confirm } = useConfirm();
 
   return (
     <Wrapper>
       <IconButton
-        hoverBackground="#E0E6FF"
+        darker={true}
         style={{ marginRight: '12px' }}
         onClick={() => {
           toggleDeletePage(id);
+          toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
+          openPage(id);
         }}
       >
         <RestoreIcon />
       </IconButton>
       <IconButton
-        hoverBackground="#E0E6FF"
+        darker={true}
         onClick={() => {
           confirm({
-            title: 'Permanently delete',
-            content:
-              "Once deleted, you can't undo this action. Do you confirm?",
+            title: 'Delete permanently?',
+            content: "Once deleted, you can't undo this action.",
             confirmText: 'Delete',
             confirmType: 'danger',
           }).then(confirm => {
             confirm && permanentlyDeletePage(id);
+            toast('Permanently deleted');
           });
         }}
       >

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

@@ -23,7 +23,7 @@ export const StyledTitleWrapper = styled.div(({ theme }) => {
     },
   };
 });
-export const StyledTitleLink = styled(Link)(({ theme }) => {
+export const StyledTitleLink = styled.div(({ theme }) => {
   return {
     maxWidth: '80%',
     marginRight: '18px',
@@ -34,31 +34,12 @@ export const StyledTitleLink = styled(Link)(({ theme }) => {
       marginRight: '12px',
       color: theme.colors.iconColor,
     },
-    ':hover': {
-      color: theme.colors.textColor,
-      '>svg': {
-        color: theme.colors.primaryColor,
-      },
-    },
   };
 });
-export const StyledFavoriteButton = styled.button<{ favorite: boolean }>(
-  ({ theme, favorite }) => {
-    return {
-      width: '32px',
-      height: '32px',
-      justifyContent: 'center',
-      alignItems: 'center',
-      display: 'none',
-      color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
-      '&:hover': {
-        color: theme.colors.primaryColor,
-      },
-    };
-  }
-);
+
 export const StyledTableRow = styled(TableRow)(({ theme }) => {
   return {
+    cursor: 'pointer',
     '&:hover': {
       '.favorite-button': {
         display: 'flex',