From 6a4be6b93956c3b478af13bd37daa98bdef1c17e Mon Sep 17 00:00:00 2001
From: SlavaVlad <nauka.2.0.vs@gmail.com>
Date: Mon, 15 Jun 2026 02:58:18 +0300
Subject: [PATCH] feat: move emoji picker from ResourceBrowser into item editor
 form

---
 components/ItemEditor.tsx      | 117 +++++++++++++++++----------------
 components/ResourceBrowser.tsx |  62 +----------------
 2 files changed, 61 insertions(+), 118 deletions(-)

diff --git a/components/ItemEditor.tsx b/components/ItemEditor.tsx
index 15ef662..c39033c 100644
--- a/components/ItemEditor.tsx
+++ b/components/ItemEditor.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent } from "./ui/card";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
-import { SOUND_CATEGORIES, EMOJIS } from "@/lib/bingo-data";
+import { SOUND_CATEGORIES } from "@/lib/bingo-data";
 import { Badge } from "./ui/badge";
 import { ResourceBrowser, DragData } from "./ResourceBrowser";
 import { playSoundOnce } from "@/lib/sounds";
@@ -27,43 +27,52 @@ type Campaign = {
   gridSize: number;
 };
 
-function EmojiPicker({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+const EMOJI_LIST = [
+  "😀", "😂", "🤣", "😍", "🥰", "😘", "😊", "😎", "🤩", "🥳", "🤯", "😱",
+  "😈", "🤡", "💀", "👻", "👽", "🤖", "🎃", "😺", "🙈", "🙉", "🙊", "💩",
+  "🔥", "🌊", "💥", "💫", "⭐", "🌟", "✨", "⚡", "☄️", "💧", "🧊", "🌋",
+  "🎉", "🎊", "🎈", "🎁", "🏆", "🥇", "💎", "🔮", "🪄", "🧨", "🔫", "⚔️",
+  "🛡️", "🚀", "🛸", "🚁", "⚓", "🌀", "🌈", "🌪️", "☢️", "☣️", "⚕️", "🧬",
+  "💉", "💊", "🩸", "🧪", "🔬", "🔭", "📡", "🎯", "🎲", "♟️", "🧩", "🎭",
+  "🎵", "🎶", "🎺", "📯", "🔔", "🎤", "🎧", "📢", "📣", "🔊", "🔇", "💤",
+  "💣", "🔪", "🪦", "⚰️", "🪤", "🧲", "🗝️", "🔑", "🔓", "🔒", "🛠️", "⛓️",
+  "🧹", "🪠", "🔧", "⚙️", "📦", "📀", "💿", "📹", "📸", "📷", "🖼️", "🎨",
+  "🍺", "🍻", "🍷", "🥃", "🍸", "🍹", "🧉", "🍕", "🍔", "🌭", "🍿", "🧀",
+  "🥜", "🌶️", "🍄", "🥚", "🧅", "🥕", "🥦", "🫁", "🧠", "👀", "👁️", "🫀",
+  "💋", "🫂", "🤝", "👍", "👎", "👊", "✊", "🤛", "🤜", "👆", "👇", "🖕",
+  "💪", "🦵", "🦶", "👂", "👃", "🧑‍🚀", "🧑‍🔧", "🧑‍⚕️", "🧑‍✈️", "🧑‍🏫", "🧑‍🎤", "🧑‍🍳",
+  "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮",
+  "🦈", "🐙", "🦑", "🐋", "🐬", "🦭", "🐊", "🦎", "🐍", "🐢", "🦖", "🦕",
+  "🦟", "🦗", "🐛", "🪱", "🦋", "🐌", "🐞", "🐜", "🦂", "🕷️", "🦀", "🪸",
+];
 
-  useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
+function EmojiPickerGrid({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  const [search, setSearch] = useState("");
+  const filtered = search ? EMOJI_LIST.filter(e => e.includes(search)) : EMOJI_LIST;
 
   return (
-    <div ref={ref} className="relative">
-      <button
-        type="button"
-        onClick={() => setOpen(!open)}
-        className="w-10 h-10 flex items-center justify-center text-xl rounded border border-slate-700/50 bg-slate-800/50 hover:bg-slate-700/50 cursor-pointer"
-      >
-        {value || "?"}
-      </button>
-      {open && (
-        <div className="absolute top-full left-0 mt-1 z-50 bg-slate-900 border border-slate-700/50 rounded-lg p-2 shadow-xl w-[280px]">
-          <div className="grid grid-cols-8 gap-1">
-            {EMOJIS.map(e => (
-              <button
-                key={e}
-                type="button"
-                onClick={() => { onChange(e); setOpen(false); }}
-                className={`w-8 h-8 flex items-center justify-center text-base rounded hover:bg-slate-700 cursor-pointer ${e === value ? "bg-cyan-700/50 ring-1 ring-cyan-400" : ""}`}
-              >
-                {e}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
+    <div className="space-y-2">
+      <input
+        type="text"
+        placeholder="Search emoji..."
+        value={search}
+        onChange={e => setSearch(e.target.value)}
+        className="w-full bg-slate-800/60 border border-slate-700/30 rounded px-2 py-1 text-[10px] font-mono text-slate-200 placeholder:text-slate-600 outline-none focus:border-cyan-500/50"
+      />
+      <div className="flex flex-wrap gap-1 max-h-36 overflow-y-auto">
+        {filtered.map(e => (
+          <button
+            key={e}
+            type="button"
+            onClick={() => onChange(e)}
+            className={`w-7 h-7 flex items-center justify-center text-sm rounded hover:bg-slate-700/60 cursor-pointer active:scale-90 transition-transform ${
+              e === value ? "bg-cyan-700/50 ring-1 ring-cyan-400" : ""
+            }`}
+          >
+            {e}
+          </button>
+        ))}
+      </div>
     </div>
   );
 }
@@ -95,15 +104,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
 
   useEffect(() => { fetchItems(); }, [campaign.id]);
 
-  // Listen for emoji-select from ResourceBrowser EmojisTab
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail;
-      if (detail?.emoji) setEditEmoji(detail.emoji);
-    };
-    window.addEventListener("emoji-select", handler);
-    return () => window.removeEventListener("emoji-select", handler);
-  }, []);
+
 
   const updateItem = async (item: Item) => {
     await fetch(`/api/campaigns/${campaign.id}/items`, {
@@ -259,20 +260,22 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                 </button>
               </div>
             </div>
+            <div className="flex-1 min-w-[150px]">
+              <label className="text-[9px] font-mono text-slate-600 uppercase">Text</label>
+              <Input
+                placeholder="Reactor explodes"
+                value={editText}
+                onChange={e => setEditText(e.target.value)}
+                className="font-mono text-sm"
+              />
+            </div>
+
+            <div>
+              <label className="text-[9px] font-mono text-slate-600 uppercase">Emoji — click to select</label>
+              <EmojiPickerGrid value={editEmoji} onChange={setEditEmoji} />
+            </div>
+
             <div className="flex flex-wrap gap-2 items-end">
-              <div className="flex-1 min-w-[150px]">
-                <label className="text-[9px] font-mono text-slate-600 uppercase">Text</label>
-                <Input
-                  placeholder="Reactor explodes"
-                  value={editText}
-                  onChange={e => setEditText(e.target.value)}
-                  className="font-mono text-sm"
-                />
-              </div>
-              <div>
-                <label className="text-[9px] font-mono text-slate-600 uppercase">Emoji</label>
-                <EmojiPicker value={editEmoji} onChange={setEditEmoji} />
-              </div>
               <div className="w-32">
                 <label className="text-[9px] font-mono text-slate-600 uppercase">Sound</label>
                 <Select
diff --git a/components/ResourceBrowser.tsx b/components/ResourceBrowser.tsx
index ad5bbb6..f0aa095 100644
--- a/components/ResourceBrowser.tsx
+++ b/components/ResourceBrowser.tsx
@@ -33,58 +33,7 @@ export type DragData =
   | { type: "image"; url: string; originalName: string }
   | { type: "emoji"; emoji: string };
 
-// ─── Emoji Picker (inline, searchable) ──────────────────────────────
 
-const EMOJI_LIST = [
-  "😀", "😂", "🤣", "😍", "🥰", "😘", "😊", "😎", "🤩", "🥳", "🤯", "😱",
-  "😈", "🤡", "💀", "👻", "👽", "🤖", "🎃", "😺", "🙈", "🙉", "🙊", "💩",
-  "🔥", "🌊", "💥", "💫", "⭐", "🌟", "✨", "⚡", "☄️", "💧", "🧊", "🌋",
-  "🎉", "🎊", "🎈", "🎁", "🏆", "🥇", "💎", "🔮", "🪄", "🧨", "🔫", "⚔️",
-  "🛡️", "🚀", "🛸", "🚁", "⚓", "🌀", "🌈", "🌪️", "☢️", "☣️", "⚕️", "🧬",
-  "💉", "💊", "🩸", "🧪", "🔬", "🔭", "📡", "🎯", "🎲", "♟️", "🧩", "🎭",
-  "🎵", "🎶", "🎺", "📯", "🔔", "🎤", "🎧", "📢", "📣", "🔊", "🔇", "💤",
-  "💣", "🔪", "🪦", "⚰️", "🪤", "🧲", "🗝️", "🔑", "🔓", "🔒", "🛠️", "⛓️",
-  "🧹", "🪠", "🔧", "⚙️", "📦", "📀", "💿", "📹", "📸", "📷", "🖼️", "🎨",
-  "🍺", "🍻", "🍷", "🥃", "🍸", "🍹", "🧉", "🍕", "🍔", "🌭", "🍿", "🧀",
-  "🥜", "🌶️", "🍄", "🥚", "🧅", "🥕", "🥦", "🫁", "🧠", "👀", "👁️", "🫀",
-  "💋", "🫂", "🤝", "👍", "👎", "👊", "✊", "🤛", "🤜", "👆", "👇", "🖕",
-  "💪", "🦵", "🦶", "👂", "👃", "🧑‍🚀", "🧑‍🔧", "🧑‍⚕️", "🧑‍✈️", "🧑‍🏫", "🧑‍🎤", "🧑‍🍳",
-  "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮",
-  "🦈", "🐙", "🦑", "🐋", "🐬", "🦭", "🐊", "🦎", "🐍", "🐢", "🦖", "🦕",
-  "🦟", "🦗", "🐛", "🪱", "🦋", "🐌", "🐞", "🐜", "🦂", "🕷️", "🦀", "🪸",
-];
-
-function EmojiPickerGrid({ onSelect }: { onSelect: (emoji: string) => void }) {
-  const [search, setSearch] = useState("");
-  const filtered = search ? EMOJI_LIST.filter(e => e.includes(search)) : EMOJI_LIST;
-
-  return (
-    <div className="space-y-2">
-      <input
-        type="text"
-        placeholder="Search emoji..."
-        value={search}
-        onChange={e => setSearch(e.target.value)}
-        className="w-full bg-slate-800/60 border border-slate-700/30 rounded px-2 py-1.5 text-xs font-mono text-slate-200 placeholder:text-slate-600 outline-none focus:border-cyan-500/50"
-      />
-      <div className="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
-        {filtered.map(e => (
-          <button
-            key={e}
-            draggable
-            onDragStart={ev => {
-              ev.dataTransfer.setData("application/json", JSON.stringify({ type: "emoji", emoji: e } satisfies DragData));
-            }}
-            onClick={() => onSelect(e)}
-            className="w-8 h-8 flex items-center justify-center text-base rounded hover:bg-slate-700/60 cursor-pointer active:scale-90 transition-transform"
-          >
-            {e}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
 
 // ─── Sounds Tab ─────────────────────────────────────────────────────
 
@@ -376,7 +325,7 @@ function FreesoundRow({ name, duration, onPreview, onImport }: {
 
 // ─── Main ResourceBrowser ───────────────────────────────────────────
 
-type Tab = "sounds" | "images" | "emojis";
+type Tab = "sounds" | "images";
 
 export function ResourceBrowser({ visible, onClose }: { visible: boolean; onClose: () => void }) {
   const [tab, setTab] = useState<Tab>("sounds");
@@ -390,7 +339,6 @@ export function ResourceBrowser({ visible, onClose }: { visible: boolean; onClos
         {([
           { key: "sounds" as const, label: "🔊 Sounds" },
           { key: "images" as const, label: "🖼️ Images" },
-          { key: "emojis" as const, label: "😀 Emojis" },
         ]).map(t => (
           <button
             key={t.key}
@@ -414,17 +362,9 @@ export function ResourceBrowser({ visible, onClose }: { visible: boolean; onClos
       <div className="max-h-72 overflow-y-auto">
         {tab === "sounds" && <SoundsTab />}
         {tab === "images" && <ImagesTab />}
-        {tab === "emojis" && <EmojisTab />}
       </div>
     </div>
   );
 }
 
-function EmojisTab() {
-  const handleSelect = (emoji: string) => {
-    // Dispatch a custom event so ItemEditor can pick it up
-    window.dispatchEvent(new CustomEvent("emoji-select", { detail: { emoji } }));
-  };
 
-  return <div className="p-3"><EmojiPickerGrid onSelect={handleSelect} /></div>;
-}