From a67d2251647c043178728503437fda8aa39b718f Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Tue, 3 Mar 2026 19:50:46 -0800
Subject: [PATCH] Add Show Modifiers toggle to items step in setup wizard

Outline button reveals modifier groups under each item with a +
expand button to drill into individual options and prices. Helps
debug imported menus before saving.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/setup-wizard.html | 78 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 74 insertions(+), 4 deletions(-)

diff --git a/portal/setup-wizard.html b/portal/setup-wizard.html
index 6431644..84ab8e1 100644
--- a/portal/setup-wizard.html
+++ b/portal/setup-wizard.html
@@ -573,6 +573,50 @@
       border-radius: 3px;
     }
 
+    .item-mod-groups { display: none; margin-top: 6px; }
+    .item-mod-groups.visible { display: block; }
+    .item-mod-group {
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    .item-mod-group-header {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      color: var(--gray-600);
+      font-weight: 500;
+    }
+    .item-mod-group-header:hover { color: var(--gray-800); }
+    .mod-expand-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--gray-200);
+      color: var(--gray-600);
+      font-size: 12px;
+      line-height: 1;
+      flex-shrink: 0;
+      transition: transform 0.15s;
+    }
+    .mod-expand-btn.open { transform: rotate(45deg); }
+    .item-mod-options {
+      display: none;
+      margin: 2px 0 4px 20px;
+      padding-left: 8px;
+      border-left: 2px solid var(--gray-200);
+    }
+    .item-mod-options.visible { display: block; }
+    .item-mod-option {
+      font-size: 11px;
+      color: var(--gray-500);
+      padding: 1px 0;
+    }
+    .item-mod-option .opt-price { color: var(--gray-400); margin-left: 4px; }
+
     /* Add Item Row */
     .add-row {
       display: flex;
@@ -2839,21 +2883,38 @@
                 </tr>
               </thead>
               <tbody>
-                ${catItems.map((item, i) => `
+                ${catItems.map((item, i) => {
+                  const itemMods = item.modifiers || [];
+                  const allMods = config.extractedData.modifiers || [];
+                  const modGroupsHtml = itemMods.map(mName => {
+                    const mg = allMods.find(m => m.name === mName);
+                    const opts = mg && mg.options ? mg.options.filter(o => o && o.name) : [];
+                    const optsHtml = opts.map(o =>
+                      `<div class="item-mod-option">${o.name}${o.price ? `<span class="opt-price">+$${o.price.toFixed(2)}</span>` : ''}</div>`
+                    ).join('');
+                    return `<div class="item-mod-group">
+                      <span class="item-mod-group-header" onclick="this.querySelector('.mod-expand-btn').classList.toggle('open');this.parentElement.querySelector('.item-mod-options').classList.toggle('visible')">
+                        <span class="mod-expand-btn">+</span> ${mName}${opts.length ? ` (${opts.length})` : ''}
+                      </span>
+                      <div class="item-mod-options">${optsHtml}</div>
+                    </div>`;
+                  }).join('');
+                  return `
                   <tr>
                     <td><input type="checkbox" checked data-item-id="${item.id || i}"></td>
                     <td>
                       <strong>${item.name}</strong>
                       ${item.description ? `<br><small style="color:var(--gray-500);">${item.description}</small>` : ''}
+                      <div class="item-mod-groups">${modGroupsHtml}</div>
                     </td>
                     <td>$${parseFloat(item.price || 0).toFixed(2)}</td>
                     <td>
                       <div class="item-modifiers">
-                        ${(item.modifiers || []).map(m => `<span class="item-modifier-tag">${m}</span>`).join('')}
+                        ${itemMods.map(m => `<span class="item-modifier-tag">${m}</span>`).join('')}
                       </div>
                     </td>
-                  </tr>
-                `).join('')}
+                  </tr>`;
+                }).join('')}
               </tbody>
             </table>
           </div>`;
@@ -2881,6 +2942,7 @@
         </div>
         <p>Uncheck any items you don't want to include.</p>
         <div class="action-buttons">
+          ${items.some(it => (it.modifiers || []).length > 0) ? `<button class="btn btn-outline" id="toggleModsBtn" onclick="toggleItemModifiers()">Show Modifiers</button>` : ''}
           <button class="btn btn-success" onclick="confirmItems()">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <polyline points="20 6 9 17 4 12"/>
@@ -2891,6 +2953,14 @@
       `);
     }
 
+    function toggleItemModifiers() {
+      const groups = document.querySelectorAll('#itemsList .item-mod-groups');
+      const btn = document.getElementById('toggleModsBtn');
+      const showing = btn.textContent === 'Hide Modifiers';
+      groups.forEach(g => g.classList.toggle('visible', !showing));
+      btn.textContent = showing ? 'Show Modifiers' : 'Hide Modifiers';
+    }
+
     function confirmItems() {
       // Filter out unchecked items
       const checkboxes = document.querySelectorAll('#itemsList input[type="checkbox"]');