feat(component): mobile menu support (#7892)

2026-07-19 02:56:23 +08:00 · 2024-08-21 17:05:05 +08:00
parent 182b2fd62d
commit 23b0db36b9
57 changed files with 988 additions and 1482 deletions
@@ -20,7 +20,7 @@ const LanguageMenuContent = memo(function LanguageMenuContent() {
            title={option.name}
            lang={option.tag}
            onSelect={() => onLanguageChange(option.tag)}
-            endFix={(option.Completeness * 100).toFixed(0) + '%'}
+            suffix={(option.Completeness * 100).toFixed(0) + '%'}
            data-selected={selected}
            className={styles.menuItem}
          >
@@ -1,11 +1,5 @@
 import type { MenuItemProps } from '@affine/component';
-import {
-  Input,
-  MenuIcon,
-  MenuItem,
-  MenuSeparator,
-  Scrollable,
-} from '@affine/component';
+import { Input, MenuItem, MenuSeparator, Scrollable } from '@affine/component';
 import type { PageInfoCustomPropertyMeta } from '@affine/core/modules/properties/services/schema';
 import { useI18n } from '@affine/i18n';
 import type { KeyboardEventHandler, MouseEventHandler } from 'react';
@@ -61,7 +55,7 @@ export const renderMenuItemOptions = (options: MenuItemOption[]) => {
          type={type}
          selected={selected}
          checked={checked}
-          preFix={icon ? <MenuIcon>{icon}</MenuIcon> : null}
+          prefixIcon={icon}
          onClick={onClick}
        >
          {text}
@@ -1,12 +1,5 @@
 import type { MenuProps } from '@affine/component';
-import {
-  Button,
-  IconButton,
-  Menu,
-  MenuIcon,
-  MenuItem,
-  Tooltip,
-} from '@affine/component';
+import { Button, IconButton, Menu, MenuItem, Tooltip } from '@affine/component';
 import { useCurrentWorkspacePropertiesAdapter } from '@affine/core/hooks/use-affine-adapter';
 import { track } from '@affine/core/mixpanel';
 import { DocLinksService } from '@affine/core/modules/doc-link';
@@ -346,9 +339,7 @@ export const PagePropertiesSettingsPopup = ({
                className={styles.propertySettingRow}
                data-testid="page-properties-settings-menu-item"
              >
-                <MenuIcon>
-                  <Icon />
-                </MenuIcon>
+                <Icon />
                <div
                  data-testid="page-property-setting-row-name"
                  className={styles.propertyRowName}
@@ -25,19 +25,11 @@ export const menuTriggerStyle = style({
  padding: '4px 10px',
  justifyContent: 'space-between',
 });
-export const menuItemStyle = style({
-  padding: '4px',
-});
 export const publicItemRowStyle = style({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
 });
-export const publicMenuItemPrefixStyle = style({
-  fontSize: cssVar('fontH5'),
-  color: cssVarV2('icon/primary'),
-  marginRight: '8px',
-});
 export const DoneIconStyle = style({
  color: cssVarV2('button/primary'),
  fontSize: cssVar('fontH5'),
@@ -66,7 +58,6 @@ export const copyLinkButtonStyle = style({
 });
 export const copyLinkLabelContainerStyle = style({
  width: '100%',
-  padding: '4px 12px',
  borderRight: 'none',
  borderTopRightRadius: '0',
  borderBottomRightRadius: '0',
@@ -92,18 +83,7 @@ export const copyLinkShortcutStyle = style({
  color: cssVarV2('text/pureWhite'),
 });
 export const copyLinkTriggerStyle = style({
-  width: '100%',
-  padding: '4px 12px',
-  paddingLeft: '4px',
-  display: 'flex',
-  border: `1px solid ${cssVarV2('button/innerBlackBorder')}`,
-  flex: 0,
-  justifyContent: 'end',
-  alignItems: 'center',
-  gap: '4px',
-  position: 'relative',
-  backgroundColor: cssVarV2('button/primary'),
-  color: cssVarV2('button/pureWhiteText'),
+  padding: '4px 12px 4px 8px',
  borderLeft: 'none',
  borderTopLeftRadius: '0',
  borderBottomLeftRadius: '0',
@@ -111,7 +91,7 @@ export const copyLinkTriggerStyle = style({
    backgroundColor: cssVarV2('button/primary'),
    color: cssVarV2('button/pureWhiteText'),
  },
-  '::before': {
+  '::after': {
    content: '""',
    position: 'absolute',
    left: '0',
@@ -207,13 +207,7 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
            }}
            items={
              <>
-                <MenuItem
-                  preFix={
-                    <LockIcon className={styles.publicMenuItemPrefixStyle} />
-                  }
-                  onSelect={onClickDisable}
-                  className={styles.menuItemStyle}
-                >
+                <MenuItem prefixIcon={<LockIcon />} onSelect={onClickDisable}>
                  <div className={styles.publicItemRowStyle}>
                    <div>
                      {t['com.affine.share-menu.option.link.no-access']()}
@@ -224,10 +218,7 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
                  </div>
                </MenuItem>
                <MenuItem
-                  preFix={
-                    <ViewIcon className={styles.publicMenuItemPrefixStyle} />
-                  }
-                  className={styles.menuItemStyle}
+                  prefixIcon={<ViewIcon />}
                  onSelect={onClickAnyoneReadOnlyShare}
                  data-testid="share-link-menu-enable-share"
                >
@@ -295,7 +286,6 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
          <span className={styles.copyLinkShortcutStyle}>
            {isMac ? '⌘ + ⌥ + C' : 'Ctrl + Shift + C'}
          </span>
-          {t['com.affine.share-menu.copy']()}
        </Button>
        <Menu
          contentOptions={{
@@ -304,42 +294,24 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
          items={
            <>
              <MenuItem
-                preFix={
-                  <PageIcon className={styles.publicMenuItemPrefixStyle} />
-                }
-                className={styles.menuItemStyle}
+                prefixIcon={<PageIcon />}
                onSelect={onCopyPageLink}
                data-testid="share-link-menu-copy-page"
              >
                {t['com.affine.share-menu.copy.page']()}
              </MenuItem>
              <MenuItem
-                preFix={
-                  <EdgelessIcon className={styles.publicMenuItemPrefixStyle} />
-                }
-                className={styles.menuItemStyle}
+                prefixIcon={<EdgelessIcon />}
                onSelect={onCopyEdgelessLink}
                data-testid="share-link-menu-copy-edgeless"
              >
                {t['com.affine.share-menu.copy.edgeless']()}
              </MenuItem>
-              <MenuItem
-                preFix={
-                  <LinkIcon className={styles.publicMenuItemPrefixStyle} />
-                }
-                className={styles.menuItemStyle}
-                onSelect={onCopyBlockLink}
-              >
+              <MenuItem prefixIcon={<LinkIcon />} onSelect={onCopyBlockLink}>
                {t['com.affine.share-menu.copy.block']()}
              </MenuItem>
              {currentDocMode === 'edgeless' && (
-                <MenuItem
-                  preFix={
-                    <LinkIcon className={styles.publicMenuItemPrefixStyle} />
-                  }
-                  className={styles.menuItemStyle}
-                  onSelect={onCopyBlockLink}
-                >
+                <MenuItem prefixIcon={<LinkIcon />} onSelect={onCopyBlockLink}>
                  {t['com.affine.share-menu.copy.frame']()}
                </MenuItem>
              )}
@@ -347,8 +319,11 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
          }
        >
          <MenuTrigger
+            variant="primary"
            className={styles.copyLinkTriggerStyle}
            data-testid="share-menu-copy-link-button"
+            suffixStyle={{ width: 20, height: 20 }}
+            withoutHover
          />
        </Menu>
      </div>
@@ -1,7 +1,6 @@
 import { toast } from '@affine/component';
 import {
  Menu,
-  MenuIcon,
  MenuItem,
  MenuSeparator,
  MenuSub,
@@ -13,6 +12,7 @@ import {
 import { PageHistoryModal } from '@affine/core/components/affine/page-history-modal';
 import { ShareMenuContent } from '@affine/core/components/affine/share-page-modal/share-menu';
 import { Export, MoveToTrash } from '@affine/core/components/page-list';
+import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
 import { useBlockSuiteMetaHelper } from '@affine/core/hooks/affine/use-block-suite-meta-helper';
 import { useEnableCloud } from '@affine/core/hooks/affine/use-enable-cloud';
 import { useExportPage } from '@affine/core/hooks/affine/use-export-page';
@@ -29,8 +29,6 @@ import {
  DuplicateIcon,
  EdgelessIcon,
  EditIcon,
-  FavoritedIcon,
-  FavoriteIcon,
  FrameIcon,
  HistoryIcon,
  ImportIcon,
@@ -157,10 +155,6 @@ export const PageHeaderMenuButton = ({
        : t['com.affine.toastMessage.pageMode']()
    );
  }, [currentMode, editorService, t]);
-  const menuItemStyle = {
-    padding: '4px 12px',
-    transition: 'all 0.3s',
-  };

  const handleMenuOpenChange = useCallback((open: boolean) => {
    if (open) {
@@ -225,11 +219,7 @@ export const PageHeaderMenuButton = ({
            </div>
          }
          triggerOptions={{
-            preFix: (
-              <MenuIcon>
-                <ShareIcon />
-              </MenuIcon>
-            ),
+            prefixIcon: <ShareIcon />,
          }}
          subOptions={{
            onOpenChange: handleShareMenuOpenChange,
@@ -247,27 +237,17 @@ export const PageHeaderMenuButton = ({
      {showResponsiveMenu ? ResponsiveMenuItems : null}
      {!isJournal && (
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <EditIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<EditIcon />}
          data-testid="editor-option-menu-rename"
          onSelect={handleRename}
-          style={menuItemStyle}
        >
          {t['Rename']()}
        </MenuItem>
      )}
      <MenuItem
-        preFix={
-          <MenuIcon>
-            {currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
-          </MenuIcon>
-        }
+        prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
        data-testid="editor-option-menu-edgeless"
        onSelect={handleSwitchMode}
-        style={menuItemStyle}
      >
        {t['Convert to ']()}
        {currentMode === 'page'
@@ -277,16 +257,7 @@ export const PageHeaderMenuButton = ({
      <MenuItem
        data-testid="editor-option-menu-favorite"
        onSelect={handleToggleFavorite}
-        style={menuItemStyle}
-        preFix={
-          <MenuIcon>
-            {favorite ? (
-              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
-            ) : (
-              <FavoriteIcon />
-            )}
-          </MenuIcon>
-        }
+        prefixIcon={<IsFavoriteIcon favorite={favorite} />}
      >
        {favorite
          ? t['com.affine.favoritePageOperation.remove']()
@@ -294,28 +265,18 @@ export const PageHeaderMenuButton = ({
      </MenuItem>
      <MenuSeparator />
      <MenuItem
-        preFix={
-          <MenuIcon>
-            <OpenInNewIcon />
-          </MenuIcon>
-        }
+        prefixIcon={<OpenInNewIcon />}
        data-testid="editor-option-menu-open-in-new-tab"
        onSelect={handleOpenInNewTab}
-        style={menuItemStyle}
      >
        {t['com.affine.workbench.tab.page-menu-open']()}
      </MenuItem>

      {environment.isDesktop && (
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <SplitViewIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<SplitViewIcon />}
          data-testid="editor-option-menu-open-in-split-new"
          onSelect={handleOpenInSplitView}
-          style={menuItemStyle}
        >
          {t['com.affine.workbench.split-view.page-menu-open']()}
        </MenuItem>
@@ -325,81 +286,51 @@ export const PageHeaderMenuButton = ({

      {runtimeConfig.enableInfoModal && (
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <InformationIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<InformationIcon />}
          data-testid="editor-option-menu-info"
          onSelect={openInfoModal}
-          style={menuItemStyle}
        >
          {t['com.affine.page-properties.page-info.view']()}
        </MenuItem>
      )}
      {currentMode === 'page' ? (
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <TocIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<TocIcon />}
          data-testid="editor-option-toc"
          onSelect={openOutlinePanel}
-          style={menuItemStyle}
        >
          {t['com.affine.header.option.view-toc']()}
        </MenuItem>
      ) : (
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <FrameIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<FrameIcon />}
          data-testid="editor-option-frame"
          onSelect={openAllFrames}
-          style={menuItemStyle}
        >
          {t['com.affine.header.option.view-frame']()}
        </MenuItem>
      )}
      <MenuItem
-        preFix={
-          <MenuIcon>
-            <HistoryIcon />
-          </MenuIcon>
-        }
+        prefixIcon={<HistoryIcon />}
        data-testid="editor-option-menu-history"
        onSelect={openHistoryModal}
-        style={menuItemStyle}
      >
        {t['com.affine.history.view-history-version']()}
      </MenuItem>
      <MenuSeparator />
      {!isJournal && (
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <DuplicateIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<DuplicateIcon />}
          data-testid="editor-option-menu-duplicate"
          onSelect={handleDuplicate}
-          style={menuItemStyle}
        >
          {t['com.affine.header.option.duplicate']()}
        </MenuItem>
      )}
      <MenuItem
-        preFix={
-          <MenuIcon>
-            <ImportIcon />
-          </MenuIcon>
-        }
+        prefixIcon={<ImportIcon />}
        data-testid="editor-option-menu-import"
        onSelect={onImportFile}
-        style={menuItemStyle}
      >
        {t['Import']()}
      </MenuItem>
@@ -1,10 +1,5 @@
 import { Avatar } from '@affine/component/ui/avatar';
-import {
-  Menu,
-  MenuIcon,
-  MenuItem,
-  MenuSeparator,
-} from '@affine/component/ui/menu';
+import { Menu, MenuItem, MenuSeparator } from '@affine/component/ui/menu';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useI18n } from '@affine/i18n';
 import { SignOutIcon } from '@blocksuite/icons/rc';
@@ -66,11 +61,7 @@ export const PublishPageUserAvatar = () => {
        <UserInfo />
        <MenuSeparator />
        <MenuItem
-          preFix={
-            <MenuIcon>
-              <SignOutIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<SignOutIcon />}
          data-testid="share-page-sign-out-option"
          onClick={handleSignOut}
        >
@@ -94,7 +94,7 @@ export const PageDisplayMenu = () => {
        key={option.value}
        onSelect={() => handleSelect(option.value)}
        data-active={workspaceProperties.groupBy === option.value}
-        endFix={
+        suffixIcon={
          workspaceProperties.groupBy === option.value ? (
            <DoneIcon fontSize={'20px'} />
          ) : null
@@ -1,4 +1,4 @@
-import { MenuIcon, MenuItem, MenuSeparator } from '@affine/component';
+import { MenuItem, MenuSeparator } from '@affine/component';
 import type {
  Filter,
  LiteralValue,
@@ -92,7 +92,7 @@ export const VariableSelect = ({
        // .filter(v => !selected.find(filter => filter.left.name === v.name))
        .map(v => (
          <MenuItem
-            preFix={<MenuIcon>{variableDefineMap[v.name].icon}</MenuIcon>}
+            prefixIcon={variableDefineMap[v.name].icon}
            key={v.name}
            onClick={() => {
              onSelect(createDefaultFilter(v, propertiesMeta));
@@ -1,7 +1,6 @@
 import {
  IconButton,
  Menu,
-  MenuIcon,
  MenuItem,
  toast,
  useConfirmModal,
@@ -20,8 +19,6 @@ import {
  DeletePermanentlyIcon,
  DuplicateIcon,
  EditIcon,
-  FavoritedIcon,
-  FavoriteIcon,
  FilterIcon,
  FilterMinusIcon,
  InformationIcon,
@@ -44,6 +41,7 @@ import { useCallback, useState } from 'react';
 import type { CollectionService } from '../../modules/collection';
 import { InfoModal } from '../affine/page-properties';
 import { usePageHelper } from '../blocksuite/block-suite-page-list/utils';
+import { IsFavoriteIcon } from '../pure/icons';
 import { FavoriteTag } from './components/favorite-tag';
 import * as styles from './list.css';
 import { DisablePublicSharing, MoveToTrash } from './operation-menu-items';
@@ -164,76 +162,36 @@ export const PageOperationCell = ({
      {isInAllowList && (
        <MenuItem
          onClick={handleRemoveFromAllowList}
-          preFix={
-            <MenuIcon>
-              <FilterMinusIcon />
-            </MenuIcon>
-          }
+          prefixIcon={<FilterMinusIcon />}
        >
          {t['Remove special filter']()}
        </MenuItem>
      )}
      <MenuItem
        onClick={onToggleFavoritePageOption}
-        preFix={
-          <MenuIcon>
-            {favourite ? (
-              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
-            ) : (
-              <FavoriteIcon />
-            )}
-          </MenuIcon>
-        }
+        prefixIcon={<IsFavoriteIcon favorite={favourite} />}
      >
        {favourite
          ? t['com.affine.favoritePageOperation.remove']()
          : t['com.affine.favoritePageOperation.add']()}
      </MenuItem>
      {runtimeConfig.enableInfoModal ? (
-        <MenuItem
-          onClick={onOpenInfoModal}
-          preFix={
-            <MenuIcon>
-              <InformationIcon />
-            </MenuIcon>
-          }
-        >
+        <MenuItem onClick={onOpenInfoModal} prefixIcon={<InformationIcon />}>
          {t['com.affine.page-properties.page-info.view']()}
        </MenuItem>
      ) : null}

-      <MenuItem
-        onClick={onOpenInNewTab}
-        preFix={
-          <MenuIcon>
-            <OpenInNewIcon />
-          </MenuIcon>
-        }
-      >
+      <MenuItem onClick={onOpenInNewTab} prefixIcon={<OpenInNewIcon />}>
        {t['com.affine.workbench.tab.page-menu-open']()}
      </MenuItem>

      {environment.isDesktop && enableSplitView ? (
-        <MenuItem
-          onClick={onOpenInSplitView}
-          preFix={
-            <MenuIcon>
-              <SplitViewIcon />
-            </MenuIcon>
-          }
-        >
+        <MenuItem onClick={onOpenInSplitView} prefixIcon={<SplitViewIcon />}>
          {t['com.affine.workbench.split-view.page-menu-open']()}
        </MenuItem>
      ) : null}

-      <MenuItem
-        preFix={
-          <MenuIcon>
-            <DuplicateIcon />
-          </MenuIcon>
-        }
-        onSelect={onDuplicate}
-      >
+      <MenuItem prefixIcon={<DuplicateIcon />} onSelect={onDuplicate}>
        {t['com.affine.header.option.duplicate']()}
      </MenuItem>

@@ -459,17 +417,7 @@ export const CollectionOperationCell = ({
            <>
              <MenuItem
                onClick={onToggleFavoriteCollection}
-                preFix={
-                  <MenuIcon>
-                    {favourite ? (
-                      <FavoritedIcon
-                        style={{ color: 'var(--affine-primary-color)' }}
-                      />
-                    ) : (
-                      <FavoriteIcon />
-                    )}
-                  </MenuIcon>
-                }
+                prefixIcon={<IsFavoriteIcon favorite={favourite} />}
              >
                {favourite
                  ? t['com.affine.favoritePageOperation.remove']()
@@ -477,21 +425,13 @@ export const CollectionOperationCell = ({
              </MenuItem>
              <MenuItem
                onClick={onConfirmAddDocToCollection}
-                preFix={
-                  <MenuIcon>
-                    <PlusIcon />
-                  </MenuIcon>
-                }
+                prefixIcon={<PlusIcon />}
              >
                {t['New Page']()}
              </MenuItem>
              <MenuItem
                onClick={handleDelete}
-                preFix={
-                  <MenuIcon>
-                    <DeleteIcon />
-                  </MenuIcon>
-                }
+                prefixIcon={<DeleteIcon />}
                type="danger"
                data-testid="delete-collection"
              >
@@ -566,11 +506,7 @@ export const TagOperationCell = ({
        <Menu
          items={
            <MenuItem
-              preFix={
-                <MenuIcon>
-                  <DeleteIcon />
-                </MenuIcon>
-              }
+              prefixIcon={<DeleteIcon />}
              type="danger"
              onSelect={handleDelete}
              data-testid="delete-tag"
@@ -1,5 +1,5 @@
 import type { MenuItemProps } from '@affine/component';
-import { MenuIcon, MenuItem } from '@affine/component';
+import { MenuItem } from '@affine/component';
 import { PublicLinkDisableModal } from '@affine/component/disable-public-link';
 import { useI18n } from '@affine/i18n';
 import { ShareIcon } from '@blocksuite/icons/rc';
@@ -7,15 +7,7 @@ import { ShareIcon } from '@blocksuite/icons/rc';
 export const DisablePublicSharing = (props: MenuItemProps) => {
  const t = useI18n();
  return (
-    <MenuItem
-      type="danger"
-      preFix={
-        <MenuIcon>
-          <ShareIcon />
-        </MenuIcon>
-      }
-      {...props}
-    >
+    <MenuItem type="danger" prefixIcon={<ShareIcon />} {...props}>
      {t['Disable Public Sharing']()}
    </MenuItem>
  );
@@ -1,4 +1,4 @@
-import { MenuIcon, MenuItem, MenuSub } from '@affine/component';
+import { MenuItem, MenuSub } from '@affine/component';
 import { track } from '@affine/core/mixpanel';
 import { useI18n } from '@affine/i18n';
 import {
@@ -40,7 +40,7 @@ export function ExportMenuItem<T>({
      data-testid={`export-to-${type}`}
      onSelect={onSelect}
      block
-      preFix={<MenuIcon>{icon}</MenuIcon>}
+      prefixIcon={icon}
    >
      {label}
    </MenuItem>
@@ -127,11 +127,7 @@ export const Export = ({ exportHandler, className, pageMode }: ExportProps) => {
      items={items}
      triggerOptions={{
        className: transitionStyle,
-        preFix: (
-          <MenuIcon>
-            <ExportIcon />
-          </MenuIcon>
-        ),
+        prefixIcon: <ExportIcon />,
        ['data-testid' as string]: 'export-menu',
      }}
      subOptions={{
@@ -1,5 +1,5 @@
 import type { ConfirmModalProps, MenuItemProps } from '@affine/component';
-import { ConfirmModal, MenuIcon, MenuItem } from '@affine/component';
+import { ConfirmModal, MenuItem } from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { DeleteIcon } from '@blocksuite/icons/rc';

@@ -7,15 +7,7 @@ export const MoveToTrash = (props: MenuItemProps) => {
  const t = useI18n();

  return (
-    <MenuItem
-      preFix={
-        <MenuIcon>
-          <DeleteIcon />
-        </MenuIcon>
-      }
-      type="danger"
-      {...props}
-    >
+    <MenuItem prefixIcon={<DeleteIcon />} type="danger" {...props}>
      {t['com.affine.moveToTrash.title']()}
    </MenuItem>
  );
@@ -1,5 +1,5 @@
 import type { MenuItemProps } from '@affine/component';
-import { Menu, MenuIcon, MenuItem } from '@affine/component';
+import { Menu, MenuItem } from '@affine/component';
 import { useDeleteCollectionInfo } from '@affine/core/hooks/affine/use-delete-collection-info';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import { WorkbenchService } from '@affine/core/modules/workbench';
@@ -8,8 +8,6 @@ import { useI18n } from '@affine/i18n';
 import {
  DeleteIcon,
  EditIcon,
-  FavoritedIcon,
-  FavoriteIcon,
  FilterIcon,
  OpenInNewIcon,
  PlusIcon,
@@ -25,6 +23,7 @@ import type { PropsWithChildren, ReactElement } from 'react';
 import { useCallback, useMemo } from 'react';

 import { CollectionService } from '../../../modules/collection';
+import { IsFavoriteIcon } from '../../pure/icons';
 import * as styles from './collection-operations.css';
 import {
  useEditCollection,
@@ -127,68 +126,40 @@ export const CollectionOperations = ({
  >(
    () => [
      {
-        icon: (
-          <MenuIcon>
-            <EditIcon />
-          </MenuIcon>
-        ),
+        icon: <EditIcon />,
        name: t['com.affine.collection.menu.rename'](),
        click: showEditName,
      },
      {
-        icon: (
-          <MenuIcon>
-            <FilterIcon />
-          </MenuIcon>
-        ),
+        icon: <FilterIcon />,
        name: t['com.affine.collection.menu.edit'](),
        click: showEdit,
      },
      ...(onAddDocToCollection
        ? [
            {
-              icon: (
-                <MenuIcon>
-                  <PlusIcon />
-                </MenuIcon>
-              ),
+              icon: <PlusIcon />,
              name: t['New Page'](),
              click: onAddDocToCollection,
            },
          ]
        : []),
      {
-        icon: (
-          <MenuIcon>
-            {favorite ? (
-              <FavoritedIcon style={{ color: 'var(--affine-primary-color)' }} />
-            ) : (
-              <FavoriteIcon />
-            )}
-          </MenuIcon>
-        ),
+        icon: <IsFavoriteIcon favorite={favorite} />,
        name: favorite
          ? t['com.affine.favoritePageOperation.remove']()
          : t['com.affine.favoritePageOperation.add'](),
        click: onToggleFavoritePage,
      },
      {
-        icon: (
-          <MenuIcon>
-            <OpenInNewIcon />
-          </MenuIcon>
-        ),
+        icon: <OpenInNewIcon />,
        name: t['com.affine.workbench.tab.page-menu-open'](),
        click: openCollectionNewTab,
      },
      ...(enableMultiView && environment.isDesktop
        ? [
            {
-              icon: (
-                <MenuIcon>
-                  <SplitViewIcon />
-                </MenuIcon>
-              ),
+              icon: <SplitViewIcon />,
              name: t['com.affine.workbench.split-view.page-menu-open'](),
              click: openCollectionSplitView,
            },
@@ -198,11 +169,7 @@ export const CollectionOperations = ({
        element: <div key="divider" className={styles.divider}></div>,
      },
      {
-        icon: (
-          <MenuIcon>
-            <DeleteIcon />
-          </MenuIcon>
-        ),
+        icon: <DeleteIcon />,
        name: t['Delete'](),
        click: () => {
          service.deleteCollection(deleteInfo, collection.id);
@@ -241,7 +208,7 @@ export const CollectionOperations = ({
                  data-testid="collection-option"
                  key={action.name}
                  type={action.type}
-                  preFix={action.icon}
+                  prefixIcon={action.icon}
                  onClick={action.click}
                >
                  {action.name}
@@ -0,0 +1,18 @@
+import { FavoritedIcon, FavoriteIcon } from '@blocksuite/icons/rc';
+import { cssVar } from '@toeverything/theme';
+import type { SVGProps } from 'react';
+
+export const IsFavoriteIcon = ({
+  favorite,
+  style,
+  ...props
+}: { favorite?: boolean } & SVGProps<SVGSVGElement>) => {
+  return favorite ? (
+    <FavoritedIcon
+      style={{ color: cssVar('primaryColor'), ...style }}
+      {...props}
+    />
+  ) : (
+    <FavoriteIcon style={style} {...props} />
+  );
+};
@@ -1,28 +1 @@
-import {
-  CloudWorkspaceIcon as DefaultCloudWorkspaceIcon,
-  CollaborationIcon as DefaultJoinedWorkspaceIcon,
-  LocalDataIcon as DefaultLocalDataIcon,
-  LocalWorkspaceIcon as DefaultLocalWorkspaceIcon,
-  PublishIcon as DefaultPublishIcon,
-} from '@blocksuite/icons/rc';
-
-// Here are some icons with special color or size
-
-export const JoinedWorkspaceIcon = () => {
-  return <DefaultJoinedWorkspaceIcon style={{ color: '#FF646B' }} />;
-};
-export const LocalWorkspaceIcon = () => {
-  return <DefaultLocalWorkspaceIcon style={{ color: '#FDBD32' }} />;
-};
-
-export const CloudWorkspaceIcon = () => {
-  return <DefaultCloudWorkspaceIcon style={{ color: '#60A5FA' }} />;
-};
-
-export const LocalDataIcon = () => {
-  return <DefaultLocalDataIcon style={{ color: '#62CD80' }} />;
-};
-
-export const PublishIcon = () => {
-  return <DefaultPublishIcon style={{ color: '#8699FF' }} />;
-};
+export * from './favorite-icon';
@@ -18,7 +18,7 @@ export const AddWorkspace = ({
      {environment.isDesktop ? (
        <MenuItem
          block={true}
-          preFix={<ImportIcon />}
+          prefixIcon={<ImportIcon />}
          onClick={onAddWorkspace}
          data-testid="add-workspace"
          className={styles.ItemContainer}
@@ -30,7 +30,7 @@ export const AddWorkspace = ({
      ) : null}
      <MenuItem
        block={true}
-        preFix={<PlusIcon />}
+        prefixIcon={<PlusIcon />}
        onClick={onNewWorkspace}
        data-testid="new-workspace"
        className={styles.ItemContainer}
@@ -4,7 +4,6 @@ import {
  ErrorMessage,
  IconButton,
  Menu,
-  MenuIcon,
  MenuItem,
  type MenuProps,
  Skeleton,
@@ -100,22 +99,14 @@ const AccountMenu = () => {
  return (
    <>
      <MenuItem
-        preFix={
-          <MenuIcon>
-            <AccountIcon />
-          </MenuIcon>
-        }
+        prefixIcon={<AccountIcon />}
        data-testid="workspace-modal-account-settings-option"
        onClick={onOpenAccountSetting}
      >
        {t['com.affine.workspace.cloud.account.settings']()}
      </MenuItem>
      <MenuItem
-        preFix={
-          <MenuIcon>
-            <SignOutIcon />
-          </MenuIcon>
-        }
+        prefixIcon={<SignOutIcon />}
        data-testid="workspace-modal-sign-out-option"
        onClick={onOpenSignOutModal}
      >