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/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.string(),
+    icon: f.json<IconData>(),
   },
 } 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));
-        if (icon && icon.type === 'emoji') return () => icon.icon;
+        const icon = get(this.explorerIconService.icon$('doc', docId))?.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: {
-    where: ExplorerType;
-    id: string;
-    type?: ExplorerIconType;
-    icon?: string;
-  }) {
-    const { where, id, type, icon } = options;
+  setIcon(options: { where: ExplorerType; id: string; icon?: IconData }) {
+    const { where, id, 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,
     });
   }