refactor(core): remove collection atom (#5832)

2024-12-23 08:53:27 +03:00 · 2024-02-27 03:50:56 +00:00 · 2024-02-27 03:50:56 +00:00 · 5cd488fe1d
commit 5cd488fe1d
parent ad9b0303c4
41 changed files with 644 additions and 962 deletions
--- a/packages/frontend/core/src/atoms/index.ts
+++ b/packages/frontend/core/src/atoms/index.ts
@ -48,9 +48,6 @@ export const recentPageIdsBaseAtom = atomWithStorage<string[]>(
  []
 );

-export type PageModeOption = 'all' | 'page' | 'edgeless';
-export const allPageModeSelectAtom = atom<PageModeOption>('all');
-
 export type AllPageFilterOption = 'docs' | 'collections' | 'tags';
 export const allPageFilterSelectAtom = atom<AllPageFilterOption>('docs');

--- a/packages/frontend/core/src/commands/affine-navigation.tsx
+++ b/packages/frontend/core/src/commands/affine-navigation.tsx
@ -5,11 +5,7 @@ import type { Workspace } from '@blocksuite/store';
 import { registerAffineCommand } from '@toeverything/infra/command';
 import type { createStore } from 'jotai';

-import {
-  openSettingModalAtom,
-  openWorkspaceListModalAtom,
-  type PageModeOption,
-} from '../atoms';
+import { openSettingModalAtom, openWorkspaceListModalAtom } from '../atoms';
 import type { useNavigateHelper } from '../hooks/use-navigate-helper';

 export function registerAffineNavigationCommands({
@ -17,12 +13,10 @@ export function registerAffineNavigationCommands({
  store,
  workspace,
  navigationHelper,
-  setPageListMode,
 }: {
  t: ReturnType<typeof useAFFiNEI18N>;
  store: ReturnType<typeof createStore>;
  navigationHelper: ReturnType<typeof useNavigateHelper>;
-  setPageListMode: React.Dispatch<React.SetStateAction<PageModeOption>>;
  workspace: Workspace;
 }) {
  const unsubs: Array<() => void> = [];
@ -34,7 +28,6 @@ export function registerAffineNavigationCommands({
      label: t['com.affine.cmdk.affine.navigation.goto-all-pages'](),
      run() {
        navigationHelper.jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
-        setPageListMode('all');
      },
    })
  );
@ -47,7 +40,6 @@ export function registerAffineNavigationCommands({
      label: 'Go to Collection List',
      run() {
        navigationHelper.jumpToCollections(workspace.id);
-        setPageListMode('all');
      },
    })
  );
@ -60,7 +52,6 @@ export function registerAffineNavigationCommands({
      label: 'Go to Tag List',
      run() {
        navigationHelper.jumpToTags(workspace.id);
-        setPageListMode('all');
      },
    })
  );
@ -101,7 +92,6 @@ export function registerAffineNavigationCommands({
      label: t['com.affine.cmdk.affine.navigation.goto-trash'](),
      run() {
        navigationHelper.jumpToSubPath(workspace.id, WorkspaceSubPath.TRASH);
-        setPageListMode('all');
      },
    })
  );
--- a/packages/frontend/core/src/components/page-list/tests/use-all-page-setting.spec.ts
+++ b/packages/frontend/core/src/components/page-list/tests/use-all-page-setting.spec.ts
@ -1,65 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import 'fake-indexeddb/auto';
-
-import type { CollectionService } from '@affine/core/modules/collection';
-import type { Collection } from '@affine/env/filter';
-import { renderHook } from '@testing-library/react';
-import { LiveData } from '@toeverything/infra';
-import { BehaviorSubject } from 'rxjs';
-import { expect, test } from 'vitest';
-
-import { createDefaultFilter, vars } from '../filter/vars';
-import { useCollectionManager } from '../use-collection-manager';
-
-const defaultMeta = { tags: { options: [] } };
-const collectionsSubject = new BehaviorSubject<Collection[]>([]);
-
-const mockWorkspaceCollectionService = {
-  collections: LiveData.from(collectionsSubject, []),
-  addCollection: (...collections) => {
-    const prev = collectionsSubject.value;
-    collectionsSubject.next([...collections, ...prev]);
-  },
-  deleteCollection: (...ids) => {
-    const prev = collectionsSubject.value;
-    collectionsSubject.next(prev.filter(v => !ids.includes(v.id)));
-  },
-  updateCollection: (id, updater) => {
-    const prev = collectionsSubject.value;
-    collectionsSubject.next(
-      prev.map(v => {
-        if (v.id === id) {
-          return updater(v);
-        }
-        return v;
-      })
-    );
-  },
-} as CollectionService;
-
-test('useAllPageSetting', async () => {
-  const settingHook = renderHook(() =>
-    useCollectionManager(mockWorkspaceCollectionService)
-  );
-  const prevCollection = settingHook.result.current.currentCollection;
-  expect(settingHook.result.current.savedCollections).toEqual([]);
-  settingHook.result.current.updateCollection({
-    ...settingHook.result.current.currentCollection,
-    filterList: [createDefaultFilter(vars[0], defaultMeta)],
-  });
-  settingHook.rerender();
-  const nextCollection = settingHook.result.current.currentCollection;
-  expect(nextCollection).not.toBe(prevCollection);
-  expect(nextCollection.filterList).toEqual([
-    createDefaultFilter(vars[0], defaultMeta),
-  ]);
-  settingHook.result.current.createCollection({
-    ...settingHook.result.current.currentCollection,
-    id: '1',
-  });
-  settingHook.rerender();
-  expect(settingHook.result.current.savedCollections.length).toBe(1);
-  expect(settingHook.result.current.savedCollections[0].id).toBe('1');
-});
--- 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
@ -18,19 +18,18 @@ import { CollectionOperationCell } from '../operation-cell';
 import { CollectionListItemRenderer } from '../page-group';
 import { ListTableHeader } from '../page-header';
 import type { CollectionMeta, ItemListHandle, ListItem } from '../types';
-import { useCollectionManager } from '../use-collection-manager';
 import type { AllPageListConfig } from '../view';
 import { VirtualizedList } from '../virtualized-list';
 import { CollectionListHeader } from './collection-list-header';

 const useCollectionOperationsRenderer = ({
  info,
-  setting,
+  service,
  config,
 }: {
  info: DeleteCollectionInfo;
  config: AllPageListConfig;
-  setting: ReturnType<typeof useCollectionManager>;
+  service: CollectionService;
 }) => {
  const pageOperationsRenderer = useCallback(
    (collection: Collection) => {
@ -38,12 +37,12 @@ const useCollectionOperationsRenderer = ({
        <CollectionOperationCell
          info={info}
          collection={collection}
-          setting={setting}
+          service={service}
          config={config}
        />
      );
    },
-    [config, info, setting]
+    [config, info, service]
  );

  return pageOperationsRenderer;
@ -69,13 +68,13 @@ export const VirtualizedCollectionList = ({
  const [selectedCollectionIds, setSelectedCollectionIds] = useState<string[]>(
    []
  );
-  const setting = useCollectionManager(useService(CollectionService));
+  const collectionService = useService(CollectionService);
  const currentWorkspace = useService(Workspace);
  const info = useDeleteCollectionInfo();

  const collectionOperations = useCollectionOperationsRenderer({
    info,
-    setting,
+    service: collectionService,
    config,
  });

@ -105,8 +104,8 @@ export const VirtualizedCollectionList = ({
  }, []);

  const handleDelete = useCallback(() => {
-    return setting.deleteCollection(info, ...selectedCollectionIds);
-  }, [setting, info, selectedCollectionIds]);
+    return collectionService.deleteCollection(info, ...selectedCollectionIds);
+  }, [collectionService, info, selectedCollectionIds]);

  return (
    <>
--- a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
@ -10,10 +10,7 @@ import { useCallback, useMemo } from 'react';

 import { CollectionService } from '../../../modules/collection';
 import { createTagFilter } from '../filter/utils';
-import {
-  createEmptyCollection,
-  useCollectionManager,
-} from '../use-collection-manager';
+import { createEmptyCollection } from '../use-collection-manager';
 import { tagColorMap } from '../utils';
 import type { AllPageListConfig } from '../view/edit-collection/edit-collection';
 import {
@ -23,38 +20,12 @@ import {
 import * as styles from './page-list-header.css';
 import { PageListNewPageButton } from './page-list-new-page-button';

-export const PageListHeader = ({ workspaceId }: { workspaceId: string }) => {
+export const PageListHeader = () => {
  const t = useAFFiNEI18N();
-  const setting = useCollectionManager(useService(CollectionService));
-  const { jumpToCollections } = useNavigateHelper();
-
-  const handleJumpToCollections = useCallback(() => {
-    jumpToCollections(workspaceId);
-  }, [jumpToCollections, workspaceId]);

  const title = useMemo(() => {
-    if (setting.isDefault) {
-      return t['com.affine.all-pages.header']();
-    }
-    return (
-      <>
-        <div style={{ cursor: 'pointer' }} onClick={handleJumpToCollections}>
-          {t['com.affine.collections.header']()} /
-        </div>
-        <div className={styles.titleIcon}>
-          <ViewLayersIcon />
-        </div>
-        <div className={styles.titleCollectionName}>
-          {setting.currentCollection.name}
-        </div>
-      </>
-    );
-  }, [
-    handleJumpToCollections,
-    setting.currentCollection.name,
-    setting.isDefault,
-    t,
-  ]);
+    return t['com.affine.all-pages.header']();
+  }, [t]);

  return (
    <div className={styles.docListHeader}>
@ -75,22 +46,19 @@ export const CollectionPageListHeader = ({
  workspaceId: string;
 }) => {
  const t = useAFFiNEI18N();
-  const setting = useCollectionManager(useService(CollectionService));
  const { jumpToCollections } = useNavigateHelper();

  const handleJumpToCollections = useCallback(() => {
    jumpToCollections(workspaceId);
  }, [jumpToCollections, workspaceId]);

-  const { updateCollection } = useCollectionManager(
-    useService(CollectionService)
-  );
+  const collectionService = useService(CollectionService);
  const { node, open } = useEditCollection(config);

  const handleAddPage = useAsyncCallback(async () => {
    const ret = await open({ ...collection }, 'page');
-    updateCollection(ret);
-  }, [collection, open, updateCollection]);
+    collectionService.updateCollection(collection.id, () => ret);
+  }, [collection, collectionService, open]);

  return (
    <>
@ -103,9 +71,7 @@ export const CollectionPageListHeader = ({
          <div className={styles.titleIcon}>
            <ViewLayersIcon />
          </div>
-          <div className={styles.titleCollectionName}>
-            {setting.currentCollection.name}
-          </div>
+          <div className={styles.titleCollectionName}>{collection.name}</div>
        </div>
        <Button className={styles.addPageButton} onClick={handleAddPage}>
          {t['com.affine.collection.addPages']()}
@ -124,7 +90,7 @@ export const TagPageListHeader = ({
 }) => {
  const t = useAFFiNEI18N();
  const { jumpToTags, jumpToCollection } = useNavigateHelper();
-  const setting = useCollectionManager(useService(CollectionService));
+  const collectionService = useService(CollectionService);
  const { open, node } = useEditCollectionName({
    title: t['com.affine.editCollection.saveCollection'](),
    showTips: true,
@ -136,13 +102,13 @@ export const TagPageListHeader = ({

  const saveToCollection = useCallback(
    (collection: Collection) => {
-      setting.createCollection({
+      collectionService.addCollection({
        ...collection,
        filterList: [createTagFilter(tag.id)],
      });
      jumpToCollection(workspaceId, collection.id);
    },
-    [setting, tag.id, jumpToCollection, workspaceId]
+    [collectionService, tag.id, jumpToCollection, workspaceId]
  );
  const handleClick = useCallback(() => {
    open('')
--- 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
@ -2,7 +2,7 @@ import { toast } from '@affine/component';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useTrashModalHelper } from '@affine/core/hooks/affine/use-trash-modal-helper';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
-import type { Collection } from '@affine/env/filter';
+import type { Collection, Filter } from '@affine/env/filter';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageMeta, Tag } from '@blocksuite/store';
@ -81,15 +81,17 @@ const usePageOperationsRenderer = () => {
 export const VirtualizedPageList = ({
  tag,
  collection,
+  filters,
  config,
  listItem,
  setHideHeaderCreateNewPage,
 }: {
  tag?: Tag;
  collection?: Collection;
+  filters?: Filter[];
  config?: AllPageListConfig;
  listItem?: PageMeta[];
-  setHideHeaderCreateNewPage: (hide: boolean) => void;
+  setHideHeaderCreateNewPage?: (hide: boolean) => void;
 }) => {
  const listRef = useRef<ItemListHandle>(null);
  const [showFloatingToolbar, setShowFloatingToolbar] = useState(false);
@ -101,11 +103,10 @@ export const VirtualizedPageList = ({
    currentWorkspace.blockSuiteWorkspace
  );

-  const filteredPageMetas = useFilteredPageMetas(
-    'all',
-    pageMetas,
-    currentWorkspace
-  );
+  const filteredPageMetas = useFilteredPageMetas(currentWorkspace, pageMetas, {
+    filters,
+    collection,
+  });
  const pageMetasToRender = useMemo(() => {
    if (listItem) {
      return listItem;
@ -151,7 +152,7 @@ export const VirtualizedPageList = ({
        />
      );
    }
-    return <PageListHeader workspaceId={currentWorkspace.id} />;
+    return <PageListHeader />;
  }, [collection, config, currentWorkspace.id, tag]);

  const { setTrashModal } = useTrashModalHelper(
--- a/packages/frontend/core/src/components/page-list/operation-cell.tsx
+++ b/packages/frontend/core/src/components/page-list/operation-cell.tsx
@ -23,10 +23,10 @@ import {
 import { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';

+import type { CollectionService } from '../../modules/collection';
 import { FavoriteTag } from './components/favorite-tag';
 import * as styles from './list.css';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
-import type { useCollectionManager } from './use-collection-manager';
 import { ColWrapper, stopPropagationWithoutPrevent } from './utils';
 import {
  type AllPageListConfig,
@ -208,13 +208,13 @@ export interface CollectionOperationCellProps {
  collection: Collection;
  info: DeleteCollectionInfo;
  config: AllPageListConfig;
-  setting: ReturnType<typeof useCollectionManager>;
+  service: CollectionService;
 }

 export const CollectionOperationCell = ({
  collection,
  config,
-  setting,
+  service,
  info,
 }: CollectionOperationCellProps) => {
  const t = useAFFiNEI18N();
@ -231,26 +231,29 @@ export const CollectionOperationCell = ({
    // use openRenameModal if it is in the sidebar collection list
    openEditCollectionNameModal(collection.name)
      .then(name => {
-        return setting.updateCollection({ ...collection, name });
+        return service.updateCollection(collection.id, collection => ({
+          ...collection,
+          name,
+        }));
      })
      .catch(err => {
        console.error(err);
      });
-  }, [collection, openEditCollectionNameModal, setting]);
+  }, [collection.id, collection.name, openEditCollectionNameModal, service]);

  const handleEdit = useCallback(() => {
    openEditCollectionModal(collection)
      .then(collection => {
-        return setting.updateCollection(collection);
+        return service.updateCollection(collection.id, () => collection);
      })
      .catch(err => {
        console.error(err);
      });
-  }, [setting, collection, openEditCollectionModal]);
+  }, [openEditCollectionModal, collection, service]);

  const handleDelete = useCallback(() => {
-    return setting.deleteCollection(info, collection.id);
-  }, [setting, info, collection]);
+    return service.deleteCollection(info, collection.id);
+  }, [service, info, collection]);

  return (
    <>
--- a/packages/frontend/core/src/components/page-list/tags/virtualized-tag-list.tsx
+++ b/packages/frontend/core/src/components/page-list/tags/virtualized-tag-list.tsx
@ -15,12 +15,10 @@ import { TagListHeader } from './tag-list-header';
 export const VirtualizedTagList = ({
  tags,
  tagMetas,
-  setHideHeaderCreateNewTag,
  onTagDelete,
 }: {
  tags: Tag[];
  tagMetas: TagMeta[];
-  setHideHeaderCreateNewTag: (hide: boolean) => void;
  onTagDelete: (tagIds: string[]) => void;
 }) => {
  const listRef = useRef<ItemListHandle>(null);
@ -63,7 +61,6 @@ export const VirtualizedTagList = ({
        draggable={false}
        groupBy={false}
        atTopThreshold={80}
-        atTopStateChange={setHideHeaderCreateNewTag}
        onSelectionActiveChange={setShowFloatingToolbar}
        heading={<TagListHeader />}
        selectedIds={filteredSelectedTagIds}
--- a/packages/frontend/core/src/components/page-list/use-collection-manager.ts
+++ b/packages/frontend/core/src/components/page-list/use-collection-manager.ts
@ -1,11 +1,5 @@
-import type { CollectionService } from '@affine/core/modules/collection';
 import type { Collection, Filter, VariableMap } from '@affine/env/filter';
 import type { PageMeta } from '@blocksuite/store';
-import { useLiveData } from '@toeverything/infra/livedata';
-import { useAtom, useAtomValue } from 'jotai';
-import { atomWithReset } from 'jotai/utils';
-import { useCallback } from 'react';
-import { NIL } from 'uuid';

 import { evalFilterList } from './filter';

@ -21,79 +15,7 @@ export const createEmptyCollection = (
    ...data,
  };
 };
-const defaultCollection: Collection = createEmptyCollection(NIL, {
-  name: 'All',
-});
-const defaultCollectionAtom = atomWithReset<Collection>(defaultCollection);
-export const currentCollectionAtom = atomWithReset<string>(NIL);

-export type Updater<T> = (value: T) => T;
-export type CollectionUpdater = Updater<Collection>;
-
-export const useSavedCollections = (collectionService: CollectionService) => {
-  const addPage = useCallback(
-    (collectionId: string, pageId: string) => {
-      collectionService.updateCollection(collectionId, old => {
-        return {
-          ...old,
-          allowList: [pageId, ...(old.allowList ?? [])],
-        };
-      });
-    },
-    [collectionService]
-  );
-  return {
-    collectionService,
-    addPage,
-  };
-};
-
-export const useCollectionManager = (collectionService: CollectionService) => {
-  const collections = useLiveData(collectionService.collections);
-  const { addPage } = useSavedCollections(collectionService);
-  const currentCollectionId = useAtomValue(currentCollectionAtom);
-  const [defaultCollection, updateDefaultCollection] = useAtom(
-    defaultCollectionAtom
-  );
-  const update = useCallback(
-    (collection: Collection) => {
-      if (collection.id === NIL) {
-        updateDefaultCollection(collection);
-      } else {
-        collectionService.updateCollection(collection.id, () => collection);
-      }
-    },
-    [updateDefaultCollection, collectionService]
-  );
-  const setTemporaryFilter = useCallback(
-    (filterList: Filter[]) => {
-      updateDefaultCollection({
-        ...defaultCollection,
-        filterList: filterList,
-      });
-    },
-    [updateDefaultCollection, defaultCollection]
-  );
-  const currentCollection =
-    currentCollectionId === NIL
-      ? defaultCollection
-      : collections.find(v => v.id === currentCollectionId) ??
-        defaultCollection;
-
-  return {
-    currentCollection: currentCollection,
-    savedCollections: collections,
-    isDefault: currentCollectionId === NIL,
-
-    // actions
-    createCollection: collectionService.addCollection.bind(collectionService),
-    updateCollection: update,
-    deleteCollection:
-      collectionService.deleteCollection.bind(collectionService),
-    addPage,
-    setTemporaryFilter,
-  };
-};
 export const filterByFilterList = (filterList: Filter[], varMap: VariableMap) =>
  evalFilterList(filterList, varMap);

--- a/packages/frontend/core/src/components/page-list/use-filtered-page-metas.tsx
+++ b/packages/frontend/core/src/components/page-list/use-filtered-page-metas.tsx
@ -1,77 +1,55 @@
-import { allPageModeSelectAtom } from '@affine/core/atoms';
-import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
-import { usePublicPages } from '@affine/core/hooks/affine/use-is-shared-page';
-import { CollectionService } from '@affine/core/modules/collection';
+import type { Collection, Filter } from '@affine/env/filter';
 import type { PageMeta } from '@blocksuite/store';
 import type { Workspace } from '@toeverything/infra';
-import { useService } from '@toeverything/infra/di';
-import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';

-import {
-  filterPage,
-  filterPageByRules,
-  useCollectionManager,
-} from './use-collection-manager';
+import { usePublicPages } from '../../hooks/affine/use-is-shared-page';
+import { filterPage, filterPageByRules } from './use-collection-manager';

 export const useFilteredPageMetas = (
-  route: 'all' | 'trash',
+  workspace: Workspace,
  pageMetas: PageMeta[],
-  workspace: Workspace
+  options: {
+    trash?: boolean;
+    filters?: Filter[];
+    collection?: Collection;
+  } = {}
 ) => {
-  const { isPreferredEdgeless } = usePageHelper(workspace.blockSuiteWorkspace);
-  const pageMode = useAtomValue(allPageModeSelectAtom);
-  const { currentCollection, isDefault } = useCollectionManager(
-    useService(CollectionService)
-  );
  const { getPublicMode } = usePublicPages(workspace);

  const filteredPageMetas = useMemo(
    () =>
-      pageMetas
-        .filter(pageMeta => {
-          if (pageMode === 'all') {
-            return true;
-          }
-          if (pageMode === 'edgeless') {
-            return isPreferredEdgeless(pageMeta.id);
-          }
-          if (pageMode === 'page') {
-            return !isPreferredEdgeless(pageMeta.id);
-          }
-          console.error('unknown filter mode', pageMeta, pageMode);
-          return true;
-        })
-        .filter(pageMeta => {
-          if (
-            (route === 'trash' && !pageMeta.trash) ||
-            (route === 'all' && pageMeta.trash)
-          ) {
+      pageMetas.filter(pageMeta => {
+        if (options.trash) {
+          if (!pageMeta.trash) {
            return false;
          }
-          if (!currentCollection) {
-            return true;
-          }
-          const pageData = {
-            meta: pageMeta,
-            publicMode: getPublicMode(pageMeta.id),
-          };
-          return isDefault
-            ? filterPageByRules(
-                currentCollection.filterList,
-                currentCollection.allowList,
-                pageData
-              )
-            : filterPage(currentCollection, pageData);
-        }),
+        } else if (pageMeta.trash) {
+          return false;
+        }
+        const pageData = {
+          meta: pageMeta,
+          publicMode: getPublicMode(pageMeta.id),
+        };
+        if (
+          options.filters &&
+          !filterPageByRules(options.filters, [], pageData)
+        ) {
+          return false;
+        }
+
+        if (options.collection && !filterPage(options.collection, pageData)) {
+          return false;
+        }
+
+        return true;
+      }),
    [
-      currentCollection,
-      isDefault,
-      isPreferredEdgeless,
-      getPublicMode,
      pageMetas,
-      pageMode,
-      route,
+      options.trash,
+      options.filters,
+      options.collection,
+      getPublicMode,
    ]
  );

--- a/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts
+++ b/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts
@ -1,27 +0,0 @@
-import { cssVar } from '@toeverything/theme';
-import { style } from '@vanilla-extract/css';
-export const view = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 10,
-  fontSize: 14,
-  fontWeight: 600,
-  height: '100%',
-});
-export const option = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: 4,
-  cursor: 'pointer',
-  borderRadius: 4,
-  ':hover': {
-    backgroundColor: cssVar('hoverColor'),
-  },
-  opacity: 0,
-  selectors: {
-    [`${view}:hover &`]: {
-      opacity: 1,
-    },
-  },
-});
--- a/packages/frontend/core/src/components/page-list/view/collection-bar.tsx
+++ b/packages/frontend/core/src/components/page-list/view/collection-bar.tsx
@ -1,112 +0,0 @@
-import { Button, Tooltip } from '@affine/component';
-import type { CollectionService } from '@affine/core/modules/collection';
-import type { DeleteCollectionInfo, PropertiesMeta } from '@affine/env/filter';
-import type { GetPageInfoById } from '@affine/env/page-info';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { ViewLayersIcon } from '@blocksuite/icons';
-import clsx from 'clsx';
-import { useState } from 'react';
-
-import { useCollectionManager } from '../use-collection-manager';
-import * as styles from './collection-bar.css';
-import {
-  type AllPageListConfig,
-  EditCollectionModal,
-} from './edit-collection/edit-collection';
-import { useActions } from './use-action';
-
-interface CollectionBarProps {
-  getPageInfo: GetPageInfoById;
-  propertiesMeta: PropertiesMeta;
-  collectionService: CollectionService;
-  backToAll: () => void;
-  allPageListConfig: AllPageListConfig;
-  info: DeleteCollectionInfo;
-}
-
-export const CollectionBar = (props: CollectionBarProps) => {
-  const { collectionService } = props;
-  const t = useAFFiNEI18N();
-  const setting = useCollectionManager(collectionService);
-  const collection = setting.currentCollection;
-  const [open, setOpen] = useState(false);
-  const actions = useActions({
-    collection,
-    setting,
-    info: props.info,
-    openEdit: () => setOpen(true),
-  });
-  return !setting.isDefault ? (
-    <div
-      style={{
-        userSelect: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '12px 20px',
-      }}
-    >
-      <div>
-        <div className={styles.view}>
-          <EditCollectionModal
-            allPageListConfig={props.allPageListConfig}
-            init={collection}
-            open={open}
-            onOpenChange={setOpen}
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onConfirm={setting.updateCollection}
-          />
-          <ViewLayersIcon
-            style={{
-              height: 20,
-              width: 20,
-            }}
-          />
-          <Tooltip
-            content={setting.currentCollection.name}
-            rootOptions={{
-              delayDuration: 1500,
-            }}
-          >
-            <div
-              style={{
-                marginRight: 10,
-                maxWidth: 200,
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-              }}
-            >
-              {setting.currentCollection.name}
-            </div>
-          </Tooltip>
-          {actions.map(action => {
-            return (
-              <Tooltip key={action.name} content={action.tooltip}>
-                <div
-                  data-testid={`collection-bar-option-${action.name}`}
-                  onClick={action.click}
-                  className={clsx(styles.option, action.className)}
-                >
-                  {action.icon}
-                </div>
-              </Tooltip>
-            );
-          })}
-        </div>
-      </div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'end',
-        }}
-      >
-        <Button
-          style={{ border: 'none', position: 'static' }}
-          onClick={props.backToAll}
-        >
-          {t['com.affine.collectionBar.backToAll']()}
-        </Button>
-      </div>
-    </div>
-  ) : null;
-};
--- a/packages/frontend/core/src/components/page-list/view/collection-list.tsx
+++ b/packages/frontend/core/src/components/page-list/view/collection-list.tsx
@ -9,102 +9,73 @@ import type {
 import type { PropertiesMeta } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
-import { useCallback, useState } from 'react';

 import { CreateFilterMenu } from '../filter/vars';
-import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';
 import { CollectionOperations } from './collection-operations';
-import {
-  type AllPageListConfig,
-  EditCollectionModal,
-} from './edit-collection/edit-collection';
+import { type AllPageListConfig } from './edit-collection/edit-collection';

-export const CollectionList = ({
-  setting,
-  propertiesMeta,
+export const CollectionPageListOperationsMenu = ({
+  collection,
  allPageListConfig,
  userInfo,
-  disable,
 }: {
-  setting: ReturnType<typeof useCollectionManager>;
-  propertiesMeta: PropertiesMeta;
+  collection: Collection;
  allPageListConfig: AllPageListConfig;
  userInfo: DeleteCollectionInfo;
-  disable?: boolean;
 }) => {
  const t = useAFFiNEI18N();
-  const [collection, setCollection] = useState<Collection>();
-  const onChange = useCallback(
-    (filterList: Filter[]) => {
-      setting.updateCollection({
-        ...setting.currentCollection,
-        filterList,
-      });
-    },
-    [setting]
-  );
-  const closeUpdateCollectionModal = useCallback((open: boolean) => {
-    if (!open) {
-      setCollection(undefined);
-    }
-  }, []);
-
-  const onConfirm = useCallback(
-    (view: Collection) => {
-      setting.updateCollection(view);
-      closeUpdateCollectionModal(false);
-    },
-    [closeUpdateCollectionModal, setting]
-  );
  return (
    <FlexWrapper alignItems="center">
-      {setting.isDefault ? (
-        <>
-          <Menu
-            items={
-              <CreateFilterMenu
-                propertiesMeta={propertiesMeta}
-                value={setting.currentCollection.filterList}
-                onChange={onChange}
-              />
-            }
-          >
-            <Button
-              className={styles.filterMenuTrigger}
-              type="default"
-              icon={<FilterIcon />}
-              data-is-hidden={disable}
-              data-testid="create-first-filter"
-            >
-              {t['com.affine.filter']()}
-            </Button>
-          </Menu>
-          <EditCollectionModal
-            allPageListConfig={allPageListConfig}
-            init={collection}
-            open={!!collection}
-            onOpenChange={closeUpdateCollectionModal}
-            onConfirm={onConfirm}
-          />
-        </>
-      ) : (
-        <CollectionOperations
-          info={userInfo}
-          collection={setting.currentCollection}
-          config={allPageListConfig}
-          setting={setting}
+      <CollectionOperations
+        info={userInfo}
+        collection={collection}
+        config={allPageListConfig}
+      >
+        <Button
+          className={styles.filterMenuTrigger}
+          type="default"
+          icon={<FilterIcon />}
+          data-testid="create-first-filter"
        >
-          <Button
-            className={styles.filterMenuTrigger}
-            type="default"
-            icon={<FilterIcon />}
-            data-testid="create-first-filter"
-          >
-            {t['com.affine.filter']()}
-          </Button>
-        </CollectionOperations>
-      )}
+          {t['com.affine.filter']()}
+        </Button>
+      </CollectionOperations>
+    </FlexWrapper>
+  );
+};
+
+export const AllPageListOperationsMenu = ({
+  propertiesMeta,
+  filterList,
+  onChangeFilterList,
+}: {
+  propertiesMeta: PropertiesMeta;
+  filterList: Filter[];
+  onChangeFilterList: (filterList: Filter[]) => void;
+}) => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <FlexWrapper alignItems="center">
+      <Menu
+        items={
+          <CreateFilterMenu
+            propertiesMeta={propertiesMeta}
+            value={filterList}
+            onChange={onChangeFilterList}
+          />
+        }
+      >
+        <Button
+          className={styles.filterMenuTrigger}
+          type="default"
+          icon={<FilterIcon />}
+          data-testid="create-first-filter"
+        >
+          {t['com.affine.filter']()}
+        </Button>
+      </Menu>
    </FlexWrapper>
  );
 };
--- a/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
+++ b/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
@ -7,6 +7,7 @@ import {
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon, EditIcon, FilterIcon } from '@blocksuite/icons';
+import { useService } from '@toeverything/infra/di';
 import {
  type PropsWithChildren,
  type ReactElement,
@ -14,7 +15,7 @@ import {
  useMemo,
 } from 'react';

-import type { useCollectionManager } from '../use-collection-manager';
+import { CollectionService } from '../../../modules/collection';
 import * as styles from './collection-operations.css';
 import type { AllPageListConfig } from './index';
 import {
@ -25,7 +26,6 @@ import {
 export const CollectionOperations = ({
  collection,
  config,
-  setting,
  info,
  openRenameModal,
  children,
@ -33,9 +33,9 @@ export const CollectionOperations = ({
  info: DeleteCollectionInfo;
  collection: Collection;
  config: AllPageListConfig;
-  setting: ReturnType<typeof useCollectionManager>;
  openRenameModal?: () => void;
 }>) => {
+  const service = useService(CollectionService);
  const { open: openEditCollectionModal, node: editModal } =
    useEditCollection(config);
  const t = useAFFiNEI18N();
@ -51,22 +51,25 @@ export const CollectionOperations = ({
    }
    openEditCollectionNameModal(collection.name)
      .then(name => {
-        return setting.updateCollection({ ...collection, name });
+        return service.updateCollection(collection.id, () => ({
+          ...collection,
+          name,
+        }));
      })
      .catch(err => {
        console.error(err);
      });
-  }, [openRenameModal, openEditCollectionNameModal, collection, setting]);
+  }, [openRenameModal, openEditCollectionNameModal, collection, service]);

  const showEdit = useCallback(() => {
    openEditCollectionModal(collection)
      .then(collection => {
-        return setting.updateCollection(collection);
+        return service.updateCollection(collection.id, () => collection);
      })
      .catch(err => {
        console.error(err);
      });
-  }, [setting, collection, openEditCollectionModal]);
+  }, [openEditCollectionModal, collection, service]);

  const actions = useMemo<
    Array<
@ -112,12 +115,12 @@ export const CollectionOperations = ({
        ),
        name: t['Delete'](),
        click: () => {
-          setting.deleteCollection(info, collection.id);
+          service.deleteCollection(info, collection.id);
        },
        type: 'danger',
      },
    ],
-    [t, showEditName, showEdit, setting, info, collection.id]
+    [t, showEditName, showEdit, service, info, collection.id]
  );
  return (
    <>
--- a/packages/frontend/core/src/components/page-list/view/index.ts
+++ b/packages/frontend/core/src/components/page-list/view/index.ts
@ -1,5 +1,4 @@
 export * from './affine-shape';
-export * from './collection-bar';
 export * from './collection-list';
 export * from './collection-operations';
 export * from './create-collection';
--- a/packages/frontend/core/src/components/page-list/view/use-action.tsx
+++ b/packages/frontend/core/src/components/page-list/view/use-action.tsx
@ -1,10 +1,8 @@
-import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
+import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon, FilterIcon } from '@blocksuite/icons';
 import { type ReactNode, useMemo } from 'react';

-import type { useCollectionManager } from '../use-collection-manager';
-
 interface CollectionBarAction {
  icon: ReactNode;
  click: () => void;
@ -15,14 +13,12 @@ interface CollectionBarAction {

 export const useActions = ({
  collection,
-  setting,
  openEdit,
-  info,
+  onDelete,
 }: {
-  info: DeleteCollectionInfo;
  collection: Collection;
-  setting: ReturnType<typeof useCollectionManager>;
  openEdit: (open: Collection) => void;
+  onDelete: () => void;
 }) => {
  const t = useAFFiNEI18N();
  return useMemo<CollectionBarAction[]>(() => {
@ -39,10 +35,8 @@ export const useActions = ({
        icon: <DeleteIcon style={{ color: 'var(--affine-error-color)' }} />,
        name: 'delete',
        tooltip: t['com.affine.collection-bar.action.tooltip.delete'](),
-        click: () => {
-          setting.deleteCollection(info, collection.id);
-        },
+        click: onDelete,
      },
    ];
-  }, [info, collection, t, setting, openEdit]);
+  }, [t, onDelete, openEdit, collection]);
 };
--- a/packages/frontend/core/src/components/pure/cmdk/data-hooks.tsx
+++ b/packages/frontend/core/src/components/pure/cmdk/data-hooks.tsx
@ -1,4 +1,3 @@
-import { useCollectionManager } from '@affine/core/components/page-list';
 import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
@ -322,9 +321,8 @@ export const collectionToCommand = (

 export const useCollectionsCommands = () => {
  // todo: considering collections for searching pages
-  const { savedCollections } = useCollectionManager(
-    useService(CollectionService)
-  );
+  const collectionService = useService(CollectionService);
+  const collections = useLiveData(collectionService.collections);
  const query = useAtomValue(cmdkQueryAtom);
  const navigationHelper = useNavigateHelper();
  const t = useAFFiNEI18N();
@ -340,7 +338,7 @@ export const useCollectionsCommands = () => {
    if (query.trim() === '') {
      return results;
    } else {
-      results = savedCollections.map(collection => {
+      results = collections.map(collection => {
        const command = collectionToCommand(
          collection,
          navigationHelper,
@ -352,14 +350,7 @@ export const useCollectionsCommands = () => {
      });
      return results;
    }
-  }, [
-    query,
-    savedCollections,
-    navigationHelper,
-    selectCollection,
-    t,
-    workspace,
-  ]);
+  }, [query, collections, navigationHelper, selectCollection, t, workspace]);
 };

 export const useCMDKCommandGroups = () => {
--- a/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-mode-filter-tab/index.tsx
@ -4,18 +4,19 @@ import { allPageFilterSelectAtom } from '@affine/core/atoms';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { WorkspaceSubPath } from '@affine/core/shared';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useService } from '@toeverything/infra';
+import { Workspace } from '@toeverything/infra';
 import { useAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';

 import * as styles from './index.css';

 export const WorkspaceModeFilterTab = ({
-  workspaceId,
  activeFilter,
 }: {
-  workspaceId: string;
  activeFilter: AllPageFilterOption;
 }) => {
+  const workspace = useService(Workspace);
  const t = useAFFiNEI18N();
  const [value, setValue] = useState(activeFilter);
  const [filterMode, setFilterMode] = useAtom(allPageFilterSelectAtom);
@ -24,17 +25,17 @@ export const WorkspaceModeFilterTab = ({
    (value: AllPageFilterOption) => {
      switch (value) {
        case 'collections':
-          jumpToCollections(workspaceId);
+          jumpToCollections(workspace.id);
          break;
        case 'tags':
-          jumpToTags(workspaceId);
+          jumpToTags(workspace.id);
          break;
        case 'docs':
-          jumpToSubPath(workspaceId, WorkspaceSubPath.ALL);
+          jumpToSubPath(workspace.id, WorkspaceSubPath.ALL);
          break;
      }
    },
-    [jumpToCollections, jumpToSubPath, jumpToTags, workspaceId]
+    [jumpToCollections, jumpToSubPath, jumpToTags, workspace]
  );

  useEffect(() => {
--- a/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
+++ b/packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
@ -6,7 +6,6 @@ import {
  CollectionOperations,
  filterPage,
  stopPropagation,
-  useCollectionManager,
 } from '@affine/core/components/page-list';
 import { CollectionService } from '@affine/core/modules/collection';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
@ -40,20 +39,20 @@ const CollectionRenderer = ({
 }) => {
  const [collapsed, setCollapsed] = useState(true);
  const [open, setOpen] = useState(false);
-  const setting = useCollectionManager(useService(CollectionService));
+  const collectionService = useService(CollectionService);
  const t = useAFFiNEI18N();
  const dragItemId = getDropItemId('collections', collection.id);

  const removeFromAllowList = useCallback(
    (id: string) => {
-      setting.updateCollection({
+      collectionService.updateCollection(collection.id, () => ({
        ...collection,
        allowList: collection.allowList?.filter(v => v !== id),
-      });
+      }));

      toast(t['com.affine.collection.removePage.success']());
    },
-    [collection, setting, t]
+    [collection, collectionService, t]
  );

  const { setNodeRef, isOver } = useDroppable({
@ -66,7 +65,7 @@ const CollectionRenderer = ({
        } else {
          toast(t['com.affine.collection.addPage.success']());
        }
-        setting.addPage(collection.id, id);
+        collectionService.addPageToCollection(collection.id, id);
      },
    },
  });
@ -95,13 +94,13 @@ const CollectionRenderer = ({

  const onRename = useCallback(
    (name: string) => {
-      setting.updateCollection({
+      collectionService.updateCollection(collection.id, () => ({
        ...collection,
        name,
-      });
+      }));
      toast(t['com.affine.toastMessage.rename']());
    },
-    [collection, setting, t]
+    [collection, collectionService, t]
  );
  const handleOpen = useCallback(() => {
    setOpen(true);
@ -124,7 +123,6 @@ const CollectionRenderer = ({
            <CollectionOperations
              info={info}
              collection={collection}
-              setting={setting}
              config={config}
              openRenameModal={handleOpen}
            >
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@ -38,7 +38,6 @@ import { WorkspaceSubPath } from '../../shared';
 import {
  createEmptyCollection,
  MoveToTrash,
-  useCollectionManager,
  useEditCollectionName,
 } from '../page-list';
 import { CollectionsList } from '../pure/workspace-slider-bar/collections';
@ -177,7 +176,7 @@ export const RootAppSidebar = ({
  useRegisterBrowserHistoryCommands(router.back, router.forward);
  const userInfo = useDeleteCollectionInfo();

-  const setting = useCollectionManager(useService(CollectionService));
+  const collection = useService(CollectionService);
  const { node, open } = useEditCollectionName({
    title: t['com.affine.editCollection.createCollection'](),
    showTips: true,
@ -186,13 +185,13 @@ export const RootAppSidebar = ({
    open('')
      .then(name => {
        const id = nanoid();
-        setting.createCollection(createEmptyCollection(id, { name }));
+        collection.addCollection(createEmptyCollection(id, { name }));
        navigateHelper.jumpToCollection(blockSuiteWorkspace.id, id);
      })
      .catch(err => {
        console.error(err);
      });
-  }, [blockSuiteWorkspace.id, navigateHelper, open, setting]);
+  }, [blockSuiteWorkspace.id, collection, navigateHelper, open]);

  const allPageActive = useMemo(() => {
    if (
--- a/packages/frontend/core/src/hooks/use-navigate-helper.ts
+++ b/packages/frontend/core/src/hooks/use-navigate-helper.ts
@ -44,7 +44,7 @@ export function useNavigateHelper() {
  );
  const jumpToCollections = useCallback(
    (workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
-      return navigate(`/workspace/${workspaceId}/all?filterMode=collections`, {
+      return navigate(`/workspace/${workspaceId}/collection`, {
        replace: logic === RouteLogic.REPLACE,
      });
    },
@ -52,7 +52,7 @@ export function useNavigateHelper() {
  );
  const jumpToTags = useCallback(
    (workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
-      return navigate(`/workspace/${workspaceId}/all?filterMode=tags`, {
+      return navigate(`/workspace/${workspaceId}/tag`, {
        replace: logic === RouteLogic.REPLACE,
      });
    },
--- a/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
+++ b/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
@ -1,11 +1,10 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Workspace } from '@toeverything/infra';
 import { useService } from '@toeverything/infra/di';
-import { useSetAtom, useStore } from 'jotai';
+import { useStore } from 'jotai';
 import { useTheme } from 'next-themes';
 import { useEffect } from 'react';

-import { allPageModeSelectAtom } from '../atoms';
 import {
  registerAffineCreationCommands,
  registerAffineHelpCommands,
@ -27,7 +26,6 @@ export function useRegisterWorkspaceCommands() {
  const languageHelper = useLanguageHelper();
  const pageHelper = usePageHelper(currentWorkspace.blockSuiteWorkspace);
  const navigationHelper = useNavigateHelper();
-  const setPageListMode = useSetAtom(allPageModeSelectAtom);
  const [editor] = useActiveBlocksuiteEditor();

  // register AffineUpdatesCommands
@ -49,19 +47,12 @@ export function useRegisterWorkspaceCommands() {
      t,
      workspace: currentWorkspace.blockSuiteWorkspace,
      navigationHelper,
-      setPageListMode,
    });

    return () => {
      unsub();
    };
-  }, [
-    store,
-    t,
-    currentWorkspace.blockSuiteWorkspace,
-    navigationHelper,
-    setPageListMode,
-  ]);
+  }, [store, t, currentWorkspace.blockSuiteWorkspace, navigationHelper]);

  // register AffineSettingsCommands
  useEffect(() => {
--- a/packages/frontend/core/src/modules/collection/service.ts
+++ b/packages/frontend/core/src/modules/collection/service.ts
@ -81,6 +81,15 @@ export class CollectionService {
    }
  }

+  addPageToCollection(collectionId: string, pageId: string) {
+    this.updateCollection(collectionId, old => {
+      return {
+        ...old,
+        allowList: [pageId, ...(old.allowList ?? [])],
+      };
+    });
+  }
+
  deleteCollection(info: DeleteCollectionInfo, ...ids: string[]) {
    const collectionsYArray = this.collectionsYArray;
    if (!collectionsYArray) {
--- a/packages/frontend/core/src/modules/page-list/page-list-view.ts
+++ b/packages/frontend/core/src/modules/page-list/page-list-view.ts
@ -0,0 +1,3 @@
+export class PageListView {
+  constructor() {}
+}
--- a/packages/frontend/core/src/pages/workspace/all-collection/header.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-collection/header.tsx
@ -0,0 +1,49 @@
+import { IconButton } from '@affine/component';
+import { Header } from '@affine/core/components/pure/header';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
+import { PlusIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import * as styles from '../all-page/all-page.css';
+
+export const AllCollectionHeader = ({
+  showCreateNew,
+  onCreateCollection,
+}: {
+  showCreateNew: boolean;
+  onCreateCollection?: () => void;
+}) => {
+  const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+
+  const renderRightItem = useMemo(() => {
+    return (
+      <IconButton
+        type="default"
+        icon={<PlusIcon fontSize={16} />}
+        onClick={onCreateCollection}
+        className={clsx(
+          styles.headerCreateNewButton,
+          styles.headerCreateNewCollectionIconButton,
+          !showCreateNew && styles.headerCreateNewButtonHidden
+        )}
+      />
+    );
+  }, [onCreateCollection, showCreateNew]);
+
+  return (
+    <Header
+      right={
+        <div
+          className={styles.headerRightWindows}
+          data-is-windows-desktop={isWindowsDesktop}
+        >
+          {renderRightItem}
+          {isWindowsDesktop ? <WindowsAppControls /> : null}
+        </div>
+      }
+      center={<WorkspaceModeFilterTab activeFilter={'collections'} />}
+    />
+  );
+};
--- a/packages/frontend/core/src/pages/workspace/all-collection/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-collection/index.tsx
@ -0,0 +1,93 @@
+import { HubIsland } from '@affine/core/components/affine/hub-island';
+import {
+  CollectionListHeader,
+  type CollectionMeta,
+  createEmptyCollection,
+  useEditCollectionName,
+  VirtualizedCollectionList,
+} from '@affine/core/components/page-list';
+import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-list-config';
+import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { useService } from '@toeverything/infra';
+import { useLiveData } from '@toeverything/infra';
+import { Workspace } from '@toeverything/infra';
+import { nanoid } from 'nanoid';
+import { useCallback, useMemo, useState } from 'react';
+
+import { CollectionService } from '../../../modules/collection';
+import * as styles from '../all-page/all-page.css';
+import { EmptyCollectionList } from '../page-list-empty';
+import { AllCollectionHeader } from './header';
+
+export const AllCollection = () => {
+  const t = useAFFiNEI18N();
+  const currentWorkspace = useService(Workspace);
+  const [hideHeaderCreateNew, setHideHeaderCreateNew] = useState(true);
+
+  const collectionService = useService(CollectionService);
+  const collections = useLiveData(collectionService.collections);
+  const config = useAllPageListConfig();
+
+  const collectionMetas = useMemo(() => {
+    const collectionsList: CollectionMeta[] = collections.map(collection => {
+      return {
+        ...collection,
+        title: collection.name,
+      };
+    });
+    return collectionsList;
+  }, [collections]);
+
+  const navigateHelper = useNavigateHelper();
+  const { open, node } = useEditCollectionName({
+    title: t['com.affine.editCollection.createCollection'](),
+    showTips: true,
+  });
+
+  const handleCreateCollection = useCallback(() => {
+    open('')
+      .then(name => {
+        const id = nanoid();
+        collectionService.addCollection(createEmptyCollection(id, { name }));
+        navigateHelper.jumpToCollection(currentWorkspace.id, id);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [collectionService, currentWorkspace, navigateHelper, open]);
+
+  return (
+    <div className={styles.root}>
+      <AllCollectionHeader
+        showCreateNew={!hideHeaderCreateNew}
+        onCreateCollection={handleCreateCollection}
+      />
+      {collectionMetas.length > 0 ? (
+        <VirtualizedCollectionList
+          collections={collections}
+          collectionMetas={collectionMetas}
+          setHideHeaderCreateNewCollection={setHideHeaderCreateNew}
+          node={node}
+          config={config}
+          handleCreateCollection={handleCreateCollection}
+        />
+      ) : (
+        <EmptyCollectionList
+          heading={
+            <CollectionListHeader
+              node={node}
+              onCreate={handleCreateCollection}
+            />
+          }
+        />
+      )}
+
+      <HubIsland />
+    </div>
+  );
+};
+
+export const Component = () => {
+  return <AllCollection />;
+};
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page-filter.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page-filter.tsx
@ -8,36 +8,31 @@ import { filterContainerStyle } from '../../../components/filter-container.css';
 import {
  FilterList,
  SaveAsCollectionButton,
-  useCollectionManager,
 } from '../../../components/page-list';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';

-export const FilterContainer = () => {
+export const FilterContainer = ({
+  filters,
+  onChangeFilters,
+}: {
+  filters: Filter[];
+  onChangeFilters: (filters: Filter[]) => void;
+}) => {
  const currentWorkspace = useService(Workspace);
  const navigateHelper = useNavigateHelper();
-  const setting = useCollectionManager(useService(CollectionService));
+  const collectionService = useService(CollectionService);
  const saveToCollection = useCallback(
    (collection: Collection) => {
-      setting.createCollection({
+      collectionService.addCollection({
        ...collection,
-        filterList: setting.currentCollection.filterList,
+        filterList: filters,
      });
      navigateHelper.jumpToCollection(currentWorkspace.id, collection.id);
    },
-    [setting, navigateHelper, currentWorkspace.id]
+    [collectionService, filters, navigateHelper, currentWorkspace.id]
  );

-  const onFilterChange = useCallback(
-    (filterList: Filter[]) => {
-      setting.updateCollection({
-        ...setting.currentCollection,
-        filterList,
-      });
-    },
-    [setting]
-  );
-
-  if (!setting.isDefault || !setting.currentCollection.filterList.length) {
+  if (!filters.length) {
    return null;
  }

@ -46,12 +41,12 @@ export const FilterContainer = () => {
      <div style={{ flex: 1 }}>
        <FilterList
          propertiesMeta={currentWorkspace.blockSuiteWorkspace.meta.properties}
-          value={setting.currentCollection.filterList}
-          onChange={onFilterChange}
+          value={filters}
+          onChange={onChangeFilters}
        />
      </div>
      <div>
-        {setting.currentCollection.filterList.length > 0 ? (
+        {filters.length > 0 ? (
          <SaveAsCollectionButton onConfirm={saveToCollection} />
        ) : null}
      </div>
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
@ -1,69 +1,33 @@
-import { IconButton } from '@affine/component';
-import type { AllPageFilterOption } from '@affine/core/atoms';
 import {
-  CollectionList,
+  AllPageListOperationsMenu,
  PageListNewPageButton,
-  useCollectionManager,
 } from '@affine/core/components/page-list';
 import { Header } from '@affine/core/components/pure/header';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
-import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-list-config';
-import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
+import type { Filter } from '@affine/env/filter';
 import { PlusIcon } from '@blocksuite/icons';
-import type { Workspace } from '@blocksuite/store';
-import { useService } from '@toeverything/infra/di';
+import { useService } from '@toeverything/infra';
+import { Workspace } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useMemo } from 'react';

-import { CollectionService } from '../../../modules/collection';
 import * as styles from './all-page.css';
 import { FilterContainer } from './all-page-filter';

 export const AllPageHeader = ({
-  workspace,
  showCreateNew,
-  isDefaultFilter,
-  activeFilter,
-  onCreateCollection,
+  filters,
+  onChangeFilters,
 }: {
-  workspace: Workspace;
  showCreateNew: boolean;
-  isDefaultFilter: boolean;
-  activeFilter: AllPageFilterOption;
-  onCreateCollection?: () => void;
+  filters: Filter[];
+  onChangeFilters: (filters: Filter[]) => void;
 }) => {
-  const setting = useCollectionManager(useService(CollectionService));
-  const config = useAllPageListConfig();
-  const userInfo = useDeleteCollectionInfo();
+  const workspace = useService(Workspace);
  const isWindowsDesktop = environment.isDesktop && environment.isWindows;

-  const disableFilterButton = useMemo(() => {
-    return activeFilter !== 'docs' && isDefaultFilter;
-  }, [activeFilter, isDefaultFilter]);
-
  const renderRightItem = useMemo(() => {
-    if (activeFilter === 'tags') {
-      return null;
-    }
-    if (
-      activeFilter === 'collections' &&
-      isDefaultFilter &&
-      onCreateCollection
-    ) {
-      return (
-        <IconButton
-          type="default"
-          icon={<PlusIcon fontSize={16} />}
-          onClick={onCreateCollection}
-          className={clsx(
-            styles.headerCreateNewButton,
-            styles.headerCreateNewCollectionIconButton,
-            !showCreateNew && styles.headerCreateNewButtonHidden
-          )}
-        />
-      );
-    }
    return (
      <PageListNewPageButton
        size="small"
@ -75,18 +39,16 @@ export const AllPageHeader = ({
        <PlusIcon />
      </PageListNewPageButton>
    );
-  }, [activeFilter, isDefaultFilter, onCreateCollection, showCreateNew]);
+  }, [showCreateNew]);

  return (
    <>
      <Header
        left={
-          <CollectionList
-            userInfo={userInfo}
-            allPageListConfig={config}
-            setting={setting}
-            propertiesMeta={workspace.meta.properties}
-            disable={disableFilterButton}
+          <AllPageListOperationsMenu
+            filterList={filters}
+            onChangeFilterList={onChangeFilters}
+            propertiesMeta={workspace.blockSuiteWorkspace.meta.properties}
          />
        }
        right={
@ -98,14 +60,9 @@ export const AllPageHeader = ({
            {isWindowsDesktop ? <WindowsAppControls /> : null}
          </div>
        }
-        center={
-          <WorkspaceModeFilterTab
-            workspaceId={workspace.id}
-            activeFilter={activeFilter}
-          />
-        }
+        center={<WorkspaceModeFilterTab activeFilter={'docs'} />}
      />
-      <FilterContainer />
+      <FilterContainer filters={filters} onChangeFilters={onChangeFilters} />
    </>
  );
 };
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
@ -1,211 +1,50 @@
-import type { AllPageFilterOption } from '@affine/core/atoms';
 import { HubIsland } from '@affine/core/components/affine/hub-island';
 import {
-  CollectionListHeader,
-  type CollectionMeta,
-  createEmptyCollection,
-  currentCollectionAtom,
  PageListHeader,
-  useCollectionManager,
-  useEditCollectionName,
  useFilteredPageMetas,
-  useTagMetas,
-  VirtualizedCollectionList,
  VirtualizedPageList,
 } from '@affine/core/components/page-list';
-import {
-  TagListHeader,
-  VirtualizedTagList,
-} from '@affine/core/components/page-list/tags';
-import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-list-config';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { performanceRenderLogger } from '@affine/core/shared';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { Filter } from '@affine/env/filter';
 import { useService } from '@toeverything/infra';
-import { useLiveData } from '@toeverything/infra';
 import { Workspace } from '@toeverything/infra';
-import { useSetAtom } from 'jotai';
-import { nanoid } from 'nanoid';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation, useParams } from 'react-router-dom';
-import { NIL } from 'uuid';
+import { useEffect, useState } from 'react';

-import { CollectionService } from '../../../modules/collection';
-import {
-  EmptyCollectionList,
-  EmptyPageList,
-  EmptyTagList,
-} from '../page-list-empty';
+import { EmptyPageList } from '../page-list-empty';
 import * as styles from './all-page.css';
 import { AllPageHeader } from './all-page-header';

-// even though it is called all page, it is also being used for collection route as well
-export const AllPage = ({
-  activeFilter,
-}: {
-  activeFilter: AllPageFilterOption;
-}) => {
-  const t = useAFFiNEI18N();
-  const params = useParams();
+export const AllPage = () => {
  const currentWorkspace = useService(Workspace);
  const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
  const [hideHeaderCreateNew, setHideHeaderCreateNew] = useState(true);

-  const collectionService = useService(CollectionService);
-  const collections = useLiveData(collectionService.collections);
-  const setting = useCollectionManager(collectionService);
-  const config = useAllPageListConfig();
-  const { tags, tagMetas, filterPageMetaByTag, deleteTags } = useTagMetas(
-    currentWorkspace.blockSuiteWorkspace,
-    pageMetas
-  );
-  const filteredPageMetas = useFilteredPageMetas(
-    'all',
-    pageMetas,
-    currentWorkspace
-  );
-  const tagPageMetas = useMemo(() => {
-    if (params.tagId) {
-      return filterPageMetaByTag(params.tagId);
-    }
-    return [];
-  }, [filterPageMetaByTag, params.tagId]);
-
-  const collectionMetas = useMemo(() => {
-    const collectionsList: CollectionMeta[] = collections.map(collection => {
-      return {
-        ...collection,
-        title: collection.name,
-      };
-    });
-    return collectionsList;
-  }, [collections]);
-
-  const navigateHelper = useNavigateHelper();
-  const { open, node } = useEditCollectionName({
-    title: t['com.affine.editCollection.createCollection'](),
-    showTips: true,
+  const [filters, setFilters] = useState<Filter[]>([]);
+  const filteredPageMetas = useFilteredPageMetas(currentWorkspace, pageMetas, {
+    filters: filters,
  });

-  const handleCreateCollection = useCallback(() => {
-    open('')
-      .then(name => {
-        const id = nanoid();
-        setting.createCollection(createEmptyCollection(id, { name }));
-        navigateHelper.jumpToCollection(currentWorkspace.id, id);
-      })
-      .catch(err => {
-        console.error(err);
-      });
-  }, [currentWorkspace.id, navigateHelper, open, setting]);
-
-  const currentTag = useMemo(() => {
-    if (params.tagId) {
-      return tags.find(tag => tag.id === params.tagId);
-    }
-    return;
-  }, [params.tagId, tags]);
-
-  const content = useMemo(() => {
-    if (filteredPageMetas.length > 0 && activeFilter === 'docs') {
-      return (
-        <VirtualizedPageList
-          setHideHeaderCreateNewPage={setHideHeaderCreateNew}
-        />
-      );
-    } else if (activeFilter === 'collections' && !setting.isDefault) {
-      return (
-        <VirtualizedPageList
-          collection={setting.currentCollection}
-          config={config}
-          setHideHeaderCreateNewPage={setHideHeaderCreateNew}
-        />
-      );
-    } else if (activeFilter === 'collections' && setting.isDefault) {
-      return collectionMetas.length > 0 ? (
-        <VirtualizedCollectionList
-          collections={collections}
-          collectionMetas={collectionMetas}
-          setHideHeaderCreateNewCollection={setHideHeaderCreateNew}
-          node={node}
-          config={config}
-          handleCreateCollection={handleCreateCollection}
-        />
-      ) : (
-        <EmptyCollectionList
-          heading={
-            <CollectionListHeader
-              node={node}
-              onCreate={handleCreateCollection}
-            />
-          }
-        />
-      );
-    } else if (activeFilter === 'tags') {
-      if (params.tagId) {
-        return tagPageMetas.length > 0 ? (
-          <VirtualizedPageList
-            tag={currentTag}
-            listItem={tagPageMetas}
-            setHideHeaderCreateNewPage={setHideHeaderCreateNew}
-          />
-        ) : (
-          <EmptyPageList
-            type="all"
-            heading={<PageListHeader workspaceId={currentWorkspace.id} />}
-            blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
-          />
-        );
-      }
-      return tags.length > 0 ? (
-        <VirtualizedTagList
-          tags={tags}
-          tagMetas={tagMetas}
-          setHideHeaderCreateNewTag={setHideHeaderCreateNew}
-          onTagDelete={deleteTags}
-        />
-      ) : (
-        <EmptyTagList heading={<TagListHeader />} />
-      );
-    }
-    return (
-      <EmptyPageList
-        type="all"
-        heading={<PageListHeader workspaceId={currentWorkspace.id} />}
-        blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
-      />
-    );
-  }, [
-    activeFilter,
-    collectionMetas,
-    collections,
-    config,
-    currentTag,
-    currentWorkspace.blockSuiteWorkspace,
-    currentWorkspace.id,
-    deleteTags,
-    filteredPageMetas.length,
-    handleCreateCollection,
-    node,
-    params.tagId,
-    setting.currentCollection,
-    setting.isDefault,
-    tagMetas,
-    tagPageMetas,
-    tags,
-  ]);
-
  return (
    <div className={styles.root}>
      <AllPageHeader
-        workspace={currentWorkspace.blockSuiteWorkspace}
        showCreateNew={!hideHeaderCreateNew}
-        isDefaultFilter={setting.isDefault}
-        activeFilter={activeFilter}
-        onCreateCollection={handleCreateCollection}
+        filters={filters}
+        onChangeFilters={setFilters}
      />
-      {content}
+      {filteredPageMetas.length > 0 ? (
+        <VirtualizedPageList
+          setHideHeaderCreateNewPage={setHideHeaderCreateNew}
+          filters={filters}
+        />
+      ) : (
+        <EmptyPageList
+          type="all"
+          heading={<PageListHeader />}
+          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+        />
+      )}
      <HubIsland />
    </div>
  );
@ -215,21 +54,8 @@ export const Component = () => {
  performanceRenderLogger.info('AllPage');

  const currentWorkspace = useService(Workspace);
-  const currentCollection = useSetAtom(currentCollectionAtom);
  const navigateHelper = useNavigateHelper();

-  const location = useLocation();
-  const activeFilter = useMemo(() => {
-    const query = new URLSearchParams(location.search);
-    const filterMode = query.get('filterMode');
-    if (filterMode === 'collections') {
-      return 'collections';
-    } else if (filterMode === 'tags') {
-      return 'tags';
-    }
-    return 'docs';
-  }, [location.search]);
-
  useEffect(() => {
    function checkJumpOnce() {
      for (const [pageId] of currentWorkspace.blockSuiteWorkspace.pages) {
@ -252,9 +78,5 @@ export const Component = () => {
    navigateHelper,
  ]);

-  useEffect(() => {
-    currentCollection(NIL);
-  }, [currentCollection]);
-
-  return <AllPage activeFilter={activeFilter} />;
+  return <AllPage />;
 };
--- a/packages/frontend/core/src/pages/workspace/all-tag/header.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-tag/header.tsx
@ -0,0 +1,23 @@
+import { Header } from '@affine/core/components/pure/header';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
+
+import * as styles from '../all-page/all-page.css';
+
+export const AllTagHeader = () => {
+  const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+
+  return (
+    <Header
+      right={
+        <div
+          className={styles.headerRightWindows}
+          data-is-windows-desktop={isWindowsDesktop}
+        >
+          {isWindowsDesktop ? <WindowsAppControls /> : null}
+        </div>
+      }
+      center={<WorkspaceModeFilterTab activeFilter={'tags'} />}
+    />
+  );
+};
--- a/packages/frontend/core/src/pages/workspace/all-tag/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-tag/index.tsx
@ -0,0 +1,43 @@
+import { HubIsland } from '@affine/core/components/affine/hub-island';
+import { useTagMetas } from '@affine/core/components/page-list';
+import {
+  TagListHeader,
+  VirtualizedTagList,
+} from '@affine/core/components/page-list/tags';
+import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import { useService } from '@toeverything/infra';
+import { Workspace } from '@toeverything/infra';
+
+import * as styles from '../all-page/all-page.css';
+import { EmptyTagList } from '../page-list-empty';
+import { AllTagHeader } from './header';
+
+export const AllTag = () => {
+  const currentWorkspace = useService(Workspace);
+  const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
+
+  const { tags, tagMetas, deleteTags } = useTagMetas(
+    currentWorkspace.blockSuiteWorkspace,
+    pageMetas
+  );
+
+  return (
+    <div className={styles.root}>
+      <AllTagHeader />
+      {tags.length > 0 ? (
+        <VirtualizedTagList
+          tags={tags}
+          tagMetas={tagMetas}
+          onTagDelete={deleteTags}
+        />
+      ) : (
+        <EmptyTagList heading={<TagListHeader />} />
+      )}
+      <HubIsland />
+    </div>
+  );
+};
+
+export const Component = () => {
+  return <AllTag />;
+};
--- a/packages/frontend/core/src/pages/workspace/collection/collection.css.ts
+++ b/packages/frontend/core/src/pages/workspace/collection/collection.css.ts
--- a/packages/frontend/core/src/pages/workspace/collection/header.tsx
+++ b/packages/frontend/core/src/pages/workspace/collection/header.tsx
@ -0,0 +1,49 @@
+import { IconButton } from '@affine/component';
+import { Header } from '@affine/core/components/pure/header';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
+import { PlusIcon } from '@blocksuite/icons';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import * as styles from '../all-page/all-page.css';
+
+export const CollectionDetailHeader = ({
+  showCreateNew,
+  onCreate,
+}: {
+  showCreateNew: boolean;
+  onCreate: () => void;
+}) => {
+  const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+
+  const renderRightItem = useMemo(() => {
+    return (
+      <IconButton
+        type="default"
+        icon={<PlusIcon fontSize={16} />}
+        onClick={onCreate}
+        className={clsx(
+          styles.headerCreateNewButton,
+          styles.headerCreateNewCollectionIconButton,
+          !showCreateNew && styles.headerCreateNewButtonHidden
+        )}
+      />
+    );
+  }, [onCreate, showCreateNew]);
+
+  return (
+    <Header
+      right={
+        <div
+          className={styles.headerRightWindows}
+          data-is-windows-desktop={isWindowsDesktop}
+        >
+          {renderRightItem}
+          {isWindowsDesktop ? <WindowsAppControls /> : null}
+        </div>
+      }
+      center={<WorkspaceModeFilterTab activeFilter={'collections'} />}
+    />
+  );
+};
--- a/packages/frontend/core/src/pages/workspace/collection/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/collection/index.tsx
@ -3,11 +3,11 @@ import {
  SidebarSwitch,
 } from '@affine/component/app-sidebar';
 import { pushNotificationAtom } from '@affine/component/notification-center';
+import { HubIsland } from '@affine/core/components/affine/hub-island';
 import {
  AffineShapeIcon,
-  currentCollectionAtom,
-  useCollectionManager,
  useEditCollection,
+  VirtualizedPageList,
 } from '@affine/core/components/page-list';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useAllPageListConfig } from '@affine/core/hooks/affine/use-all-page-list-config';
@ -23,30 +23,54 @@ import {
  ViewLayersIcon,
 } from '@blocksuite/icons';
 import { Workspace } from '@toeverything/infra';
-import { getCurrentStore } from '@toeverything/infra/atom';
 import { useService } from '@toeverything/infra/di';
 import { useLiveData } from '@toeverything/infra/livedata';
 import { useAtomValue } from 'jotai';
 import { useSetAtom } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
-import { type LoaderFunction, redirect, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';

-import { useNavigateHelper } from '../../hooks/use-navigate-helper';
-import { WorkspaceSubPath } from '../../shared';
-import { AllPage } from './all-page/all-page';
+import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
+import { WorkspaceSubPath } from '../../../shared';
+import * as allPageStyles from '../all-page/all-page.css';
 import * as styles from './collection.css';
+import { CollectionDetailHeader } from './header';

-export const loader: LoaderFunction = async args => {
-  const rootStore = getCurrentStore();
-  if (!args.params.collectionId) {
-    return redirect('/404');
-  }
-  rootStore.set(currentCollectionAtom, args.params.collectionId);
-  return null;
+export const CollectionDetail = ({
+  collection,
+}: {
+  collection: Collection;
+}) => {
+  const config = useAllPageListConfig();
+  const { node, open } = useEditCollection(useAllPageListConfig());
+  const collectionService = useService(CollectionService);
+  const [hideHeaderCreateNew, setHideHeaderCreateNew] = useState(true);
+
+  const handleEditCollection = useAsyncCallback(async () => {
+    const ret = await open({ ...collection }, 'page');
+    collectionService.updateCollection(ret.id, () => ret);
+  }, [collection, collectionService, open]);
+
+  return (
+    <div className={allPageStyles.root}>
+      <CollectionDetailHeader
+        showCreateNew={!hideHeaderCreateNew}
+        onCreate={handleEditCollection}
+      />
+      <VirtualizedPageList
+        collection={collection}
+        config={config}
+        setHideHeaderCreateNewPage={setHideHeaderCreateNew}
+      />
+      <HubIsland />
+      {node}
+    </div>
+  );
 };

 export const Component = function CollectionPage() {
  const collectionService = useService(CollectionService);
+
  const collections = useLiveData(collectionService.collections);
  const navigate = useNavigateHelper();
  const params = useParams();
@ -87,7 +111,7 @@ export const Component = function CollectionPage() {
  return isEmpty(collection) ? (
    <Placeholder collection={collection} />
  ) : (
-    <AllPage activeFilter="collections" />
+    <CollectionDetail collection={collection} />
  );
 };

@ -95,16 +119,16 @@ const isWindowsDesktop = environment.isDesktop && environment.isWindows;

 const Placeholder = ({ collection }: { collection: Collection }) => {
  const workspace = useService(Workspace);
-  const collectionService = useCollectionManager(useService(CollectionService));
+  const collectionService = useService(CollectionService);
  const { node, open } = useEditCollection(useAllPageListConfig());
  const { jumpToCollections } = useNavigateHelper();
  const openPageEdit = useAsyncCallback(async () => {
    const ret = await open({ ...collection }, 'page');
-    collectionService.updateCollection(ret);
+    collectionService.updateCollection(ret.id, () => ret);
  }, [open, collection, collectionService]);
  const openRuleEdit = useAsyncCallback(async () => {
    const ret = await open({ ...collection }, 'rule');
-    collectionService.updateCollection(ret);
+    collectionService.updateCollection(ret.id, () => ret);
  }, [collection, open, collectionService]);
  const [showTips, setShowTips] = useState(false);
  useEffect(() => {
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@ -2,7 +2,6 @@ import { Scrollable } from '@affine/component';
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { ResizePanel } from '@affine/component/resize-panel';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
-import { CollectionService } from '@affine/core/modules/collection';
 import type { PageService } from '@blocksuite/blocks';
 import {
  BookmarkService,
@ -42,17 +41,13 @@ import { HubIsland } from '../../../components/affine/hub-island';
 import { GlobalPageHistoryModal } from '../../../components/affine/page-history-modal';
 import { ImagePreviewModal } from '../../../components/image-preview';
 import { PageDetailEditor } from '../../../components/page-detail-editor';
-import {
-  createTagFilter,
-  useCollectionManager,
-} from '../../../components/page-list';
 import { TrashPageFooter } from '../../../components/pure/trash-page-footer';
 import { TopTip } from '../../../components/top-tip';
 import { useRegisterBlocksuiteEditorCommands } from '../../../hooks/affine/use-register-blocksuite-editor-commands';
 import { usePageDocumentTitle } from '../../../hooks/use-global-state';
 import { useNavigateHelper } from '../../../hooks/use-navigate-helper';
 import { CurrentPageService } from '../../../modules/page';
-import { performanceRenderLogger, WorkspaceSubPath } from '../../../shared';
+import { performanceRenderLogger } from '../../../shared';
 import { PageNotFound } from '../../404';
 import * as styles from './detail-page.css';
 import { DetailPageHeader, RightSidebarHeader } from './detail-page-header';
@ -117,7 +112,7 @@ const DetailPageImpl = memo(function DetailPageImpl() {
  const page = useService(Page);
  const pageRecordList = useService(PageRecordList);
  const currentPageId = page.id;
-  const { openPage, jumpToSubPath } = useNavigateHelper();
+  const { openPage, jumpToTag } = useNavigateHelper();
  const currentWorkspace = useService(Workspace);
  const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;

@ -127,8 +122,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {

  const isInTrash = pageMeta?.trash;

-  const collectionService = useService(CollectionService);
-  const { setTemporaryFilter } = useCollectionManager(collectionService);
  const mode = useLiveData(page.mode);
  useRegisterBlocksuiteEditorCommands();
  const title = useLiveData(page.title);
@ -191,9 +184,8 @@ const DetailPageImpl = memo(function DetailPageImpl() {
      const dispose = editor.slots.pageLinkClicked.on(({ pageId }) => {
        return openPage(blockSuiteWorkspace.id, pageId);
      });
-      const disposeTagClick = editor.slots.tagClicked.on(async ({ tagId }) => {
-        jumpToSubPath(currentWorkspace.id, WorkspaceSubPath.ALL);
-        setTemporaryFilter([createTagFilter(tagId)]);
+      const disposeTagClick = editor.slots.tagClicked.on(({ tagId }) => {
+        jumpToTag(currentWorkspace.id, tagId);
      });
      return () => {
        dispose.dispose();
@ -201,14 +193,13 @@ const DetailPageImpl = memo(function DetailPageImpl() {
      };
    },
    [
-      page,
-      mode,
-      pageRecordList,
-      openPage,
      blockSuiteWorkspace.id,
-      jumpToSubPath,
      currentWorkspace.id,
-      setTemporaryFilter,
+      jumpToTag,
+      mode,
+      openPage,
+      page,
+      pageRecordList,
    ]
  );

--- a/packages/frontend/core/src/pages/workspace/tag.tsx
+++ b/packages/frontend/core/src/pages/workspace/tag.tsx
@ -1,51 +0,0 @@
-import { TagListHeader, useTagMetas } from '@affine/core/components/page-list';
-import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
-import { useService, Workspace } from '@toeverything/infra';
-import { useMemo } from 'react';
-import { type LoaderFunction, redirect, useParams } from 'react-router-dom';
-
-import { AllPage } from './all-page/all-page';
-import { AllPageHeader } from './all-page/all-page-header';
-import { EmptyPageList } from './page-list-empty';
-
-export const loader: LoaderFunction = async args => {
-  if (!args.params.tagId) {
-    return redirect('/404');
-  }
-
-  return null;
-};
-
-export const Component = function TagPage() {
-  const params = useParams();
-  const currentWorkspace = useService(Workspace);
-  const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
-  const { tagUsageCounts } = useTagMetas(
-    currentWorkspace.blockSuiteWorkspace,
-    pageMetas
-  );
-  const isEmpty = useMemo(() => {
-    if (params.tagId) {
-      return tagUsageCounts[params.tagId] === 0;
-    }
-    return true;
-  }, [params.tagId, tagUsageCounts]);
-
-  return isEmpty ? (
-    <>
-      <AllPageHeader
-        workspace={currentWorkspace.blockSuiteWorkspace}
-        showCreateNew={false}
-        isDefaultFilter={true}
-        activeFilter={'tags'}
-      />
-      <EmptyPageList
-        type="all"
-        blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
-        heading={<TagListHeader />}
-      />
-    </>
-  ) : (
-    <AllPage activeFilter="tags" />
-  );
-};
--- a/packages/frontend/core/src/pages/workspace/tag/header.tsx
+++ b/packages/frontend/core/src/pages/workspace/tag/header.tsx
@ -0,0 +1,23 @@
+import { Header } from '@affine/core/components/pure/header';
+import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
+import { WorkspaceModeFilterTab } from '@affine/core/components/pure/workspace-mode-filter-tab';
+
+import * as styles from '../all-page/all-page.css';
+
+export const TagDetailHeader = () => {
+  const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+
+  return (
+    <Header
+      right={
+        <div
+          className={styles.headerRightWindows}
+          data-is-windows-desktop={isWindowsDesktop}
+        >
+          {isWindowsDesktop ? <WindowsAppControls /> : null}
+        </div>
+      }
+      center={<WorkspaceModeFilterTab activeFilter={'tags'} />}
+    />
+  );
+};
--- a/packages/frontend/core/src/pages/workspace/tag/index.tsx
+++ b/packages/frontend/core/src/pages/workspace/tag/index.tsx
@ -0,0 +1,63 @@
+import { HubIsland } from '@affine/core/components/affine/hub-island';
+import {
+  PageListHeader,
+  useTagMetas,
+  VirtualizedPageList,
+} from '@affine/core/components/page-list';
+import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
+import { useService } from '@toeverything/infra';
+import { Workspace } from '@toeverything/infra';
+import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+
+import { PageNotFound } from '../../404';
+import * as styles from '../all-page/all-page.css';
+import { EmptyPageList } from '../page-list-empty';
+import { TagDetailHeader } from './header';
+
+export const TagDetail = ({ tagId }: { tagId?: string }) => {
+  const currentWorkspace = useService(Workspace);
+  const pageMetas = useBlockSuitePageMeta(currentWorkspace.blockSuiteWorkspace);
+
+  const { tags, filterPageMetaByTag } = useTagMetas(
+    currentWorkspace.blockSuiteWorkspace,
+    pageMetas
+  );
+  const tagPageMetas = useMemo(() => {
+    if (tagId) {
+      return filterPageMetaByTag(tagId);
+    }
+    return [];
+  }, [filterPageMetaByTag, tagId]);
+
+  const currentTag = useMemo(
+    () => tags.find(tag => tag.id === tagId),
+    [tagId, tags]
+  );
+
+  if (!currentTag) {
+    return <PageNotFound />;
+  }
+
+  return (
+    <div className={styles.root}>
+      <TagDetailHeader />
+      {tagPageMetas.length > 0 ? (
+        <VirtualizedPageList tag={currentTag} listItem={tagPageMetas} />
+      ) : (
+        <EmptyPageList
+          type="all"
+          heading={<PageListHeader />}
+          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+        />
+      )}
+      <HubIsland />
+    </div>
+  );
+};
+
+export const Component = () => {
+  const params = useParams();
+
+  return <TagDetail tagId={params.tagId} />;
+};
--- a/packages/frontend/core/src/pages/workspace/trash-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/trash-page.tsx
@ -1,7 +1,6 @@
 import { toast } from '@affine/component';
 import { usePageHelper } from '@affine/core/components/blocksuite/block-suite-page-list/utils';
 import {
-  currentCollectionAtom,
  type ListItem,
  ListTableHeader,
  PageListItemRenderer,
@ -19,11 +18,8 @@ import { assertExists } from '@blocksuite/global/utils';
 import { DeleteIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
 import { Workspace } from '@toeverything/infra';
-import { getCurrentStore } from '@toeverything/infra/atom';
 import { useService } from '@toeverything/infra/di';
 import { useCallback } from 'react';
-import { type LoaderFunction } from 'react-router-dom';
-import { NIL } from 'uuid';

 import { EmptyPageList } from './page-list-empty';
 import * as styles from './trash-page.css';
@ -50,27 +46,15 @@ const TrashHeader = () => {
  );
 };

-export const loader: LoaderFunction = async () => {
-  // to fix the bug that the trash page list is not updated when route from collection to trash
-  // but it's not a good solution, the page will jitter when collection and trash are switched between each other.
-  // TODO: fix this bug
-
-  const rootStore = getCurrentStore();
-  rootStore.set(currentCollectionAtom, NIL);
-  return null;
-};
-
 export const TrashPage = () => {
  const currentWorkspace = useService(Workspace);
  const blockSuiteWorkspace = currentWorkspace.blockSuiteWorkspace;
  assertExists(blockSuiteWorkspace);

  const pageMetas = useBlockSuitePageMeta(blockSuiteWorkspace);
-  const filteredPageMetas = useFilteredPageMetas(
-    'trash',
-    pageMetas,
-    currentWorkspace
-  );
+  const filteredPageMetas = useFilteredPageMetas(currentWorkspace, pageMetas, {
+    trash: true,
+  });

  const { restoreFromTrash, permanentlyDeletePage } =
    useBlockSuiteMetaHelper(blockSuiteWorkspace);
--- a/packages/frontend/core/src/router.ts
+++ b/packages/frontend/core/src/router.ts
@ -15,9 +15,17 @@ export const routes = [
        path: 'all',
        lazy: () => import('./pages/workspace/all-page/all-page'),
      },
+      {
+        path: 'collection',
+        lazy: () => import('./pages/workspace/all-collection'),
+      },
      {
        path: 'collection/:collectionId',
-        lazy: () => import('./pages/workspace/collection'),
+        lazy: () => import('./pages/workspace/collection/index'),
+      },
+      {
+        path: 'tag',
+        lazy: () => import('./pages/workspace/all-tag'),
      },
      {
        path: 'tag/:tagId',
--- a/tests/affine-local/e2e/all-page.spec.ts
+++ b/tests/affine-local/e2e/all-page.spec.ts
@ -123,6 +123,7 @@ test('allow creation of filters by tags', async ({ page }) => {
  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');