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">
-              {text}
-            </Content>
+            <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;
 };