milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Empty } from '@/ui/empty';
+export const PageListEmpty = () => {
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <Empty
+        width={800}
+        height={300}
+        sx={{ marginTop: '100px', marginBottom: '30px' }}
+      />
+      <p>Tips: Click Add to Favourites/Trash and the page will appear here.</p>
+      <p>(Designer is grappling with designing)</p>
+    </div>
+  );
+};
+
+export default PageListEmpty;

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

@@ -0,0 +1,145 @@
+import { PageMeta } from '@/providers/app-state-provider';
+import {
+  FavouritedIcon,
+  FavouritesIcon,
+  PaperIcon,
+  EdgelessIcon,
+} from '@blocksuite/icons';
+import {
+  StyledTableContainer,
+  StyledTableRow,
+  StyledTitleLink,
+  StyledTitleWrapper,
+} from './styles';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@/ui/table';
+import { OperationCell, TrashOperationCell } from './operation-cell';
+import Empty from './empty';
+import { Content } from '@/ui/layout';
+import React from 'react';
+import DateCell from '@/components/page-list/date-cell';
+import { IconButton } from '@/ui/button';
+import { Tooltip } from '@/ui/tooltip';
+import { useRouter } from 'next/router';
+import { useAppState } from '@/providers/app-state-provider/context';
+import { toast } from '@/ui/toast';
+import { usePageHelper } from '@/hooks/use-page-helper';
+import { useTheme } from '@/providers/themeProvider';
+
+const FavoriteTag = ({
+  pageMeta: { favorite, id },
+}: {
+  pageMeta: PageMeta;
+}) => {
+  const { toggleFavoritePage } = usePageHelper();
+  const { theme } = useTheme();
+  return (
+    <Tooltip
+      content={favorite ? 'Favourited' : 'Favourite'}
+      placement="top-start"
+    >
+      <IconButton
+        darker={true}
+        iconSize={[20, 20]}
+        onClick={e => {
+          e.stopPropagation();
+          toggleFavoritePage(id);
+          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+        }}
+        style={{
+          color: favorite ? theme.colors.primaryColor : theme.colors.iconColor,
+        }}
+        className="favorite-button"
+      >
+        {favorite ? (
+          <FavouritedIcon data-testid="favourited-icon" />
+        ) : (
+          <FavouritesIcon />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export const PageList = ({
+  pageList,
+  showFavoriteTag = false,
+  isTrash = false,
+}: {
+  pageList: PageMeta[];
+  showFavoriteTag?: boolean;
+  isTrash?: boolean;
+}) => {
+  const router = useRouter();
+  const { currentWorkspaceId } = useAppState();
+  if (pageList.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <StyledTableContainer>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell proportion={0.5}>Title</TableCell>
+            <TableCell proportion={0.2}>Created</TableCell>
+            <TableCell proportion={0.2}>
+              {isTrash ? 'Moved to Trash' : 'Updated'}
+            </TableCell>
+            <TableCell proportion={0.1}></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {pageList.map((pageMeta, index) => {
+            return (
+              <StyledTableRow
+                key={`${pageMeta.id}-${index}`}
+                onClick={() => {
+                  router.push(
+                    `/workspace/${currentWorkspaceId}/${pageMeta.id}`
+                  );
+                }}
+              >
+                <TableCell>
+                  <StyledTitleWrapper>
+                    <StyledTitleLink>
+                      {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' : 'updatedDate'}
+                  backupKey={isTrash ? 'trashDate' : 'createDate'}
+                />
+                <TableCell
+                  style={{ padding: 0 }}
+                  data-testid={`more-actions-${pageMeta.id}`}
+                  onClick={e => {
+                    e.stopPropagation();
+                  }}
+                >
+                  {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,109 @@
+import { useConfirm } from '@/providers/confirm-provider';
+import { PageMeta } from '@/providers/app-state-provider';
+import { Menu, MenuItem } from '@/ui/menu';
+import { Wrapper } from '@/ui/layout';
+import { IconButton } from '@/ui/button';
+import {
+  MoreVerticalIcon,
+  RestoreIcon,
+  DeleteIcon,
+  FavouritesIcon,
+  FavouritedIcon,
+  OpenInNewIcon,
+  TrashIcon,
+} from '@blocksuite/icons';
+import { toast } from '@/ui/toast';
+import { usePageHelper } from '@/hooks/use-page-helper';
+
+export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
+  const { id, favorite } = pageMeta;
+  const { openPage } = usePageHelper();
+  const { toggleFavoritePage, toggleDeletePage } = usePageHelper();
+  const { confirm } = useConfirm();
+
+  const OperationMenu = (
+    <>
+      <MenuItem
+        onClick={() => {
+          toggleFavoritePage(id);
+          toast(!favorite ? 'Removed to Favourites' : 'Added to Favourites');
+        }}
+        icon={favorite ? <FavouritedIcon /> : <FavouritesIcon />}
+      >
+        {favorite ? 'Remove' : 'Add'} to favourites
+      </MenuItem>
+      <MenuItem
+        onClick={() => {
+          openPage(id, {}, true);
+        }}
+        icon={<OpenInNewIcon />}
+      >
+        Open in new tab
+      </MenuItem>
+      <MenuItem
+        onClick={() => {
+          confirm({
+            title: 'Delete page?',
+            content: `${pageMeta.title || 'Untitled'} will be moved to Trash`,
+            confirmText: 'Delete',
+            confirmType: 'danger',
+          }).then(confirm => {
+            confirm && toggleDeletePage(id);
+            toast('Moved to Trash');
+          });
+        }}
+        icon={<TrashIcon />}
+      >
+        Delete
+      </MenuItem>
+    </>
+  );
+  return (
+    <Wrapper alignItems="center" justifyContent="center">
+      <Menu content={OperationMenu} placement="bottom-end" disablePortal={true}>
+        <IconButton darker={true}>
+          <MoreVerticalIcon />
+        </IconButton>
+      </Menu>
+    </Wrapper>
+  );
+};
+
+export const TrashOperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {
+  const { id } = pageMeta;
+  const { openPage, getPageMeta } = usePageHelper();
+  const { toggleDeletePage, permanentlyDeletePage } = usePageHelper();
+  const { confirm } = useConfirm();
+
+  return (
+    <Wrapper>
+      <IconButton
+        darker={true}
+        style={{ marginRight: '12px' }}
+        onClick={() => {
+          toggleDeletePage(id);
+          toast(`${getPageMeta(id)?.title || 'Untitled'} restored`);
+          openPage(id);
+        }}
+      >
+        <RestoreIcon />
+      </IconButton>
+      <IconButton
+        darker={true}
+        onClick={() => {
+          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');
+          });
+        }}
+      >
+        <DeleteIcon />
+      </IconButton>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { displayFlex, styled } 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 StyledTitleLink = styled.div(({ theme }) => {
+  return {
+    maxWidth: '80%',
+    marginRight: '18px',
+    ...displayFlex('flex-start', 'center'),
+    color: theme.colors.textColor,
+    '>svg': {
+      fontSize: '24px',
+      marginRight: '12px',
+      color: theme.colors.iconColor,
+    },
+  };
+});
+
+export const StyledTableRow = styled(TableRow)(() => {
+  return {
+    cursor: 'pointer',
+    '.favorite-button': {
+      display: 'none',
+    },
+    '&:hover': {
+      '.favorite-button': {
+        display: 'flex',
+      },
+    },
+  };
+});