feat(core): add page display properties

toeverything · Mar 22, 2024 · befcb2a · befcb2a
1 parent 7ccaf5b
commit befcb2a
Show file tree

Hide file tree

Showing 17 changed files with 185 additions and 60 deletions.
diff --git a/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts b/packages/frontend/core/src/components/page-list/components/list-header-cell.css.ts
@@ -16,7 +16,6 @@ export const headerCell = style({
       borderRight: `1px solid ${cssVar('hoverColorFilled')}`,
     },
   },
-  display: 'flex',
   alignItems: 'center',
   columnGap: '4px',
   position: 'relative',

diff --git a/packages/frontend/core/src/components/page-list/components/list-header-cell.tsx b/packages/frontend/core/src/components/page-list/components/list-header-cell.tsx
@@ -22,6 +22,7 @@ export const ListHeaderCell = ({
   alignment,
   flex,
   style,
+  hidden,
   hideInSmallContainer,
   children,
 }: HeaderCellProps) => {
@@ -39,6 +40,7 @@ export const ListHeaderCell = ({
       className={styles.headerCell}
       data-sortable={sortable ? true : undefined}
       data-sorting={sorting ? true : undefined}
+      hidden={hidden}
       style={style}
       role="columnheader"
       hideInSmallContainer={hideInSmallContainer}

diff --git a/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx b/packages/frontend/core/src/components/page-list/docs/page-list-item.tsx
@@ -6,6 +6,7 @@ import { type PropsWithChildren, useCallback, useMemo } from 'react';
 
 import { WorkbenchLink } from '../../../modules/workbench/view/workbench-link';
 import type { DraggableTitleCellData, PageListItemProps } from '../types';
+import { usePageDisplayProperties } from '../use-page-display-properties';
 import { ColWrapper, formatDate, stopPropagation } from '../utils';
 import * as styles from './page-list-item.css';
 import { PageTags } from './page-tags';
@@ -14,6 +15,7 @@ const ListTitleCell = ({
   title,
   preview,
 }: Pick<PageListItemProps, 'title' | 'preview'>) => {
+  const [displayProperties] = usePageDisplayProperties();
   return (
     <div data-testid="page-list-item-title" className={styles.titleCell}>
       <div
@@ -22,7 +24,7 @@ const ListTitleCell = ({
       >
         {title}
       </div>
-      {preview ? (
+      {preview && displayProperties['bodyNotes'] ? (
         <div
           data-testid="page-list-item-preview-text"
           className={styles.titleCellPreview}
@@ -123,6 +125,7 @@ const PageListOperationsCell = ({
 };
 
 export const PageListItem = (props: PageListItemProps) => {
+  const [displayProperties] = usePageDisplayProperties();
   const pageTitleElement = useMemo(() => {
     return (
       <div className={styles.dragPageItemOverlay}>
@@ -182,14 +185,29 @@ export const PageListItem = (props: PageListItemProps) => {
           </div>
           <ListTitleCell title={props.title} preview={props.preview} />
         </ColWrapper>
-        <ColWrapper flex={4} alignment="end" style={{ overflow: 'visible' }}>
+        <ColWrapper
+          flex={4}
+          alignment="end"
+          style={{ overflow: 'visible' }}
+          hidden={!displayProperties['tags']}
+        >
           <PageTagsCell pageId={props.pageId} />
         </ColWrapper>
       </ColWrapper>
-      <ColWrapper flex={1} alignment="end" hideInSmallContainer>
+      <ColWrapper
+        flex={1}
+        alignment="end"
+        hideInSmallContainer
+        hidden={!displayProperties['createDate']}
+      >
         <PageCreateDateCell createDate={props.createDate} />
       </ColWrapper>
-      <ColWrapper flex={1} alignment="end" hideInSmallContainer>
+      <ColWrapper
+        flex={1}
+        alignment="end"
+        hideInSmallContainer
+        hidden={!displayProperties['updatedDate']}
+      >
         <PageUpdatedDateCell updatedDate={props.updatedDate} />
       </ColWrapper>
       {props.operations ? (

diff --git a/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx b/packages/frontend/core/src/components/page-list/docs/virtualized-page-list.tsx
@@ -15,7 +15,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
 import { ListFloatingToolbar } from '../components/list-floating-toolbar';
 import { usePageItemGroupDefinitions } from '../group-definitions';
-import { pageHeaderColsDef } from '../header-col-def';
+import { usePageHeaderColsDef } from '../header-col-def';
 import { PageOperationCell } from '../operation-cell';
 import { PageListItemRenderer } from '../page-group';
 import { ListTableHeader } from '../page-header';
@@ -110,6 +110,7 @@ export const VirtualizedPageList = ({
   const pageMetas = useBlockSuiteDocMeta(currentWorkspace.docCollection);
   const pageOperations = usePageOperationsRenderer();
   const { isPreferredEdgeless } = usePageHelper(currentWorkspace.docCollection);
+  const pageHeaderColsDef = usePageHeaderColsDef();
 
   const filteredPageMetas = useFilteredPageMetas(currentWorkspace, pageMetas, {
     filters,
@@ -141,7 +142,7 @@ export const VirtualizedPageList = ({
 
   const pageHeaderRenderer = useCallback(() => {
     return <ListTableHeader headerCols={pageHeaderColsDef} />;
-  }, []);
+  }, [pageHeaderColsDef]);
 
   const pageItemRenderer = useCallback((item: ListItem) => {
     return <PageListItemRenderer {...item} />;

diff --git a/packages/frontend/core/src/components/page-list/header-col-def.tsx b/packages/frontend/core/src/components/page-list/header-col-def.tsx
@@ -1,45 +1,55 @@
 import { Trans } from '@affine/i18n';
+import { useMemo } from 'react';
 
 import { ListHeaderTitleCell } from './page-header';
 import type { HeaderColDef } from './types';
-
-export const pageHeaderColsDef: HeaderColDef[] = [
-  {
-    key: 'title',
-    content: <ListHeaderTitleCell />,
-    flex: 6,
-    alignment: 'start',
-    sortable: true,
-  },
-  {
-    key: 'tags',
-    content: <Trans i18nKey="Tags" />,
-    flex: 3,
-    alignment: 'end',
-  },
-  {
-    key: 'createDate',
-    content: <Trans i18nKey="Created" />,
-    flex: 1,
-    sortable: true,
-    alignment: 'end',
-    hideInSmallContainer: true,
-  },
-  {
-    key: 'updatedDate',
-    content: <Trans i18nKey="Updated" />,
-    flex: 1,
-    sortable: true,
-    alignment: 'end',
-    hideInSmallContainer: true,
-  },
-  {
-    key: 'actions',
-    content: '',
-    flex: 1,
-    alignment: 'end',
-  },
-];
+import { usePageDisplayProperties } from './use-page-display-properties';
+export const usePageHeaderColsDef = (): HeaderColDef[] => {
+  const [displayProperties] = usePageDisplayProperties();
+  return useMemo(
+    () => [
+      {
+        key: 'title',
+        content: <ListHeaderTitleCell />,
+        flex: 6,
+        alignment: 'start',
+        sortable: true,
+      },
+      {
+        key: 'tags',
+        content: <Trans i18nKey="Tags" />,
+        flex: 3,
+        alignment: 'end',
+        hidden: !displayProperties['tags'],
+      },
+      {
+        key: 'createDate',
+        content: <Trans i18nKey="Created" />,
+        flex: 1,
+        sortable: true,
+        alignment: 'end',
+        hideInSmallContainer: true,
+        hidden: !displayProperties['createDate'],
+      },
+      {
+        key: 'updatedDate',
+        content: <Trans i18nKey="Updated" />,
+        flex: 1,
+        sortable: true,
+        alignment: 'end',
+        hideInSmallContainer: true,
+        hidden: !displayProperties['updatedDate'],
+      },
+      {
+        key: 'actions',
+        content: '',
+        flex: 1,
+        alignment: 'end',
+      },
+    ],
+    [displayProperties]
+  );
+};
 
 export const collectionHeaderColsDef: HeaderColDef[] = [
   {

diff --git a/packages/frontend/core/src/components/page-list/index.tsx b/packages/frontend/core/src/components/page-list/index.tsx
@@ -17,6 +17,7 @@ export * from './tags';
 export * from './types';
 export * from './use-collection-manager';
 export * from './use-filtered-page-metas';
+export * from './use-page-display-properties';
 export * from './utils';
 export * from './view';
 export * from './virtualized-list';
diff --git a/packages/frontend/core/src/components/page-list/list.css.ts b/packages/frontend/core/src/components/page-list/list.css.ts
@@ -37,6 +37,10 @@ export const hideInSmallContainer = style({
     },
   },
 });
+
+export const hidden = style({
+  display: 'none',
+});
 export const favoriteCell = style({
   display: 'flex',
   alignItems: 'center',

diff --git a/packages/frontend/core/src/components/page-list/list.tsx b/packages/frontend/core/src/components/page-list/list.tsx
@@ -11,7 +11,7 @@ import {
   useRef,
 } from 'react';
 
-import { pageHeaderColsDef } from './header-col-def';
+import { usePageHeaderColsDef } from './header-col-def';
 import * as styles from './list.css';
 import { ItemGroup } from './page-group';
 import { ListTableHeader } from './page-header';
@@ -135,7 +135,7 @@ ListInnerWrapper.displayName = 'ListInnerWrapper';
 
 const ListInner = (props: ListProps<ListItem>) => {
   const groups = useAtomValue(groupsAtom);
-
+  const pageHeaderColsDef = usePageHeaderColsDef();
   const hideHeader = props.hideHeader;
   return (
     <div className={clsx(props.className, styles.root)}>

diff --git a/packages/frontend/core/src/components/page-list/page-header.tsx b/packages/frontend/core/src/components/page-list/page-header.tsx
@@ -112,6 +112,7 @@ export const ListTableHeader = ({
       data-selection-active={selectionState.selectionActive}
     >
       {headerCols.map(col => {
+        const isTagHidden = col.key === 'tags' && col.hidden;
         return (
           <ListHeaderCell
             flex={col.flex}
@@ -121,8 +122,12 @@ export const ListTableHeader = ({
             sortable={col.sortable}
             sorting={sorter.key === col.key}
             order={sorter.order}
+            hidden={isTagHidden ? false : col.hidden}
             onSort={onSort}
-            style={{ overflow: 'visible' }}
+            style={{
+              overflow: 'visible',
+              visibility: isTagHidden ? 'hidden' : 'visible',
+            }}
             hideInSmallContainer={col.hideInSmallContainer}
           >
             {col.content}

diff --git a/packages/frontend/core/src/components/page-list/types.ts b/packages/frontend/core/src/components/page-list/types.ts
@@ -152,6 +152,7 @@ export type HeaderColDef = {
   alignment?: ColWrapperProps['alignment'];
   sortable?: boolean;
   hideInSmallContainer?: boolean;
+  hidden?: boolean;
 };
 
 export type ColWrapperProps = PropsWithChildren<{
@@ -161,3 +162,10 @@ export type ColWrapperProps = PropsWithChildren<{
   hideInSmallContainer?: boolean;
 }> &
   React.HTMLAttributes<Element>;
+
+export type PageDisplayProperties = {
+  bodyNotes: boolean;
+  tags: boolean;
+  createDate: boolean;
+  updatedDate: boolean;
+};
diff --git a/packages/frontend/core/src/components/page-list/use-page-display-properties.ts b/packages/frontend/core/src/components/page-list/use-page-display-properties.ts
@@ -0,0 +1,29 @@
+import { useAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
+import { useCallback } from 'react';
+
+import type { PageDisplayProperties } from './types';
+
+export const pageDisplayPropertiesAtom = atomWithStorage<PageDisplayProperties>(
+  'pageDisplayProperties',
+  {
+    bodyNotes: true,
+    tags: true,
+    createDate: true,
+    updatedDate: true,
+  }
+);
+
+export const usePageDisplayProperties = (): [
+  PageDisplayProperties,
+  (key: keyof PageDisplayProperties, value: boolean) => void,
+] => {
+  const [properties, setProperties] = useAtom(pageDisplayPropertiesAtom);
+  const onChange = useCallback(
+    (key: keyof PageDisplayProperties, value: boolean) => {
+      setProperties(prev => ({ ...prev, [key]: value }));
+    },
+    [setProperties]
+  );
+  return [properties, onChange];
+};
diff --git a/packages/frontend/core/src/components/page-list/utils.tsx b/packages/frontend/core/src/components/page-list/utils.tsx
@@ -74,6 +74,7 @@ export const ColWrapper = forwardRef<HTMLDivElement, ColWrapperProps>(
       flex,
       alignment,
       hideInSmallContainer,
+      hidden,
       className,
       style,
       children,
@@ -94,6 +95,7 @@ export const ColWrapper = forwardRef<HTMLDivElement, ColWrapperProps>(
         }}
         data-hide-item={hideInSmallContainer ? true : undefined}
         className={clsx(className, styles.colWrapper, {
+          [styles.hidden]: hidden,
           [styles.hideInSmallContainer]: hideInSmallContainer,
         })}
       >

diff --git a/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
@@ -8,7 +8,7 @@ import { type ReactNode, useCallback } from 'react';
 
 import { FilterList } from '../../filter/filter-list';
 import { VariableSelect } from '../../filter/vars';
-import { pageHeaderColsDef } from '../../header-col-def';
+import { usePageHeaderColsDef } from '../../header-col-def';
 import { PageListItemRenderer } from '../../page-group';
 import { ListTableHeader } from '../../page-header';
 import type { ListItem } from '../../types';
@@ -46,6 +46,7 @@ export const PagesMode = ({
       publicMode: allPageListConfig.getPublicMode(meta.id),
     }))
   );
+  const pageHeaderColsDef = usePageHeaderColsDef();
   const { searchText, updateSearchText, searchedList } =
     useSearch(filteredList);
   const clearSelected = useCallback(() => {
@@ -67,7 +68,7 @@ export const PagesMode = ({
   }, []);
   const pageHeaderRenderer = useCallback(() => {
     return <ListTableHeader headerCols={pageHeaderColsDef} />;
-  }, []);
+  }, [pageHeaderColsDef]);
   return (
     <>
       <input