chore: Update emoji picker in widget (#14741)

2026-06-16 10:39:47 +05:30
parent dda25c0b51
commit a3d05ef55d
9 changed files with 113 additions and 50 deletions
@@ -0,0 +1,93 @@
+import emojiGroups from 'shared/components/emoji/emojisGroup.json';
+
+// Recently used emojis persisted in localStorage.
+const RECENT_EMOJI_KEY = 'emoji-icon-picker.recent-emojis';
+const MAX_RECENT_EMOJIS = 16;
+
+const matchesSearch = (emoji, term) =>
+  emoji.slug.replaceAll('_', ' ').includes(term) ||
+  emoji.name.toLowerCase().includes(term);
+
+// Emoji sections for the search term; prepends "Frequently used" when idle.
+export const buildEmojiSections = (search, recentEmojis, frequentLabel) => {
+  const term = search.trim().toLowerCase();
+  if (term) {
+    return emojiGroups
+      .map(({ name, emojis }) => ({
+        name,
+        emojis: emojis.filter(e => matchesSearch(e, term)),
+      }))
+      .filter(group => group.emojis.length);
+  }
+  return [
+    ...(recentEmojis.length
+      ? [{ name: frequentLabel, emojis: recentEmojis }]
+      : []),
+    ...emojiGroups,
+  ];
+};
+
+// Samples an emoji's average color (via canvas) as a translucent hover tint. Cached per emoji.
+const emojiTintCache = new Map();
+const NEUTRAL_TINT = 'rgb(var(--slate-9) / 0.12)';
+
+const sampleEmojiTint = emoji => {
+  const canvas = Object.assign(document.createElement('canvas'), {
+    width: 16,
+    height: 16,
+  });
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  ctx.font = '14px serif';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(emoji, 8, 9);
+
+  const { data } = ctx.getImageData(0, 0, 16, 16);
+  const pixels = Array.from(
+    { length: data.length / 4 },
+    (_, i) => i * 4
+  ).filter(i => data[i + 3] > 16);
+  if (!pixels.length) return NEUTRAL_TINT;
+
+  const avg = offset =>
+    Math.round(
+      pixels.reduce((sum, i) => sum + data[i + offset], 0) / pixels.length
+    );
+
+  return `rgba(${avg(0)}, ${avg(1)}, ${avg(2)}, 0.16)`;
+};
+
+export const getEmojiTint = emoji => {
+  if (!emojiTintCache.has(emoji)) {
+    let tint = NEUTRAL_TINT;
+    try {
+      tint = sampleEmojiTint(emoji);
+    } catch {
+      /* canvas unavailable */
+    }
+    emojiTintCache.set(emoji, tint);
+  }
+  return emojiTintCache.get(emoji);
+};
+
+export const getRecentEmojis = () => {
+  try {
+    const stored = JSON.parse(localStorage.getItem(RECENT_EMOJI_KEY) ?? '[]');
+    return Array.isArray(stored) ? stored : [];
+  } catch {
+    return [];
+  }
+};
+
+export const addRecentEmoji = emoji => {
+  const updated = [
+    emoji,
+    ...getRecentEmojis().filter(item => item.slug !== emoji.slug),
+  ].slice(0, MAX_RECENT_EMOJIS);
+  try {
+    localStorage.setItem(RECENT_EMOJI_KEY, JSON.stringify(updated));
+  } catch {
+    /* private mode; recents are best-effort */
+  }
+  return updated;
+};