| 1 | import { Clock, Plus, Search, Sparkles } from "lucide-react"; |
| 2 | import { type KeyboardEvent, type ReactElement, type ReactNode, useEffect, useId, useMemo, useRef, useState } from "react"; |
| 3 | import { Link } from "react-router"; |
| 4 | |
| 5 | import { useEmojiContext } from "./context"; |
| 6 | import { readRecent, readTone, rememberRecent, rememberTone, useEmojiData } from "./data"; |
| 7 | import { EmojiGlyph } from "./render"; |
| 8 | import { Button } from "../ui/button"; |
| 9 | import { Hint } from "../ui/hint"; |
| 10 | import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; |
| 11 | import { type EmojiPick, SKIN_TONES, customPick, searchEmoji, skinned, unicodePick } from "../../lib/emoji"; |
| 12 | |
| 13 | /** Emoji per row. */ |
| 14 | const COLUMNS = 9; |
| 15 | /** One for each group in data.json, in its order. */ |
| 16 | const GROUP_ICONS = ["😀", "👋", "🐻", "🍔", "✈️", "⚽", "💡", "🔣", "🏁"]; |
| 17 | |
| 18 | type Section = { key: string; title: string; icon: ReactNode; picks: EmojiPick[] }; |
| 19 | |
| 20 | /** |
| 21 | * Choosing an emoji: type to search by name, shortcode or keyword, or |
| 22 | * browse by group; recently used and the workspace's own first. Arrow keys |
| 23 | * move through the grid while typing, Enter picks, Escape closes (the |
| 24 | * popover around it). The skin tone chosen is remembered in this browser. |
| 25 | */ |
| 26 | export function EmojiPicker({ onPick, autoFocus = true }: { onPick: (emoji: string) => void; autoFocus?: boolean }) { |
| 27 | const { customs, byName, usercontent, manageHref } = useEmojiContext(); |
| 28 | const data = useEmojiData(); |
| 29 | const [query, setQuery] = useState(""); |
| 30 | const [tone, setTone] = useState(0); |
| 31 | const [toning, setToning] = useState(false); |
| 32 | const [recent, setRecent] = useState<string[]>([]); |
| 33 | const [active, setActive] = useState(0); |
| 34 | const grid = useRef<HTMLDivElement>(null); |
| 35 | const list = useId(); |
| 36 | |
| 37 | useEffect(() => { |
| 38 | setTone(readTone()); |
| 39 | setRecent(readRecent()); |
| 40 | }, []); |
| 41 | |
| 42 | const sections = useMemo<Section[]>(() => { |
| 43 | if (query.trim()) { |
| 44 | return [{ key: "results", title: "Results", icon: <Search size={14} />, picks: searchEmoji(data, customs, query, 90) }]; |
| 45 | } |
| 46 | const out: Section[] = []; |
| 47 | const recentPicks = recent.flatMap((emoji): EmojiPick[] => { |
| 48 | const custom = /^:([a-z0-9_+-]{2,32}):$/.exec(emoji); |
| 49 | if (custom) { |
| 50 | const file = byName.get(custom[1]!); |
| 51 | return file ? [customPick({ name: custom[1]!, file })] : []; |
| 52 | } |
| 53 | return [{ kind: "unicode", emoji, name: data?.emoji.find((e) => e[0] === emoji || e[5]?.includes(emoji))?.[1] ?? emoji, code: null }]; |
| 54 | }); |
| 55 | if (recentPicks.length) out.push({ key: "recent", title: "Recently used", icon: <Clock size={14} />, picks: recentPicks }); |
| 56 | if (customs.length) out.push({ key: "custom", title: "This workspace", icon: <Sparkles size={14} />, picks: customs.map(customPick) }); |
| 57 | data?.groups.forEach((title, group) => { |
| 58 | out.push({ key: `g${group}`, title, icon: GROUP_ICONS[group] ?? "", picks: data.emoji.filter((e) => e[4] === group).map(unicodePick) }); |
| 59 | }); |
| 60 | return out; |
| 61 | }, [query, data, customs, recent, byName]); |
| 62 | |
| 63 | const flat = useMemo(() => sections.flatMap((s) => s.picks), [sections]); |
| 64 | useEffect(() => setActive(0), [query]); |
| 65 | const current = flat[Math.min(active, flat.length - 1)] ?? null; |
| 66 | |
| 67 | // The active emoji stays in view as the arrows move it. |
| 68 | useEffect(() => { |
| 69 | grid.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" }); |
| 70 | }, [active]); |
| 71 | |
| 72 | const pick = (choice: EmojiPick) => { |
| 73 | const emoji = choice.kind === "unicode" ? skinned(choice, tone) : choice.emoji; |
| 74 | setRecent(rememberRecent(emoji)); |
| 75 | onPick(emoji); |
| 76 | }; |
| 77 | |
| 78 | const onKeyDown = (event: KeyboardEvent<HTMLElement>) => { |
| 79 | const move = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: COLUMNS, ArrowUp: -COLUMNS }[event.key]; |
| 80 | if (move != null && flat.length) { |
| 81 | // Left and right belong to the search box while it has text to move through. |
| 82 | if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && query && event.target instanceof HTMLInputElement) return; |
| 83 | event.preventDefault(); |
| 84 | setActive((index) => Math.max(0, Math.min(flat.length - 1, index + move))); |
| 85 | } else if (event.key === "Enter" && current) { |
| 86 | event.preventDefault(); |
| 87 | pick(current); |
| 88 | } else if (event.key === "Home" && !(event.target instanceof HTMLInputElement)) { |
| 89 | event.preventDefault(); |
| 90 | setActive(0); |
| 91 | } else if (event.key === "End" && !(event.target instanceof HTMLInputElement)) { |
| 92 | event.preventDefault(); |
| 93 | setActive(flat.length - 1); |
| 94 | } |
| 95 | }; |
| 96 | |
| 97 | const jump = (key: string) => { |
| 98 | const at = grid.current?.querySelector<HTMLElement>(`[data-section="${key}"]`); |
| 99 | if (at && grid.current) grid.current.scrollTop = at.offsetTop - grid.current.offsetTop; |
| 100 | }; |
| 101 | |
| 102 | let index = 0; |
| 103 | return ( |
| 104 | <div className="flex h-104 w-90 max-w-[calc(100vw-1rem)] flex-col" onKeyDown={onKeyDown}> |
| 105 | <div className="flex items-center gap-2 border-b border-line p-2"> |
| 106 | <label className="flex h-8 min-w-0 grow items-center gap-2 rounded-md border border-line-strong bg-bg px-2 focus-within:border-accent/50"> |
| 107 | <Search size={14} className="shrink-0 text-faint" /> |
| 108 | <input |
| 109 | autoFocus={autoFocus} |
| 110 | value={query} |
| 111 | onChange={(event) => setQuery(event.target.value)} |
| 112 | placeholder="Search emoji" |
| 113 | aria-label="Search emoji" |
| 114 | role="combobox" |
| 115 | aria-expanded |
| 116 | aria-controls={list} |
| 117 | aria-activedescendant={current ? `${list}-${Math.min(active, flat.length - 1)}` : undefined} |
| 118 | autoComplete="off" |
| 119 | data-1p-ignore |
| 120 | className="min-w-0 grow bg-transparent text-sm text-fg outline-none placeholder:text-faint" |
| 121 | /> |
| 122 | </label> |
| 123 | <div className="relative"> |
| 124 | <Hint label="Skin tone"> |
| 125 | <Button |
| 126 | type="button" |
| 127 | aria-label="Skin tone" |
| 128 | aria-expanded={toning} |
| 129 | onClick={() => setToning((open) => !open)} |
| 130 | variant="ghost" |
| 131 | size="icon-sm" |
| 132 | className="text-lg" |
| 133 | > |
| 134 | {SKIN_TONES[tone]} |
| 135 | </Button> |
| 136 | </Hint> |
| 137 | {toning && ( |
| 138 | <div |
| 139 | role="radiogroup" |
| 140 | aria-label="Skin tone" |
| 141 | className="absolute top-full right-0 z-10 mt-1 flex gap-0.5 rounded-lg border border-line-strong bg-raised p-1 shadow-xl shadow-black/40" |
| 142 | > |
| 143 | {SKIN_TONES.map((hand, choice) => ( |
| 144 | <button |
| 145 | key={hand} |
| 146 | type="button" |
| 147 | role="radio" |
| 148 | aria-checked={choice === tone} |
| 149 | aria-label={choice === 0 ? "No skin tone" : `Skin tone ${choice}`} |
| 150 | onClick={() => { |
| 151 | setTone(choice); |
| 152 | rememberTone(choice); |
| 153 | setToning(false); |
| 154 | }} |
| 155 | className={`flex size-8 items-center justify-center rounded-md text-lg hover:bg-line ${choice === tone ? "bg-line" : ""}`} |
| 156 | > |
| 157 | {hand} |
| 158 | </button> |
| 159 | ))} |
| 160 | </div> |
| 161 | )} |
| 162 | </div> |
| 163 | </div> |
| 164 | {!query.trim() && ( |
| 165 | <nav aria-label="Emoji groups" className="flex shrink-0 items-center gap-0.5 overflow-x-auto border-b border-line px-1.5 py-1 scrollbar-none"> |
| 166 | {sections.map((section) => ( |
| 167 | <Hint key={section.key} label={section.title}> |
| 168 | <Button |
| 169 | type="button" |
| 170 | aria-label={section.title} |
| 171 | onClick={() => jump(section.key)} |
| 172 | variant="ghost" |
| 173 | size="icon-xs" |
| 174 | className="text-[0.95rem] text-faint grayscale-[0.6] transition hover:grayscale-0" |
| 175 | > |
| 176 | {section.icon} |
| 177 | </Button> |
| 178 | </Hint> |
| 179 | ))} |
| 180 | </nav> |
| 181 | )} |
| 182 | <div ref={grid} id={list} role="listbox" aria-label="Emoji" className="relative min-h-0 grow overflow-y-auto px-2 pb-2 scrollbar-thin"> |
| 183 | {!data && !query.trim() && <p className="px-1 py-6 text-center text-sm text-faint">Loading emoji…</p>} |
| 184 | {sections.map((section) => ( |
| 185 | <section key={section.key} data-section={section.key} aria-label={section.title}> |
| 186 | <h3 className="sticky top-0 z-1 flex items-center justify-between bg-raised/95 px-1 pt-2 pb-1 text-[0.6875rem] font-semibold tracking-wide text-faint uppercase backdrop-blur"> |
| 187 | {section.title} |
| 188 | {section.key === "custom" && manageHref && ( |
| 189 | <Link to={manageHref} className="font-medium tracking-normal normal-case text-accent hover:underline"> |
| 190 | Manage |
| 191 | </Link> |
| 192 | )} |
| 193 | </h3> |
| 194 | {section.picks.length === 0 ? ( |
| 195 | <p className="px-1 py-6 text-center text-sm text-faint">No emoji match “{query.trim()}”.</p> |
| 196 | ) : ( |
| 197 | <div className="grid grid-cols-9"> |
| 198 | {section.picks.map((choice) => { |
| 199 | const at = index++; |
| 200 | const glyph = choice.kind === "unicode" ? skinned(choice, tone) : choice.emoji; |
| 201 | return ( |
| 202 | <button |
| 203 | key={`${section.key}:${choice.emoji}`} |
| 204 | type="button" |
| 205 | tabIndex={-1} |
| 206 | id={`${list}-${at}`} |
| 207 | data-index={at} |
| 208 | role="option" |
| 209 | aria-selected={at === active} |
| 210 | aria-label={choice.kind === "custom" ? `:${choice.name}:` : choice.name} |
| 211 | onMouseEnter={() => setActive(at)} |
| 212 | onClick={() => pick(choice)} |
| 213 | className={`flex aspect-square items-center justify-center rounded-md text-[1.375rem] leading-none transition-colors ${ |
| 214 | at === active ? "bg-line" : "hover:bg-line" |
| 215 | }`} |
| 216 | > |
| 217 | <EmojiGlyph emoji={glyph} byName={byName} usercontent={usercontent} size={choice.kind === "custom" ? 24 : 22} /> |
| 218 | </button> |
| 219 | ); |
| 220 | })} |
| 221 | </div> |
| 222 | )} |
| 223 | </section> |
| 224 | ))} |
| 225 | {!query.trim() && !customs.length && manageHref && ( |
| 226 | <Link to={manageHref} className="mt-2 flex items-center gap-2 rounded-md px-2 py-2 text-[0.8125rem] text-muted hover:bg-line hover:text-fg"> |
| 227 | <Plus size={14} /> Add this workspace’s own emoji |
| 228 | </Link> |
| 229 | )} |
| 230 | </div> |
| 231 | <div className="flex h-12 shrink-0 items-center gap-2.5 border-t border-line px-3"> |
| 232 | {current ? ( |
| 233 | <> |
| 234 | <EmojiGlyph emoji={current.kind === "unicode" ? skinned(current, tone) : current.emoji} byName={byName} usercontent={usercontent} size={26} /> |
| 235 | <span className="min-w-0 truncate text-sm"> |
| 236 | <span className="text-fg-soft first-letter:uppercase">{current.name}</span> |
| 237 | {(current.kind === "custom" || current.code) && ( |
| 238 | <span className="ml-1.5 font-mono text-xs text-faint">:{current.kind === "custom" ? current.name : current.code}:</span> |
| 239 | )} |
| 240 | </span> |
| 241 | </> |
| 242 | ) : ( |
| 243 | <span className="text-sm text-faint">Pick an emoji</span> |
| 244 | )} |
| 245 | </div> |
| 246 | </div> |
| 247 | ); |
| 248 | } |
| 249 | |
| 250 | /** The picker in a popover, opened by `children` (one element). Picking closes it. */ |
| 251 | export function EmojiPickerPopover({ |
| 252 | children, |
| 253 | onPick, |
| 254 | side = "top", |
| 255 | align = "end", |
| 256 | open: controlled, |
| 257 | onOpenChange, |
| 258 | }: { |
| 259 | children: ReactElement; |
| 260 | onPick: (emoji: string) => void; |
| 261 | side?: "top" | "bottom" | "left" | "right"; |
| 262 | align?: "start" | "center" | "end"; |
| 263 | open?: boolean; |
| 264 | onOpenChange?: (open: boolean) => void; |
| 265 | }) { |
| 266 | const [own, setOwn] = useState(false); |
| 267 | const open = controlled ?? own; |
| 268 | const setOpen = (next: boolean) => { |
| 269 | setOwn(next); |
| 270 | onOpenChange?.(next); |
| 271 | }; |
| 272 | return ( |
| 273 | <Popover open={open} onOpenChange={setOpen}> |
| 274 | <PopoverTrigger asChild>{children}</PopoverTrigger> |
| 275 | <PopoverContent side={side} align={align} collisionPadding={8} className="w-auto overflow-hidden p-0"> |
| 276 | <EmojiPicker |
| 277 | onPick={(emoji) => { |
| 278 | onPick(emoji); |
| 279 | setOpen(false); |
| 280 | }} |
| 281 | /> |
| 282 | </PopoverContent> |
| 283 | </Popover> |
| 284 | ); |
| 285 | } |