fix: custom sound playback, unmark, editor click-to-edit, bigger fonts

components/ItemEditor.tsx

@@ -67,12 +67,14 @@ function EmojiPicker({ value, onChange }: { value: string; onChange: (v: string)
 export function ItemEditor({ campaign }: { campaign: Campaign }) {
   const [items, setItems] = useState<Item[]>([]);
   const [loading, setLoading] = useState(true);
+  const [editItemId, setEditItemId] = useState<string | null>(null);
   const [editText, setEditText] = useState("");
   const [editEmoji, setEditEmoji] = useState("💀");
   const [editSound, setEditSound] = useState("horn");
   const [editSoundUrl, setEditSoundUrl] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLDivElement>(null);
 
   const fetchItems = async () => {
     const res = await fetch(`/api/campaigns/${campaign.id}/items`);
@@ -101,6 +103,7 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
   };
 
   const deleteItem = async (itemId: string) => {
+    if (editItemId === itemId) resetForm();
     await fetch(`/api/campaigns/${campaign.id}/items?itemId=${itemId}`, { method: "DELETE" });
     await fetchItems();
   };
@@ -124,11 +127,45 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
         gridIndex: maxIdx + 1,
       }),
     });
+    resetForm();
+    await fetchItems();
+  };
+
+  const submitItem = async () => {
+    if (!editText) return;
+    if (editItemId) {
+      const existing = items.find(it => it.id === editItemId);
+      if (existing) {
+        await updateItem({
+          ...existing,
+          text: editText,
+          emoji: editEmoji,
+          soundCategory: editSound,
+          soundUrl: editSoundUrl,
+        });
+      }
+      resetForm();
+    } else {
+      await addItem();
+    }
+  };
+
+  const editItem = (item: Item) => {
+    setEditItemId(item.id);
+    setEditText(item.text);
+    setEditEmoji(item.emoji);
+    setEditSound(item.soundCategory);
+    setEditSoundUrl(item.soundUrl || null);
+    formRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  const resetForm = () => {
+    setEditItemId(null);
     setEditText("");
     setEditEmoji("💀");
     setEditSound("horn");
     setEditSoundUrl(null);
-    await fetchItems();
+    if (fileInputRef.current) fileInputRef.current.value = "";
   };
 
   const uploadSound = async (file: File) => {
@@ -141,6 +178,10 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
     setUploading(false);
   };
 
+  const playSoundOnce = (url: string) => {
+    try { const a = new Audio(url); a.preload = "auto"; a.volume = 0.4; a.play().catch(() => {}); } catch {}
+  };
+
   const totalCells = campaign.gridSize * campaign.gridSize;
 
   if (loading) {
@@ -149,79 +190,88 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
 
   return (
     <div className="space-y-4">
-      <Card className="border-cyan-800/30">
-        <CardContent className="p-4 space-y-3">
-          <h3 className="text-xs font-mono text-cyan-400 uppercase">+ Add New Cell</h3>
-          <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 ref={formRef}>
+        <Card className={editItemId ? "border-amber-500/40" : "border-cyan-800/30"}>
+          <CardContent className="p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="text-xs font-mono text-cyan-400 uppercase">{editItemId ? "✏ Edit Cell" : "+ Add New Cell"}</h3>
+              {editItemId && (
+                <button onClick={resetForm} className="text-[10px] font-mono text-slate-500 hover:text-slate-300 cursor-pointer">
+                  Cancel
+                </button>
+              )}
             </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
-                value={editSound}
-                onValueChange={v => { setEditSound(v); if (v !== "custom") setEditSoundUrl(null); }}
-              >
-                <SelectTrigger className="font-mono text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {SOUND_CATEGORIES.map(cat => (
-                    <SelectItem key={cat.value} value={cat.value} className="font-mono text-xs">
-                      {cat.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            {editSound === "custom" && (
-              <div>
-                <label className="text-[9px] font-mono text-slate-600 uppercase">File</label>
-                <div className="flex gap-1 items-center">
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept=".ogg"
-                    className="hidden"
-                    onChange={e => { const f = e.target.files?.[0]; if (f) uploadSound(f); }}
-                  />
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="font-mono text-[9px] h-10"
-                    onClick={() => fileInputRef.current?.click()}
-                    disabled={uploading}
-                  >
-                    {uploading ? "..." : editSoundUrl ? "✓" : "OGG"}
-                  </Button>
-                  {editSoundUrl && (
-                    <button
-                      type="button"
-                      onClick={() => { const a = new Audio(editSoundUrl); a.volume = 0.4; a.play(); }}
-                      className="text-sm cursor-pointer hover:text-cyan-300"
-                    >
-                      ▶
-                    </button>
-                  )}
-                </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>
-            )}
-            <Button size="sm" onClick={addItem} disabled={!editText} className="font-mono text-xs">
-              ADD
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+              <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
+                  value={editSound}
+                  onValueChange={v => { setEditSound(v); if (v !== "custom") setEditSoundUrl(null); }}
+                >
+                  <SelectTrigger className="font-mono text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {SOUND_CATEGORIES.map(cat => (
+                      <SelectItem key={cat.value} value={cat.value} className="font-mono text-xs">
+                        {cat.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {editSound === "custom" && (
+                <div>
+                  <label className="text-[9px] font-mono text-slate-600 uppercase">File</label>
+                  <div className="flex gap-1 items-center">
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept=".ogg"
+                      className="hidden"
+                      onChange={e => { const f = e.target.files?.[0]; if (f) uploadSound(f); }}
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="font-mono text-[9px] h-10"
+                      onClick={() => fileInputRef.current?.click()}
+                      disabled={uploading}
+                    >
+                      {uploading ? "..." : editSoundUrl ? "✓" : "OGG"}
+                    </Button>
+                    {editSoundUrl && (
+                      <button
+                        type="button"
+                        onClick={() => playSoundOnce(editSoundUrl)}
+                        className="text-sm cursor-pointer hover:text-cyan-300"
+                      >
+                        ▶
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )}
+              <Button size="sm" onClick={submitItem} disabled={!editText} className="font-mono text-xs">
+                {editItemId ? "SAVE" : "ADD"}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
       <div
         className="grid gap-1"
@@ -236,17 +286,26 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
               </div>
             );
           }
+          const isEditing = editItemId === item.id;
           return (
-            <Card key={item.id} className="border-slate-700/30 aspect-square group">
+            <Card key={item.id} className={"border-slate-700/30 aspect-square group" + (isEditing ? " ring-2 ring-amber-500/50" : "")}>
               <CardContent className="p-1.5 h-full flex flex-col items-center justify-center gap-0.5 relative">
                 <span className="text-lg">{item.emoji}</span>
-                <span className="text-[8px] text-center font-mono text-slate-300 leading-tight line-clamp-2">
+                <span className="text-[10px] text-center font-mono text-slate-300 leading-tight line-clamp-3 px-0.5">
                   {item.text}
                 </span>
-                <Badge variant="outline" className="text-[6px] px-1 py-0 absolute top-0.5 right-0.5">
+                <Badge variant="outline" className="text-[8px] px-1 py-0 absolute top-0.5 right-0.5">
                   {item.soundUrl ? "🔊" : item.soundCategory}
                 </Badge>
                 <div className="absolute bottom-0.5 left-0.5 right-0.5 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    className="h-4 text-[8px] px-1 py-0 flex-1"
+                    onClick={() => editItem(item)}
+                  >
+                    ✏
+                  </Button>
                   <Button
                     variant="destructive"
                     size="sm"
@@ -256,6 +315,15 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
                     ✕
                   </Button>
                 </div>
+                {item.soundUrl && (
+                  <button
+                    type="button"
+                    onClick={e => { e.stopPropagation(); playSoundOnce(item.soundUrl!); }}
+                    className="absolute bottom-0.5 left-0.5 text-[10px] text-cyan-500/60 hover:text-cyan-300 cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
+                  >
+                    🔊
+                  </button>
+                )}
               </CardContent>
             </Card>
           );
@@ -301,3 +369,5 @@ export function ItemEditor({ campaign }: { campaign: Campaign }) {
     </div>
   );
 }
+
+