diff --git a/package-lock.json b/package-lock.json
index 4330416e..5198aff7 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 9d92141c..6a0be2e6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/EmojiPicker/index.tsx b/src/components/EmojiPicker/index.tsx
index 8fb28a5b..613e562b 100644
--- a/src/components/EmojiPicker/index.tsx
+++ b/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}
)
diff --git a/src/components/NoteStats/LikeButton.tsx b/src/components/NoteStats/LikeButton.tsx
index d035340f..84fe021c 100644
--- a/src/components/NoteStats/LikeButton.tsx
+++ b/src/components/NoteStats/LikeButton.tsx
@@ -375,7 +375,10 @@ export function LikeButtonWithStats({
{likeIconButton}
-
+
{likeEmojiPicker}
diff --git a/src/lib/emoji-picker-data-source.ts b/src/lib/emoji-picker-data-source.ts
new file mode 100644
index 00000000..c3735f05
--- /dev/null
+++ b/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
diff --git a/src/services/client-replaceable-events.service.ts b/src/services/client-replaceable-events.service.ts
index 08172dbf..e13f445e 100644
--- a/src/services/client-replaceable-events.service.ts
+++ b/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) {
diff --git a/src/services/client.service.ts b/src/services/client.service.ts
index c273a313..0cff7676 100644
--- a/src/services/client.service.ts
+++ b/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 =========== */