fix: a series of bugs

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

@@ -13,6 +13,9 @@ import {
   ExportToHtmlIcon,
   ExportToMarkdownIcon,
   MoreVerticalIcon,
+  FavouritesIcon,
+  FavouritedIcon,
+  TrashIcon,
 } from '@blocksuite/icons';
 import { useEditor } from '@/providers/editor-provider';
 import ThemeModeSwitch from '@/components/theme-mode-switch';
@@ -22,15 +25,37 @@ import { getWarningMessage, shouldShowWarning } from './utils';
 import { Menu, MenuItem } from '@/ui/menu';
 import { useRouter } from 'next/router';
 import { useConfirm } from '@/providers/confirm-provider';
-import { useModal } from '@/providers/global-modal-provider';
-import { useAppState } from '@/providers/app-state-provider';
 import { SyncIcon } from './sync-icon';
+import { toast } from '@/components/toast';
 
 const PopoverContent = () => {
-  const { editor, mode, setMode } = useEditor();
+  const {
+    editor,
+    mode,
+    setMode,
+    getPageMeta,
+    page,
+    toggleFavoritePage,
+    toggleDeletePage,
+  } = useEditor();
+  const { confirm } = useConfirm();
+
+  const { id, favorite, title } = getPageMeta(page?.id) ?? {
+    id: '',
+    favorite: false,
+    title: '',
+  };
 
   return (
     <>
+      <MenuItem
+        onClick={() => {
+          toggleFavoritePage(id);
+        }}
+        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+      >
+        {favorite ? 'Remove' : 'Add'} to favourites
+      </MenuItem>
       <MenuItem
         icon={mode === 'page' ? <EdgelessIcon /> : <PaperIcon />}
         onClick={() => {
@@ -66,6 +91,22 @@ const PopoverContent = () => {
           Export
         </MenuItem>
       </Menu>
+      <MenuItem
+        onClick={() => {
+          confirm({
+            title: 'Delete page?',
+            content: `${title || 'Untitled'} will be moved to Trash`,
+            confirmText: 'Delete',
+            confirmType: 'danger',
+          }).then(confirm => {
+            confirm && toggleDeletePage(id);
+            toast('Moved to Trash');
+          });
+        }}
+        icon={<TrashIcon />}
+      >
+        Delete
+      </MenuItem>
     </>
   );
 };

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
+    <Tooltip
-      className="favorite-button"
+      content={favorite ? 'Favourited' : 'Favourite'}
-      favorite={pageMeta.favorite}
+      placement="top-start"
-      onClick={() => {
-        toggleFavoritePage(pageMeta.id);
-      }}
     >
-      {pageMeta.favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+      <IconButton
-    </StyledFavoriteButton>
+        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
+                    <StyledTitleLink>
-                      href={{ pathname: '/', query: { pageId: pageMeta.id } }}
-                    >
                       {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',
+            title: 'Delete permanently?',
-            content:
+            content: "Once deleted, you can't undo this action.",
-              "Once deleted, you can't undo this action. Do you confirm?",
             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',

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

@@ -19,6 +19,7 @@ import {
   ImportIcon,
   TrashIcon,
   AddIcon,
+  FavouritedIcon,
 } from '@blocksuite/icons';
 import Link from 'next/link';
 import { Tooltip } from '@/ui/tooltip';
@@ -93,7 +94,7 @@ export const WorkSpaceSliderBar = () => {
             Favourites
           </StyledLink>
           <IconButton
-            hoverBackground="#E0E6FF"
+            darker={true}
             onClick={() => {
               setShowSubFavorite(!showSubFavorite);
             }}
@@ -107,13 +108,16 @@ export const WorkSpaceSliderBar = () => {
         </StyledListItem>
         <FavoriteList showList={showSubFavorite} />
 
-        <StyledListItem
+        <Tooltip content="Coming soon" placement="right-start" zIndex={9999}>
-          onClick={() => {
+          <StyledListItem
-            triggerImportModal();
+            disabled={true}
-          }}
+            onClick={() => {
-        >
+              // triggerImportModal();
-          <ImportIcon /> Import
+            }}
-        </StyledListItem>
+          >
+            <ImportIcon /> Import
+          </StyledListItem>
+        </Tooltip>
 
         <Link href={{ pathname: '/page-list/trash' }}>
           <StyledListItem active={router.pathname === '/page-list/trash'}>

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

@@ -43,29 +43,33 @@ export const StyledArrowButton = styled.button<{ isShow: boolean }>(
   }
 );
 
-export const StyledListItem = styled.button<{ active?: boolean }>(
+export const StyledListItem = styled.button<{
-  ({ theme, active }) => {
+  active?: boolean;
-    return {
+  disabled?: boolean;
-      width: '296px',
+}>(({ theme, active, disabled }) => {
-      height: '32px',
+  return {
-      marginTop: '12px',
+    width: '296px',
-      fontSize: theme.font.sm,
+    height: '32px',
-      color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
+    marginTop: '12px',
-      backgroundColor: active ? theme.colors.hoverBackground : 'unset',
+    fontSize: theme.font.sm,
-      paddingLeft: '12px',
+    color: active ? theme.colors.primaryColor : theme.colors.popoverColor,
-      borderRadius: '5px',
+    paddingLeft: '12px',
-      ...displayFlex('flex-start', 'center'),
+    borderRadius: '5px',
-      '>svg': {
+    ...displayFlex('flex-start', 'center'),
-        fontSize: '20px',
+    ...(disabled
-        marginRight: '12px',
+      ? { cursor: 'not-allowed', color: theme.colors.borderColor }
-      },
+      : {}),
-      ':hover': {
+
-        color: theme.colors.primaryColor,
+    '>svg': {
-        backgroundColor: theme.colors.hoverBackground,
+      fontSize: '20px',
-      },
+      marginRight: '12px',
-    };
+    },
-  }
+    ':hover:not([disabled])': {
-);
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});
 
 export const StyledListItemForWorkspace = styled(StyledListItem)({
   height: '52px',

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

@@ -7,7 +7,7 @@ export const Favorite = () => {
   const { pageList: allPageList } = useEditor();
   return (
     <>
-      <PageListHeader icon={<FavouritesIcon />}>Favorites</PageListHeader>
+      <PageListHeader icon={<FavouritesIcon />}>Favourites</PageListHeader>
       <PageList pageList={allPageList.filter(p => p.favorite && !p.trash)} />
     </>
   );

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

@@ -31,7 +31,7 @@ export type EditorHandlers = {
     pageId: string,
     query?: { [key: string]: string }
   ) => Promise<boolean>;
-  getPageMeta: (pageId?: string) => PageMeta | void;
+  getPageMeta: (pageId?: string) => PageMeta;
   toggleDeletePage: (pageId: string) => void;
   toggleFavoritePage: (pageId: string) => void;
   permanentlyDeletePage: (pageId: string) => void;

packages/app/src/ui/button/icon-button.tsx

@@ -43,6 +43,7 @@ export type IconButtonProps = {
   hoverColor?: string;
   hoverStyle?: CSSProperties;
   children: ReactElement<HTMLAttributes<SVGElement>, 'svg'>;
+  darker?: boolean;
 } & HTMLAttributes<HTMLButtonElement>;
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(

packages/app/src/ui/button/styles.ts

@@ -14,6 +14,7 @@ export const StyledIconButton = styled('button', {
       'hoverBackground',
       'hoverColor',
       'hoverStyle',
+      'darker',
     ].includes(prop);
   },
 })<{
@@ -24,6 +25,8 @@ export const StyledIconButton = styled('button', {
   hoverBackground?: CSSProperties['background'];
   hoverColor?: string;
   hoverStyle?: CSSProperties;
+  // In some cases, button is in a normal hover status, it should be darkened
+  darker?: boolean;
 }>(
   ({
     theme,
@@ -33,6 +36,7 @@ export const StyledIconButton = styled('button', {
     hoverBackground,
     hoverColor,
     hoverStyle,
+    darker = false,
   }) => {
     return {
       width,
@@ -40,7 +44,7 @@ export const StyledIconButton = styled('button', {
       color: theme.colors.iconColor,
       ...displayInlineFlex('center', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      ...(disabled ? { cursor: 'not-allowed' } : {}),
       transition: 'background .15s',
 
       // TODO: we need to add @emotion/babel-plugin
@@ -61,7 +65,10 @@ export const StyledIconButton = styled('button', {
       ':hover': {
         color: hoverColor ?? theme.colors.primaryColor,
         '::after': {
-          background: hoverBackground ?? theme.colors.hoverBackground,
+          background:
+            hoverBackground ?? darker
+              ? theme.colors.innerHoverBackground
+              : theme.colors.hoverBackground,
         },
         ...(hoverStyle ?? {}),
       },
@@ -116,7 +123,7 @@ export const StyledTextButton = styled('button', {
       paddingRight: padding,
       ...displayInlineFlex('flex-start', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      ...(disabled ? { cursor: 'not-allowed' } : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape
       borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -171,7 +178,10 @@ export const StyledButton = styled('button', {
       border: '1px solid',
       ...displayInlineFlex('flex-start', 'center'),
       position: 'relative',
-      ...(disabled ? { cursor: 'not-allowed', pointerEvents: 'none' } : {}),
+      // TODO: disabled color is not decided
+      ...(disabled
+        ? { cursor: 'not-allowed', color: theme.colors.borderColor }
+        : {}),
       transition: 'background .15s',
       // TODO: Implement circle shape
       borderRadius: shape === 'default' ? borderRadius : height / 2,
@@ -190,6 +200,7 @@ export const StyledButton = styled('button', {
         hoverStyle,
       }),
 
+      // TODO: disabled hover should be implemented
       //
       // ':hover': {
       //   color: hoverColor ?? theme.colors.primaryColor,

packages/app/src/ui/table/styles.ts

@@ -40,6 +40,13 @@ export const StyledTableCell = styled.td<
 export const StyledTableHead = styled.thead(({ theme }) => {
   return {
     fontWeight: 500,
+    tr: {
+      ':hover': {
+        td: {
+          background: 'unset',
+        },
+      },
+    },
   };
 });