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 -->
This commit is contained in:
Cats Juice
2025-09-26 14:41:29 +08:00
committed by GitHub
parent c540400496
commit d272c4342d
16 changed files with 121 additions and 138 deletions
@@ -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,
},
@@ -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}>
<IconRenderer iconType={icon.type} icon={icon.icon} />
<div
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,
icon: data,
});
}}
closeAfterSelect={true}