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

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

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}
         />