feat(core): use emoji as folder icon (#7842)

![CleanShot 2024-08-12 at 22.33.42.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/g3jz87HxbjOJpXV3FPT7/c0c1a196-be29-4e45-a28d-87a55d80fc9d.png)

packages/frontend/core/src/utils/__tests__/extract-emoji-icon.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest';
+
+import { extractEmojiIcon } from '../extract-emoji-icon';
+
+test('extract-emoji-icon', () => {
+  expect(extractEmojiIcon('👨🏻‍❤️‍💋‍👨🏻123')).toEqual({
+    emoji: '👨🏻‍❤️‍💋‍👨🏻',
+    rest: '123',
+  });
+
+  expect(extractEmojiIcon('❤️123')).toEqual({
+    emoji: null,
+    rest: '❤️123',
+  });
+});

packages/frontend/core/src/utils/extract-emoji-icon.ts

@@ -0,0 +1,17 @@
+import Graphemer from 'graphemer';
+
+export function extractEmojiIcon(text: string) {
+  const isStartsWithEmoji = /^(\p{Emoji_Presentation})/u.test(text);
+  if (isStartsWithEmoji) {
+    // emoji like "👨🏻‍❤️‍💋‍👨🏻" are combined. Graphemer can handle these.
+    const emojiEnd = Graphemer.nextBreak(text, 0);
+    return {
+      emoji: text.substring(0, emojiEnd),
+      rest: text.substring(emojiEnd),
+    };
+  }
+  return {
+    emoji: null,
+    rest: text,
+  };
+}

packages/frontend/core/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './create-emotion-cache';
 export * from './event';
+export * from './extract-emoji-icon';
 export * from './fractional-indexing';
 export * from './popup';
 export * from './string2color';