feat(core): replace emoji-mart with affine icon picker (#13644)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- New Features
  - Unified icon picker with consistent rendering across the app.
  - Picker can auto-close after selection.
  - “Remove” now clears the icon selection.

- Refactor
- Icon handling consolidated across editors, navigation, and document
titles for consistent behavior.
  - Picker now opens on the Emoji panel by default.

- Style
  - Adjusted line-height and selectors for icon picker visuals.

- Chores
  - Removed unused emoji-mart dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/component/package.json

@@ -28,8 +28,6 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@blocksuite/icons": "^2.2.17",
-    "@emoji-mart/data": "^1.2.1",
-    "@emoji-mart/react": "^1.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@radix-ui/react-avatar": "^1.1.2",

packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts

@@ -15,6 +15,7 @@ export const contentRoot = style({
 
 export const iconPicker = style({
   padding: 0,
+  lineHeight: 1,
 });
 globalStyle(`${iconPicker} span:has(svg)`, {
   lineHeight: 0,

packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.stories.tsx

@@ -2,12 +2,12 @@ import type { Meta, StoryFn } from '@storybook/react';
 import { useCallback, useState } from 'react';
 
 import { Button } from '../button';
+import { type IconData, IconType } from '../icon-picker';
 import { ResizePanel } from '../resize-panel/resize-panel';
 import {
   IconAndNameEditorMenu,
   type IconAndNameEditorMenuProps,
   IconEditor,
-  type IconType,
 } from './icon-name-editor';
 
 export default {
@@ -16,10 +16,13 @@ export default {
 } satisfies Meta<typeof IconAndNameEditorMenu>;
 
 export const Basic: StoryFn<IconAndNameEditorMenuProps> = () => {
-  const [icon, setIcon] = useState<string | undefined>('👋');
+  const [icon, setIcon] = useState<IconData | undefined>({
+    type: IconType.Emoji,
+    unicode: '👋',
+  });
   const [name, setName] = useState<string>('Hello');
 
-  const handleIconChange = useCallback((_?: IconType, icon?: string) => {
+  const handleIconChange = useCallback((icon?: IconData) => {
     setIcon(icon);
   }, []);
   const handleNameChange = useCallback((name: string) => {
@@ -28,7 +31,7 @@ export const Basic: StoryFn<IconAndNameEditorMenuProps> = () => {
 
   return (
     <div>
-      <p>Icon: {icon}</p>
+      <p>Icon: {JSON.stringify(icon)}</p>
       <p>Name: {name}</p>
 
       <ResizePanel
@@ -44,17 +47,16 @@ export const Basic: StoryFn<IconAndNameEditorMenuProps> = () => {
         }}
       >
         <IconAndNameEditorMenu
-          iconType="emoji"
           icon={icon}
           name={name}
           onIconChange={handleIconChange}
           onNameChange={handleNameChange}
+          closeAfterSelect
         >
           <Button>Edit Name and Icon</Button>
         </IconAndNameEditorMenu>
 
         <IconEditor
-          iconType="emoji"
           icon={icon}
           onIconChange={handleIconChange}
           closeAfterSelect

packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.tsx

@@ -1,22 +1,18 @@
-import data from '@emoji-mart/data';
-import Picker from '@emoji-mart/react';
 import clsx from 'clsx';
-import { useTheme } from 'next-themes';
 import { type ReactNode, useCallback, useState } from 'react';
 
 import { Button, type ButtonProps } from '../button';
+import { type IconData, IconPicker } from '../icon-picker';
+import { IconRenderer } from '../icon-picker/renderer';
 import Input from '../input';
 import { Menu, type MenuProps } from '../menu';
 import * as styles from './icon-name-editor.css';
 
-export type IconType = 'emoji' | 'affine-icon' | 'blob';
-
 export interface IconEditorProps {
-  iconType?: IconType;
+  icon?: IconData;
-  icon?: string;
   closeAfterSelect?: boolean;
   iconPlaceholder?: ReactNode;
-  onIconChange?: (type?: IconType, icon?: string) => void;
+  onIconChange?: (data?: IconData) => void;
   triggerClassName?: string;
 }
 
@@ -38,25 +34,7 @@ export interface IconAndNameEditorMenuProps
   skipIfNotChanged?: boolean;
 }
 
-export const IconRenderer = ({
-  iconType,
-  icon,
-  fallback,
-}: {
-  iconType: IconType;
-  icon: string;
-  fallback?: ReactNode;
-}) => {
-  switch (iconType) {
-    case 'emoji':
-      return <div>{icon ?? fallback}</div>;
-    default:
-      return <div>{fallback}</div>;
-  }
-};
-
 export const IconEditor = ({
-  iconType,
   icon,
   closeAfterSelect,
   iconPlaceholder,
@@ -71,16 +49,17 @@ export const IconEditor = ({
   triggerVariant?: ButtonProps['variant'];
 }) => {
   const [isPickerOpen, setIsPickerOpen] = useState(false);
-  const { resolvedTheme } = useTheme();
+
-  const handleEmojiClick = useCallback(
+  const handleSelect = useCallback(
-    (emoji: any) => {
+    (data?: IconData) => {
-      onIconChange?.('emoji', emoji.native);
+      onIconChange?.(data);
       if (closeAfterSelect) {
         setIsPickerOpen(false);
       }
     },
     [closeAfterSelect, onIconChange]
   );
+
   return (
     <Menu
       rootOptions={{
@@ -97,30 +76,18 @@ export const IconEditor = ({
       }}
       items={
         <div onWheel={e => e.stopPropagation()}>
-          <Picker
+          <IconPicker onSelect={handleSelect} />
-            data={data}
-            theme={resolvedTheme}
-            onEmojiSelect={handleEmojiClick}
-          />
         </div>
       }
     >
       <Button
         variant={triggerVariant}
         className={clsx(styles.iconPicker, triggerClassName)}
-        data-icon-type={iconType}
+        data-icon-type={icon?.type}
         aria-label={icon ? 'Change Icon' : 'Select Icon'}
         title={icon ? 'Change Icon' : 'Select Icon'}
       >
-        {icon && iconType ? (
+        <IconRenderer data={icon} fallback={iconPlaceholder} />
-          <IconRenderer
-            iconType={iconType}
-            icon={icon}
-            fallback={iconPlaceholder}
-          />
-        ) : (
-          iconPlaceholder
-        )}
       </Button>
     </Menu>
   );
@@ -160,7 +127,6 @@ export const IconAndNameEditorMenu = ({
   open,
   onOpenChange,
   width = 300,
-  iconType: initialIconType,
   icon: initialIcon,
   name: initialName,
   onIconChange,
@@ -169,15 +135,15 @@ export const IconAndNameEditorMenu = ({
   iconPlaceholder,
   skipIfNotChanged = true,
   inputTestId,
+  closeAfterSelect,
   ...menuProps
 }: IconAndNameEditorMenuProps) => {
-  const [iconType, setIconType] = useState(initialIconType);
   const [icon, setIcon] = useState(initialIcon);
   const [name, setName] = useState(initialName);
 
   const commit = useCallback(() => {
-    if (iconType !== initialIconType || icon !== initialIcon) {
+    if (icon !== initialIcon) {
-      onIconChange?.(iconType, icon);
+      onIconChange?.(icon);
     }
     if (skipIfNotChanged) {
       if (name !== initialName) onNameChange?.(name);
@@ -186,9 +152,7 @@ export const IconAndNameEditorMenu = ({
     }
   }, [
     icon,
-    iconType,
     initialIcon,
-    initialIconType,
     initialName,
     name,
     onIconChange,
@@ -196,13 +160,11 @@ export const IconAndNameEditorMenu = ({
     skipIfNotChanged,
   ]);
   const abort = useCallback(() => {
-    setIconType(initialIconType);
     setIcon(initialIcon);
     setName(initialName);
-  }, [initialIcon, initialIconType, initialName]);
+  }, [initialIcon, initialName]);
-  const handleIconChange = useCallback((type?: IconType, icon?: string) => {
+  const handleIconChange = useCallback((data?: IconData) => {
-    setIconType(type);
+    setIcon(data);
-    setIcon(icon);
   }, []);
   const handleNameChange = useCallback((name: string) => {
     setName(name);
@@ -210,13 +172,12 @@ export const IconAndNameEditorMenu = ({
   const handleMenuOpenChange = useCallback(
     (open: boolean) => {
       if (open) {
-        setIconType(initialIconType);
         setIcon(initialIcon);
         setName(initialName);
       }
       onOpenChange?.(open);
     },
-    [initialIcon, initialIconType, initialName, onOpenChange]
+    [initialIcon, initialName, onOpenChange]
   );
 
   return (
@@ -243,10 +204,10 @@ export const IconAndNameEditorMenu = ({
       {...menuProps}
       items={
         <IconAndNameEditorContent
-          iconType={iconType}
           icon={icon}
           name={name}
           iconPlaceholder={iconPlaceholder}
+          closeAfterSelect={closeAfterSelect}
           onIconChange={handleIconChange}
           onNameChange={handleNameChange}
           inputTestId={inputTestId}

packages/frontend/component/src/ui/icon-picker/icon-picker.tsx

@@ -7,6 +7,7 @@ import { RadioGroup, type RadioItem } from '../radio';
 import * as styles from './icon-picker.css';
 import { AffineIconPicker } from './picker/affine-icon/affine-icon-picker';
 import { EmojiPicker } from './picker/emoji/emoji-picker';
+import { type IconData, IconType } from './type';
 
 const panels: Array<RadioItem> = [
   { value: 'Emoji', className: styles.headerNavItem },
@@ -16,17 +17,11 @@ const panels: Array<RadioItem> = [
 export const IconPicker = ({
   className,
   style,
-}: HTMLAttributes<HTMLDivElement> & {
+  onSelect,
-  onSelect?: (
+}: Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
-    type: 'emoji' | 'affine-icon',
+  onSelect?: (data?: IconData) => void;
-    data: { icon?: string; color?: string }
-  ) => void;
 }) => {
-  const [activePanel, setActivePanel] = useState<string>('Icons');
+  const [activePanel, setActivePanel] = useState<string>('Emoji');
-
-  // const ActivePanel = panels.find(
-  //   panel => panel.value === activePanel
-  // )?.component;
 
   return (
     <div className={clsx(styles.container, className)} style={{ ...style }}>
@@ -53,7 +48,7 @@ export const IconPicker = ({
           <Button
             variant="plain"
             style={{ color: cssVarV2.text.secondary, fontWeight: 500 }}
-            onClick={() => void 0}
+            onClick={() => onSelect?.()}
           >
             Remove
           </Button>
@@ -61,9 +56,17 @@ export const IconPicker = ({
       </header>
       <main className={styles.main}>
         {activePanel === 'Emoji' ? (
-          <EmojiPicker />
+          <EmojiPicker
+            onSelect={emoji => {
+              onSelect?.({ type: IconType.Emoji, unicode: emoji });
+            }}
+          />
         ) : activePanel === 'Icons' ? (
-          <AffineIconPicker />
+          <AffineIconPicker
+            onSelect={(icon, color) => {
+              onSelect?.({ type: IconType.AffineIcon, name: icon, color });
+            }}
+          />
         ) : null}
       </main>
     </div>

packages/frontend/component/src/ui/icon-picker/index.ts

@@ -1 +1,3 @@
 export * from './icon-picker';
+export * from './renderer';
+export * from './type';

packages/frontend/component/src/ui/icon-picker/renderer.tsx

@@ -1,18 +1,29 @@
+import type { ReactNode } from 'react';
+
 import { AffineIconRenderer } from './renderer/affine-icon';
+import { type IconData, IconType } from './type';
 
 export const IconRenderer = ({
-  iconType,
+  data,
-  icon,
+  fallback,
 }: {
-  iconType: 'emoji' | 'affine-icon';
+  data?: IconData;
-  icon: string;
+  fallback?: ReactNode;
 }) => {
-  if (iconType === 'emoji') {
+  if (!data) {
-    return icon;
+    return fallback ?? null;
-  }
-  if (iconType === 'affine-icon') {
-    return <AffineIconRenderer name={icon} />;
   }
 
-  return null;
+  if (data.type === IconType.Emoji && data.unicode) {
+    return data.unicode;
+  }
+  if (data.type === IconType.AffineIcon && data.name) {
+    return <AffineIconRenderer name={data.name} color={data.color} />;
+  }
+  if (data.type === IconType.Blob) {
+    // Not supported yet
+    return null;
+  }
+
+  return fallback ?? null;
 };

packages/frontend/component/src/ui/icon-picker/type.ts

@@ -0,0 +1,20 @@
+export enum IconType {
+  Emoji = 'emoji',
+  AffineIcon = 'affine-icon',
+  Blob = 'blob',
+}
+
+export type IconData =
+  | {
+      type: IconType.Emoji;
+      unicode: string;
+    }
+  | {
+      type: IconType.AffineIcon;
+      name: string;
+      color: string;
+    }
+  | {
+      type: IconType.Blob;
+      blob: Blob;
+    };

packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.css.ts

@@ -6,7 +6,7 @@ export const docIconPickerTrigger = style({
   height: 64,
   padding: 2,
   selectors: {
-    '&[data-icon-type="emoji"]': {
+    '&[data-icon-type="emoji"], &[data-icon-type="affine-icon"]': {
       fontSize: 60,
       lineHeight: 1,
     },

packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.tsx

@@ -40,12 +40,15 @@ export const DocIconPicker = ({
 
   const icon = useLiveData(explorerIconService.icon$('doc', docId));
 
-  const isPlaceholder = !icon?.type || !icon?.icon;
+  const isPlaceholder = !icon?.icon;
 
   if (readonly) {
     return isPlaceholder ? null : (
-      <div className={styles.docIconPickerTrigger} data-icon-type={icon?.type}>
+      <div
-        <IconRenderer iconType={icon.type} icon={icon.icon} />
+        className={styles.docIconPickerTrigger}
+        data-icon-type={icon?.icon?.type}
+      >
+        <IconRenderer data={icon.icon} />
       </div>
     );
   }
@@ -53,14 +56,12 @@ export const DocIconPicker = ({
   return (
     <TitleContainer isPlaceholder={isPlaceholder}>
       <IconEditor
-        iconType={icon?.type}
         icon={icon?.icon}
-        onIconChange={(type, icon) => {
+        onIconChange={data => {
           explorerIconService.setIcon({
             where: 'doc',
             id: docId,
-            type,
+            icon: data,
-            icon,
           });
         }}
         closeAfterSelect={true}

packages/frontend/core/src/desktop/components/navigation-panel/tree/node.tsx

@@ -6,6 +6,8 @@ import {
   type DropTargetTreeInstruction,
   IconAndNameEditorMenu,
   IconButton,
+  type IconData,
+  IconRenderer,
   Menu,
   MenuItem,
   useDraggable,
@@ -13,7 +15,6 @@ import {
 } from '@affine/component';
 import { Guard } from '@affine/core/components/guard';
 import { AppSidebarService } from '@affine/core/modules/app-sidebar';
-import type { ExplorerIconType } from '@affine/core/modules/db/schema/schema';
 import { ExplorerIconService } from '@affine/core/modules/explorer-icon/services/explorer-icon';
 import type { ExplorerType } from '@affine/core/modules/explorer-icon/store/explorer-icon';
 import type { DocPermissionActions } from '@affine/core/modules/permissions';
@@ -142,13 +143,12 @@ export const NavigationPanelTreeNodeRenameModal = ({
   );
 
   const onIconChange = useCallback(
-    (type?: ExplorerIconType, icon?: string) => {
+    (data?: IconData) => {
       if (!explorerIconConfig) return;
       explorerIconService.setIcon({
         where: explorerIconConfig.where,
         id: explorerIconConfig.id,
-        type,
+        icon: data,
-        icon,
       });
     },
     [explorerIconConfig, explorerIconService]
@@ -161,8 +161,7 @@ export const NavigationPanelTreeNodeRenameModal = ({
       onIconChange={onIconChange}
       onNameChange={handleRename}
       name={rawName ?? ''}
-      iconType={explorerIcon?.type ?? 'emoji'}
+      icon={explorerIcon?.icon}
-      icon={explorerIcon?.icon ?? ''}
       width={sidebarWidth - 16}
       contentOptions={{
         sideOffset: 36,
@@ -461,10 +460,7 @@ export const NavigationPanelTreeNode = ({
           />
         </div>
         <div className={styles.iconContainer}>
-          {/* Only emoji icon is supported for now */}
+          <IconRenderer data={explorerIcon?.icon} fallback={fallbackIcon} />
-          {explorerIcon && explorerIcon.type === 'emoji'
-            ? explorerIcon.icon
-            : fallbackIcon}
         </div>
       </div>
 

packages/frontend/core/src/modules/db/schema/schema.ts

@@ -1,3 +1,4 @@
+import type { IconData } from '@affine/component';
 import {
   type DBSchemaBuilder,
   f,
@@ -51,8 +52,7 @@ export const AFFiNE_WORKSPACE_DB_SCHEMA = {
      * ${doc|collection|folder|tag}:${id}
      */
     id: f.string().primaryKey(),
-    type: f.enum('emoji', 'affine-icon', 'blob'),
+    icon: f.json<IconData>(),
-    icon: f.string(),
   },
 } as const satisfies DBSchemaBuilder;
 export type AFFiNEWorkspaceDbSchema = typeof AFFiNE_WORKSPACE_DB_SCHEMA;
@@ -61,10 +61,6 @@ export type DocProperties = ORMEntity<AFFiNEWorkspaceDbSchema['docProperties']>;
 export type DocCustomPropertyInfo = ORMEntity<
   AFFiNEWorkspaceDbSchema['docCustomPropertyInfo']
 >;
-export type ExplorerIcon = ORMEntity<AFFiNEWorkspaceDbSchema['explorerIcon']>;
-export type ExplorerIconType = ORMEntity<
-  AFFiNEWorkspaceDbSchema['explorerIcon']
->['type'];
 
 export const AFFiNE_WORKSPACE_USERDATA_DB_SCHEMA = {
   favorite: {

packages/frontend/core/src/modules/doc-display-meta/services/doc-display-meta.ts

@@ -29,6 +29,7 @@ import type { DocRecord, DocsService } from '../../doc';
 import type { ExplorerIconService } from '../../explorer-icon/services/explorer-icon';
 import type { I18nService } from '../../i18n';
 import type { JournalService } from '../../journal';
+import { getDocIconComponent } from './icon';
 
 type IconType = 'rc' | 'lit';
 interface DocDisplayIconOptions<T extends IconType> {
@@ -149,8 +150,10 @@ export class DocDisplayMetaService extends Service {
       if (enableEmojiIcon) {
         // const { emoji } = extractEmojiIcon(title);
         // if (emoji) return () => emoji;
-        const icon = get(this.explorerIconService.icon$('doc', docId));
+        const icon = get(this.explorerIconService.icon$('doc', docId))?.icon;
-        if (icon && icon.type === 'emoji') return () => icon.icon;
+        if (icon) {
+          return getDocIconComponent(icon);
+        }
       }
 
       // title alias

packages/frontend/core/src/modules/doc-display-meta/services/icon.tsx

@@ -0,0 +1,7 @@
+import { type IconData, IconRenderer } from '@affine/component';
+
+export const getDocIconComponent = (icon: IconData) => {
+  const Icon = () => <IconRenderer data={icon} />;
+  Icon.displayName = 'DocIcon';
+  return Icon;
+};

packages/frontend/core/src/modules/explorer-icon/store/explorer-icon.ts

@@ -1,7 +1,7 @@
+import type { IconData } from '@affine/component';
 import { Store } from '@toeverything/infra';
 
 import type { WorkspaceDBService } from '../../db';
-import type { ExplorerIconType } from '../../db/schema/schema';
 
 export type ExplorerType = 'doc' | 'collection' | 'folder' | 'tag';
 
@@ -18,21 +18,15 @@ export class ExplorerIconStore extends Store {
     return this.dbService.db.explorerIcon.get(`${type}:${id}`);
   }
 
-  setIcon(options: {
+  setIcon(options: { where: ExplorerType; id: string; icon?: IconData }) {
-    where: ExplorerType;
+    const { where, id, icon } = options;
-    id: string;
-    type?: ExplorerIconType;
-    icon?: string;
-  }) {
-    const { where, id, type, icon } = options;
     // remove icon
-    if (!type || !icon) {
+    if (!icon) {
       return this.dbService.db.explorerIcon.delete(`${where}:${id}`);
     }
     // upsert icon
     return this.dbService.db.explorerIcon.create({
       id: `${where}:${id}`,
-      type,
       icon,
     });
   }

yarn.lock

@@ -314,8 +314,6 @@ __metadata:
     "@blocksuite/affine": "workspace:*"
     "@blocksuite/icons": "npm:^2.2.17"
     "@chromatic-com/storybook": "npm:^4.0.0"
-    "@emoji-mart/data": "npm:^1.2.1"
-    "@emoji-mart/react": "npm:^1.1.1"
     "@emotion/react": "npm:^11.14.0"
     "@emotion/styled": "npm:^11.14.0"
     "@radix-ui/react-avatar": "npm:^1.1.2"
@@ -5532,16 +5530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emoji-mart/react@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "@emoji-mart/react@npm:1.1.1"
-  peerDependencies:
-    emoji-mart: ^5.2
-    react: ^16.8 || ^17 || ^18
-  checksum: 10/def4dddaa01ce88c396510d84d1878b881fe0f9c484a836a50e3db784a91ab98edf94816cff503b4d1cab7b00400a01c87e32d19dee2d950f64ef9243f79101e
-  languageName: node
-  linkType: hard
-
 "@emotion/babel-plugin@npm:^11.13.5":
   version: 11.13.5
   resolution: "@emotion/babel-plugin@npm:11.13.5"