refactor(core): refactor collection to use new filter system (#12228)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new Collection entity and store with reactive management and real-time updates.
  - Added reactive favorite and shared filters with expanded filtering options.
- **Refactor**
  - Overhauled collection and filtering logic for better performance and maintainability.
  - Replaced legacy filtering UI and logic with a streamlined, service-driven rules system.
  - Updated collection components to use reactive data streams and simplified props.
  - Simplified collection creation by delegating ID generation and instantiation to the service layer.
  - Removed deprecated hooks and replaced state-based filtering with observable-driven filtering.
- **Bug Fixes**
  - Improved accuracy and consistency of tag and favorite filtering in collections.
- **Chores**
  - Removed deprecated and unused filter-related files, types, components, and styles to reduce complexity.
  - Cleaned up imports and removed unused code across multiple components.
- **Documentation**
  - Corrected inline documentation for improved clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -1,17 +1,6 @@
 /* oxlint-disable unicorn/prefer-dom-node-dataset */
 import { test } from '@affine-test/kit/playwright';
-import {
-  changeFilter,
-  checkDatePicker,
-  checkDatePickerMonth,
-  checkFilterName,
-  clickDatePicker,
-  createFirstFilter,
-  createPageWithTag,
-  getPagesCount,
-  selectMonthFromMonthPicker,
-  selectTag,
-} from '@affine-test/kit/utils/filter';
+import { getPagesCount } from '@affine-test/kit/utils/filter';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -52,75 +41,6 @@ test('all page can create new edgeless page', async ({ page }) => {
   await expect(page.locator('affine-edgeless-root')).toBeVisible();
 });
 
-test('allow creation of filters by favorite', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await clickSideBarAllPageButton(page);
-  await createFirstFilter(page, 'Favourited');
-  await page
-    .locator('[data-testid="filter-arg"]', { hasText: 'true' })
-    .locator('div')
-    .click();
-  expect(await page.locator('[data-testid="filter-arg"]').textContent()).toBe(
-    'false'
-  );
-});
-
-test('use monthpicker to modify the month of datepicker', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await clickSideBarAllPageButton(page);
-  await createFirstFilter(page, 'Created');
-  await checkFilterName(page, 'after');
-  // init date
-  const yesterday = new Date();
-  yesterday.setDate(yesterday.getDate() - 1);
-  await checkDatePicker(page, yesterday);
-  // change month
-  await clickDatePicker(page);
-  const lastMonth = new Date();
-  lastMonth.setMonth(lastMonth.getMonth() - 1);
-  const datePicker = page.locator(
-    '[role="dialog"] [data-testid="date-picker-calendar"]'
-  );
-  await selectMonthFromMonthPicker(datePicker, lastMonth);
-  await checkDatePickerMonth(datePicker, lastMonth);
-  // change month
-  const nextMonth = new Date();
-  nextMonth.setMonth(nextMonth.getMonth() + 1);
-  await selectMonthFromMonthPicker(datePicker, nextMonth);
-  await checkDatePickerMonth(datePicker, nextMonth);
-});
-
-test('allow creation of filters by tags', async ({ page }) => {
-  await openHomePage(page);
-  await waitForEditorLoad(page);
-  await clickSideBarAllPageButton(page);
-  await waitForAllPagesLoad(page);
-  const pageCount = await getPagesCount(page);
-  expect(pageCount).not.toBe(0);
-  await createFirstFilter(page, 'Tags');
-  await checkFilterName(page, 'is not empty');
-  const pagesWithTags = await page
-    .locator('[data-testid="page-list-item"]')
-    .all();
-  const pagesWithTagsCount = pagesWithTags.length;
-  expect(pagesWithTagsCount).toBe(0);
-  await createPageWithTag(page, { title: 'Page A', tags: ['Page A'] });
-  await createPageWithTag(page, { title: 'Page B', tags: ['Page B'] });
-  await clickSideBarAllPageButton(page);
-  await createFirstFilter(page, 'Tags');
-  await checkFilterName(page, 'is not empty');
-  expect(await getPagesCount(page)).toBe(pagesWithTagsCount + 2);
-  await changeFilter(page, 'contains all');
-  expect(await getPagesCount(page)).toBe(pageCount + 2);
-  await selectTag(page, 'Page A');
-  expect(await getPagesCount(page)).toBe(1);
-  await changeFilter(page, 'does not contains all');
-  await selectTag(page, 'Page B');
-  expect(await getPagesCount(page)).toBe(pageCount + 1);
-});
-
 test('enable selection and use ESC to disable selection', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
@@ -155,8 +75,8 @@ test('enable selection and use ESC to disable selection', async ({ page }) => {
       .count()
   ).toBeGreaterThan(0);
 
-  // wait for 300ms
-  await page.waitForTimeout(300);
+  // wait for 500ms
+  await page.waitForTimeout(500);
 
   // esc again, checkboxes should disappear
   await page.keyboard.press('Escape');

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

@@ -34,48 +34,43 @@ const createAndPinCollection = async (
     collectionName?: string;
   }
 ) => {
-  await clickNewPageButton(page);
-  await getBlockSuiteEditorTitle(page).click();
-  await getBlockSuiteEditorTitle(page).fill('test page');
-
-  // fixme: remove this timeout. looks like an issue with useBindWorkbenchToBrowserRouter?
-  await page.waitForTimeout(500);
-
   await page.getByTestId('all-pages').click();
 
-  const cell = page.getByTestId('page-list-item-title').getByText('test page');
-  await expect(cell).toBeVisible();
-  await page.getByTestId('create-first-filter').click({
-    delay: 200,
-  });
-  await page
-    .getByTestId('variable-select')
-    .getByTestId(`filler-tag-Created`)
-    .click({
-      delay: 200,
-    });
-  await page.getByTestId('save-as-collection').click({
-    delay: 200,
-  });
+  await page.getByTestId('navigation-panel-bar-add-collection-button').click();
   const title = page.getByTestId('prompt-modal-input');
   await expect(title).toBeVisible();
   await title.fill(options?.collectionName ?? 'test collection');
   await page.getByTestId('prompt-modal-confirm').click();
   await page.waitForTimeout(100);
+  await page
+    .locator('[data-testid^="navigation-panel-collection-"]')
+    .first()
+    .click();
+  await page.getByTestId('collection-add-doc-button').click();
+  await page.getByTestId('confirm-modal-confirm').click();
+
+  // fixme: remove this timeout. looks like an issue with useBindWorkbenchToBrowserRouter?
+  await page.waitForTimeout(500);
+
+  await getBlockSuiteEditorTitle(page).click();
+  await getBlockSuiteEditorTitle(page).fill('test page');
+
+  await page.getByTestId('all-pages').click();
+
+  const cell = page.getByTestId('page-list-item-title').getByText('test page');
+  await expect(cell).toBeVisible();
 };
 
 test('Show collections items in sidebar', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
   const collections = page.getByTestId('navigation-panel-collections');
-  await collections.getByTestId('category-divider-collapse-button').click();
   const items = collections.locator(
     '[data-testid^="navigation-panel-collection-"]'
   );
   await expect(items).toHaveCount(1);
   const first = items.first();
-  expect(await first.textContent()).toBe('test collection');
-  await first.getByTestId('navigation-panel-collapsed-button').click();
+  expect((await first.textContent())!.startsWith('test collection')).toBe(true);
   const collectionPage = first
     .locator('[data-testid^="navigation-panel-doc-"]')
     .nth(0);
@@ -118,34 +113,12 @@ test('edit collection', async ({ page }) => {
   await removeOnboardingPages(page);
   await createAndPinCollection(page);
   const collections = page.getByTestId('navigation-panel-collections');
-  await collections.getByTestId('category-divider-collapse-button').click();
-  const items = collections.locator(
-    '[data-testid^="navigation-panel-collection-"]'
-  );
-  await expect(items).toHaveCount(1);
-  const first = items.first();
-  await first.hover();
-  await first
-    .getByTestId('navigation-panel-tree-node-operation-button')
-    .click();
-  const editCollection = page.getByText('Rename');
-  await editCollection.click();
-  await page.getByTestId('rename-modal-input').fill('123');
-  await page.keyboard.press('Enter');
-  await page.waitForTimeout(100);
-  expect(await first.textContent()).toBe('123');
-});
-
-test('edit collection and change filter date', async ({ page }) => {
-  await removeOnboardingPages(page);
-  await createAndPinCollection(page);
-  const collections = page.getByTestId('navigation-panel-collections');
-  await collections.getByTestId('category-divider-collapse-button').click();
   const items = collections.locator(
     '[data-testid^="navigation-panel-collection-"]'
   );
   await expect(items).toHaveCount(1);
   const first = items.first();
+  await first.getByTestId('navigation-panel-collapsed-button').first().click();
   await first.hover();
   await first
     .getByTestId('navigation-panel-tree-node-operation-button')