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);
+        } 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');
   }

server.js

@@ -704,7 +704,20 @@ function buildRealtimeSnapshot() {
   };
 }
 
-function createUserOption({ categoryId, name, desc, url, voterName, lat, lng, approved }) {
+function normalizeDetails(details) {
+  if (Array.isArray(details)) {
+    return details.map((item) => String(item || '').trim()).filter(Boolean);
+  }
+  if (typeof details === 'string') {
+    return details
+      .split(/\n+/)
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+  return [];
+}
+
+function createUserOption({ categoryId, name, desc, url, voterName, lat, lng, approved, details }) {
   return {
     id: uuidv4(),
     seedKey: null,
@@ -718,7 +731,7 @@ function createUserOption({ categoryId, name, desc, url, voterName, lat, lng, ap
     addedBy: voterName,
     approved,
     votes: [],
-    details: [],
+    details: normalizeDetails(details),
     categoryColor: CATEGORY_META[categoryId]?.color || '#888',
   };
 }
@@ -877,7 +890,7 @@ app.delete('/api/vote/:optionId', (req, res) => {
 });
 
 app.post('/api/options', (req, res) => {
-  const { categoryId, name, desc, url, lat, lng } = req.body;
+  const { categoryId, name, desc, url, lat, lng, details } = req.body;
   const guest = requireGuestAuth(req, res, req.body);
 
   if (!categoryId || !name) {
@@ -896,6 +909,7 @@ app.post('/api/options', (req, res) => {
     voterName: guest.name,
     lat,
     lng,
+    details,
     approved: false,
   });
 
@@ -915,6 +929,25 @@ app.post('/api/options/:id/approve', (req, res) => {
   res.json({ success: true });
 });
 
+app.patch('/api/options/:id', (req, res) => {
+  const option = data.options.find((candidate) => candidate.id === req.params.id);
+  if (!option) return res.status(404).json({ error: 'Not found' });
+
+  const { categoryId, name, desc, url, lat, lng, details, approved } = req.body;
+  if (categoryId !== undefined) option.categoryId = categoryId;
+  if (name !== undefined) option.name = String(name || '').trim();
+  if (desc !== undefined) option.desc = String(desc || '').trim();
+  if (url !== undefined) option.url = String(url || '').trim() || null;
+  if (lat !== undefined) option.lat = Number.isFinite(Number(lat)) ? Number(lat) : null;
+  if (lng !== undefined) option.lng = Number.isFinite(Number(lng)) ? Number(lng) : null;
+  if (details !== undefined) option.details = normalizeDetails(details);
+  if (approved !== undefined) option.approved = Boolean(approved);
+
+  saveData(data);
+  broadcast({ type: 'option_updated', option });
+  res.json({ success: true, option });
+});
+
 app.delete('/api/options/:id', (req, res) => {
   const optionIndex = data.options.findIndex((candidate) => candidate.id === req.params.id);
   if (optionIndex === -1) return res.status(404).json({ error: 'Not found' });