refactor(core): move page list to core (#5556)

packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.tsx

@@ -5,6 +5,8 @@ import { type PropsWithChildren, useRef } from 'react';
 import * as styles from './index.css';
 import { useHasScrollTop } from './use-has-scroll-top';
 
+export { useHasScrollTop } from './use-has-scroll-top';
+
 export function SidebarContainer({ children }: PropsWithChildren) {
   return <div className={clsx([styles.baseContainer])}>{children}</div>;
 }

packages/frontend/core/package.json

@@ -43,8 +43,10 @@
     "@marsidev/react-turnstile": "^0.4.0",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-toolbar": "^1.0.4",
     "@react-hookz/web": "^24.0.0",
     "@sentry/integrations": "^7.83.0",
     "@sentry/react": "^7.83.0",
@@ -66,8 +68,10 @@
     "jotai": "^2.5.1",
     "jotai-devtools": "^0.7.0",
     "jotai-effect": "^0.2.3",
+    "jotai-scope": "^0.4.1",
     "lit": "^3.0.2",
     "lodash-es": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "lottie-web": "^5.12.2",
     "mini-css-extract-plugin": "^2.7.6",
     "nanoid": "^5.0.3",
@@ -79,6 +83,7 @@
     "react-error-boundary": "^4.0.11",
     "react-is": "18.2.0",
     "react-router-dom": "^6.16.0",
+    "react-virtuoso": "^4.6.2",
     "rxjs": "^7.8.1",
     "ses": "^1.0.0",
     "swr": "2.2.4",

packages/frontend/core/src/atoms/collections.ts

@@ -1,7 +1,3 @@
-import type {
-  CollectionsCRUD,
-  CollectionsCRUDAtom,
-} from '@affine/component/page-list';
 import {
   currentWorkspaceAtom,
   waitForCurrentWorkspaceAtom,
@@ -14,6 +10,10 @@ import { atom } from 'jotai';
 import { atomWithObservable } from 'jotai/utils';
 import { Observable, of } from 'rxjs';
 
+import type {
+  CollectionsCRUD,
+  CollectionsCRUDAtom,
+} from '../components/page-list';
 import { getUserSetting } from '../utils/user-setting';
 import { getWorkspaceSetting } from '../utils/workspace-setting';
 import { sessionAtom } from './cloud-user';

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -1,7 +1,7 @@
 import { SignUpPage } from '@affine/component/auth-components';
-import { AffineShapeIcon } from '@affine/component/page-list';
 import { Button } from '@affine/component/ui/button';
 import { Loading } from '@affine/component/ui/loading';
+import { AffineShapeIcon } from '@affine/core/components/page-list';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import type { SubscriptionRecurring } from '@affine/graphql';
 import {

packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx

@@ -1,6 +1,6 @@
-import { ExportMenuItems } from '@affine/component/page-list';
 import { Button } from '@affine/component/ui/button';
 import { Divider } from '@affine/component/ui/divider';
+import { ExportMenuItems } from '@affine/core/components/page-list';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { LinkIcon } from '@blocksuite/icons';

packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx

@@ -1,10 +1,14 @@
-import { Export, FavoriteTag, MoveToTrash } from '@affine/component/page-list';
 import {
   Menu,
   MenuIcon,
   MenuItem,
   MenuSeparator,
 } from '@affine/component/ui/menu';
+import {
+  Export,
+  FavoriteTag,
+  MoveToTrash,
+} from '@affine/core/components/page-list';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import { WorkspaceFlavour } from '@affine/env/workspace';

packages/frontend/core/src/components/page-list/components/favorite-tag.tsx

@@ -1,10 +1,10 @@
+import { IconButton, type IconButtonProps } from '@affine/component';
+import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons';
 import Lottie from 'lottie-react';
 import { forwardRef, useCallback, useState } from 'react';
 
-import { IconButton, type IconButtonProps } from '../../../ui/button';
-import { Tooltip } from '../../../ui/tooltip';
 import favoritedAnimation from './favorited-animation/data.json';
 
 export const FavoriteTag = forwardRef<

packages/frontend/core/src/components/page-list/components/new-page-buttton.tsx

@@ -1,10 +1,9 @@
+import { DropdownButton, Menu } from '@affine/component';
+import { BlockCard } from '@affine/component/card/block-card';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons';
 import { type PropsWithChildren, useCallback, useState } from 'react';
 
-import { DropdownButton } from '../../../ui/button';
-import { Menu } from '../../../ui/menu';
-import { BlockCard } from '../../card/block-card';
 import { menuContent } from './new-page-button.css';
 
 type NewPageButtonProps = {

packages/frontend/core/src/components/page-list/filter/condition.tsx

@@ -1,9 +1,9 @@
+import { Menu, MenuItem } from '@affine/component';
 import type { Filter, Literal } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
-import { Menu, MenuItem } from '../../../ui/menu';
 import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { literalMatcher } from './literal-matcher';

packages/frontend/core/src/components/page-list/filter/filter-list.tsx

@@ -1,11 +1,9 @@
+import { Button, IconButton, Menu } from '@affine/component';
 import type { Filter } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons';
 
-import { Button } from '../../../ui/button';
-import { IconButton } from '../../../ui/button';
-import { Menu } from '../../../ui/menu';
 import { Condition } from './condition';
 import * as styles from './index.css';
 import { CreateFilterMenu } from './vars';

packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx

@@ -1,10 +1,9 @@
+import { Input, Menu, MenuItem } from '@affine/component';
+import { AFFiNEDatePicker } from '@affine/component/date-picker';
 import type { LiteralValue, Tag } from '@affine/env/filter';
 import dayjs from 'dayjs';
 import { type ReactNode } from 'react';
 
-import Input from '../../../ui/input';
-import { Menu, MenuItem } from '../../../ui/menu';
-import { AFFiNEDatePicker } from '../../date-picker';
 import { FilterTag } from './filter-tag-translation';
 import { inputStyle } from './index.css';
 import { tBoolean, tDate, tDateRange, tTag } from './logical/custom-type';

packages/frontend/core/src/components/page-list/filter/multi-select.tsx

@@ -1,7 +1,7 @@
+import { Menu, MenuItem } from '@affine/component';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';
 
-import { Menu, MenuItem } from '../../../ui/menu';
 import * as styles from './multi-select.css';
 
 export const MultiSelect = ({

packages/frontend/core/src/components/page-list/filter/vars.tsx

@@ -1,3 +1,4 @@
+import { MenuIcon, MenuItem, MenuSeparator } from '@affine/component';
 import type {
   Filter,
   LiteralValue,
@@ -8,7 +9,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';
 
-import { MenuIcon, MenuItem, MenuSeparator } from '../../../ui/menu';
 import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { tBoolean, tDate, tDateRange, tTag } from './logical/custom-type';

packages/frontend/core/src/components/page-list/operation-cell.tsx

@@ -1,3 +1,11 @@
+import {
+  ConfirmModal,
+  IconButton,
+  Menu,
+  MenuIcon,
+  MenuItem,
+  Tooltip,
+} from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   DeletePermanentlyIcon,
@@ -10,10 +18,6 @@ import {
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { IconButton } from '../../ui/button';
-import { Menu, MenuIcon, MenuItem } from '../../ui/menu';
-import { ConfirmModal } from '../../ui/modal';
-import { Tooltip } from '../../ui/tooltip';
 import { FavoriteTag } from './components/favorite-tag';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
 import * as styles from './page-list.css';

packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx

@@ -1,9 +1,8 @@
+import { MenuIcon, MenuItem, type MenuItemProps } from '@affine/component';
+import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ShareIcon } from '@blocksuite/icons';
 
-import { MenuIcon, MenuItem, type MenuItemProps } from '../../../ui/menu';
-import { PublicLinkDisableModal } from '../../disable-public-link';
-
 export const DisablePublicSharing = (props: MenuItemProps) => {
   const t = useAFFiNEI18N();
   return (

packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx

@@ -1,3 +1,4 @@
+import { MenuIcon, MenuItem, MenuSub } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
   ExportIcon,
@@ -8,7 +9,6 @@ import {
 } from '@blocksuite/icons';
 import { type ReactNode, useMemo } from 'react';
 
-import { MenuIcon, MenuItem, MenuSub } from '../../../ui/menu';
 import { transitionStyle } from './index.css';
 
 interface ExportMenuItemProps<T> {

packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx

@@ -1,9 +1,13 @@
+import {
+  ConfirmModal,
+  type ConfirmModalProps,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon } from '@blocksuite/icons';
 
-import { MenuIcon, MenuItem, type MenuItemProps } from '../../../ui/menu';
-import { ConfirmModal, type ConfirmModalProps } from '../../../ui/modal';
-
 export const MoveToTrash = (props: MenuItemProps) => {
   const t = useAFFiNEI18N();
 

packages/frontend/core/src/components/page-list/page-header.tsx

@@ -1,3 +1,4 @@
+import { Checkbox, type CheckboxProps } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { MultiSelectIcon, SortDownIcon, SortUpIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
@@ -10,7 +11,6 @@ import {
   useMemo,
 } from 'react';
 
-import { Checkbox, type CheckboxProps } from '../../ui/checkbox';
 import * as styles from './page-list.css';
 import {
   pageListHandlersAtom,

packages/frontend/core/src/components/page-list/page-list-item.tsx

@@ -1,9 +1,9 @@
+import { Checkbox } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useDraggable } from '@dnd-kit/core';
 import { type PropsWithChildren, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-import { Checkbox } from '../../ui/checkbox';
 import * as styles from './page-list-item.css';
 import { PageTags } from './page-tags';
 import type { DraggableTitleCellData, PageListItemProps } from './types';

packages/frontend/core/src/components/page-list/page-list.tsx

@@ -1,3 +1,5 @@
+import { Scrollable } from '@affine/component';
+import { useHasScrollTop } from '@affine/component/app-sidebar';
 import clsx from 'clsx';
 import {
   type ForwardedRef,
@@ -10,8 +12,6 @@ import {
   useRef,
 } from 'react';
 
-import { Scrollable } from '../../ui/scrollbar';
-import { useHasScrollTop } from '../app-sidebar/sidebar-containers/use-has-scroll-top';
 import { PageGroup } from './page-group';
 import { PageListTableHeader } from './page-header';
 import * as styles from './page-list.css';

packages/frontend/core/src/components/page-list/page-tags.tsx

@@ -1,10 +1,10 @@
+import { Menu } from '@affine/component';
 import type { Tag } from '@affine/env/filter';
 import { MoreHorizontalIcon } from '@blocksuite/icons';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 
-import { Menu } from '../../ui/menu';
 import * as styles from './page-tags.css';
 import { stopPropagation } from './utils';
 

packages/frontend/core/src/components/page-list/view/collection-bar.tsx

@@ -1,3 +1,4 @@
+import { Button, Tooltip } from '@affine/component';
 import type { DeleteCollectionInfo, PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -5,8 +6,6 @@ import { ViewLayersIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { Button } from '../../../ui/button';
-import { Tooltip } from '../../../ui/tooltip';
 import {
   type CollectionsCRUDAtom,
   useCollectionManager,

packages/frontend/core/src/components/page-list/view/collection-list.tsx

@@ -1,3 +1,6 @@
+import { Button } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
+import { Menu } from '@affine/component';
 import type {
   Collection,
   DeleteCollectionInfo,
@@ -8,9 +11,6 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../../ui/button';
-import { FlexWrapper } from '../../../ui/layout';
-import { Menu } from '../../../ui/menu';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';

packages/frontend/core/src/components/page-list/view/collection-operations.tsx

@@ -1,3 +1,9 @@
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@affine/component';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteIcon, EditIcon, FilterIcon } from '@blocksuite/icons';
@@ -8,7 +14,6 @@ import {
   useMemo,
 } from 'react';
 
-import { Menu, MenuIcon, MenuItem, type MenuItemProps } from '../../../ui/menu';
 import type { useCollectionManager } from '../use-collection-manager';
 import type { AllPageListConfig } from '.';
 import * as styles from './collection-operations.css';

packages/frontend/core/src/components/page-list/view/create-collection.tsx

@@ -1,9 +1,7 @@
+import { Button, Input, Modal } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button } from '../../../ui/button';
-import Input from '../../../ui/input';
-import { Modal } from '../../../ui/modal';
 import * as styles from './create-collection.css';
 
 export interface CreateCollectionModalProps {

packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx

@@ -1,12 +1,15 @@
+import {
+  Button,
+  Modal,
+  RadioButton,
+  RadioButtonGroup,
+} from '@affine/component';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageMeta, Workspace } from '@blocksuite/store';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
-import { RadioButton, RadioButtonGroup } from '../../../../index';
-import { Button } from '../../../../ui/button';
-import { Modal } from '../../../../ui/modal';
 import * as styles from './edit-collection.css';
 import { PagesMode } from './pages-mode';
 import { RulesMode } from './rules-mode';

packages/frontend/core/src/components/page-list/view/edit-collection/hooks.tsx

@@ -1,6 +1,6 @@
+import { Modal } from '@affine/component';
 import { useCallback, useState } from 'react';
 
-import { Modal } from '../../../../ui/modal';
 import type { AllPageListConfig } from './edit-collection';
 import { SelectPage } from './select-page';
 export const useSelectPage = ({

packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx

@@ -1,3 +1,4 @@
+import { Menu } from '@affine/component';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
@@ -5,7 +6,6 @@ import type { PageMeta } from '@blocksuite/store';
 import clsx from 'clsx';
 import { type ReactNode, useCallback } from 'react';
 
-import { Menu } from '../../../../ui/menu';
 import { FilterList } from '../../filter/filter-list';
 import { VariableSelect } from '../../filter/vars';
 import { VirtualizedPageList } from '../../virtualized-page-list';

packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx

@@ -1,11 +1,10 @@
+import { Button, Menu } from '@affine/component';
 import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilterIcon } from '@blocksuite/icons';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../../../ui/button';
-import { Menu } from '../../../../ui/menu';
 import { FilterList } from '../../filter';
 import { VariableSelect } from '../../filter/vars';
 import { VirtualizedPageList } from '../../virtualized-page-list';

packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx

@@ -1,10 +1,10 @@
+import { Button } from '@affine/component';
 import type { Collection } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { SaveIcon } from '@blocksuite/icons';
 import { nanoid } from 'nanoid';
 import { useCallback } from 'react';
 
-import { Button } from '../../../ui/button';
 import { createEmptyCollection } from '../use-collection-manager';
 import { useEditCollectionName } from './use-edit-collection';
 

packages/frontend/core/src/components/page-list/virtualized-page-list.tsx

@@ -1,3 +1,4 @@
+import { Scrollable } from '@affine/component';
 import type { PageMeta } from '@blocksuite/store';
 import clsx from 'clsx';
 import { selectAtom } from 'jotai/utils';
@@ -11,7 +12,6 @@ import {
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Scrollable } from '../../ui/scrollbar';
 import { PageGroupHeader, PageMetaListItemRenderer } from './page-group';
 import { PageListTableHeader } from './page-header';
 import { PageListInnerWrapper } from './page-list';

packages/frontend/core/src/components/pure/cmdk/data.tsx

@@ -1,4 +1,4 @@
-import { useCollectionManager } from '@affine/component/page-list';
+import { useCollectionManager } from '@affine/core/components/page-list';
 import {
   useBlockSuitePageMeta,
   usePageMetaHelper,

packages/frontend/core/src/components/pure/cmdk/main.tsx

@@ -1,4 +1,4 @@
-import { formatDate } from '@affine/component/page-list';
+import { formatDate } from '@affine/core/components/page-list';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageMeta } from '@blocksuite/store';

packages/frontend/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx

@@ -1,14 +1,14 @@
 import { AnimatedCollectionsIcon, toast } from '@affine/component';
 import { MenuLinkItem as SidebarMenuLinkItem } from '@affine/component/app-sidebar';
+import { RenameModal } from '@affine/component/rename-modal';
+import { Button, IconButton } from '@affine/component/ui/button';
 import {
   CollectionOperations,
   filterPage,
   stopPropagation,
   useCollectionManager,
   useSavedCollections,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
-import { RenameModal } from '@affine/component/rename-modal';
-import { Button, IconButton } from '@affine/component/ui/button';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import type { Collection, DeleteCollectionInfo } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -11,12 +11,6 @@ import {
   SidebarContainer,
   SidebarScrollableContainer,
 } from '@affine/component/app-sidebar';
-import {
-  createEmptyCollection,
-  MoveToTrash,
-  useCollectionManager,
-  useEditCollectionName,
-} from '@affine/component/page-list';
 import { Menu } from '@affine/component/ui/menu';
 import { collectionsCRUDAtom } from '@affine/core/atoms/collections';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
@@ -41,6 +35,12 @@ import { getDropItemId } from '../../hooks/affine/use-sidebar-drag';
 import { useTrashModalHelper } from '../../hooks/affine/use-trash-modal-helper';
 import { useRegisterBrowserHistoryCommands } from '../../hooks/use-browser-history-commands';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
+import {
+  createEmptyCollection,
+  MoveToTrash,
+  useCollectionManager,
+  useEditCollectionName,
+} from '../page-list';
 import { CollectionsList } from '../pure/workspace-slider-bar/collections';
 import { AddCollectionButton } from '../pure/workspace-slider-bar/collections/add-collection-button';
 import { AddFavouriteButton } from '../pure/workspace-slider-bar/favorite/add-favourite-button';

packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx

@@ -1,5 +1,5 @@
-import { AffineShapeIcon } from '@affine/component/page-list'; // TODO: import from page-list temporarily, need to defined common svg icon/images management.
 import { Button } from '@affine/component/ui/button';
+import { AffineShapeIcon } from '@affine/core/components/page-list'; // TODO: import from page-list temporarily, need to defined common svg icon/images management.
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { useWorkspaceStatus } from '@affine/core/hooks/use-workspace-status';

packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx

@@ -2,7 +2,7 @@ import { toast } from '@affine/component';
 import {
   type AllPageListConfig,
   FavoriteTag,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';

packages/frontend/core/src/hooks/affine/use-sidebar-drag.ts

@@ -1,5 +1,5 @@
 import { toast } from '@affine/component';
-import type { DraggableTitleCellData } from '@affine/component/page-list';
+import type { DraggableTitleCellData } from '@affine/core/components/page-list';
 import { usePageMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -2,10 +2,6 @@ import {
   AppSidebarFallback,
   appSidebarResizingAtom,
 } from '@affine/component/app-sidebar';
-import {
-  type DraggableTitleCellData,
-  PageListDragOverlay,
-} from '@affine/component/page-list';
 import { MainContainer, WorkspaceFallback } from '@affine/component/workspace';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useWorkspaceStatus } from '@affine/core/hooks/use-workspace-status';
@@ -30,6 +26,10 @@ import { openQuickSearchModalAtom, openSettingModalAtom } from '../atoms';
 import { AppContainer } from '../components/affine/app-container';
 import { SyncAwareness } from '../components/affine/awareness';
 import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
+import {
+  type DraggableTitleCellData,
+  PageListDragOverlay,
+} from '../components/page-list';
 import { RootAppSidebar } from '../components/root-app-sidebar';
 import { WorkspaceUpgrade } from '../components/workspace-upgrade';
 import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';

packages/frontend/core/src/pages/workspace/all-page/all-page-filter.tsx

@@ -1,8 +1,3 @@
-import {
-  FilterList,
-  SaveAsCollectionButton,
-  useCollectionManager,
-} from '@affine/component/page-list';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import type { Collection, Filter } from '@affine/env/filter';
 import { useAtomValue } from 'jotai';
@@ -10,6 +5,11 @@ import { useCallback } from 'react';
 
 import { collectionsCRUDAtom } from '../../../atoms/collections';
 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 = () => {

packages/frontend/core/src/pages/workspace/all-page/all-page.tsx

@@ -8,7 +8,7 @@ import {
   type PageListHandle,
   useCollectionManager,
   VirtualizedPageList,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import { Trans } from '@affine/i18n';

packages/frontend/core/src/pages/workspace/collection.tsx

@@ -8,7 +8,7 @@ import {
   currentCollectionAtom,
   useCollectionManager,
   useEditCollection,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';

packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx

@@ -1,8 +1,4 @@
 import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
-import {
-  createTagFilter,
-  useCollectionManager,
-} from '@affine/component/page-list';
 import { ResizePanel } from '@affine/component/resize-panel';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useWorkspaceStatus } from '@affine/core/hooks/use-workspace-status';
@@ -32,6 +28,10 @@ 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';

packages/frontend/core/src/pages/workspace/pages.tsx

@@ -2,7 +2,7 @@ import {
   filterPage,
   filterPageByRules,
   useCollectionManager,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
 import type { PageMeta } from '@blocksuite/store';
 import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';

packages/frontend/core/src/pages/workspace/trash-page.tsx

@@ -3,7 +3,7 @@ import {
   currentCollectionAtom,
   TrashOperationCell,
   VirtualizedPageList,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
 import { useBlockSuitePageMeta } from '@affine/core/hooks/use-block-suite-page-meta';
 import { waitForCurrentWorkspaceAtom } from '@affine/core/modules/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';

tests/storybook/project.json

@@ -9,6 +9,7 @@
         "default",
         "^production",
         "{projectRoot}/.storybook/**/*",
+        "{workspaceRoot}/packages/frontend/components/src/**/*",
         "{workspaceRoot}/packages/frontend/core/src/**/*",
         "{workspaceRoot}/packages/common/infra/**/*",
         {

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

@@ -11,7 +11,7 @@ import {
   PageListScrollContainer,
   PageTags,
   type PageTagsProps,
-} from '@affine/component/page-list';
+} from '@affine/core/components/page-list';
 import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
 import { PageIcon, TagsIcon } from '@blocksuite/icons';
 import { Schema, Workspace } from '@blocksuite/store';

yarn.lock

@@ -327,8 +327,10 @@ __metadata:
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11"
     "@radix-ui/react-collapsible": "npm:^1.0.3"
     "@radix-ui/react-dialog": "npm:^1.0.4"
+    "@radix-ui/react-popover": "npm:^1.0.7"
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
     "@radix-ui/react-select": "npm:^2.0.0"
+    "@radix-ui/react-toolbar": "npm:^1.0.4"
     "@react-hookz/web": "npm:^24.0.0"
     "@sentry/integrations": "npm:^7.83.0"
     "@sentry/react": "npm:^7.83.0"
@@ -365,8 +367,10 @@ __metadata:
     jotai: "npm:^2.5.1"
     jotai-devtools: "npm:^0.7.0"
     jotai-effect: "npm:^0.2.3"
+    jotai-scope: "npm:^0.4.1"
     lit: "npm:^3.0.2"
     lodash-es: "npm:^4.17.21"
+    lottie-react: "npm:^2.4.0"
     lottie-web: "npm:^5.12.2"
     mime-types: "npm:^2.1.35"
     mini-css-extract-plugin: "npm:^2.7.6"
@@ -380,6 +384,7 @@ __metadata:
     react-error-boundary: "npm:^4.0.11"
     react-is: "npm:18.2.0"
     react-router-dom: "npm:^6.16.0"
+    react-virtuoso: "npm:^4.6.2"
     rxjs: "npm:^7.8.1"
     ses: "npm:^1.0.0"
     source-map-loader: "npm:^4.0.1"