Add emoji search by name

A search box in EmojiPicker filters the flat emoji list by name/keyword
instead of only browsing by category, shared by both the composer's
emoji trigger and the message reaction picker.

Names/keywords didn't exist anywhere in this codebase before (emoji.ts is
just raw unicode characters). Rather than hand-typing entries for all 928
unique emoji -- a lot of manual work, and unlike the codepoints themselves
a wrong name only means a bad search result, not a broken emoji, so the
accuracy argument for hand-typing didn't apply here -- generated
emojiNames.ts once from emojibase-data (MIT licensed), matched against
emoji.ts by codepoint (normalizing variation-selector differences between
the two sources). emojibase-data itself was never added to package.json;
it was only ever a one-time generation tool, so this ships with zero new
runtime dependency.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ksmithandClaude Sonnet 5 committed 2026-08-16 09:04:59 -06:00
1 parent caeff5d6f0
commit 9c275b1b86
3 files changed
+1027 -7

No files matched your search

+25
View File
@@ -35,6 +35,31 @@
right: 0;
}
.emoji-picker-search {
position: sticky;
top: 0;
z-index: 1;
background: var(--ds-surface-2);
border: 1px solid var(--ds-border);
border-radius: var(--radius);
padding: 6px 10px;
color: var(--ds-text);
font-size: 0.82rem;
outline: none;
flex: none;
}
.emoji-picker-search:focus {
border-color: var(--ds-accent);
}
.emoji-picker-no-results {
font-size: 0.82rem;
color: var(--ds-muted);
padding: var(--sp-3) var(--sp-2);
text-align: center;
}
.emoji-picker-category-label {
font-size: 0.7rem;
font-weight: 700;