feat: headless filter in all pages tab (#2566)

Co-authored-by: himself65 <himself65@outlook.com>

apps/web/preset.config.mjs

@@ -18,9 +18,11 @@ export const blockSuiteFeatureFlags = {
  * @type {import('@affine/env').BuildFlags}
  */
 export const buildFlags = {
-  enableAllPageFilter: process.env.ENABLE_ALL_PAGE_FILTER
-    ? process.env.ENABLE_ALL_PAGE_FILTER === 'true'
-    : false,
+  enableAllPageFilter:
+    !!process.env.VERCEL ||
+    (process.env.ENABLE_ALL_PAGE_FILTER
+      ? process.env.ENABLE_ALL_PAGE_FILTER === 'true'
+      : false),
   enableImagePreviewModal: process.env.ENABLE_IMAGE_PREVIEW_MODAL
     ? process.env.ENABLE_IMAGE_PREVIEW_MODAL === 'true'
     : true,

apps/web/src/adapters/affine/index.tsx

@@ -330,9 +330,10 @@ export const AffinePlugin: WorkspaceAdapter<WorkspaceFlavour.AFFINE> = {
         </>
       );
     },
-    PageList: ({ blockSuiteWorkspace, onOpenPage }) => {
+    PageList: ({ blockSuiteWorkspace, onOpenPage, view }) => {
       return (
         <BlockSuitePageList
+          view={view}
           listType="all"
           onOpenPage={onOpenPage}
           blockSuiteWorkspace={blockSuiteWorkspace}

apps/web/src/adapters/local/index.tsx

@@ -100,10 +100,11 @@ export const LocalPlugin: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
         </>
       );
     },
-    PageList: ({ blockSuiteWorkspace, onOpenPage }) => {
+    PageList: ({ blockSuiteWorkspace, onOpenPage, view }) => {
       return (
         <BlockSuitePageList
           listType="all"
+          view={view}
           onOpenPage={onOpenPage}
           blockSuiteWorkspace={blockSuiteWorkspace}
         />

apps/web/src/components/blocksuite/block-suite-page-list/index.tsx

@@ -1,6 +1,14 @@
 import { Empty } from '@affine/component';
-import type { ListData, TrashListData } from '@affine/component/page-list';
-import { PageList, PageListTrashView } from '@affine/component/page-list';
+import type {
+  ListData,
+  TrashListData,
+  View,
+} from '@affine/component/page-list';
+import {
+  filterByView,
+  PageList,
+  PageListTrashView,
+} from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
@@ -19,6 +27,7 @@ export type BlockSuitePageListProps = {
   listType: 'all' | 'trash' | 'shared' | 'public';
   isPublic?: true;
   onOpenPage: (pageId: string, newTab?: boolean) => void;
+  view?: View;
 };
 
 const filter = {
@@ -61,6 +70,7 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
   onOpenPage,
   listType,
   isPublic = false,
+  view,
 }) => {
   const pageMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
   const {
@@ -74,8 +84,22 @@ export const BlockSuitePageList: React.FC<BlockSuitePageListProps> = ({
     usePageHelper(blockSuiteWorkspace);
   const t = useAFFiNEI18N();
   const list = useMemo(
-    () => pageMetas.filter(pageMeta => filter[listType](pageMeta, pageMetas)),
-    [pageMetas, listType]
+    () =>
+      pageMetas.filter(pageMeta => {
+        if (!filter[listType](pageMeta, pageMetas)) {
+          return false;
+        }
+        console.log(view);
+        if (!view) {
+          return true;
+        }
+        return filterByView(view, {
+          Favorite: !!pageMeta.favorite,
+          Created: pageMeta.createDate,
+          Updated: pageMeta.updatedDate,
+        });
+      }),
+    [pageMetas, listType, view]
   );
   if (list.length === 0) {
     return <PageListEmpty listType={listType} />;

apps/web/src/components/blocksuite/workspace-header/header.tsx

@@ -8,7 +8,7 @@ import { WorkspaceFlavour } from '@affine/workspace/type';
 import { CloseIcon, MinusIcon, RoundedRectangleIcon } from '@blocksuite/icons';
 import type { Page } from '@blocksuite/store';
 import { useAtom, useAtomValue } from 'jotai';
-import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
+import type { FC, HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 import {
   forwardRef,
   lazy,
@@ -44,6 +44,7 @@ export type BaseHeaderProps<
   currentPage: Page | null;
   isPublic: boolean;
   isPreview: boolean;
+  leftSlot?: ReactNode;
 };
 
 export const enum HeaderRightItemName {
@@ -198,11 +199,14 @@ export const Header = forwardRef<
         data-is-edgeless={mode === 'edgeless'}
       >
         <Suspense>
-          <SidebarSwitch
-            visible={!open}
-            tooltipContent={t['Expand sidebar']()}
-            data-testid="sliderBar-arrowButton-expand"
-          />
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <SidebarSwitch
+              visible={!open}
+              tooltipContent={t['Expand sidebar']()}
+              data-testid="sliderBar-arrowButton-expand"
+            />
+            {props.leftSlot}
+          </div>
         </Suspense>
 
         {props.children}

apps/web/src/pages/workspace/[workspaceId]/all.tsx

@@ -1,3 +1,11 @@
+import { Button } from '@affine/component';
+import {
+  FilterList,
+  SaveViewButton,
+  useAllPageSetting,
+  ViewList,
+} from '@affine/component/page-list';
+import { config } from '@affine/env';
 import { QueryParamError, Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { WorkspaceFlavour } from '@affine/workspace/type';
@@ -17,6 +25,7 @@ import type { NextPageWithLayout } from '../../../shared';
 
 const AllPage: NextPageWithLayout = () => {
   const router = useRouter();
+  const setting = useAllPageSetting();
   const { jumpToPage } = useRouterHelper(router);
   const [currentWorkspace] = useCurrentWorkspace();
   const t = useAFFiNEI18N();
@@ -37,6 +46,38 @@ const AllPage: NextPageWithLayout = () => {
   if (typeof router.query.workspaceId !== 'string') {
     throw new QueryParamError('workspaceId', router.query.workspaceId);
   }
+  const leftSlot = config.enableAllPageFilter && (
+    <ViewList setting={setting}></ViewList>
+  );
+  const filterContainer = config.enableAllPageFilter &&
+    setting.currentView.filterList.length > 0 && (
+      <div style={{ padding: 12, display: 'flex' }}>
+        <div style={{ flex: 1 }}>
+          <FilterList
+            value={setting.currentView.filterList}
+            onChange={filterList =>
+              setting.changeView(
+                {
+                  ...setting.currentView,
+                  filterList,
+                },
+                setting.currentViewIndex
+              )
+            }
+          />
+        </div>
+        <div>
+          {setting.currentViewIndex == null ? (
+            <SaveViewButton
+              init={setting.currentView.filterList}
+              onConfirm={setting.createView}
+            ></SaveViewButton>
+          ) : (
+            <Button onClick={() => setting.selectView()}>Back to all</Button>
+          )}
+        </div>
+      </div>
+    );
   if (currentWorkspace.flavour === WorkspaceFlavour.AFFINE) {
     const PageList = WorkspaceAdapters[currentWorkspace.flavour].UI.PageList;
     return (
@@ -50,10 +91,13 @@ const AllPage: NextPageWithLayout = () => {
           isPreview={false}
           isPublic={false}
           icon={<FolderIcon />}
+          leftSlot={leftSlot}
         >
           {t['All pages']()}
         </WorkspaceTitle>
+        {filterContainer}
         <PageList
+          view={setting.currentView}
           onOpenPage={onClickPage}
           blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
         />
@@ -72,10 +116,13 @@ const AllPage: NextPageWithLayout = () => {
           isPreview={false}
           isPublic={false}
           icon={<FolderIcon />}
+          leftSlot={leftSlot}
         >
           {t['All pages']()}
         </WorkspaceTitle>
+        {filterContainer}
         <PageList
+          view={setting.currentView}
           onOpenPage={onClickPage}
           blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
         />