Add editable option approval flow

public/admin.html

@@ -120,6 +120,8 @@
     .btn-reject { background: var(--red); color: #fff; }
     .btn-delete { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
     .btn-delete:hover { border-color: var(--red); color: var(--red); }
+    .btn-edit { background: transparent; border: 1px solid var(--border); color: var(--amber); }
+    .btn-edit:hover { border-color: var(--amber); color: #fcd34d; }
     .btn-row { display: flex; gap: 6px; flex-shrink: 0; }
 
     /* Toast */
@@ -278,6 +280,7 @@ function renderPending() {
       <div class="name">${o.name}</div>
       <div class="meta">by ${o.addedBy || 'unknown'}</div>
       <div class="btn-row">
+        <button class="btn btn-edit" onclick="editOption('${o.id}')">✎ Edit</button>
         <button class="btn btn-approve" onclick="approve('${o.id}')">✓ Approve</button>
         <button class="btn btn-reject" onclick="reject('${o.id}')">✕ Reject</button>
       </div>
@@ -295,12 +298,45 @@ function renderAll() {
       <div class="votes-badge">${o.votes.length} vote${o.votes.length !== 1 ? 's' : ''}</div>
       <div class="meta">${o.addedBy !== 'system' ? 'by ' + o.addedBy : 'system'}</div>
       <div class="btn-row">
+        <button class="btn btn-edit" onclick="editOption('${o.id}')">✎ Edit</button>
         <button class="btn btn-delete" onclick="deleteOption('${o.id}')" title="Delete option">🗑</button>
       </div>
     </div>
   `).join('');
 }
 
+async function editOption(id) {
+  const current = allData.options.find(o => o.id === id);
+  if (!current) return;
+  const nextName = prompt('Option name', current.name);
+  if (nextName === null) return;
+  const nextDesc = prompt('Short description', current.desc || '');
+  if (nextDesc === null) return;
+  const nextDetails = prompt('Details, one per line', Array.isArray(current.details) ? current.details.join('\\n') : '');
+  if (nextDetails === null) return;
+  const nextUrl = prompt('Website URL', current.url || '');
+  if (nextUrl === null) return;
+  const nextCategory = prompt('Category id', current.categoryId);
+  if (nextCategory === null) return;
+  const nextApproved = confirm('Approve this option now? Click OK to approve, Cancel to keep it pending.');
+  try {
+    await fetch(API + '/api/options/' + id, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name: nextName.trim(),
+        desc: nextDesc.trim(),
+        details: nextDetails,
+        url: nextUrl.trim(),
+        categoryId: nextCategory.trim(),
+        approved: nextApproved,
+      })
+    });
+    toast('Option updated', 'success');
+    await loadData();
+  } catch(e) { toast('Failed to update option', 'error'); }
+}
+
 async function togglePolls() {
   try {
     // Get current state first

public/index.html

@@ -1638,6 +1638,7 @@
     <div class="form-grid">
       <input type="text" id="addName" placeholder="Name of the place (required)" maxlength="80" />
       <input type="text" id="addDesc" placeholder="Short description — price, vibe, what to expect…" maxlength="200" />
+      <textarea id="addDetails" placeholder="Details on separate lines — price, inclusions, caveats, or notes…" maxlength="500" rows="3" style="background:transparent;border:1px solid #252a38;border-radius:10px;color:#e0e6f0;padding:10px;resize:vertical;min-height:84px;"></textarea>
       <input type="url" id="addUrl" placeholder="Website URL (optional)" />
       <div class="btn-row">
         <select id="addCategory">
@@ -1909,13 +1910,15 @@
         });
         render();
         if (mapInitialized) mapRefreshMarkers();
-      } else if (msg.type === 'option_added' || msg.type === 'option_approved') {
+      } else if (msg.type === 'option_added' || msg.type === 'option_approved' || msg.type === 'option_updated') {
         if (!state.options.find(o => o.id === msg.option.id)) {
           state.options.push(msg.option);
-          renderTabs();
-          render();
-          if (mapInitialized) mapRefreshMarkers();
+        } else {
+          state.options = state.options.map(o => o.id === msg.option.id ? { ...o, ...msg.option } : o);
         }
+        renderTabs();
+        render();
+        if (mapInitialized) mapRefreshMarkers();
       } else if (msg.type === 'option_deleted') {
         state.options = state.options.filter(o => o.id !== msg.id);
         renderTabs();
@@ -2968,6 +2971,7 @@
   function submitNewOption() {
     const name = document.getElementById('addName').value.trim();
     const desc = document.getElementById('addDesc').value.trim();
+    const details = document.getElementById('addDetails').value.trim();
     const url = document.getElementById('addUrl').value.trim();
     const catId = document.getElementById('addCategory').value;
 
@@ -2980,11 +2984,12 @@
       return;
     }
 
-    wsSend({ type: 'add_option', categoryId: catId, name, desc, url, voterName: state.voterName, authToken: state.guestAuthToken });
+    wsSend({ type: 'add_option', categoryId: catId, name, desc, details, url, voterName: state.voterName, authToken: state.guestAuthToken });
 
     // Clear form
     document.getElementById('addName').value = '';
     document.getElementById('addDesc').value = '';
+    document.getElementById('addDetails').value = '';
     document.getElementById('addUrl').value = '';
     showToast(`Submitted "${name}" for approval!`, 'success');
   }