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.
This commit is contained in:
Claude
2026-01-15 18:00:48 +00:00
parent 69b74efe67
commit e7406de230

View File

@@ -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(() => {