feat(core): add collection and tag filters to all pages (#5567)

close TOV-69

Added the `filterMode` parameter to the `/all` route.
Abstracted the `PageList` and associated components into more universal ones.
Added the `useTagMetas` hook to get and update  the workspace tags.

https://github.com/toeverything/AFFiNE/assets/102217452/7595944d-a056-40c2-8d89-d8df9e901a4b

tests/affine-local/e2e/all-page.spec.ts

@@ -212,7 +212,7 @@ test('select two pages and delete', async ({ page }) => {
   );
 
   // click delete button
-  await page.locator('[data-testid="page-list-toolbar-delete"]').click();
+  await page.locator('[data-testid="list-toolbar-delete"]').click();
 
   // the confirm dialog should appear
   await expect(page.getByText('Delete 2 pages?')).toBeVisible();

tests/affine-local/e2e/local-first-collections-items.spec.ts

@@ -18,7 +18,7 @@ const removeOnboardingPages = async (page: Page) => {
   await page.getByTestId('page-list-header-selection-checkbox').click();
   // click again to select all
   await page.getByTestId('page-list-header-selection-checkbox').click();
-  await page.getByTestId('page-list-toolbar-delete').click();
+  await page.getByTestId('list-toolbar-delete').click();
   // confirm delete
   await page.getByTestId('confirm-delete-page').click();
 };

tests/storybook/src/stories/page-list.stories.tsx

@@ -1,14 +1,15 @@
 import { toast } from '@affine/component';
 import {
   FloatingToolbar,
+  List,
+  type ListItem,
+  type ListProps,
+  ListScrollContainer,
   NewPageButton,
-  OperationCell,
-  type OperationCellProps,
-  PageList,
   PageListItem,
   type PageListItemProps,
-  type PageListProps,
-  PageListScrollContainer,
+  PageOperationCell,
+  type PageOperationCellProps,
   PageTags,
   type PageTagsProps,
 } from '@affine/core/components/page-list';
@@ -29,9 +30,9 @@ export default {
   },
 } satisfies Meta;
 
-export const AffineOperationCell: StoryFn<OperationCellProps> = ({
+export const AffineOperationCell: StoryFn<PageOperationCellProps> = ({
   ...props
-}) => <OperationCell {...props} />;
+}) => <PageOperationCell {...props} />;
 
 AffineOperationCell.args = {
   favorite: false,
@@ -159,11 +160,11 @@ const testTags = [
   },
 ];
 
-export const ListItem: StoryFn<PageListItemProps> = props => (
+export const PageListItemComponent: StoryFn<PageListItemProps> = props => (
   <PageListItem {...props}></PageListItem>
 );
 
-ListItem.args = {
+PageListItemComponent.args = {
   pageId: 'test-page-id',
   title: 'Test Page Title',
   preview:
@@ -178,7 +179,7 @@ ListItem.args = {
   selected: true,
 };
 
-ListItem.decorators = [withRouter];
+PageListItemComponent.decorators = [withRouter];
 
 export const ListItemTags: StoryFn<PageTagsProps> = props => (
   <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
@@ -195,15 +196,18 @@ ListItemTags.args = {
   maxItems: 5,
 };
 
-export const PageListStory: StoryFn<PageListProps> = (props, { loaded }) => {
+export const PageListStory: StoryFn<ListProps<ListItem>> = (
+  props,
+  { loaded }
+) => {
   return (
-    <PageListScrollContainer
+    <ListScrollContainer
       style={{
         height: '100vh',
       }}
     >
-      <PageList {...props} {...loaded}></PageList>
-    </PageListScrollContainer>
+      <List {...props} {...loaded}></List>
+    </ListScrollContainer>
   );
 };