From e7406de230ad7d45584cb57fda34a927ae57ebf3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 15 Jan 2026 18:00:48 +0000
Subject: [PATCH] Load user's custom emoji list in reaction picker

The emoji picker now loads custom emoji from:
- User's emoji list (kind 10030) - personal custom emoji
- Context emojis from conversation messages
- Unicode emojis (default set)

EmojiSearchService prioritizes:
1. User emoji (highest priority)
2. Context emoji (from conversation)
3. Emoji sets (if any)
4. Unicode emoji (default)

When searching or browsing, users will see their custom emoji alongside
standard unicode emoji, making it easy to use personal/community emoji
in reactions.
---
 src/components/chat/EmojiPickerDialog.tsx | 24 +++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/EmojiPickerDialog.tsx b/src/components/chat/EmojiPickerDialog.tsx
index 38215d0..b1d4624 100644
--- a/src/components/chat/EmojiPickerDialog.tsx
+++ b/src/components/chat/EmojiPickerDialog.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useMemo } from "react";
+import { use$ } from "applesauce-react/hooks";
 import {
   Dialog,
   DialogContent,
@@ -11,6 +12,8 @@ import { EmojiSearchService } from "@/services/emoji-search";
 import { UNICODE_EMOJIS } from "@/lib/unicode-emojis";
 import type { EmojiSearchResult } from "@/services/emoji-search";
 import type { EmojiTag } from "@/lib/emoji-helpers";
+import eventStore from "@/services/event-store";
+import accountManager from "@/services/accounts";
 
 interface EmojiPickerDialogProps {
   open: boolean;
@@ -66,16 +69,33 @@ export function EmojiPickerDialog({
   const [searchResults, setSearchResults] = useState<EmojiSearchResult[]>([]);
   const [emojiService] = useState(() => new EmojiSearchService());
 
-  // Initialize emoji service with unicode emojis
+  // Get active account
+  const activeAccount = use$(accountManager.active$);
+
+  // Load user's emoji list (kind 10030)
+  const userEmojiList = use$(
+    () =>
+      activeAccount?.pubkey
+        ? eventStore.replaceable(10030, activeAccount.pubkey, "")
+        : undefined,
+    [activeAccount?.pubkey],
+  );
+
+  // Initialize emoji service with unicode and custom emojis
   useEffect(() => {
     // Load unicode emojis
     emojiService.addUnicodeEmojis(UNICODE_EMOJIS);
 
+    // Load user's custom emoji list (kind 10030)
+    if (userEmojiList) {
+      emojiService.addUserEmojiList(userEmojiList);
+    }
+
     // Load context emojis (from conversation messages)
     for (const emoji of contextEmojis) {
       emojiService.addEmoji(emoji.shortcode, emoji.url, "context");
     }
-  }, [emojiService, contextEmojis]);
+  }, [emojiService, contextEmojis, userEmojiList]);
 
   // Search emojis when query changes
   useEffect(() => {