feat: modify page list

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const Empty = () => {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <p>Tips: Click Add to Favourites/Trash and the page will appear here.</p>
+      <p>(Designer is grappling with designing)</p>
+    </div>
+  );
+};
+
+export default Empty;

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

@@ -0,0 +1,97 @@
+import { PageMeta, useEditor } from '@/providers/editor-provider';
+import {
+  MiddleFavouritedStatus2Icon,
+  MiddleFavouritesIcon,
+} from '@blocksuite/icons';
+import {
+  StyledFavoriteButton,
+  StyledTableContainer,
+  StyledTableRow,
+  StyledTitleContent,
+  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 React from 'react';
+const FavoriteTag = ({ pageMeta }: { pageMeta: PageMeta }) => {
+  const { toggleFavoritePage } = useEditor();
+
+  return (
+    <StyledFavoriteButton
+      className="favorite-button"
+      favorite={pageMeta.favorite}
+      onClick={() => {
+        toggleFavoritePage(pageMeta.id);
+      }}
+    >
+      {pageMeta.favorite ? (
+        <MiddleFavouritedStatus2Icon />
+      ) : (
+        <MiddleFavouritesIcon />
+      )}
+    </StyledFavoriteButton>
+  );
+};
+
+export const PageList = ({
+  pageList,
+  showFavoriteTag = false,
+  isTrash = false,
+}: {
+  pageList: PageMeta[];
+  showFavoriteTag?: boolean;
+  isTrash?: boolean;
+}) => {
+  if (pageList.length === 0) {
+    return <Empty />;
+  }
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell proportion={0.5}>Documents</TableCell>
+            <TableCell proportion={0.2}>Created</TableCell>
+            <TableCell proportion={0.2}>
+              {isTrash ? 'Uploaded' : 'Moved to Trash'}
+            </TableCell>
+            <TableCell proportion={0.1}></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {pageList.map((pageMeta, index) => {
+            return (
+              <StyledTableRow key={`${pageMeta.id}-${index}`}>
+                <TableCell>
+                  <StyledTitleWrapper>
+                    <Link
+                      href={{ pathname: '/', query: { pageId: pageMeta.id } }}
+                    >
+                      <StyledTitleContent>
+                        {pageMeta.title || pageMeta.id}
+                      </StyledTitleContent>
+                    </Link>
+                    {showFavoriteTag && <FavoriteTag pageMeta={pageMeta} />}
+                  </StyledTitleWrapper>
+                </TableCell>
+                <TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
+                <TableCell ellipsis={true}>{pageMeta.createDate}</TableCell>
+                <TableCell>
+                  {isTrash ? (
+                    <TrashOperationCell pageMeta={pageMeta} />
+                  ) : (
+                    <OperationCell pageMeta={pageMeta} />
+                  )}
+                </TableCell>
+              </StyledTableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </StyledTableContainer>
+  );
+};
+
+export default PageList;

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

@@ -0,0 +1,96 @@
+import { PageMeta, useEditor } from '@/providers/editor-provider';
+import { useConfirm } from '@/providers/confirm-provider';
+import { Menu, MenuItem } from '@/ui/menu';
+import { Wrapper } from '@/ui/layout';
+import { IconButton } from '@/ui/button';
+import {
+  MoreVertical_24pxIcon,
+  RestoreIcon,
+  TrashDeleteforeverIcon,
+} from '@blocksuite/icons';
+import React from 'react';
+
+export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
+  const { id, favorite } = pageMeta;
+  const { openPage, toggleFavoritePage, toggleDeletePage } = useEditor();
+  const { confirm } = useConfirm();
+
+  const OperationMenu = (
+    <>
+      <MenuItem
+        onClick={() => {
+          toggleFavoritePage(id);
+        }}
+      >
+        {favorite ? 'Remove' : 'Add'} to favourites
+      </MenuItem>
+      <MenuItem
+        onClick={() => {
+          openPage(id);
+        }}
+      >
+        Open in new tab
+      </MenuItem>
+      <MenuItem
+        onClick={() => {
+          confirm({
+            title: 'Delete',
+            content:
+              'Deleted items will be moved to Trash Bin. Do you confirm?',
+            confirmText: 'Delete',
+            confirmType: 'danger',
+          }).then(confirm => {
+            confirm && toggleDeletePage(id);
+          });
+        }}
+      >
+        Delete
+      </MenuItem>
+    </>
+  );
+  return (
+    <Wrapper alignItems="center" justifyContent="center">
+      <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
+        <IconButton hoverBackground="#E0E6FF">
+          <MoreVertical_24pxIcon />
+        </IconButton>
+      </Menu>
+    </Wrapper>
+  );
+};
+
+export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
+  const { id } = pageMeta;
+  const { permanentlyDeletePage, toggleDeletePage } = useEditor();
+  const { confirm } = useConfirm();
+
+  return (
+    <Wrapper>
+      <IconButton
+        hoverBackground="#E0E6FF"
+        style={{ marginRight: '12px' }}
+        onClick={() => {
+          toggleDeletePage(id);
+        }}
+      >
+        <RestoreIcon />
+      </IconButton>
+      <IconButton
+        hoverBackground="#E0E6FF"
+        onClick={() => {
+          confirm({
+            title: 'Permanently delete',
+            content:
+              "Once deleted, you can't undo this action. Do you confirm?",
+            confirmText: 'Delete',
+            confirmType: 'danger',
+          }).then(confirm => {
+            confirm && permanentlyDeletePage(id);
+          });
+        }}
+      >
+        <TrashDeleteforeverIcon />
+      </IconButton>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { displayFlex, styled, textEllipsis } from '@/styles';
+import { TableRow } from '@/ui/table';
+
+export const StyledTableContainer = styled.div(() => {
+  return {
+    height: 'calc(100vh - 60px)',
+    padding: '78px 72px',
+    overflowY: 'auto',
+  };
+});
+export const StyledTitleWrapper = styled.div(({ theme }) => {
+  return {
+    ...displayFlex('flex-start', 'center'),
+    a: {
+      color: 'inherit',
+    },
+    'a:visited': {
+      color: 'unset',
+    },
+    'a:hover': {
+      color: theme.colors.primaryColor,
+    },
+  };
+});
+export const StyledTitleContent = styled.div(({ theme }) => {
+  return {
+    maxWidth: '90%',
+    marginRight: '18px',
+    ...textEllipsis(1),
+  };
+});
+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 {
+    '&:hover': {
+      '.favorite-button': {
+        display: 'flex',
+      },
+    },
+  };
+});