bug-fixes

package-lock.json

@@ -66,6 +66,7 @@
         "embla-carousel-react": "^8.6.0",
         "embla-carousel-wheel-gestures": "^8.1.0",
         "emoji-picker-element": "^1.29.1",
+        "emoji-picker-element-data": "^1.8.0",
         "flexsearch": "^0.7.43",
         "highlight.js": "^11.9.0",
         "hls.js": "^1.6.15",
@@ -9622,6 +9623,12 @@
       "integrity": "sha512-TOiHzu9Dqib3x4MwcAi3wi3RdyT4SoeB4b15AvH1ks4SBwTl7DeebhZ0d3x6dNi4XfNU7IGRZ7NBQllj0RqwrQ==",
       "license": "Apache-2.0"
     },
+    "node_modules/emoji-picker-element-data": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/emoji-picker-element-data/-/emoji-picker-element-data-1.8.0.tgz",
+      "integrity": "sha512-VfRuRJNEDLS1JKlNS4olaqhjX5S1nnZ+ZHG73b/dV8QeZyi0yPruTPEE72EmF6XO3k/9hj3lybMIYMOYXb/57A==",
+      "license": "Apache-2.0"
+    },
     "node_modules/emoji-regex": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",

package.json

@@ -96,6 +96,7 @@
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "emoji-picker-element": "^1.29.1",
+    "emoji-picker-element-data": "^1.8.0",
     "flexsearch": "^0.7.43",
     "highlight.js": "^11.9.0",
     "hls.js": "^1.6.15",

src/components/EmojiPicker/index.tsx

@@ -1,3 +1,4 @@
+import { EMOJI_PICKER_DATA_SOURCE } from '@/lib/emoji-picker-data-source'
 import { DEFAULT_LIKE_REACTION_CONTENT, DEFAULT_LIKE_REACTION_DISPLAY_EMOJI, DEFAULT_SUGGESTED_EMOJIS } from '@/lib/like-reaction-emojis'
 import { recordEmojiUsed } from '@/lib/recently-used-emojis'
 import { useNostr } from '@/providers/NostrProvider'
@@ -47,11 +48,12 @@ export default function EmojiPicker({
     import('emoji-picker-element').then(({ Picker }) => {
       if (cancelled || !containerRef.current) return
 
-      const picker = new Picker() as HTMLElement & { customEmoji: unknown[] }
+      const picker = new Picker({
+        dataSource: EMOJI_PICKER_DATA_SOURCE,
+        customEmoji: customEmojis
+      }) as HTMLElement & { customEmoji: unknown[] }
       pickerRef.current = picker
 
-      picker.customEmoji = customEmojis
-
       if (themeSetting === 'dark') {
         picker.className = 'dark'
       } else if (themeSetting === 'light') {
@@ -59,9 +61,10 @@ export default function EmojiPicker({
       }
 
       picker.style.width = '100%'
+      picker.style.minWidth = '280px'
+      picker.style.maxWidth = '350px'
       picker.style.height = 'min(350px, 50dvh)'
       picker.style.minHeight = '280px'
-      picker.style.display = 'block'
       picker.style.setProperty('--num-columns', '8')
 
       const handleClick = (e: Event) => {
@@ -193,7 +196,7 @@ export default function EmojiPicker({
       {ownEmojisRow}
       <div
         ref={containerRef}
-        className="h-[min(350px,50dvh)] min-h-[280px] w-full shrink-0 overflow-hidden"
+        className="h-[min(350px,50dvh)] min-h-[280px] w-full min-w-[280px] max-w-[350px] shrink-0"
       />
     </div>
   )

src/components/NoteStats/LikeButton.tsx

@@ -375,7 +375,10 @@ export function LikeButtonWithStats({
     <div className="flex h-full min-w-0 items-center">
       <DropdownMenu open={isEmojiReactionsOpen} onOpenChange={setIsEmojiReactionsOpen}>
         <DropdownMenuTrigger asChild>{likeIconButton}</DropdownMenuTrigger>
-        <DropdownMenuContent side="top" className="p-0 w-fit">
+        <DropdownMenuContent
+          side="top"
+          className="p-0 w-[min(100vw-1rem,350px)] max-w-[calc(100vw-1rem)] overflow-hidden"
+        >
           {likeEmojiPicker}
         </DropdownMenuContent>
       </DropdownMenu>

src/lib/emoji-picker-data-source.ts

@@ -0,0 +1,4 @@
+/** Same-origin emoji DB for emoji-picker-element (avoids CDN / offline failures). */
+import emojiPickerDataUrl from 'emoji-picker-element-data/en/emojibase/data.json?url'
+
+export const EMOJI_PICKER_DATA_SOURCE = emojiPickerDataUrl

src/services/client-replaceable-events.service.ts

@@ -727,8 +727,12 @@ export class ReplaceableEventService {
           replaceableRace: useReplaceableRace,
           eoseTimeout: isSlowReplaceableBatch ? METADATA_BATCH_QUERY_EOSE_TIMEOUT_MS : 100,
           globalTimeout: isSlowReplaceableBatch ? METADATA_BATCH_QUERY_GLOBAL_TIMEOUT_MS : 2000,
-          /** Feed avatar batches must not be aborted by feed/search {@link interruptBackgroundQueries}. */
-          ...(kind === kinds.Metadata ? { foreground: true as const } : {})
+          /** Feed avatars + NIP-30 inventory must survive {@link interruptBackgroundQueries}. */
+          ...(kind === kinds.Metadata ||
+          kind === kinds.UserEmojiList ||
+          kind === kinds.Emojisets
+            ? { foreground: true as const }
+            : {})
         }
 
         let events: NEvent[]
@@ -897,7 +901,8 @@ export class ReplaceableEventService {
         const events = await this.queryService.query(relayUrls, filter, undefined, {
           replaceableRace: true,
           eoseTimeout: isDocumentRelayKind(kind) ? 2500 : 100,
-          globalTimeout: isDocumentRelayKind(kind) ? 8000 : 2000
+          globalTimeout: isDocumentRelayKind(kind) ? 8000 : 2000,
+          ...(kind === kinds.Emojisets ? { foreground: true as const } : {})
         })
 
         for (const event of events) {

src/services/client.service.ts

@@ -5270,11 +5270,18 @@ class ClientService extends EventTarget {
     ]).filter(Boolean)
     const capped = urls.slice(0, 20)
     if (capped.length === 0) return []
-    return this.queryService.fetchEvents(capped, {
-      kinds: [kinds.Metadata, kinds.UserEmojiList, kinds.Emojisets],
-      authors: [pk],
-      limit: 120
-    })
+    return this.fetchEvents(
+      capped,
+      {
+        kinds: [kinds.Metadata, kinds.UserEmojiList, kinds.Emojisets],
+        authors: [pk],
+        limit: 120
+      },
+      {
+        /** Must survive note-panel / search {@link interruptBackgroundQueries} — custom emoji images go blank when aborted. */
+        foreground: true
+      }
+    )
   }
 
   /** =========== Following favorite relays =========== */