Switching to a proper emojii picker

script.js

@@ -6,9 +6,7 @@ let settings = { username: "", apiKey: "", theme: "auto", mastodonPost: false };
 const $ = (id) => document.getElementById(id);
 const emojiDisplay = $("emoji-display");
 const emojiShow = $("emoji-show");
-const emojiInput = $("emoji-input");
 const emojiSection = emojiDisplay.closest(".emoji-section");
-const emojiHint = $("emoji-hint");
 const statusText = $("status-text");
 const statusUrl = $("status-url");
 const charCount = $("char-count");
@@ -31,6 +29,11 @@ function applyTheme(theme) {
   } else {
     document.documentElement.dataset.theme = theme;
   }
+  const picker = document.getElementById("emoji-picker");
+  if (picker) {
+    picker.classList.remove("light", "dark");
+    if (theme !== "auto") picker.classList.add(theme);
+  }
 }
 
 function updateThemeToggle(theme) {
@@ -135,65 +138,43 @@ eyeBtn.addEventListener("click", () => {
 });
 
 // ── Emoji picker ─────────────────────────────────────────────────────────────
-function extractFirstEmoji(str) {
-  if (!str) return null;
-  if (typeof Intl?.Segmenter === "function") {
-    const seg = new Intl.Segmenter(undefined, { granularity: "grapheme" });
-    for (const { segment } of seg.segment(str)) {
-      if (/\p{Emoji}/u.test(segment) && segment.trim() !== "") return segment;
-    }
-    return null;
-  }
-  const m = str.match(/\p{Emoji_Presentation}[\p{Emoji}\u{FE0F}\u{20E3}]*/u);
-  return m ? m[0] : null;
-}
-
-// Detect platform for hint text
-const isMac =
-  /Mac/.test(navigator.userAgent) && !/iPhone|iPad/.test(navigator.userAgent);
-const osHint = isMac
-  ? " · or ⌃⌘Space"
-  : navigator.userAgent.includes("Win")
-    ? " · or Win+."
-    : "";
+const emojiPicker = $("emoji-picker");
 
 function openEmojiPicker() {
   emojiSection.classList.add("picking");
-  emojiInput.value = "";
-  emojiInput.focus();
-  emojiHint.textContent = `Type, paste, or use your emoji keyboard${osHint}`;
+  emojiDisplay.setAttribute("aria-expanded", "true");
 }
 
 function closeEmojiPicker() {
   emojiSection.classList.remove("picking");
-  emojiHint.textContent = "Click to change emoji";
+  emojiDisplay.setAttribute("aria-expanded", "false");
 }
 
-emojiDisplay.addEventListener("click", openEmojiPicker);
+emojiDisplay.addEventListener("click", () => {
+  if (emojiSection.classList.contains("picking")) closeEmojiPicker();
+  else openEmojiPicker();
+});
 
 emojiDisplay.addEventListener("keydown", (e) => {
   if (e.key === "Enter" || e.key === " ") {
     e.preventDefault();
-    openEmojiPicker();
+    if (emojiSection.classList.contains("picking")) closeEmojiPicker();
+    else openEmojiPicker();
   }
 });
 
-emojiInput.addEventListener("input", () => {
-  const found = extractFirstEmoji(emojiInput.value);
-  if (found) {
-    emoji = found;
-    emojiShow.textContent = found;
+emojiPicker.addEventListener("emoji-click", (e) => {
+  emoji = e.detail.unicode;
+  emojiShow.textContent = emoji;
+  closeEmojiPicker();
+});
+
+document.addEventListener("click", (e) => {
+  if (emojiSection.classList.contains("picking") && !emojiSection.contains(e.target)) {
     closeEmojiPicker();
   }
 });
 
-emojiInput.addEventListener("blur", () => {
-  // Small delay so a click on the emoji-display doesn't flicker
-  setTimeout(() => {
-    if (document.activeElement !== emojiInput) closeEmojiPicker();
-  }, 150);
-});
-
 // ── Keyboard shortcuts ────────────────────────────────────────────────────────
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape") {