toeverything · graphite-app · Mar 25, 2024 · Mar 25, 2024
diff --git a/packages/frontend/core/src/components/page-list/collections/virtualized-collection-list.tsx b/packages/frontend/core/src/components/page-list/collections/virtualized-collection-list.tsx
@@ -107,7 +107,6 @@ export const VirtualizedCollectionList = ({
         ref={listRef}
         selectable="toggle"
         draggable={false}
-        groupBy={false}
         atTopThreshold={80}
         atTopStateChange={setHideHeaderCreateNewCollection}
         onSelectionActiveChange={setShowFloatingToolbar}

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/components/page-display-menu.css.ts b/packages/frontend/core/src/components/page-list/components/page-display-menu.css.ts
@@ -0,0 +1,75 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const menu = style({
+  minWidth: '220px',
+});
+
+export const arrowDownSmallIcon = style({
+  width: '16px',
+  height: '16px',
+  color: cssVar('iconColor'),
+});
+
+export const headerDisplayButton = style({
+  marginLeft: '16px',
+  ['WebkitAppRegion' as string]: 'no-drag',
+});
+
+export const subMenuTrigger = style({
+  paddingRight: '8px',
+});
+
+export const subMenuItem = style({
+  fontSize: cssVar('fontXs'),
+  flexWrap: 'nowrap',
+  selectors: {
+    '&[data-active="true"]': {
+      color: cssVar('primaryColor'),
+    },
+  },
+});
+
+export const subMenuTriggerContent = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '8px',
+  fontWeight: 500,
+  fontSize: cssVar('fontXs'),
+});
+
+export const currentGroupType = style({
+  fontWeight: 400,
+  color: cssVar('textSecondaryColor'),
+});
+
+export const listOption = style({
+  padding: '4px 12px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+  fontWeight: 500,
+  color: cssVar('textSecondaryColor'),
+  marginBottom: '4px',
+});
+export const properties = style({
+  padding: '4px 12px',
+  height: '28px',
+  fontSize: cssVar('fontXs'),
+});
+export const propertiesWrapper = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  maxWidth: '200px',
+  gap: '8px',
+  padding: '4px 12px',
+});
+
+export const propertyButton = style({
+  color: cssVar('textDisableColor'),
+  selectors: {
+    '&[data-active="true"]': {
+      color: cssVar('textPrimaryColor'),
+    },
+  },
+});
diff --git a/packages/frontend/core/src/components/page-list/components/page-display-menu.tsx b/packages/frontend/core/src/components/page-list/components/page-display-menu.tsx
@@ -0,0 +1,163 @@
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuSeparator,
+  MenuSub,
+} from '@affine/component';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ArrowDownSmallIcon, DoneIcon } from '@blocksuite/icons';
+import { useAtom } from 'jotai';
+import { useCallback, useMemo } from 'react';
+
+import { pageGroupByTypeAtom } from '../group-definitions';
+import type { PageDisplayProperties, PageGroupByType } from '../types';
+import { usePageDisplayProperties } from '../use-page-display-properties';
+import * as styles from './page-display-menu.css';
+
+type GroupOption = {
+  value: PageGroupByType;
+  label: string;
+};
+
+export const PageDisplayMenu = () => {
+  const t = useAFFiNEI18N();
+  const [group, setGroup] = useAtom(pageGroupByTypeAtom);
+  const [properties, setProperties] = usePageDisplayProperties();
+  const handleSelect = useCallback(
+    (value: PageGroupByType) => {
+      setGroup(value);
+    },
+    [setGroup]
+  );
+  const propertyOptions: Array<{
+    key: keyof PageDisplayProperties;
+    onClick: () => void;
+    label: string;
+  }> = useMemo(() => {
+    return [
+      {
+        key: 'bodyNotes',
+        onClick: () => setProperties('bodyNotes', !properties['bodyNotes']),
+        label: t['com.affine.page.display.display-properties.body-notes'](),
+      },
+      {
+        key: 'tags',
+        onClick: () => setProperties('tags', !properties['tags']),
+        label: t['Tags'](),
+      },
+      {
+        key: 'createDate',
+        onClick: () => setProperties('createDate', !properties['createDate']),
+        label: t['Created'](),
+      },
+      {
+        key: 'updatedDate',
+        onClick: () => setProperties('updatedDate', !properties['updatedDate']),
+        label: t['Updated'](),
+      },
+    ];
+  }, [properties, setProperties, t]);
+
+  const items = useMemo(() => {
+    const groupOptions: GroupOption[] = [
+      {
+        value: 'createDate',
+        label: t['Created'](),
+      },
+      {
+        value: 'updatedDate',
+        label: t['Updated'](),
+      },
+      {
+        value: 'tag',
+        label: t['com.affine.page.display.grouping.group-by-tag'](),
+      },
+      {
+        value: 'favourites',
+        label: t['com.affine.page.display.grouping.group-by-favourites'](),
+      },
+      {
+        value: 'none',
+        label: t['com.affine.page.display.grouping.no-grouping'](),
+      },
+    ];
+
+    const subItems = groupOptions.map(option => (
+      <MenuItem
+        key={option.value}
+        onSelect={() => handleSelect(option.value)}
+        data-active={group === option.value}
+        endFix={group === option.value ? <DoneIcon fontSize={'20px'} /> : null}
+        className={styles.subMenuItem}
+        data-testid={`group-by-${option.value}`}
+      >
+        <span>{option.label}</span>
+      </MenuItem>
+    ));
+
+    const currentGroupType = groupOptions.find(
+      option => option.value === group
+    )?.label;
+
+    return (
+      <>
+        <MenuSub
+          subContentOptions={{
+            alignOffset: -8,
+            sideOffset: 12,
+          }}
+          triggerOptions={{ className: styles.subMenuTrigger }}
+          items={subItems}
+        >
+          <div
+            className={styles.subMenuTriggerContent}
+            data-testid="page-display-grouping-menuItem"
+          >
+            <span>{t['com.affine.page.display.grouping']()}</span>
+            <span className={styles.currentGroupType}>{currentGroupType}</span>
+          </div>
+        </MenuSub>
+        <MenuSeparator />
+        <div className={styles.listOption}>
+          {t['com.affine.page.display.list-option']()}
+        </div>
+        <div className={styles.properties}>
+          {t['com.affine.page.display.display-properties']()}
+        </div>
+        <div className={styles.propertiesWrapper}>
+          {propertyOptions.map(option => (
+            <Button
+              key={option.label}
+              className={styles.propertyButton}
+              onClick={option.onClick}
+              data-active={properties[option.key]}
+              data-testid={`property-${option.key}`}
+            >
+              {option.label}
+            </Button>
+          ))}
+        </div>
+      </>
+    );
+  }, [group, handleSelect, properties, propertyOptions, t]);
+  return (
+    <Menu
+      items={items}
+      contentOptions={{
+        className: styles.menu,
+
+        align: 'end',
+      }}
+    >
+      <Button
+        iconPosition="end"
+        icon={<ArrowDownSmallIcon className={styles.arrowDownSmallIcon} />}
+        className={styles.headerDisplayButton}
+        data-testid="page-display-menu-button"
+      >
+        {t['com.affine.page.display']()}
+      </Button>
+    </Menu>
+  );
+};
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
@@ -7,6 +7,7 @@ import { 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';
@@ -15,6 +16,7 @@ const ListTitleCell = ({
   title,
   preview,
 }: Pick<PageListItemProps, 'title' | 'preview'>) => {
+  const [displayProperties] = usePageDisplayProperties();
   return (
     <div data-testid="page-list-item-title" className={styles.titleCell}>
       <div
@@ -23,7 +25,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
@@ -13,7 +13,8 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 
 import { usePageHelper } from '../../blocksuite/block-suite-page-list/utils';
 import { ListFloatingToolbar } from '../components/list-floating-toolbar';
-import { pageHeaderColsDef } from '../header-col-def';
+import { usePageItemGroupDefinitions } from '../group-definitions';
+import { usePageHeaderColsDef } from '../header-col-def';
 import { PageOperationCell } from '../operation-cell';
 import { PageListItemRenderer } from '../page-group';
 import { ListTableHeader } from '../page-header';
@@ -108,6 +109,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,
@@ -139,7 +141,7 @@ export const VirtualizedPageList = ({
 
   const pageHeaderRenderer = useCallback(() => {
     return <ListTableHeader headerCols={pageHeaderColsDef} />;
-  }, []);
+  }, [pageHeaderColsDef]);
 
   const pageItemRenderer = useCallback((item: ListItem) => {
     return <PageListItemRenderer {...item} />;
@@ -179,6 +181,8 @@ export const VirtualizedPageList = ({
     hideFloatingToolbar();
   }, [filteredSelectedPageIds, hideFloatingToolbar, pageMetas, setTrashModal]);
 
+  const group = usePageItemGroupDefinitions();
+
   return (
     <>
       <VirtualizedList
@@ -189,6 +193,7 @@ export const VirtualizedPageList = ({
         atTopStateChange={setHideHeaderCreateNewPage}
         onSelectionActiveChange={setShowFloatingToolbar}
         heading={heading}
+        groupBy={group}
         selectedIds={filteredSelectedPageIds}
         onSelectedIdsChange={setSelectedPageIds}
         items={pageMetasToRender}