feat: page list supports preview (#2606)

packages/component/src/components/page-list/all-page.tsx

@@ -197,6 +197,7 @@ export const PageListTrashView: React.FC<{
       {
         pageId,
         title,
+        preview,
         icon,
         createDate,
         trashDate,
@@ -214,6 +215,7 @@ export const PageListTrashView: React.FC<{
           <TitleCell
             icon={icon}
             text={title || t['Untitled']()}
+            desc={preview}
             onClick={onClickPage}
           />
           <TableCell onClick={onClickPage}>{formatDate(createDate)}</TableCell>

packages/component/src/components/page-list/all-pages-body.tsx

@@ -49,6 +49,7 @@ export const AllPagesBody = ({
             groupName,
             pageId,
             title,
+            preview,
             icon,
             isPublicPage,
             favorite,
@@ -80,6 +81,7 @@ export const AllPagesBody = ({
                   }}
                   icon={icon}
                   text={displayTitle}
+                  desc={preview}
                   data-testid="title"
                   onClick={onClickPage}
                 />

packages/component/src/components/page-list/components/title-cell.tsx

@@ -2,11 +2,16 @@ import type { TableCellProps } from '@affine/component';
 import { Content, TableCell } from '@affine/component';
 import React, { useCallback } from 'react';
 
-import { StyledTitleLink } from '../styles';
+import {
+  StyledTitleContentWrapper,
+  StyledTitleLink,
+  StyledTitlePreview,
+} from '../styles';
 
 type TitleCellProps = {
   icon: JSX.Element;
   text: string;
+  desc?: string;
   suffix?: JSX.Element;
   /**
    * Customize the children of the cell
@@ -17,22 +22,29 @@ type TitleCellProps = {
 } & Omit<TableCellProps, 'children'>;
 
 export const TitleCell = React.forwardRef<HTMLTableCellElement, TitleCellProps>(
-  ({ icon, text, suffix, children: render, ...props }, ref) => {
+  ({ icon, text, desc, suffix, children: render, ...props }, ref) => {
     const renderChildren = useCallback(() => {
       const childElement = (
         <>
           <StyledTitleLink>
             {icon}
-            <Content ellipsis={true} color="inherit">
+            <StyledTitleContentWrapper>
+              <Content ellipsis={true} maxWidth="100%" color="inherit">
                 {text}
               </Content>
+              {desc && (
+                <StyledTitlePreview ellipsis={true} color="inherit">
+                  {desc}
+                </StyledTitlePreview>
+              )}
+            </StyledTitleContentWrapper>
           </StyledTitleLink>
           {suffix}
         </>
       );
 
       return render ? render(childElement) : childElement;
-    }, [icon, render, suffix, text]);
+    }, [desc, icon, render, suffix, text]);
 
     return (
       <TableCell ref={ref} {...props}>

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

@@ -1,4 +1,4 @@
-import { displayFlex, styled } from '@affine/component';
+import { Content, displayFlex, styled } from '@affine/component';
 import { TableRow } from '@affine/component';
 
 export const StyledTableContainer = styled('div')(({ theme }) => {
@@ -50,6 +50,24 @@ export const StyledTitleLink = styled('div')(() => {
   };
 });
 
+export const StyledTitleContentWrapper = styled('div')(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    width: '100%',
+    overflow: 'hidden',
+  };
+});
+
+export const StyledTitlePreview = styled(Content)(() => {
+  return {
+    fontWeight: 400,
+    fontSize: 'var(--affine-font-xs)',
+    maxWidth: '100%',
+  };
+});
+
 export const StyledTableRow = styled(TableRow)(() => {
   return {
     cursor: 'pointer',

packages/component/src/components/page-list/type.ts

@@ -11,6 +11,7 @@ export type ListData = {
   pageId: string;
   icon: JSX.Element;
   title: string;
+  preview?: string;
   favorite: boolean;
   createDate: Date;
   updatedDate: Date;
@@ -28,6 +29,7 @@ export type TrashListData = {
   pageId: string;
   icon: JSX.Element;
   title: string;
+  preview?: string;
   createDate: Date;
   // TODO remove optional after assert that trashDate is always set
   trashDate?: Date;
@@ -47,5 +49,6 @@ export type PageListProps = {
 export type DraggableTitleCellData = {
   pageId: string;
   pageTitle: string;
+  pagePreview?: string;
   icon: React.ReactElement;
 };

packages/component/src/stories/page-list.stories.tsx

@@ -71,6 +71,7 @@ AffineAllPageList.args = {
       icon: <PageIcon />,
       isPublicPage: true,
       title: 'Today Page',
+      preview: 'this is page preview',
       createDate: new Date(),
       updatedDate: new Date(),
       bookmarkPage: () => toast('Bookmark page'),
@@ -84,7 +85,10 @@ AffineAllPageList.args = {
       favorite: false,
       icon: <PageIcon />,
       isPublicPage: true,
-      title: '1 Example Public Page with long title that will be truncated',
+      title:
+        '1 Example Public Page with long title that will be truncated because it is too too long',
+      preview:
+        'this is page preview and it is very long and will be truncated because it is too long and it is very long and will be truncated because it is too long',
       createDate: new Date('2021-01-01'),
       updatedDate: new Date('2021-01-02'),
       bookmarkPage: () => toast('Bookmark page'),
@@ -139,6 +143,7 @@ AffineTrashPageList.args = {
       pageId: '1',
       icon: <PageIcon />,
       title: 'Example Page',
+      preview: 'this is trash page preview',
       createDate: new Date('2021-01-01'),
       trashDate: new Date('2021-01-01'),
       onClickPage: () => toast('Click page'),