feat: replace menu with new design (#4012)

Co-authored-by: Alex Yang <himself65@outlook.com>
2024-12-23 17:22:18 +03:00 · 2023-09-06 12:36:43 +08:00 · 2023-09-06 12:36:43 +08:00 · d8c9f10bc1
commit d8c9f10bc1
parent ef3d3a34e2
51 changed files with 611 additions and 739 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@ -28,7 +28,7 @@
    "@blocksuite/blocks": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/editor": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/global": "0.0.0-20230829150056-df43987c-nightly",
-    "@blocksuite/icons": "^2.1.31",
+    "@blocksuite/icons": "^2.1.32",
    "@blocksuite/lit": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/store": "0.0.0-20230829150056-df43987c-nightly",
    "@dnd-kit/core": "^6.0.8",
@ -40,7 +40,7 @@
    "@mui/material": "^5.14.7",
    "@radix-ui/react-select": "^1.2.2",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.25",
+    "@toeverything/components": "^0.0.31",
    "async-call-rpc": "^6.3.1",
    "cmdk": "^0.2.0",
    "css-spring": "^4.1.0",
--- a/apps/core/src/components/affine/language-menu/index.tsx
+++ b/apps/core/src/components/affine/language-menu/index.tsx
@ -1,138 +1,69 @@
-import {
-  Menu,
-  MenuItem,
-  type MenuProps,
-  MenuTrigger,
-  styled,
-} from '@affine/component';
-import { LOCALES, useI18N } from '@affine/i18n';
-import { assertExists } from '@blocksuite/global/utils';
-import type { ButtonProps } from '@toeverything/components/button';
-import { useCallback, useEffect, useState } from 'react';
-
-export const StyledListItem = styled(MenuItem)(() => ({
-  height: '38px',
-  textTransform: 'capitalize',
-}));
-
-interface LanguageMenuContentProps {
-  currentLanguage: string;
-  currentLanguageIndex: number;
-}
+import { LOCALES } from '@affine/i18n';
+import { useI18N } from '@affine/i18n';
+import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
+import type { ReactElement } from 'react';
+import { useCallback, useMemo, useRef } from 'react';

+// Fixme: keyboard focus should be supported by Menu component
 const LanguageMenuContent = ({
  currentLanguage,
-  currentLanguageIndex,
-}: LanguageMenuContentProps) => {
-  const i18n = useI18N();
-  const changeLanguage = useCallback(
-    (targetLanguage: string) => {
-      console.assert(
-        LOCALES.some(item => item.tag === targetLanguage),
-        'targetLanguage should be one of the LOCALES'
-      );
-      i18n.changeLanguage(targetLanguage).catch(err => {
-        console.error('Failed to change language', err);
-      });
-    },
-    [i18n]
-  );
-
-  const [focusedOptionIndex, setFocusedOptionIndex] = useState(
-    currentLanguageIndex ?? 0
-  );
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      switch (event.key) {
-        case 'ArrowUp':
-          event.preventDefault();
-          setFocusedOptionIndex(prevIndex =>
-            prevIndex > 0 ? prevIndex - 1 : 0
-          );
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          setFocusedOptionIndex(prevIndex =>
-            prevIndex < LOCALES.length - 1 ? prevIndex + 1 : LOCALES.length
-          );
-          break;
-        case 'Enter':
-          if (focusedOptionIndex !== -1) {
-            const selectedOption = LOCALES[focusedOptionIndex];
-            changeLanguage(selectedOption.tag);
-          }
-          break;
-        default:
-          break;
-      }
-    },
-    [changeLanguage, focusedOptionIndex]
-  );
-
-  useEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown]);
-
+  onSelect,
+}: {
+  currentLanguage?: string;
+  onSelect: (value: string) => void;
+}) => {
  return (
    <>
-      {LOCALES.map((option, optionIndex) => {
+      {LOCALES.map(option => {
        return (
-          <StyledListItem
+          <MenuItem
            key={option.name}
-            active={option.tag === currentLanguage}
-            userFocused={optionIndex == focusedOptionIndex}
+            selected={currentLanguage === option.originalName}
            title={option.name}
-            onClick={() => {
-              changeLanguage(option.tag);
-            }}
+            onSelect={() => onSelect(option.tag)}
          >
            {option.originalName}
-          </StyledListItem>
+          </MenuItem>
        );
      })}
    </>
  );
 };

-interface LanguageMenuProps extends Omit<MenuProps, 'children'> {
-  triggerProps?: ButtonProps;
-}
-
-export const LanguageMenu = ({
-  triggerProps,
-  ...menuProps
-}: LanguageMenuProps) => {
+export const LanguageMenu = () => {
  const i18n = useI18N();
-
-  const currentLanguageIndex = LOCALES.findIndex(
-    item => item.tag === i18n.language
+  const ref = useRef(null);
+  const currentLanguage = useMemo(
+    () => LOCALES.find(item => item.tag === i18n.language),
+    [i18n.language]
+  );
+  const onSelect = useCallback(
+    (event: string) => {
+      return i18n.changeLanguage(event);
+    },
+    [i18n]
  );
-  const currentLanguage = LOCALES[currentLanguageIndex];
-  assertExists(currentLanguage, 'currentLanguage should exist');
-
  return (
    <Menu
-      content={
-        <LanguageMenuContent
-          currentLanguage={currentLanguage.tag}
-          currentLanguageIndex={currentLanguageIndex}
-        />
+      items={
+        (
+          <LanguageMenuContent
+            currentLanguage={currentLanguage?.originalName}
+            onSelect={onSelect}
+          />
+        ) as ReactElement
      }
-      placement="bottom-end"
-      trigger="click"
-      disablePortal={true}
-      {...menuProps}
+      portalOptions={{
+        container: ref.current,
+      }}
    >
      <MenuTrigger
+        ref={ref}
        data-testid="language-menu-button"
-        style={{ textTransform: 'capitalize' }}
-        {...triggerProps}
+        style={{ textTransform: 'capitalize', fontWeight: 600 }}
+        block={true}
      >
-        {currentLanguage.originalName}
+        {currentLanguage?.originalName || ''}
      </MenuTrigger>
    </Menu>
  );
--- a/apps/core/src/components/affine/language-menu/style.css.ts
+++ b/apps/core/src/components/affine/language-menu/style.css.ts
@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const hoveredLanguageItem = style({
+  background: 'var(--affine-hover-color)',
+});
--- a/apps/core/src/components/affine/new-workspace-setting-detail/members.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/members.tsx
@ -1,4 +1,3 @@
-import { Menu, MenuItem } from '@affine/component';
 import {
  InviteModal,
  type InviteModalProps,
@ -12,6 +11,7 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { MoreVerticalIcon } from '@blocksuite/icons';
 import { Avatar } from '@toeverything/components/avatar';
 import { Button, IconButton } from '@toeverything/components/button';
+import { Menu, MenuItem } from '@toeverything/components/menu';
 import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai/react';
@ -190,14 +190,11 @@ const MemberItem = ({
            : 'Pending'}
        </div>
        <Menu
-          content={
+          items={
            <MenuItem data-member-id={member.id} onClick={handleRevoke}>
              {operationButtonInfo.leaveOrRevokeText}
            </MenuItem>
          }
-          placement="bottom"
-          disablePortal={true}
-          trigger="click"
        >
          <IconButton
            disabled={!operationButtonInfo.show}
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/date-format-setting.tsx
@ -1,6 +1,6 @@
-import { Menu, MenuItem, MenuTrigger } from '@affine/component';
+import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import dayjs from 'dayjs';
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';

 import {
  dateFormatOptions,
@ -23,10 +23,8 @@ const DateFormatMenuContent = ({
        return (
          <MenuItem
            key={option}
-            active={currentOption === option}
-            onClick={() => {
-              onSelect(option);
-            }}
+            selected={currentOption === option}
+            onSelect={() => onSelect(option)}
          >
            {dayjs(new Date()).format(option)}
          </MenuItem>
@ -37,6 +35,7 @@ const DateFormatMenuContent = ({
 };

 export const DateFormatSetting = () => {
+  const ref = useRef(null);
  const [appearanceSettings, setAppSettings] = useAppSetting();
  const handleSelect = useCallback(
    (option: DateFormats) => {
@ -47,17 +46,15 @@ export const DateFormatSetting = () => {

  return (
    <Menu
-      content={
+      items={
        <DateFormatMenuContent
          onSelect={handleSelect}
          currentOption={appearanceSettings.dateFormat}
        />
      }
-      placement="bottom-end"
-      trigger="click"
-      disablePortal={true}
+      portalOptions={{ container: ref.current }}
    >
-      <MenuTrigger data-testid="date-format-menu-trigger">
+      <MenuTrigger ref={ref} data-testid="date-format-menu-trigger" block>
        {dayjs(new Date()).format(appearanceSettings.dateFormat)}
      </MenuTrigger>
    </Menu>
--- a/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
@ -113,17 +113,7 @@ export const AppearanceSettings = () => {
          desc={t['com.affine.settings.appearance.language-description']()}
        >
          <div className={settingWrapper}>
-            <LanguageMenu
-              triggerContainerStyle={{ width: '100%' }}
-              triggerProps={{
-                style: {
-                  width: '100%',
-                  justifyContent: 'space-between',
-                  fontWeight: 600,
-                  padding: '0 10px',
-                },
-              }}
-            />
+            <LanguageMenu />
          </div>
        </SettingRow>
        {environment.isDesktop ? (
--- a/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-header-title/operation-menu.tsx
@ -1,4 +1,4 @@
-import { FlexWrapper, Menu, MenuItem } from '@affine/component';
+import { FlexWrapper } from '@affine/component';
 import { Export, MoveToTrash } from '@affine/component/page-list';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
@ -12,14 +12,19 @@ import {
  PageIcon,
 } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
-import { Divider } from '@toeverything/components/divider';
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  MenuSeparator,
+} from '@toeverything/components/menu';
 import {
  useBlockSuitePageMeta,
  usePageMetaHelper,
 } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useBlockSuiteWorkspaceHelper } from '@toeverything/hooks/use-block-suite-workspace-helper';
 import { useAtom, useSetAtom } from 'jotai';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';

 import { pageSettingFamily, setPageModeAtom } from '../../../atoms';
@ -34,9 +39,10 @@ type PageMenuProps = {
  rename?: () => void;
  pageId: string;
 };
-
+// fixme: refactor this file
 export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
  const t = useAFFiNEI18N();
+  const ref = useRef(null);
  // fixme(himself65): remove these hooks ASAP
  const [workspace] = useCurrentWorkspace();

@ -105,17 +111,25 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
  const EditMenu = (
    <>
      <MenuItem
-        icon={<EditIcon />}
+        preFix={
+          <MenuIcon>
+            <EditIcon />
+          </MenuIcon>
+        }
        data-testid="editor-option-menu-rename"
-        onClick={rename}
+        onSelect={rename}
        style={menuItemStyle}
      >
        {t['Rename']()}
      </MenuItem>
      <MenuItem
-        icon={mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+        preFix={
+          <MenuIcon>
+            {mode === 'page' ? <EdgelessIcon /> : <PageIcon />}
+          </MenuIcon>
+        }
        data-testid="editor-option-menu-edgeless"
-        onClick={handleSwitchMode}
+        onSelect={handleSwitchMode}
        style={menuItemStyle}
      >
        {t['Convert to ']()}
@ -123,14 +137,16 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
      </MenuItem>
      <MenuItem
        data-testid="editor-option-menu-favorite"
-        onClick={handleFavorite}
+        onSelect={handleFavorite}
        style={menuItemStyle}
-        icon={
-          favorite ? (
-            <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
-          ) : (
-            <FavoriteIcon />
-          )
+        preFix={
+          <MenuIcon>
+            {favorite ? (
+              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+            ) : (
+              <FavoriteIcon />
+            )}
+          </MenuIcon>
        }
      >
        {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
@ -144,28 +160,36 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
      >
        {t['com.affine.header.option.add-tag']()}
      </MenuItem> */}
-      <Divider size="thinner" dividerColor="var(--affine-border-color)" />
+      <MenuSeparator />
      <MenuItem
-        icon={<DuplicateIcon />}
+        preFix={
+          <MenuIcon>
+            <DuplicateIcon />
+          </MenuIcon>
+        }
        data-testid="editor-option-menu-duplicate"
-        onClick={duplicate}
+        onSelect={duplicate}
        style={menuItemStyle}
      >
        {t['com.affine.header.option.duplicate']()}
      </MenuItem>
      <MenuItem
-        icon={<ImportIcon />}
+        preFix={
+          <MenuIcon>
+            <ImportIcon />
+          </MenuIcon>
+        }
        data-testid="editor-option-menu-import"
-        onClick={importFile}
+        onSelect={importFile}
        style={menuItemStyle}
      >
        {t['Import']()}
      </MenuItem>
      <Export />
-      <Divider size="thinner" dividerColor="var(--affine-border-color)" />
+      <MenuSeparator />
      <MoveToTrash
        data-testid="editor-option-menu-delete"
-        onItemClick={() => {
+        onSelect={() => {
          setOpenConfirm(true);
        }}
      />
@ -176,21 +200,19 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
  }
  return (
    <>
-      <FlexWrapper alignItems="center" justifyContent="center">
+      <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
        <Menu
-          content={EditMenu}
-          placement="bottom-end"
-          disablePortal={true}
-          trigger="click"
-          menuStyles={{
-            borderRadius: '8px',
-            padding: '8px',
-            background: 'var(--affine-background-overlay-panel-color)',
+          items={EditMenu}
+          portalOptions={{
+            container: ref.current,
          }}
+          // menuStyles={{
+          //   borderRadius: '8px',
+          //   padding: '8px',
+          //   background: 'var(--affine-background-overlay-panel-color)',
+          // }}
        >
-          <div>
-            <HeaderDropDownButton />
-          </div>
+          <HeaderDropDownButton />
        </Menu>
        <MoveToTrash.ConfirmModal
          open={openConfirm}
--- a/apps/core/src/components/pure/header-drop-down-button/index.tsx
+++ b/apps/core/src/components/pure/header-drop-down-button/index.tsx
@ -1,38 +1,28 @@
-import { styled } from '@affine/component';
 import { ArrowDownSmallIcon } from '@blocksuite/icons';
 import {
  IconButton,
  type IconButtonProps,
 } from '@toeverything/components/button';
+import { forwardRef } from 'react';

-const StyledIconButtonWithAnimate = styled(IconButton)(() => {
-  return {
-    svg: {
-      transition: 'transform 0.15s ease-in-out',
-    },
-    ':hover': {
-      svg: {
-        transform: 'translateY(3px)',
-      },
-      backgroundColor: 'transparent !important',
-    },
-  };
-});
+import { headerMenuTrigger } from './styles.css';

-// fixme(himself65): need to refactor
-export const HeaderDropDownButton = ({
-  onClick,
-  ...props
-}: Omit<IconButtonProps, 'children'>) => {
+export const HeaderDropDownButton = forwardRef<
+  HTMLButtonElement,
+  Omit<IconButtonProps, 'children'>
+>((props, ref) => {
  return (
-    <StyledIconButtonWithAnimate
-      data-testid="header-dropDownButton"
+    <IconButton
+      ref={ref}
      {...props}
-      onClick={e => {
-        onClick?.(e);
-      }}
+      data-testid="header-dropDownButton"
+      className={headerMenuTrigger}
+      withoutHoverStyle={true}
+      type="plain"
    >
      <ArrowDownSmallIcon />
-    </StyledIconButtonWithAnimate>
+    </IconButton>
  );
-};
+});
+
+HeaderDropDownButton.displayName = 'HeaderDropDownButton';
--- a/apps/core/src/components/pure/header-drop-down-button/styles.css.ts
+++ b/apps/core/src/components/pure/header-drop-down-button/styles.css.ts
@ -0,0 +1,10 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const headerMenuTrigger = style({});
+
+globalStyle(`${headerMenuTrigger} svg`, {
+  transition: 'transform 0.15s ease-in-out',
+});
+globalStyle(`${headerMenuTrigger}:hover svg`, {
+  transform: 'translateY(3px)',
+});
--- a/apps/core/src/components/pure/workspace-list-modal/index.tsx
+++ b/apps/core/src/components/pure/workspace-list-modal/index.tsx
@ -1,4 +1,3 @@
-import { Menu, MenuItem } from '@affine/component';
 import { WorkspaceList } from '@affine/component/workspace-list';
 import type {
  AffineCloudWorkspace,
@ -19,6 +18,7 @@ import type { DragEndEvent } from '@dnd-kit/core';
 import { Popover } from '@mui/material';
 import { IconButton } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
+import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
 import { useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { signOut, useSession } from 'next-auth/react';
@ -35,6 +35,7 @@ import {
  StyledCreateWorkspaceCardPillContent,
  StyledCreateWorkspaceCardPillIcon,
  StyledImportWorkspaceCardPill,
+  StyledItem,
  StyledModalBody,
  StyledModalContent,
  StyledModalFooterContent,
@ -68,13 +69,12 @@ const AccountMenu = () => {
  const setOpen = useSetAtom(openSettingModalAtom);
  return (
    <div>
-      {/* <div>Unlimted</div>
-      <Divider size="thinner" dividerColor="var(--affine-border-color)" />
-      <MenuItem icon={<ImportIcon />} data-testid="editor-option-menu-import">
-        {t['com.affine.workspace.cloud.join']()}
-      </MenuItem> */}
      <MenuItem
-        icon={<AccountIcon />}
+        preFix={
+          <MenuIcon>
+            <AccountIcon />
+          </MenuIcon>
+        }
        data-testid="editor-option-menu-import"
        onClick={useCallback(() => {
          setOpen(prev => ({ ...prev, open: true, activeTab: 'account' }));
@ -84,7 +84,11 @@ const AccountMenu = () => {
      </MenuItem>
      <Divider />
      <MenuItem
-        icon={<SignOutIcon />}
+        preFix={
+          <MenuIcon>
+            <SignOutIcon />
+          </MenuIcon>
+        }
        data-testid="editor-option-menu-import"
        onClick={useCallback(() => {
          signOut().catch(console.error);
@ -188,11 +192,7 @@ export const WorkspaceListModal = ({
      {!isLoggedIn ? (
        <StyledModalHeaderContent>
          <StyledSignInCardPill>
-            <MenuItem
-              style={{
-                height: 'auto',
-                padding: '0px 12px',
-              }}
+            <StyledItem
              onClick={async () => {
                if (!runtimeConfig.enableCloud) {
                  setDisableCloudOpen(true);
@ -218,7 +218,7 @@ export const WorkspaceListModal = ({
                  </StyledSignInCardPillTextSecondary>
                </StyledSignInCardPillTextCotainer>
              </StyledCreateWorkspaceCardPillContent>
-            </MenuItem>
+            </StyledItem>
          </StyledSignInCardPill>
          <Divider style={{ margin: '12px 0px' }} />
        </StyledModalHeaderContent>
@ -227,12 +227,7 @@ export const WorkspaceListModal = ({
          <StyledModalHeader>
            <StyledModalTitle>{session?.user.email}</StyledModalTitle>
            <StyledOperationWrapper>
-              <Menu
-                placement="bottom-end"
-                trigger={['click']}
-                content={<AccountMenu />}
-                zIndex={1000}
-              >
+              <Menu items={<AccountMenu />}>
                <IconButton
                  data-testid="more-button"
                  icon={<MoreHorizontalIcon />}
@ -287,14 +282,7 @@ export const WorkspaceListModal = ({
        </StyledModalContent>
        {runtimeConfig.enableSQLiteProvider && environment.isDesktop ? (
          <StyledImportWorkspaceCardPill>
-            <MenuItem
-              onClick={onAddWorkspace}
-              data-testid="add-workspace"
-              style={{
-                height: 'auto',
-                padding: '8px 12px',
-              }}
-            >
+            <StyledItem onClick={onAddWorkspace} data-testid="add-workspace">
              <StyledCreateWorkspaceCardPillContent>
                <StyledCreateWorkspaceCardPillIcon>
                  <ImportIcon />
@ -303,20 +291,13 @@ export const WorkspaceListModal = ({
                  <p>{t['com.affine.workspace.local.import']()}</p>
                </div>
              </StyledCreateWorkspaceCardPillContent>
-            </MenuItem>
+            </StyledItem>
          </StyledImportWorkspaceCardPill>
        ) : null}
      </StyledModalBody>
      <StyledModalFooterContent>
        <StyledCreateWorkspaceCardPill>
-          <MenuItem
-            style={{
-              height: 'auto',
-              padding: '8px 12px',
-            }}
-            onClick={onNewWorkspace}
-            data-testid="new-workspace"
-          >
+          <StyledItem onClick={onNewWorkspace} data-testid="new-workspace">
            <StyledCreateWorkspaceCardPillContent>
              <StyledCreateWorkspaceCardPillIcon>
                <PlusIcon />
@ -325,7 +306,7 @@ export const WorkspaceListModal = ({
                <p>{t['New Workspace']()}</p>
              </div>
            </StyledCreateWorkspaceCardPillContent>
-          </MenuItem>
+          </StyledItem>
        </StyledCreateWorkspaceCardPill>
      </StyledModalFooterContent>
    </Popover>
--- a/apps/core/src/components/pure/workspace-list-modal/styles.ts
+++ b/apps/core/src/components/pure/workspace-list-modal/styles.ts
@ -241,3 +241,32 @@ export const StyledWorkspaceFlavourTitle = styled('div')(() => {
    marginBottom: '4px',
  };
 });
+export const StyledItem = styled('button')<{
+  active?: boolean;
+}>(({ active = false }) => {
+  return {
+    height: 'auto',
+    padding: '8px 12px',
+    width: '100%',
+    borderRadius: '5px',
+    fontSize: 'var(--affine-font-sm)',
+    ...displayFlex('flex-start', 'center'),
+    cursor: 'pointer',
+    position: 'relative',
+    backgroundColor: 'transparent',
+    color: 'var(--affine-text-primary-color)',
+    svg: {
+      color: 'var(--affine-icon-color)',
+    },
+
+    ':hover': {
+      backgroundColor: 'var(--affine-hover-color)',
+    },
+
+    ...(active
+      ? {
+          backgroundColor: 'var(--affine-hover-color)',
+        }
+      : {}),
+  };
+});
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/collections-list.tsx
@ -1,5 +1,4 @@
-import { Menu } from '@affine/component';
-import { MenuItem } from '@affine/component/app-sidebar';
+import { MenuItem as CollectionItem } from '@affine/component/app-sidebar';
 import {
  EditCollectionModel,
  useCollectionManager,
@ -21,6 +20,13 @@ import type { PageMeta, Workspace } from '@blocksuite/store';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { useDroppable } from '@dnd-kit/core';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { IconButton } from '@toeverything/components/button';
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@toeverything/components/menu';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import type { ReactElement } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
@ -60,7 +66,7 @@ const CollectionOperations = ({
          icon: ReactElement;
          name: string;
          click: () => void;
-          className?: string;
+          type?: MenuItemProps['type'];
          element?: undefined;
        }
      | {
@ -70,12 +76,20 @@ const CollectionOperations = ({
  >(
    () => [
      {
-        icon: <FilterIcon />,
+        icon: (
+          <MenuIcon>
+            <FilterIcon />
+          </MenuIcon>
+        ),
        name: t['Edit Filter'](),
        click: showUpdateCollection,
      },
      {
-        icon: <UnpinIcon />,
+        icon: (
+          <MenuIcon>
+            <UnpinIcon />
+          </MenuIcon>
+        ),
        name: t['Unpin'](),
        click: () => {
          return setting.updateCollection({
@ -88,12 +102,16 @@ const CollectionOperations = ({
        element: <div key="divider" className={styles.menuDividerStyle}></div>,
      },
      {
-        icon: <DeleteIcon />,
+        icon: (
+          <MenuIcon>
+            <DeleteIcon />
+          </MenuIcon>
+        ),
        name: t['Delete'](),
        click: () => {
          return setting.deleteCollection(view.id);
        },
-        className: styles.deleteFolder,
+        type: 'danger',
      },
    ],
    [setting, showUpdateCollection, t, view]
@ -108,8 +126,8 @@ const CollectionOperations = ({
          <MenuItem
            data-testid="collection-option"
            key={action.name}
-            className={action.className}
-            icon={action.icon}
+            type={action.type}
+            preFix={action.icon}
            onClick={action.click}
          >
            {action.name}
@ -181,6 +199,7 @@ const CollectionRenderer = ({
  const pagesToRender = pages.filter(
    page => filterPage(collection, page) && !page.trash
  );
+
  return (
    <Collapsible.Root open={!collapsed}>
      <EditCollectionModel
@ -191,7 +210,7 @@ const CollectionRenderer = ({
        open={show}
        onClose={() => showUpdateCollection(false)}
      />
-      <MenuItem
+      <CollectionItem
        data-testid="collection-item"
        data-type="collection-list-item"
        ref={setNodeRef}
@ -200,9 +219,7 @@ const CollectionRenderer = ({
        icon={<ViewLayersIcon />}
        postfix={
          <Menu
-            trigger="click"
-            placement="bottom-start"
-            content={
+            items={
              <CollectionOperations
                view={collection}
                showUpdateCollection={() => showUpdateCollection(true)}
@ -210,9 +227,13 @@ const CollectionRenderer = ({
              />
            }
          >
-            <div data-testid="collection-options" className={styles.more}>
+            <IconButton
+              data-testid="collection-options"
+              type="plain"
+              withoutHoverStyle
+            >
              <MoreHorizontalIcon />
-            </div>
+            </IconButton>
          </Menu>
        }
        collapsed={pagesToRender.length > 0 ? collapsed : undefined}
@ -227,7 +248,7 @@ const CollectionRenderer = ({
        >
          <div>{collection.name}</div>
        </div>
-      </MenuItem>
+      </CollectionItem>
      <Collapsible.Content className={styles.collapsibleContent}>
        <div style={{ marginLeft: 20, marginTop: -4 }}>
          {pagesToRender.map(page => {
@ -260,13 +281,13 @@ export const CollectionsList = ({ workspace }: CollectionsListProps) => {
  const t = useAFFiNEI18N();
  if (pinedCollections.length === 0) {
    return (
-      <MenuItem
+      <CollectionItem
        data-testid="slider-bar-collection-null-description"
        icon={<InformationIcon />}
        disabled
      >
        <span>{t['Create a collection']()}</span>
-      </MenuItem>
+      </CollectionItem>
    );
  }
  return (
--- a/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
+++ b/apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
@ -1,5 +1,4 @@
-import { Menu } from '@affine/component';
-import { MenuItem } from '@affine/component/app-sidebar';
+import { MenuItem as CollectionItem } from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
  DeleteIcon,
@ -11,6 +10,13 @@ import {
 } from '@blocksuite/icons';
 import type { PageMeta, Workspace } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { IconButton } from '@toeverything/components/button';
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@toeverything/components/menu';
 import { useBlockSuitePageReferences } from '@toeverything/hooks/use-block-suite-page-references';
 import { useAtomValue } from 'jotai/index';
 import type { ReactElement } from 'react';
@ -46,7 +52,7 @@ export const PageOperations = ({
          icon: ReactElement;
          name: string;
          click: () => void;
-          className?: string;
+          type?: MenuItemProps['type'];
          element?: undefined;
        }
      | {
@ -58,7 +64,11 @@ export const PageOperations = ({
      ...(inAllowList
        ? [
            {
-              icon: <FilterMinusIcon />,
+              icon: (
+                <MenuIcon>
+                  <FilterMinusIcon />
+                </MenuIcon>
+              ),
              name: t['Remove special filter'](),
              click: () => removeFromAllowList(page.id),
            },
@ -67,7 +77,11 @@ export const PageOperations = ({
      ...(!inExcludeList
        ? [
            {
-              icon: <FilterUndoIcon />,
+              icon: (
+                <MenuIcon>
+                  <FilterUndoIcon />
+                </MenuIcon>
+              ),
              name: t['Exclude from filter'](),
              click: () => addToExcludeList(page.id),
            },
@ -77,12 +91,16 @@ export const PageOperations = ({
        element: <div key="divider" className={styles.menuDividerStyle}></div>,
      },
      {
-        icon: <DeleteIcon />,
+        icon: (
+          <MenuIcon>
+            <DeleteIcon />
+          </MenuIcon>
+        ),
        name: t['Delete'](),
        click: () => {
          removeToTrash(page.id);
        },
-        className: styles.deleteFolder,
+        type: 'danger',
      },
    ],
    [
@ -105,8 +123,8 @@ export const PageOperations = ({
          <MenuItem
            data-testid="collection-page-option"
            key={action.name}
-            className={action.className}
-            icon={action.icon}
+            type={action.type}
+            preFix={action.icon}
            onClick={action.click}
          >
            {action.name}
@ -133,6 +151,7 @@ export const Page = ({
  workspace: Workspace;
  allPageMeta: Record<string, PageMeta>;
 }) => {
+  const ref = React.useRef(null);
  const [collapsed, setCollapsed] = React.useState(true);
  const params = useParams();
  const { jumpToPage } = useNavigateHelper();
@ -148,7 +167,7 @@ export const Page = ({
  const referencesToRender = references.filter(id => !allPageMeta[id]?.trash);
  return (
    <Collapsible.Root open={!collapsed}>
-      <MenuItem
+      <CollectionItem
        data-testid="collection-page"
        data-type="collection-list-item"
        icon={icon}
@ -157,31 +176,35 @@ export const Page = ({
        active={active}
        collapsed={referencesToRender.length > 0 ? collapsed : undefined}
        onCollapsedChange={setCollapsed}
+        ref={ref}
        postfix={
          <Menu
-            trigger="click"
-            placement="bottom-start"
-            content={
-              <div style={{ width: 220 }}>
-                <PageOperations
-                  inAllowList={inAllowList}
-                  removeFromAllowList={removeFromAllowList}
-                  inExcludeList={inExcludeList}
-                  addToExcludeList={addToExcludeList}
-                  page={page}
-                  workspace={workspace}
-                />
-              </div>
+            items={
+              <PageOperations
+                inAllowList={inAllowList}
+                removeFromAllowList={removeFromAllowList}
+                inExcludeList={inExcludeList}
+                addToExcludeList={addToExcludeList}
+                page={page}
+                workspace={workspace}
+              />
            }
+            portalOptions={{
+              container: ref.current,
+            }}
          >
-            <div data-testid="collection-page-options" className={styles.more}>
-              <MoreHorizontalIcon></MoreHorizontalIcon>
-            </div>
+            <IconButton
+              data-testid="collection-page-options"
+              type="plain"
+              withoutHoverStyle
+            >
+              <MoreHorizontalIcon />
+            </IconButton>
          </Menu>
        }
      >
        {page.title || t['Untitled']()}
-      </MenuItem>
+      </CollectionItem>
      <Collapsible.Content className={styles.collapsibleContent}>
        {referencesToRender.map(id => {
          return (
--- a/apps/prototype/package.json
+++ b/apps/prototype/package.json
@ -22,7 +22,7 @@
    "@blocksuite/blocks": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/editor": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/global": "0.0.0-20230829150056-df43987c-nightly",
-    "@blocksuite/icons": "^2.1.31",
+    "@blocksuite/icons": "^2.1.32",
    "@blocksuite/lit": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/store": "0.0.0-20230829150056-df43987c-nightly",
    "@toeverything/hooks": "workspace:*",
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@ -35,7 +35,7 @@
    "@blocksuite/blocks": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/editor": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/global": "0.0.0-20230829150056-df43987c-nightly",
-    "@blocksuite/icons": "^2.1.31",
+    "@blocksuite/icons": "^2.1.32",
    "@blocksuite/lit": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/store": "0.0.0-20230829150056-df43987c-nightly",
    "@tomfreudenberg/next-auth-mock": "^0.5.6",
--- a/packages/component/package.json
+++ b/packages/component/package.json
@ -55,7 +55,7 @@
    "@blocksuite/blocks": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/editor": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/global": "0.0.0-20230829150056-df43987c-nightly",
-    "@blocksuite/icons": "^2.1.31",
+    "@blocksuite/icons": "^2.1.32",
    "@blocksuite/lit": "0.0.0-20230829150056-df43987c-nightly",
    "@blocksuite/store": "0.0.0-20230829150056-df43987c-nightly",
    "@types/react": "^18.2.21",
--- a/packages/component/src/components/app-sidebar/menu-item/index.css.ts
+++ b/packages/component/src/components/app-sidebar/menu-item/index.css.ts
@ -62,10 +62,10 @@ export const content = style({

 export const postfix = style({
  justifySelf: 'flex-end',
-  display: 'none',
+  visibility: 'hidden',
  selectors: {
    [`${root}:hover &`]: {
-      display: 'flex',
+      visibility: 'visible',
    },
  },
 });
--- a/packages/component/src/components/page-list/components/dropdown.css.ts
+++ b/packages/component/src/components/page-list/components/dropdown.css.ts
@ -0,0 +1,54 @@
+import { style } from '@vanilla-extract/css';
+
+export const divider = style({
+  width: '0.5px',
+  height: '16px',
+  background: 'var(--affine-divider-color)',
+  // fix dropdown button click area
+  margin: '0 4px',
+  marginRight: 0,
+});
+
+export const dropdownWrapper = style({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingLeft: '4px',
+  paddingRight: '10px',
+});
+
+export const dropdownIcon = style({
+  borderRadius: '4px',
+  selectors: {
+    [`${dropdownWrapper}:hover &`]: {
+      background: 'var(--affine-hover-color)',
+    },
+  },
+});
+
+export const dropdownBtn = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 10px',
+  // fix dropdown button click area
+  paddingRight: 0,
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: 600,
+  background: 'var(--affine-button-gray-color)',
+  boxShadow: 'var(--affine-float-button-shadow)',
+  borderRadius: '8px',
+  fontSize: 'var(--affine-font-sm)',
+  // width: '100%',
+  height: '32px',
+  userSelect: 'none',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+  selectors: {
+    '&:hover': {
+      background: 'var(--affine-hover-color-filled)',
+    },
+  },
+});
--- a/packages/component/src/components/page-list/components/dropdown.tsx
+++ b/packages/component/src/components/page-list/components/dropdown.tsx
@ -0,0 +1,36 @@
+import { ArrowDownSmallIcon } from '@blocksuite/icons';
+import {
+  type ButtonHTMLAttributes,
+  forwardRef,
+  type MouseEventHandler,
+} from 'react';
+
+import * as styles from './dropdown.css';
+
+type DropdownButtonProps = {
+  onClickDropDown?: MouseEventHandler<HTMLElement>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const DropdownButton = forwardRef<
+  HTMLButtonElement,
+  DropdownButtonProps
+>(({ onClickDropDown, children, ...props }, ref) => {
+  const handleClickDropDown: MouseEventHandler<HTMLElement> = e => {
+    e.stopPropagation();
+    onClickDropDown?.(e);
+  };
+  return (
+    <button ref={ref} className={styles.dropdownBtn} {...props}>
+      <span>{children}</span>
+      <span className={styles.divider} />
+      <span className={styles.dropdownWrapper} onClick={handleClickDropDown}>
+        <ArrowDownSmallIcon
+          className={styles.dropdownIcon}
+          width={16}
+          height={16}
+        />
+      </span>
+    </button>
+  );
+});
+DropdownButton.displayName = 'DropdownButton';
--- a/packages/component/src/components/page-list/components/new-page-buttton.tsx
+++ b/packages/component/src/components/page-list/components/new-page-buttton.tsx
@ -1,10 +1,11 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { EdgelessIcon, ImportIcon, PageIcon } from '@blocksuite/icons';
+import { Menu } from '@toeverything/components/menu';
 import { useState } from 'react';

-import { DropdownButton } from '../../../ui/button/dropdown';
-import { Menu } from '../../../ui/menu/menu';
+// import { Menu } from '../../../ui/menu/menu';
 import { BlockCard } from '../../card/block-card';
+import { DropdownButton } from './dropdown';

 type NewPageButtonProps = {
  createNewPage: () => void;
@ -32,18 +33,21 @@ export const CreateNewPagePopup = ({
        desc={t['com.affine.write_with_a_blank_page']()}
        right={<PageIcon width={20} height={20} />}
        onClick={createNewPage}
+        data-testid="new-page-button-in-all-page"
      />
      <BlockCard
        title={t['com.affine.new_edgeless']()}
        desc={t['com.affine.draw_with_a_blank_whiteboard']()}
        right={<EdgelessIcon width={20} height={20} />}
        onClick={createNewEdgeless}
+        data-testid="new-edgeless-button-in-all-page"
      />
      <BlockCard
        title={t['com.affine.new_import']()}
        desc={t['com.affine.import_file']()}
        right={<ImportIcon width={20} height={20} />}
        onClick={importFile}
+        data-testid="import-button-in-all-page"
      />
      {/* TODO Import */}
    </div>
@ -59,18 +63,10 @@ export const NewPageButton = ({
  const [open, setOpen] = useState(false);
  return (
    <Menu
-      visible={open}
-      placement="bottom-end"
-      trigger={['click']}
-      disablePortal={true}
-      onClickAway={() => {
-        setOpen(false);
+      rootOptions={{
+        open,
      }}
-      menuStyles={{
-        padding: '0px',
-        background: 'var(--affine-background-overlay-panel-color)',
-      }}
-      content={
+      items={
        <CreateNewPagePopup
          createNewPage={() => {
            createNewPage();
--- a/packages/component/src/components/page-list/components/tags.tsx
+++ b/packages/component/src/components/page-list/components/tags.tsx
@ -1,8 +1,9 @@
 import type { Tag } from '@affine/env/filter';
+import { Menu } from '@toeverything/components/menu';

-import Menu from '../../../ui/menu/menu';
 import * as styles from './tags.css';

+// fixme: This component should use popover instead of menu
 export const Tags = ({ value }: { value: Tag[] }) => {
  const list = value.map(tag => {
    return (
@ -16,10 +17,7 @@ export const Tags = ({ value }: { value: Tag[] }) => {
    );
  });
  return (
-    <Menu
-      pointerEnterDelay={500}
-      content={<div className={styles.tagListFull}>{list}</div>}
-    >
+    <Menu items={<div className={styles.tagListFull}>{list}</div>}>
      <div className={styles.tagList}>{list}</div>
    </Menu>
  );
--- a/packages/component/src/components/page-list/filter/condition.tsx
+++ b/packages/component/src/components/page-list/filter/condition.tsx
@ -1,9 +1,9 @@
 import type { Filter, Literal } from '@affine/env/filter';
 import type { PropertiesMeta } from '@affine/env/filter';
+import { Menu, MenuItem } from '@toeverything/components/menu';
 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';
@ -50,8 +50,7 @@ export const Condition = ({
          style={{ display: 'flex', userSelect: 'none', alignItems: 'center' }}
        >
          <Menu
-            trigger="click"
-            content={
+            items={
              <VariableSelect
                propertiesMeta={propertiesMeta}
                selected={[]}
@ -67,8 +66,7 @@ export const Condition = ({
            </div>
          </Menu>
          <Menu
-            trigger="click"
-            content={
+            items={
              <FunctionSelect
                propertiesMeta={propertiesMeta}
                value={value}
--- a/packages/component/src/components/page-list/filter/filter-list.tsx
+++ b/packages/component/src/components/page-list/filter/filter-list.tsx
@ -4,8 +4,8 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, PlusIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
 import { IconButton } from '@toeverything/components/button';
+import { Menu } from '@toeverything/components/menu';

-import { Menu } from '../../..';
 import { Condition } from './condition';
 import * as styles from './index.css';
 import { CreateFilterMenu } from './vars';
@ -53,8 +53,7 @@ export const FilterList = ({
        );
      })}
      <Menu
-        trigger={'click'}
-        content={
+        items={
          <CreateFilterMenu
            value={value}
            onChange={onChange}
--- a/packages/component/src/components/page-list/filter/filter-tag-translation.tsx
+++ b/packages/component/src/components/page-list/filter/filter-tag-translation.tsx
@ -4,7 +4,7 @@ type FilterTagProps = {
  name: string;
 };

-export const FilterTag = ({ name }: FilterTagProps) => {
+const useFilterTag = ({ name }: FilterTagProps) => {
  const t = useAFFiNEI18N();
  switch (name) {
    case 'Created':
@ -41,3 +41,9 @@ export const FilterTag = ({ name }: FilterTagProps) => {
      return name;
  }
 };
+
+export const FilterTag = ({ name }: FilterTagProps) => {
+  const tag = useFilterTag({ name });
+
+  return <span data-testid={`filler-tag-${tag}`}>{tag}</span>;
+};
--- a/packages/component/src/components/page-list/filter/multi-select.tsx
+++ b/packages/component/src/components/page-list/filter/multi-select.tsx
@ -1,8 +1,7 @@
-import { DoneIcon } from '@blocksuite/icons';
+import { Menu, MenuItem } from '@toeverything/components/menu';
 import type { MouseEvent } from 'react';
 import { useMemo } from 'react';

-import Menu from '../../../ui/menu/menu';
 import * as styles from './multi-select.css';

 export const MultiSelect = ({
@ -21,10 +20,10 @@ export const MultiSelect = ({
    () => Object.fromEntries(options.map(v => [v.value, v])),
    [options]
  );
+
  return (
    <Menu
-      trigger="click"
-      content={
+      items={
        <div data-testid="multi-select" className={styles.optionList}>
          {options.map(option => {
            const selected = value.includes(option.value);
@ -37,25 +36,14 @@ export const MultiSelect = ({
              }
            };
            return (
-              <div
-                className={styles.selectOption}
-                data-testid="select-option"
-                style={{
-                  backgroundColor: selected
-                    ? 'var(--affine-hover-color)'
-                    : undefined,
-                }}
+              <MenuItem
+                data-testid={`multi-select-${option.label}`}
+                checked={selected}
                onClick={click}
                key={option.value}
              >
-                <div className={styles.optionLabel}>{option.label}</div>
-                <div
-                  style={{ opacity: selected ? 1 : 0 }}
-                  className={styles.done}
-                >
-                  <DoneIcon />
-                </div>
-              </div>
+                {option.label}
+              </MenuItem>
            );
          })}
        </div>
--- a/packages/component/src/components/page-list/filter/vars.tsx
+++ b/packages/component/src/components/page-list/filter/vars.tsx
@ -5,10 +5,10 @@ import type {
  VariableMap,
 } from '@affine/env/filter';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { MenuIcon, MenuItem } from '@toeverything/components/menu';
 import dayjs from 'dayjs';
 import type { ReactNode } from 'react';

-import { MenuItem } from '../../../ui/menu';
 import { FilterTag } from './filter-tag-translation';
 import * as styles from './index.css';
 import { tBoolean, tDate, tTag } from './logical/custom-type';
@ -92,7 +92,7 @@ export const VariableSelect = ({
        // .filter(v => !selected.find(filter => filter.left.name === v.name))
        .map(v => (
          <MenuItem
-            icon={variableDefineMap[v.name].icon}
+            preFix={<MenuIcon>{variableDefineMap[v.name].icon}</MenuIcon>}
            key={v.name}
            onClick={() => {
              onSelect(createDefaultFilter(v, propertiesMeta));
--- a/packages/component/src/components/page-list/operation-cell.tsx
+++ b/packages/component/src/components/page-list/operation-cell.tsx
@ -9,10 +9,11 @@ import {
  ResetIcon,
 } from '@blocksuite/icons';
 import { IconButton } from '@toeverything/components/button';
+import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
 import { Tooltip } from '@toeverything/components/tooltip';
 import { useState } from 'react';

-import { Confirm, FlexWrapper, Menu, MenuItem } from '../../..';
+import { Confirm, FlexWrapper } from '../../..';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';

 export interface OperationCellProps {
@ -43,31 +44,40 @@ export const OperationCell = ({
      {isPublic && (
        <DisablePublicSharing
          data-testid="disable-public-sharing"
-          onItemClick={() => {
+          onSelect={() => {
            setOpenDisableShared(true);
          }}
        />
      )}
      <MenuItem
        onClick={onToggleFavoritePage}
-        icon={
-          favorite ? (
-            <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
-          ) : (
-            <FavoriteIcon />
-          )
+        preFix={
+          <MenuIcon>
+            {favorite ? (
+              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
+            ) : (
+              <FavoriteIcon />
+            )}
+          </MenuIcon>
        }
      >
        {favorite ? t['Remove from favorites']() : t['Add to Favorites']()}
      </MenuItem>
      {!isDesktop && (
-        <MenuItem onClick={onOpenPageInNewTab} icon={<OpenInNewIcon />}>
+        <MenuItem
+          onClick={onOpenPageInNewTab}
+          preFix={
+            <MenuIcon>
+              <OpenInNewIcon />
+            </MenuIcon>
+          }
+        >
          {t['Open in new tab']()}
        </MenuItem>
      )}
      <MoveToTrash
        data-testid="move-to-trash"
-        onItemClick={() => {
+        onSelect={() => {
          setOpen(true);
        }}
      />
@ -76,13 +86,8 @@ export const OperationCell = ({
  return (
    <>
      <FlexWrapper alignItems="center" justifyContent="center">
-        <Menu
-          content={OperationMenu}
-          placement="bottom"
-          disablePortal={true}
-          trigger="click"
-        >
-          <IconButton data-testid="page-list-operation-button">
+        <Menu items={OperationMenu}>
+          <IconButton type="plain" data-testid="page-list-operation-button">
            <MoreVerticalIcon />
          </IconButton>
        </Menu>
--- a/packages/component/src/components/page-list/operation-menu-items/copy-link.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/copy-link.tsx
@ -1,36 +0,0 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { CopyIcon } from '@blocksuite/icons';
-import { useCallback } from 'react';
-
-import { MenuItem, toast } from '../../..';
-import type { CommonMenuItemProps } from './types';
-
-export const CopyLink = ({ onItemClick, onSelect }: CommonMenuItemProps) => {
-  const t = useAFFiNEI18N();
-
-  const copyUrl = useCallback(() => {
-    navigator.clipboard
-      .writeText(window.location.href)
-      .then(() => {
-        toast(t['Copied link to clipboard']());
-      })
-      .catch(err => {
-        // TODO add error toast here
-        console.error(err);
-      });
-  }, [t]);
-
-  return (
-    <MenuItem
-      data-testid="copy-link"
-      onClick={() => {
-        copyUrl();
-        onItemClick?.();
-        onSelect?.();
-      }}
-      icon={<CopyIcon />}
-    >
-      {t['Copy Link']()}
-    </MenuItem>
-  );
-};
--- a/packages/component/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/disable-public-sharing.tsx
@ -1,48 +1,27 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ShareIcon } from '@blocksuite/icons';
+import {
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@toeverything/components/menu';

-import { MenuItem, styled } from '../../../';
 import { PublicLinkDisableModal } from '../../share-menu';
-import type { CommonMenuItemProps } from './types';

-const StyledMenuItem = styled(MenuItem)(({ theme }) => {
-  return {
-    div: {
-      color: theme.palette.error.main,
-      svg: {
-        color: theme.palette.error.main,
-      },
-    },
-    ':hover': {
-      div: {
-        color: theme.palette.error.main,
-        svg: {
-          color: theme.palette.error.main,
-        },
-      },
-    },
-  };
-});
-export const DisablePublicSharing = ({
-  onSelect,
-  onItemClick,
-  ...props
-}: CommonMenuItemProps) => {
+export const DisablePublicSharing = (props: MenuItemProps) => {
  const t = useAFFiNEI18N();
  return (
-    <>
-      <StyledMenuItem
-        {...props}
-        onClick={() => {
-          onItemClick?.();
-          onSelect?.();
-        }}
-        style={{ color: 'red' }}
-        icon={<ShareIcon />}
-      >
-        {t['Disable Public Sharing']()}
-      </StyledMenuItem>
-    </>
+    <MenuItem
+      type="danger"
+      preFix={
+        <MenuIcon>
+          <ShareIcon />
+        </MenuIcon>
+      }
+      {...props}
+    >
+      {t['Disable Public Sharing']()}
+    </MenuItem>
  );
 };

--- a/packages/component/src/components/page-list/operation-menu-items/export.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/export.tsx
@ -2,36 +2,22 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageBlockModel } from '@blocksuite/blocks';
 import {
-  ArrowRightSmallIcon,
  ExportIcon,
  ExportToHtmlIcon,
  ExportToMarkdownIcon,
  ExportToPdfIcon,
  ExportToPngIcon,
 } from '@blocksuite/icons';
+import { MenuIcon, MenuItem, MenuSub } from '@toeverything/components/menu';
 import { useSetAtom } from 'jotai';
 import { useCallback } from 'react';

-import { Menu, MenuItem } from '../../..';
 import { getContentParser } from './get-content-parser';
 import type { CommonMenuItemProps } from './types';

-type ExportMenuItemProps = {
-  iconSize?: number;
-  gap?: string;
-  fontSize?: string;
-};
-const MenuItemStyle = {
-  padding: '4px 12px',
-};
-
 export const ExportToPdfMenuItem = ({
  onSelect,
-  style = MenuItemStyle,
-  iconSize,
-  gap,
-  fontSize,
-}: CommonMenuItemProps<{ type: 'pdf' }> & ExportMenuItemProps) => {
+}: CommonMenuItemProps<{ type: 'pdf' }>) => {
  const t = useAFFiNEI18N();
  const { currentEditor } = globalThis;
  const setPushNotification = useSetAtom(pushNotificationAtom);
@ -89,12 +75,12 @@ export const ExportToPdfMenuItem = ({
  return (
    <MenuItem
      data-testid="export-to-pdf"
-      onClick={onClickDownloadPDF}
-      icon={<ExportToPdfIcon />}
-      style={style}
-      iconSize={iconSize}
-      gap={gap}
-      fontSize={fontSize}
+      onSelect={onClickDownloadPDF}
+      preFix={
+        <MenuIcon>
+          <ExportToPdfIcon />
+        </MenuIcon>
+      }
    >
      {t['Export to PDF']()}
    </MenuItem>
@ -103,11 +89,7 @@ export const ExportToPdfMenuItem = ({

 export const ExportToHtmlMenuItem = ({
  onSelect,
-  style = MenuItemStyle,
-  iconSize,
-  gap,
-  fontSize,
-}: CommonMenuItemProps<{ type: 'html' }> & ExportMenuItemProps) => {
+}: CommonMenuItemProps<{ type: 'html' }>) => {
  const t = useAFFiNEI18N();
  const { currentEditor } = globalThis;
  const setPushNotification = useSetAtom(pushNotificationAtom);
@ -140,12 +122,12 @@ export const ExportToHtmlMenuItem = ({
    <>
      <MenuItem
        data-testid="export-to-html"
-        onClick={onClickExportHtml}
-        icon={<ExportToHtmlIcon />}
-        style={style}
-        iconSize={iconSize}
-        gap={gap}
-        fontSize={fontSize}
+        onSelect={onClickExportHtml}
+        preFix={
+          <MenuIcon>
+            <ExportToHtmlIcon />
+          </MenuIcon>
+        }
      >
        {t['Export to HTML']()}
      </MenuItem>
@ -155,11 +137,7 @@ export const ExportToHtmlMenuItem = ({

 export const ExportToPngMenuItem = ({
  onSelect,
-  style = MenuItemStyle,
-  iconSize,
-  gap,
-  fontSize,
-}: CommonMenuItemProps<{ type: 'png' }> & ExportMenuItemProps) => {
+}: CommonMenuItemProps<{ type: 'png' }>) => {
  const t = useAFFiNEI18N();
  const { currentEditor } = globalThis;
  const setPushNotification = useSetAtom(pushNotificationAtom);
@ -194,12 +172,12 @@ export const ExportToPngMenuItem = ({
    <>
      <MenuItem
        data-testid="export-to-png"
-        onClick={onClickDownloadPNG}
-        icon={<ExportToPngIcon />}
-        style={style}
-        iconSize={iconSize}
-        gap={gap}
-        fontSize={fontSize}
+        onSelect={onClickDownloadPNG}
+        preFix={
+          <MenuIcon>
+            <ExportToPngIcon />
+          </MenuIcon>
+        }
      >
        {t['Export to PNG']()}
      </MenuItem>
@ -209,11 +187,7 @@ export const ExportToPngMenuItem = ({

 export const ExportToMarkdownMenuItem = ({
  onSelect,
-  style = MenuItemStyle,
-  iconSize,
-  gap,
-  fontSize,
-}: CommonMenuItemProps<{ type: 'markdown' }> & ExportMenuItemProps) => {
+}: CommonMenuItemProps<{ type: 'markdown' }>) => {
  const t = useAFFiNEI18N();
  const { currentEditor } = globalThis;
  const setPushNotification = useSetAtom(pushNotificationAtom);
@ -246,12 +220,12 @@ export const ExportToMarkdownMenuItem = ({
    <>
      <MenuItem
        data-testid="export-to-markdown"
-        onClick={onClickExportMarkdown}
-        icon={<ExportToMarkdownIcon />}
-        style={style}
-        iconSize={iconSize}
-        gap={gap}
-        fontSize={fontSize}
+        onSelect={onClickExportMarkdown}
+        preFix={
+          <MenuIcon>
+            <ExportToMarkdownIcon />
+          </MenuIcon>
+        }
      >
        {t['Export to Markdown']()}
      </MenuItem>
@ -259,16 +233,12 @@ export const ExportToMarkdownMenuItem = ({
  );
 };

-export const Export = ({
-  onItemClick,
-}: CommonMenuItemProps<{ type: 'markdown' | 'html' | 'pdf' | 'png' }>) => {
+// fixme: refactor this file, export function may should be passed by 'props', this file is just a ui component
+export const Export = () => {
  const t = useAFFiNEI18N();
  return (
-    <Menu
-      width={248}
-      trigger="hover"
-      placement="right-start"
-      content={
+    <MenuSub
+      items={
        <>
          <ExportToPdfMenuItem></ExportToPdfMenuItem>
          <ExportToHtmlMenuItem></ExportToHtmlMenuItem>
@ -276,24 +246,16 @@ export const Export = ({
          <ExportToMarkdownMenuItem></ExportToMarkdownMenuItem>
        </>
      }
-      menuStyles={{
-        borderRadius: '8px',
-        padding: '8px',
-        background: 'var(--affine-background-overlay-panel-color)',
+      triggerOptions={{
+        preFix: (
+          <MenuIcon>
+            <ExportIcon />
+          </MenuIcon>
+        ),
+        ['data-testid' as string]: 'export-menu',
      }}
    >
-      <MenuItem
-        data-testid="export-menu"
-        icon={<ExportIcon />}
-        endIcon={<ArrowRightSmallIcon />}
-        style={MenuItemStyle}
-        onClick={e => {
-          e.stopPropagation();
-          onItemClick?.();
-        }}
-      >
-        {t.Export()}
-      </MenuItem>
-    </Menu>
+      {t.Export()}
+    </MenuSub>
  );
 };
--- a/packages/component/src/components/page-list/operation-menu-items/index.ts
+++ b/packages/component/src/components/page-list/operation-menu-items/index.ts
@ -1,4 +1,3 @@
-export * from './copy-link';
 export * from './disable-public-sharing';
 export * from './export';
 // export * from './MoveTo';
--- a/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
+++ b/packages/component/src/components/page-list/operation-menu-items/move-to-trash.tsx
@ -1,31 +1,28 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { DeleteTemporarilyIcon } from '@blocksuite/icons';
+import {
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+} from '@toeverything/components/menu';

 import type { ConfirmProps } from '../../..';
-import { Confirm, MenuItem } from '../../..';
-import { moveToTrashStyle } from './index.css';
-import type { CommonMenuItemProps } from './types';
-export const MoveToTrash = ({
-  onSelect,
-  onItemClick,
-  ...props
-}: CommonMenuItemProps) => {
+import { Confirm } from '../../..';
+export const MoveToTrash = (props: MenuItemProps) => {
  const t = useAFFiNEI18N();

  return (
-    <>
-      <MenuItem
-        {...props}
-        onClick={() => {
-          onItemClick?.();
-          onSelect?.();
-        }}
-        icon={<DeleteTemporarilyIcon />}
-        className={moveToTrashStyle}
-      >
-        {t['Move to Trash']()}
-      </MenuItem>
-    </>
+    <MenuItem
+      preFix={
+        <MenuIcon>
+          <DeleteTemporarilyIcon />
+        </MenuIcon>
+      }
+      type="danger"
+      {...props}
+    >
+      {t['Move to Trash']()}
+    </MenuItem>
  );
 };

--- a/packages/component/src/components/page-list/view/collection-list.tsx
+++ b/packages/component/src/components/page-list/view/collection-list.tsx
@ -6,13 +6,12 @@ import type { GetPageInfoById } from '@affine/env/page-info';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { FilteredIcon, FolderIcon, ViewLayersIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Menu, MenuIcon, MenuItem } from '@toeverything/components/menu';
 import { Tooltip } from '@toeverything/components/tooltip';
 import clsx from 'clsx';
 import type { MouseEvent } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';

-import { MenuItem } from '../../..';
-import Menu from '../../../ui/menu/menu';
 import { CreateFilterMenu } from '../filter/vars';
 import type { useCollectionManager } from '../use-collection-manager';
 import * as styles from './collection-list.css';
@ -40,7 +39,11 @@ const CollectionOption = ({
  return (
    <MenuItem
      data-testid="collection-select-option"
-      icon={<ViewLayersIcon></ViewLayersIcon>}
+      preFix={
+        <MenuIcon>
+          <ViewLayersIcon />
+        </MenuIcon>
+      }
      onClick={selectCollection}
      key={collection.id}
      className={styles.viewMenu}
@ -107,6 +110,7 @@ export const CollectionList = ({
  getPageInfo: GetPageInfoById;
  propertiesMeta: PropertiesMeta;
 }) => {
+  const ref = useRef(null);
  const t = useAFFiNEI18N();
  const [collection, setCollection] = useState<Collection>();
  const onChange = useCallback(
@ -134,14 +138,20 @@ export const CollectionList = ({
    [closeUpdateCollectionModal, setting]
  );
  return (
-    <FlexWrapper alignItems="center">
+    <FlexWrapper alignItems="center" ref={ref}>
      {setting.savedCollections.length > 0 && (
        <Menu
-          trigger="click"
-          content={
+          portalOptions={{
+            container: ref.current,
+          }}
+          items={
            <div style={{ minWidth: 150 }}>
              <MenuItem
-                icon={<FolderIcon></FolderIcon>}
+                preFix={
+                  <MenuIcon>
+                    <FolderIcon />
+                  </MenuIcon>
+                }
                onClick={setting.backToAll}
                className={styles.viewMenu}
              >
@ -184,17 +194,22 @@ export const CollectionList = ({
        </Menu>
      )}
      <Menu
-        trigger="click"
-        placement="bottom-start"
-        content={
+        items={
          <CreateFilterMenu
            propertiesMeta={propertiesMeta}
            value={setting.currentCollection.filterList}
            onChange={onChange}
          />
        }
+        portalOptions={{
+          container: ref.current,
+        }}
      >
-        <Button icon={<FilteredIcon />} data-testid="create-first-filter">
+        <Button
+          type="default"
+          icon={<FilteredIcon />}
+          data-testid="create-first-filter"
+        >
          {t['com.affine.filter']()}
        </Button>
      </Menu>
--- a/packages/component/src/components/share-menu/share-export.tsx
+++ b/packages/component/src/components/share-menu/share-export.tsx
@ -17,26 +17,10 @@ export const ShareExport = () => {
        {t['com.affine.share-menu.ShareViaExport']()}
      </div>
      <div>
-        <ExportToPdfMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
-        <ExportToHtmlMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
-        <ExportToPngMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
-        <ExportToMarkdownMenuItem
-          style={{ padding: '4px' }}
-          iconSize={16}
-          gap={'4px'}
-        />
+        <ExportToPdfMenuItem />
+        <ExportToHtmlMenuItem />
+        <ExportToPngMenuItem />
+        <ExportToMarkdownMenuItem />
      </div>
      <div className={styles.columnContainerStyle}>
        <div className={styles.descriptionStyle}>
--- a/packages/component/src/components/share-menu/share-menu.tsx
+++ b/packages/component/src/components/share-menu/share-menu.tsx
@ -8,12 +8,10 @@ import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { Page } from '@blocksuite/store';
 import { Button } from '@toeverything/components/button';
 import { Divider } from '@toeverything/components/divider';
-import { useAtom } from 'jotai';
-import { useCallback } from 'react';
+import { Menu } from '@toeverything/components/menu';
+import { useRef } from 'react';

-import { Menu } from '../../ui/menu/menu';
 import * as styles from './index.css';
-import { enableShareMenuAtom } from './index.jotai';
 import { ShareExport } from './share-export';
 import { SharePage } from './share-page';

@ -35,11 +33,11 @@ export interface ShareMenuProps<

 export const ShareMenu = (props: ShareMenuProps) => {
  const { useIsSharedPage } = props;
+  const ref = useRef(null);
  const isSharedPage = useIsSharedPage(
    props.workspace.id,
    props.currentPage.id
  );
-  const [open, setOpen] = useAtom(enableShareMenuAtom);
  const t = useAFFiNEI18N();
  const content = (
    <div className={styles.containerStyle}>
@ -52,28 +50,12 @@ export const ShareMenu = (props: ShareMenuProps) => {
  );
  return (
    <Menu
-      menuStyles={{
-        padding: '12px',
-        background: 'var(--affine-background-overlay-panel-color)',
-        transform: 'translateX(-10px)',
+      items={content}
+      portalOptions={{
+        container: ref.current,
      }}
-      content={content}
-      visible={open}
-      placement="bottom"
-      trigger={['click']}
-      width={410}
-      disablePortal={true}
-      onClickAway={useCallback(() => {
-        setOpen(false);
-      }, [setOpen])}
    >
-      <Button
-        data-testid="share-menu-button"
-        onClick={useCallback(() => {
-          setOpen(value => !value);
-        }, [setOpen])}
-        type={'plain'}
-      >
+      <Button data-testid="share-menu-button" type="plain" ref={ref}>
        <div
          style={{
            color: isSharedPage
--- a/packages/component/src/components/share-menu/share-page.tsx
+++ b/packages/component/src/components/share-menu/share-page.tsx
@ -1,15 +1,9 @@
-import {
-  Menu,
-  MenuItem,
-  MenuTrigger,
-  RadioButton,
-  RadioButtonGroup,
-  Switch,
-} from '@affine/component';
+import { RadioButton, RadioButtonGroup, Switch } from '@affine/component';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { ArrowRightSmallIcon, WebIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
 import { useState } from 'react';
 import { useCallback, useMemo } from 'react';

@ -186,20 +180,8 @@ export const AffineSharePage = (props: ShareMenuProps) => {
              <div className={styles.rowContainerStyle}>
                <div className={styles.subTitleStyle}>Link expires</div>
                <div>
-                  <Menu
-                    content={<MenuItem>Never</MenuItem>}
-                    placement="bottom-end"
-                    trigger="click"
-                  >
-                    <MenuTrigger
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '4px 6px 4px 10px',
-                      }}
-                    >
-                      Never
-                    </MenuTrigger>
+                  <Menu items={<MenuItem>Never</MenuItem>}>
+                    <MenuTrigger>Never</MenuTrigger>
                  </Menu>
                </div>
              </div>
--- a/packages/component/src/ui/menu/index.ts
+++ b/packages/component/src/ui/menu/index.ts
@ -1,5 +1,6 @@
-export * from './menu';
-// export { StyledMenuItem as MenuItem } from './styles';
+/**
+ * @deprecated
+ * Use @toeverything/components/menu instead, this component only used in bookmark plugin, since it support set anchor as Range
+ */
 export * from './menu-item';
-export * from './menu-trigger';
 export * from './pure-menu';
--- a/packages/component/src/ui/menu/menu-trigger.tsx
+++ b/packages/component/src/ui/menu/menu-trigger.tsx
@ -1,20 +0,0 @@
-import { ArrowDownSmallIcon } from '@blocksuite/icons';
-import { Button, type ButtonProps } from '@toeverything/components/button';
-import { forwardRef } from 'react';
-
-export const MenuTrigger = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Button
-        // type="plain"
-        ref={ref}
-        icon={<ArrowDownSmallIcon />}
-        iconPosition="end"
-        {...props}
-      >
-        {children}
-      </Button>
-    );
-  }
-);
-MenuTrigger.displayName = 'MenuTrigger';
--- a/packages/component/src/ui/menu/menu.tsx
+++ b/packages/component/src/ui/menu/menu.tsx
@ -1,41 +0,0 @@
-import type { TooltipProps } from '@mui/material';
-import type { CSSProperties } from 'react';
-
-import { Popper, type PopperProps } from '../popper';
-import { StyledMenuWrapper } from './styles';
-
-export type MenuProps = {
-  width?: CSSProperties['width'];
-  menuStyles?: CSSProperties;
-} & PopperProps &
-  Omit<TooltipProps, 'title' | 'content' | 'placement'>;
-export const Menu = (props: MenuProps) => {
-  const {
-    width,
-    menuStyles,
-    content,
-    placement = 'bottom-start',
-    children,
-    ...popperProps
-  } = props;
-  return content ? (
-    <Popper
-      placement={placement}
-      {...popperProps}
-      showArrow={false}
-      content={
-        <StyledMenuWrapper
-          width={width}
-          placement={placement}
-          style={menuStyles}
-        >
-          {content}
-        </StyledMenuWrapper>
-      }
-    >
-      {children}
-    </Popper>
-  ) : null;
-};
-
-export default Menu;
--- a/plugins/bookmark/package.json
+++ b/plugins/bookmark/package.json
@ -20,7 +20,7 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.31",
+    "@blocksuite/icons": "^2.1.32",
    "foxact": "^0.2.20",
    "link-preview-js": "^3.0.5"
  },
--- a/plugins/copilot/package.json
+++ b/plugins/copilot/package.json
@ -16,7 +16,7 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@toeverything/components": "^0.0.25",
+    "@toeverything/components": "^0.0.31",
    "idb": "^7.1.1",
    "langchain": "^0.0.138",
    "marked": "^7.0.5",
--- a/plugins/hello-world/package.json
+++ b/plugins/hello-world/package.json
@ -17,8 +17,8 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.25"
+    "@blocksuite/icons": "^2.1.32",
+    "@toeverything/components": "^0.0.31"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*"
--- a/plugins/image-preview/package.json
+++ b/plugins/image-preview/package.json
@ -17,7 +17,7 @@
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
    "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.25",
+    "@toeverything/components": "^0.0.31",
    "@toeverything/theme": "^0.7.15",
    "clsx": "^2.0.0",
    "foxact": "^0.2.20",
--- a/plugins/outline/package.json
+++ b/plugins/outline/package.json
@ -17,8 +17,8 @@
  "dependencies": {
    "@affine/component": "workspace:*",
    "@affine/sdk": "workspace:*",
-    "@blocksuite/icons": "^2.1.31",
-    "@toeverything/components": "^0.0.25"
+    "@blocksuite/icons": "^2.1.32",
+    "@toeverything/components": "^0.0.31"
  },
  "devDependencies": {
    "@affine/plugin-cli": "workspace:*",
--- a/tests/affine-local/e2e/all-page.spec.ts
+++ b/tests/affine-local/e2e/all-page.spec.ts
@ -29,7 +29,7 @@ function getAllPage(page: Page) {
    .locator('table')
    .getByRole('button', { name: 'New Page' });
  const newPageDropdown = newPageButton.locator('svg');
-  const edgelessBlockCard = page.locator('table').getByText('New Edgeless');
+  const edgelessBlockCard = page.getByTestId('new-edgeless-button-in-all-page');

  async function clickNewPageButton() {
    return newPageButton.click();
@ -106,11 +106,8 @@ test('allow creation of filters by created time', async ({ page }) => {
  await fillDatePicker(page, today);
  await checkPagesCount(page, 0);
  // change filter
-  await page.locator('[data-testid="filter-name"]').click();
-  await page
-    .locator('[data-testid="filter-name-select"]')
-    .locator('button', { hasText: 'before' })
-    .click();
+  await page.getByTestId('filter-name').click();
+  await page.getByTestId('filler-tag-before').click();
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  await fillDatePicker(page, tomorrow);
@ -142,10 +139,7 @@ test('creation of filters by created time, then click date picker to modify the
  await checkPagesCount(page, 0);
  // change filter
  await page.locator('[data-testid="filter-name"]').click();
-  await page
-    .locator('[data-testid="filter-name-select"]')
-    .locator('button', { hasText: 'before' })
-    .click();
+  await page.getByTestId('filler-tag-before').click();
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  await selectDateFromDatePicker(page, tomorrow);
@ -196,11 +190,11 @@ test('allow creation of filters by tags', async ({ page }) => {
  await createFirstFilter(page, 'Tags');
  await checkFilterName(page, 'is not empty');
  await checkPagesCount(page, pagesWithTagsCount + 2);
-  await changeFilter(page, /^contains all/);
+  await changeFilter(page, 'contains all');
  await checkPagesCount(page, pageCount + 2);
  await selectTag(page, 'A');
  await checkPagesCount(page, 1);
-  await changeFilter(page, /^does not contains all/);
+  await changeFilter(page, 'does not contains all');
  await selectTag(page, 'B');
  await checkPagesCount(page, pageCount + 1);
 });
--- a/tests/affine-local/e2e/local-first-collections-items.spec.ts
+++ b/tests/affine-local/e2e/local-first-collections-items.spec.ts
@ -29,10 +29,7 @@ const createAndPinCollection = async (
  });
  await expect(cell).toBeVisible();
  await page.getByTestId('create-first-filter').click();
-  await page
-    .getByTestId('variable-select')
-    .locator('button', { hasText: 'Created' })
-    .click();
+  await page.getByTestId(`filler-tag-Created`).click();
  await page.getByTestId('save-as-collection').click();
  const title = page.getByTestId('input-collection-title');
  await title.isVisible();
@ -156,7 +153,8 @@ test('create temporary filter by click tag', async ({ page }) => {
  await expect(cell).toBeVisible();
  expect(await page.getByTestId('title').count()).toBe(1);
  await page.getByTestId('filter-arg').click();
-  await page.getByRole('tooltip').getByText('TODO Tag').click();
+
+  await page.getByTestId('multi-select-TODO Tag').click();
  expect(await page.getByTestId('title').count()).toBeGreaterThanOrEqual(2);
 });

--- a/tests/affine-local/e2e/local-first-favorite-page.spec.ts
+++ b/tests/affine-local/e2e/local-first-favorite-page.spec.ts
@ -38,7 +38,7 @@ test('Export to html, markdown and png', async ({ page }) => {
  await waitForEditorLoad(page);
  {
    await clickPageMoreActions(page);
-    await page.getByTestId('export-menu').click();
+    await page.getByTestId('export-menu').hover();
    const downloadPromise = page.waitForEvent('download');
    await page.getByTestId('export-to-markdown').click();
    await downloadPromise;
--- a/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts
+++ b/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts
@ -25,7 +25,7 @@ test('click btn bew page and open in tab', async ({ page, workspace }) => {
    .click();
  const [newTabPage] = await Promise.all([
    page.waitForEvent('popup'),
-    page.getByRole('button', { name: 'Open in new tab' }).click(),
+    page.getByRole('menuitem', { name: 'Open in new tab' }).click(),
  ]);

  expect(newTabPage.url()).toBe(newPageUrl);
--- a/tests/affine-local/e2e/settings.spec.ts
+++ b/tests/affine-local/e2e/settings.spec.ts
@ -39,18 +39,6 @@ test('change language using keyboard', async ({ page }) => {
    const newName = await locator.textContent();
    expect(oldName).not.toBe(newName);
  }
-  await locator.click();
-  await page.waitForTimeout(200);
-  await page.keyboard.press('ArrowUp', {
-    delay: 50,
-  });
-  await page.keyboard.press('Enter', {
-    delay: 50,
-  });
-  {
-    const newName = await locator.textContent();
-    expect(oldName).toBe(newName);
-  }
 });

 test('Change theme', async ({ page }) => {
--- a/tests/kit/utils/filter.ts
+++ b/tests/kit/utils/filter.ts
@ -200,20 +200,12 @@ export const createPageWithTag = async (
  await page.keyboard.press('Escape');
 };

-export const changeFilter = async (page: Page, to: string | RegExp) => {
+export const changeFilter = async (page: Page, to: string) => {
  await page.getByTestId('filter-name').click();
-  await page
-    .getByTestId('filter-name-select')
-    .locator('button', { hasText: to })
-    .click();
+  await page.getByTestId(`filler-tag-${to}`).click();
 };

 export async function selectTag(page: Page, name: string | RegExp) {
  await page.getByTestId('filter-arg').click();
-  await page
-    .getByTestId('multi-select')
-    .getByTestId('select-option')
-    .getByText(name, { exact: true })
-    .click();
-  await page.getByTestId('filter-arg').click();
+  await page.getByTestId(`multi-select-${name}`).click();
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -121,7 +121,7 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@blocksuite/icons": ^2.1.31
+    "@blocksuite/icons": ^2.1.32
    foxact: ^0.2.20
    link-preview-js: ^3.0.5
  languageName: unknown
@ -154,7 +154,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/editor": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/global": 0.0.0-20230829150056-df43987c-nightly
-    "@blocksuite/icons": ^2.1.31
+    "@blocksuite/icons": ^2.1.32
    "@blocksuite/lit": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/store": 0.0.0-20230829150056-df43987c-nightly
    "@dnd-kit/core": ^6.0.8
@ -212,7 +212,7 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@toeverything/components": ^0.0.25
+    "@toeverything/components": ^0.0.31
    "@types/marked": ^5.0.1
    idb: ^7.1.1
    jotai: ^2.4.1
@ -247,7 +247,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/editor": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/global": 0.0.0-20230829150056-df43987c-nightly
-    "@blocksuite/icons": ^2.1.31
+    "@blocksuite/icons": ^2.1.32
    "@blocksuite/lit": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/store": 0.0.0-20230829150056-df43987c-nightly
    "@dnd-kit/core": ^6.0.8
@ -264,7 +264,7 @@ __metadata:
    "@sentry/webpack-plugin": ^2.7.0
    "@svgr/webpack": ^8.1.0
    "@swc/core": ^1.3.81
-    "@toeverything/components": ^0.0.25
+    "@toeverything/components": ^0.0.31
    "@types/lodash-es": ^4.17.9
    "@types/webpack-env": ^1.18.1
    async-call-rpc: ^6.3.1
@ -439,8 +439,8 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.25
+    "@blocksuite/icons": ^2.1.32
+    "@toeverything/components": ^0.0.31
  languageName: unknown
  linkType: soft

@ -466,7 +466,7 @@ __metadata:
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
    "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.25
+    "@toeverything/components": ^0.0.31
    "@toeverything/theme": ^0.7.15
    clsx: ^2.0.0
    foxact: ^0.2.20
@ -584,8 +584,8 @@ __metadata:
    "@affine/component": "workspace:*"
    "@affine/plugin-cli": "workspace:*"
    "@affine/sdk": "workspace:*"
-    "@blocksuite/icons": ^2.1.31
-    "@toeverything/components": ^0.0.25
+    "@blocksuite/icons": ^2.1.32
+    "@toeverything/components": ^0.0.31
    jotai: ^2.4.1
    react: 18.2.0
    react-dom: 18.2.0
@ -626,7 +626,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/editor": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/global": 0.0.0-20230829150056-df43987c-nightly
-    "@blocksuite/icons": ^2.1.31
+    "@blocksuite/icons": ^2.1.32
    "@blocksuite/lit": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/store": 0.0.0-20230829150056-df43987c-nightly
    "@toeverything/hooks": "workspace:*"
@ -762,7 +762,7 @@ __metadata:
    "@blocksuite/blocks": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/editor": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/global": 0.0.0-20230829150056-df43987c-nightly
-    "@blocksuite/icons": ^2.1.31
+    "@blocksuite/icons": ^2.1.32
    "@blocksuite/lit": 0.0.0-20230829150056-df43987c-nightly
    "@blocksuite/store": 0.0.0-20230829150056-df43987c-nightly
    "@storybook/addon-actions": ^7.4.0
@ -3525,7 +3525,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@blocksuite/icons@npm:^2.1.30, @blocksuite/icons@npm:^2.1.31":
+"@blocksuite/icons@npm:^2.1.31":
  version: 2.1.31
  resolution: "@blocksuite/icons@npm:2.1.31"
  peerDependencies:
@ -3535,6 +3535,26 @@ __metadata:
  languageName: node
  linkType: hard

+"@blocksuite/icons@npm:^2.1.32":
+  version: 2.1.32
+  resolution: "@blocksuite/icons@npm:2.1.32"
+  peerDependencies:
+    "@types/react": ^18.0.25
+    react: ^18.2.0
+  checksum: 76179a20fd67c9a5c7756439b25636bd550509ddc34951243a6a42a7f95cd7427591e16b87a2ebbac09e3fadef1a62e4ec30de31d419872c27f1130cb58f4c38
+  languageName: node
+  linkType: hard
+
+"@blocksuite/icons@npm:^2.1.33":
+  version: 2.1.33
+  resolution: "@blocksuite/icons@npm:2.1.33"
+  peerDependencies:
+    "@types/react": ^18.0.25
+    react: ^18.2.0
+  checksum: b29f5ffb19f09937a9053028b1fd70e497f54be82673b91889a2b9d2b23e2f853872415bd638f81dc4917370f555c330573139e4a58d88c588d04a0111f5117b
+  languageName: node
+  linkType: hard
+
 "@blocksuite/lit@npm:0.0.0-20230829150056-df43987c-nightly":
  version: 0.0.0-20230829150056-df43987c-nightly
  resolution: "@blocksuite/lit@npm:0.0.0-20230829150056-df43987c-nightly"
@ -12451,11 +12471,11 @@ __metadata:
  languageName: node
  linkType: hard

-"@toeverything/components@npm:^0.0.25":
-  version: 0.0.25
-  resolution: "@toeverything/components@npm:0.0.25"
+"@toeverything/components@npm:^0.0.31":
+  version: 0.0.31
+  resolution: "@toeverything/components@npm:0.0.31"
  dependencies:
-    "@blocksuite/icons": ^2.1.30
+    "@blocksuite/icons": ^2.1.33
    "@radix-ui/react-dropdown-menu": ^2.0.5
    "@radix-ui/react-tooltip": ^1.0.6
  peerDependencies:
@ -12463,7 +12483,7 @@ __metadata:
    clsx: ^2
    react: ^18
    react-dom: ^18
-  checksum: e4f5b49c81c9ef78e72ccb5e097d36796793865302f346d64f9eb5016e9ef6e1936047439aa698fde9e52d96ec5a1c5e6f4877bc04c71f69e7091c60c427e981
+  checksum: a47263e25c9b6f987cc97d75cbf515a41ca7cce26f67c7c2017ad0e1331d5e4e59c50b1b511970fd28210e3437dfb19a83016678c3c633f0110065b6156ce289
  languageName: node
  linkType: hard