diff --git a/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.tsx b/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.tsx
index b67199bb45..1da9fb59d1 100644
--- a/packages/frontend/component/src/components/app-sidebar/sidebar-containers/index.tsx
+++ b/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 {children}
;
}
diff --git a/packages/frontend/component/src/components/date-picker/index.ts b/packages/frontend/component/src/components/date-picker/index.tsx
similarity index 100%
rename from packages/frontend/component/src/components/date-picker/index.ts
rename to packages/frontend/component/src/components/date-picker/index.tsx
diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json
index 77e22c8d82..5f9e800f70 100644
--- a/packages/frontend/core/package.json
+++ b/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",
diff --git a/packages/frontend/core/src/atoms/collections.ts b/packages/frontend/core/src/atoms/collections.ts
index 75bbddf0ea..098bddc658 100644
--- a/packages/frontend/core/src/atoms/collections.ts
+++ b/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';
diff --git a/packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx b/packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx
index 36b225455f..908f8eb0b0 100644
--- a/packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx
+++ b/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 {
diff --git a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx
index f30b059819..84376ba644 100644
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-export.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
index dac01089c6..459570096c 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/__tests__/filter.spec.tsx b/packages/frontend/core/src/components/page-list/__tests__/filter.spec.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/__tests__/filter.spec.tsx
rename to packages/frontend/core/src/components/page-list/__tests__/filter.spec.tsx
diff --git a/packages/frontend/component/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
similarity index 100%
rename from packages/frontend/component/src/components/page-list/__tests__/use-all-page-setting.spec.ts
rename to packages/frontend/core/src/components/page-list/__tests__/use-all-page-setting.spec.ts
diff --git a/packages/frontend/component/src/components/page-list/__tests__/use-block-suite-page-preview.spec.ts b/packages/frontend/core/src/components/page-list/__tests__/use-block-suite-page-preview.spec.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/__tests__/use-block-suite-page-preview.spec.ts
rename to packages/frontend/core/src/components/page-list/__tests__/use-block-suite-page-preview.spec.ts
diff --git a/packages/frontend/component/src/components/page-list/components/favorite-tag.tsx b/packages/frontend/core/src/components/page-list/components/favorite-tag.tsx
similarity index 92%
rename from packages/frontend/component/src/components/page-list/components/favorite-tag.tsx
rename to packages/frontend/core/src/components/page-list/components/favorite-tag.tsx
index b035f68113..4e05f43260 100644
--- a/packages/frontend/component/src/components/page-list/components/favorite-tag.tsx
+++ b/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<
diff --git a/packages/frontend/component/src/components/page-list/components/favorited-animation/data.json b/packages/frontend/core/src/components/page-list/components/favorited-animation/data.json
similarity index 100%
rename from packages/frontend/component/src/components/page-list/components/favorited-animation/data.json
rename to packages/frontend/core/src/components/page-list/components/favorited-animation/data.json
diff --git a/packages/frontend/component/src/components/page-list/components/floating-toobar.tsx b/packages/frontend/core/src/components/page-list/components/floating-toobar.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/components/floating-toobar.tsx
rename to packages/frontend/core/src/components/page-list/components/floating-toobar.tsx
diff --git a/packages/frontend/component/src/components/page-list/components/floating-toolbar.css.ts b/packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/components/floating-toolbar.css.ts
rename to packages/frontend/core/src/components/page-list/components/floating-toolbar.css.ts
diff --git a/packages/frontend/component/src/components/page-list/components/new-page-button.css.ts b/packages/frontend/core/src/components/page-list/components/new-page-button.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/components/new-page-button.css.ts
rename to packages/frontend/core/src/components/page-list/components/new-page-button.css.ts
diff --git a/packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx b/packages/frontend/core/src/components/page-list/components/new-page-buttton.tsx
similarity index 95%
rename from packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx
rename to packages/frontend/core/src/components/page-list/components/new-page-buttton.tsx
index 8cdc0bb2ad..dfcd93e99f 100644
--- a/packages/frontend/component/src/components/page-list/components/new-page-buttton.tsx
+++ b/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 = {
diff --git a/packages/frontend/component/src/components/page-list/filter/condition.tsx b/packages/frontend/core/src/components/page-list/filter/condition.tsx
similarity index 98%
rename from packages/frontend/component/src/components/page-list/filter/condition.tsx
rename to packages/frontend/core/src/components/page-list/filter/condition.tsx
index 76db433231..a2609643b3 100644
--- a/packages/frontend/component/src/components/page-list/filter/condition.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/filter/eval.ts b/packages/frontend/core/src/components/page-list/filter/eval.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/eval.ts
rename to packages/frontend/core/src/components/page-list/filter/eval.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/filter-list.tsx b/packages/frontend/core/src/components/page-list/filter/filter-list.tsx
similarity index 93%
rename from packages/frontend/component/src/components/page-list/filter/filter-list.tsx
rename to packages/frontend/core/src/components/page-list/filter/filter-list.tsx
index 56d8a00783..7809a8cdd1 100644
--- a/packages/frontend/component/src/components/page-list/filter/filter-list.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/filter/filter-tag-translation.tsx b/packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/filter-tag-translation.tsx
rename to packages/frontend/core/src/components/page-list/filter/filter-tag-translation.tsx
diff --git a/packages/frontend/component/src/components/page-list/filter/index.css.ts b/packages/frontend/core/src/components/page-list/filter/index.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/index.css.ts
rename to packages/frontend/core/src/components/page-list/filter/index.css.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/index.ts b/packages/frontend/core/src/components/page-list/filter/index.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/index.ts
rename to packages/frontend/core/src/components/page-list/filter/index.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/literal-matcher.tsx b/packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx
similarity index 94%
rename from packages/frontend/component/src/components/page-list/filter/literal-matcher.tsx
rename to packages/frontend/core/src/components/page-list/filter/literal-matcher.tsx
index 6a4a77e1dc..83cacf6f8d 100644
--- a/packages/frontend/component/src/components/page-list/filter/literal-matcher.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/filter/logical/custom-type.ts b/packages/frontend/core/src/components/page-list/filter/logical/custom-type.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/logical/custom-type.ts
rename to packages/frontend/core/src/components/page-list/filter/logical/custom-type.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/logical/matcher.ts b/packages/frontend/core/src/components/page-list/filter/logical/matcher.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/logical/matcher.ts
rename to packages/frontend/core/src/components/page-list/filter/logical/matcher.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/logical/typesystem.ts b/packages/frontend/core/src/components/page-list/filter/logical/typesystem.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/logical/typesystem.ts
rename to packages/frontend/core/src/components/page-list/filter/logical/typesystem.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/multi-select.css.ts b/packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/multi-select.css.ts
rename to packages/frontend/core/src/components/page-list/filter/multi-select.css.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/multi-select.tsx b/packages/frontend/core/src/components/page-list/filter/multi-select.tsx
similarity index 96%
rename from packages/frontend/component/src/components/page-list/filter/multi-select.tsx
rename to packages/frontend/core/src/components/page-list/filter/multi-select.tsx
index 84264c6ff6..41dd71552a 100644
--- a/packages/frontend/component/src/components/page-list/filter/multi-select.tsx
+++ b/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 = ({
diff --git a/packages/frontend/component/src/components/page-list/filter/shared-types.tsx b/packages/frontend/core/src/components/page-list/filter/shared-types.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/shared-types.tsx
rename to packages/frontend/core/src/components/page-list/filter/shared-types.tsx
diff --git a/packages/frontend/component/src/components/page-list/filter/utils.ts b/packages/frontend/core/src/components/page-list/filter/utils.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/filter/utils.ts
rename to packages/frontend/core/src/components/page-list/filter/utils.ts
diff --git a/packages/frontend/component/src/components/page-list/filter/vars.tsx b/packages/frontend/core/src/components/page-list/filter/vars.tsx
similarity index 99%
rename from packages/frontend/component/src/components/page-list/filter/vars.tsx
rename to packages/frontend/core/src/components/page-list/filter/vars.tsx
index a1b36cf8b0..71a941ca16 100644
--- a/packages/frontend/component/src/components/page-list/filter/vars.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/index.tsx b/packages/frontend/core/src/components/page-list/index.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/index.tsx
rename to packages/frontend/core/src/components/page-list/index.tsx
diff --git a/packages/frontend/component/src/components/page-list/operation-cell.tsx b/packages/frontend/core/src/components/page-list/operation-cell.tsx
similarity index 96%
rename from packages/frontend/component/src/components/page-list/operation-cell.tsx
rename to packages/frontend/core/src/components/page-list/operation-cell.tsx
index a8d8d8d08d..51aef06492 100644
--- a/packages/frontend/component/src/components/page-list/operation-cell.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/disable-public-sharing.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
similarity index 75%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
rename to packages/frontend/core/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
index 7456e72217..df1f14f0e9 100644
--- a/packages/frontend/component/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
+++ b/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 (
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx
similarity index 97%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx
rename to packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx
index 939fd9f1ea..4aa669aad2 100644
--- a/packages/frontend/component/src/components/page-list/operation-menu-items/export.tsx
+++ b/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 {
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/get-content-parser.ts b/packages/frontend/core/src/components/page-list/operation-menu-items/get-content-parser.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/get-content-parser.ts
rename to packages/frontend/core/src/components/page-list/operation-menu-items/get-content-parser.ts
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/index.css.ts b/packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/index.css.ts
rename to packages/frontend/core/src/components/page-list/operation-menu-items/index.css.ts
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/index.ts b/packages/frontend/core/src/components/page-list/operation-menu-items/index.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/index.ts
rename to packages/frontend/core/src/components/page-list/operation-menu-items/index.ts
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/move-to-trash.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx
similarity index 90%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
rename to packages/frontend/core/src/components/page-list/operation-menu-items/move-to-trash.tsx
index 82abf8c15d..4f39f5d7a1 100644
--- a/packages/frontend/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
+++ b/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();
diff --git a/packages/frontend/component/src/components/page-list/operation-menu-items/types.ts b/packages/frontend/core/src/components/page-list/operation-menu-items/types.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/operation-menu-items/types.ts
rename to packages/frontend/core/src/components/page-list/operation-menu-items/types.ts
diff --git a/packages/frontend/component/src/components/page-list/page-content-preview.tsx b/packages/frontend/core/src/components/page-list/page-content-preview.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/page-content-preview.tsx
rename to packages/frontend/core/src/components/page-list/page-content-preview.tsx
diff --git a/packages/frontend/component/src/components/page-list/page-group.css.ts b/packages/frontend/core/src/components/page-list/page-group.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/page-group.css.ts
rename to packages/frontend/core/src/components/page-list/page-group.css.ts
diff --git a/packages/frontend/component/src/components/page-list/page-group.tsx b/packages/frontend/core/src/components/page-list/page-group.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/page-group.tsx
rename to packages/frontend/core/src/components/page-list/page-group.tsx
diff --git a/packages/frontend/component/src/components/page-list/page-header.tsx b/packages/frontend/core/src/components/page-list/page-header.tsx
similarity index 98%
rename from packages/frontend/component/src/components/page-list/page-header.tsx
rename to packages/frontend/core/src/components/page-list/page-header.tsx
index c69aae3137..a1f7e39c75 100644
--- a/packages/frontend/component/src/components/page-list/page-header.tsx
+++ b/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,
diff --git a/packages/frontend/component/src/components/page-list/page-list-item.css.ts b/packages/frontend/core/src/components/page-list/page-list-item.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/page-list-item.css.ts
rename to packages/frontend/core/src/components/page-list/page-list-item.css.ts
diff --git a/packages/frontend/component/src/components/page-list/page-list-item.tsx b/packages/frontend/core/src/components/page-list/page-list-item.tsx
similarity index 99%
rename from packages/frontend/component/src/components/page-list/page-list-item.tsx
rename to packages/frontend/core/src/components/page-list/page-list-item.tsx
index ce55e32ac7..775b86be8d 100644
--- a/packages/frontend/component/src/components/page-list/page-list-item.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/page-list.css.ts b/packages/frontend/core/src/components/page-list/page-list.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/page-list.css.ts
rename to packages/frontend/core/src/components/page-list/page-list.css.ts
diff --git a/packages/frontend/component/src/components/page-list/page-list.tsx b/packages/frontend/core/src/components/page-list/page-list.tsx
similarity index 97%
rename from packages/frontend/component/src/components/page-list/page-list.tsx
rename to packages/frontend/core/src/components/page-list/page-list.tsx
index 218d572d86..58420f2593 100644
--- a/packages/frontend/component/src/components/page-list/page-list.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/page-tags.css.ts b/packages/frontend/core/src/components/page-list/page-tags.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/page-tags.css.ts
rename to packages/frontend/core/src/components/page-list/page-tags.css.ts
diff --git a/packages/frontend/component/src/components/page-list/page-tags.tsx b/packages/frontend/core/src/components/page-list/page-tags.tsx
similarity index 98%
rename from packages/frontend/component/src/components/page-list/page-tags.tsx
rename to packages/frontend/core/src/components/page-list/page-tags.tsx
index 7fb86e9dce..994e91bdf9 100644
--- a/packages/frontend/component/src/components/page-list/page-tags.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/pages-to-page-group.tsx b/packages/frontend/core/src/components/page-list/pages-to-page-group.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/pages-to-page-group.tsx
rename to packages/frontend/core/src/components/page-list/pages-to-page-group.tsx
diff --git a/packages/frontend/component/src/components/page-list/readme.md b/packages/frontend/core/src/components/page-list/readme.md
similarity index 100%
rename from packages/frontend/component/src/components/page-list/readme.md
rename to packages/frontend/core/src/components/page-list/readme.md
diff --git a/packages/frontend/component/src/components/page-list/scoped-atoms.tsx b/packages/frontend/core/src/components/page-list/scoped-atoms.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/scoped-atoms.tsx
rename to packages/frontend/core/src/components/page-list/scoped-atoms.tsx
diff --git a/packages/frontend/component/src/components/page-list/types.ts b/packages/frontend/core/src/components/page-list/types.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/types.ts
rename to packages/frontend/core/src/components/page-list/types.ts
diff --git a/packages/frontend/component/src/components/page-list/use-block-suite-page-preview.ts b/packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/use-block-suite-page-preview.ts
rename to packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts
diff --git a/packages/frontend/component/src/components/page-list/use-block-suite-workspace-page.ts b/packages/frontend/core/src/components/page-list/use-block-suite-workspace-page.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/use-block-suite-workspace-page.ts
rename to packages/frontend/core/src/components/page-list/use-block-suite-workspace-page.ts
diff --git a/packages/frontend/component/src/components/page-list/use-collection-manager.ts b/packages/frontend/core/src/components/page-list/use-collection-manager.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/use-collection-manager.ts
rename to packages/frontend/core/src/components/page-list/use-collection-manager.ts
diff --git a/packages/frontend/component/src/components/page-list/use-page-selection-events.ts b/packages/frontend/core/src/components/page-list/use-page-selection-events.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/use-page-selection-events.ts
rename to packages/frontend/core/src/components/page-list/use-page-selection-events.ts
diff --git a/packages/frontend/component/src/components/page-list/utils.tsx b/packages/frontend/core/src/components/page-list/utils.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/utils.tsx
rename to packages/frontend/core/src/components/page-list/utils.tsx
diff --git a/packages/frontend/component/src/components/page-list/view/affine-shape.tsx b/packages/frontend/core/src/components/page-list/view/affine-shape.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/affine-shape.tsx
rename to packages/frontend/core/src/components/page-list/view/affine-shape.tsx
diff --git a/packages/frontend/component/src/components/page-list/view/collection-bar.css.ts b/packages/frontend/core/src/components/page-list/view/collection-bar.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/collection-bar.css.ts
rename to packages/frontend/core/src/components/page-list/view/collection-bar.css.ts
diff --git a/packages/frontend/component/src/components/page-list/view/collection-bar.tsx b/packages/frontend/core/src/components/page-list/view/collection-bar.tsx
similarity index 97%
rename from packages/frontend/component/src/components/page-list/view/collection-bar.tsx
rename to packages/frontend/core/src/components/page-list/view/collection-bar.tsx
index 2b8c102158..ec8f1daf05 100644
--- a/packages/frontend/component/src/components/page-list/view/collection-bar.tsx
+++ b/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,
diff --git a/packages/frontend/component/src/components/page-list/view/collection-list.css.ts b/packages/frontend/core/src/components/page-list/view/collection-list.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/collection-list.css.ts
rename to packages/frontend/core/src/components/page-list/view/collection-list.css.ts
diff --git a/packages/frontend/component/src/components/page-list/view/collection-list.tsx b/packages/frontend/core/src/components/page-list/view/collection-list.tsx
similarity index 95%
rename from packages/frontend/component/src/components/page-list/view/collection-list.tsx
rename to packages/frontend/core/src/components/page-list/view/collection-list.tsx
index 2bede93aa0..2a99409c3b 100644
--- a/packages/frontend/component/src/components/page-list/view/collection-list.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/view/collection-operations.css.ts b/packages/frontend/core/src/components/page-list/view/collection-operations.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/collection-operations.css.ts
rename to packages/frontend/core/src/components/page-list/view/collection-operations.css.ts
diff --git a/packages/frontend/component/src/components/page-list/view/collection-operations.tsx b/packages/frontend/core/src/components/page-list/view/collection-operations.tsx
similarity index 97%
rename from packages/frontend/component/src/components/page-list/view/collection-operations.tsx
rename to packages/frontend/core/src/components/page-list/view/collection-operations.tsx
index 97cac902ef..a8829cb5cf 100644
--- a/packages/frontend/component/src/components/page-list/view/collection-operations.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/view/create-collection.css.ts b/packages/frontend/core/src/components/page-list/view/create-collection.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/create-collection.css.ts
rename to packages/frontend/core/src/components/page-list/view/create-collection.css.ts
diff --git a/packages/frontend/component/src/components/page-list/view/create-collection.tsx b/packages/frontend/core/src/components/page-list/view/create-collection.tsx
similarity index 95%
rename from packages/frontend/component/src/components/page-list/view/create-collection.tsx
rename to packages/frontend/core/src/components/page-list/view/create-collection.tsx
index 5046eaeda1..34083054d0 100644
--- a/packages/frontend/component/src/components/page-list/view/create-collection.tsx
+++ b/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 {
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.css.ts b/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.css.ts
rename to packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.css.ts
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx
similarity index 97%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/edit-collection.tsx
index b96a0ad448..895431fd74 100644
--- a/packages/frontend/component/src/components/page-list/view/edit-collection/edit-collection.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/hooks.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/hooks.tsx
similarity index 96%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/hooks.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/hooks.tsx
index 538edffb4b..181449c496 100644
--- a/packages/frontend/component/src/components/page-list/view/edit-collection/hooks.tsx
+++ b/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 = ({
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/pages-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
similarity index 99%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/pages-mode.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/pages-mode.tsx
index d04a681e0c..f13d99599c 100644
--- a/packages/frontend/component/src/components/page-list/view/edit-collection/pages-mode.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/rules-mode.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/rules-mode.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/rules-mode.tsx
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/select-page.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
similarity index 98%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/select-page.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/select-page.tsx
index 28616a4df1..7debf879c0 100644
--- a/packages/frontend/component/src/components/page-list/view/edit-collection/select-page.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/use-filter.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/use-filter.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/use-filter.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/use-filter.tsx
diff --git a/packages/frontend/component/src/components/page-list/view/edit-collection/use-search.tsx b/packages/frontend/core/src/components/page-list/view/edit-collection/use-search.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/edit-collection/use-search.tsx
rename to packages/frontend/core/src/components/page-list/view/edit-collection/use-search.tsx
diff --git a/packages/frontend/component/src/components/page-list/view/index.ts b/packages/frontend/core/src/components/page-list/view/index.ts
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/index.ts
rename to packages/frontend/core/src/components/page-list/view/index.ts
diff --git a/packages/frontend/component/src/components/page-list/view/save-as-collection-button.tsx b/packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx
similarity index 96%
rename from packages/frontend/component/src/components/page-list/view/save-as-collection-button.tsx
rename to packages/frontend/core/src/components/page-list/view/save-as-collection-button.tsx
index eec63d4e4f..187308ba88 100644
--- a/packages/frontend/component/src/components/page-list/view/save-as-collection-button.tsx
+++ b/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';
diff --git a/packages/frontend/component/src/components/page-list/view/use-action.tsx b/packages/frontend/core/src/components/page-list/view/use-action.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/use-action.tsx
rename to packages/frontend/core/src/components/page-list/view/use-action.tsx
diff --git a/packages/frontend/component/src/components/page-list/view/use-edit-collection.tsx b/packages/frontend/core/src/components/page-list/view/use-edit-collection.tsx
similarity index 100%
rename from packages/frontend/component/src/components/page-list/view/use-edit-collection.tsx
rename to packages/frontend/core/src/components/page-list/view/use-edit-collection.tsx
diff --git a/packages/frontend/component/src/components/page-list/virtualized-page-list.tsx b/packages/frontend/core/src/components/page-list/virtualized-page-list.tsx
similarity index 99%
rename from packages/frontend/component/src/components/page-list/virtualized-page-list.tsx
rename to packages/frontend/core/src/components/page-list/virtualized-page-list.tsx
index 40fc9f8637..baff371df5 100644
--- a/packages/frontend/component/src/components/page-list/virtualized-page-list.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/components/pure/cmdk/data.tsx b/packages/frontend/core/src/components/pure/cmdk/data.tsx
index 0bec9f4ac8..3af7eb84ca 100644
--- a/packages/frontend/core/src/components/pure/cmdk/data.tsx
+++ b/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,
diff --git a/packages/frontend/core/src/components/pure/cmdk/main.tsx b/packages/frontend/core/src/components/pure/cmdk/main.tsx
index 4a28ca08d3..dc6423952b 100644
--- a/packages/frontend/core/src/components/pure/cmdk/main.tsx
+++ b/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';
diff --git 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
index 5f40e87fe7..af8bc3bbbb 100644
--- 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
@@ -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';
-import { RenameModal } from '@affine/component/rename-modal';
-import { Button, IconButton } from '@affine/component/ui/button';
+} from '@affine/core/components/page-list';
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';
diff --git a/packages/frontend/core/src/components/root-app-sidebar/index.tsx b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
index 19dafd5f22..ca4b1e98e8 100644
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx b/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
index a93fb73dce..830d5225d5 100644
--- a/packages/frontend/core/src/components/workspace-upgrade/upgrade.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx b/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx
index 803992507c..b263b64f57 100644
--- a/packages/frontend/core/src/hooks/affine/use-all-page-list-config.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/hooks/affine/use-sidebar-drag.ts b/packages/frontend/core/src/hooks/affine/use-sidebar-drag.ts
index 0ad0231dc1..2065117e80 100644
--- a/packages/frontend/core/src/hooks/affine/use-sidebar-drag.ts
+++ b/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';
diff --git a/packages/frontend/core/src/layouts/workspace-layout.tsx b/packages/frontend/core/src/layouts/workspace-layout.tsx
index 17fe3ba50a..f3bbf655bb 100644
--- a/packages/frontend/core/src/layouts/workspace-layout.tsx
+++ b/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';
diff --git 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
index e3d302cafd..fa006f4c59 100644
--- 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
@@ -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 = () => {
diff --git a/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx b/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
index fed910d907..11cd36e6f5 100644
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/pages/workspace/collection.tsx b/packages/frontend/core/src/pages/workspace/collection.tsx
index 903e06415a..446ea36edb 100644
--- a/packages/frontend/core/src/pages/workspace/collection.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 72e064940c..79d7de919b 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/pages/workspace/pages.tsx b/packages/frontend/core/src/pages/workspace/pages.tsx
index 13938a21d1..ecb689923b 100644
--- a/packages/frontend/core/src/pages/workspace/pages.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/pages/workspace/trash-page.tsx b/packages/frontend/core/src/pages/workspace/trash-page.tsx
index 71eaa01749..d5b4540c53 100644
--- a/packages/frontend/core/src/pages/workspace/trash-page.tsx
+++ b/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';
diff --git a/tests/storybook/project.json b/tests/storybook/project.json
index 5e2fd3e119..9415509751 100644
--- a/tests/storybook/project.json
+++ b/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/**/*",
{
diff --git a/tests/storybook/src/stories/page-list.stories.tsx b/tests/storybook/src/stories/page-list.stories.tsx
index 0b904b1704..26c99d6478 100644
--- a/tests/storybook/src/stories/page-list.stories.tsx
+++ b/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';
diff --git a/yarn.lock b/yarn.lock
index d4ba009b01..5ede357a03 100644
--- a/yarn.lock
+++ b/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"