From 2bcdcbbed7a680870e3a65c08c5c5d70790509eb Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Sun, 1 Mar 2026 21:58:20 -0800
Subject: [PATCH] Fix subcategory expand/collapse in visual menu editor

Subcategories shared expandedCategoryId with parent categories,
so clicking a subcategory collapsed the parent. Added separate
expandedSubCategoryId state so subcategories expand independently.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/menu-builder.html | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/portal/menu-builder.html b/portal/menu-builder.html
index 810077c..fc62508 100644
--- a/portal/menu-builder.html
+++ b/portal/menu-builder.html
@@ -1227,6 +1227,7 @@
       redoStack: [],
       idCounter: 1,
       expandedCategoryId: null, // For accordion - only one category expanded at a time
+      expandedSubCategoryId: null, // For subcategory accordion - independent of parent
       expandedItemId: null, // For item accordion - only one item expanded at a time
       expandedModifierIds: new Set(), // Track which modifiers are expanded
 
@@ -4210,12 +4211,12 @@
             </div>
             <div class="items-list ${isExpanded ? '' : 'collapsed'}">
               ${hasSubcats ? subcategories.map(subcat => {
-                const subExpanded = this.expandedCategoryId === subcat.id;
+                const subExpanded = this.expandedSubCategoryId === subcat.id;
                 return `
                 <div class="category-card subcategory-card" data-category-id="${subcat.id}" draggable="true"
                   onclick="event.stopPropagation(); MenuBuilder.selectElement(this)" style="margin: 8px 0 8px 20px; border-color: var(--gray-300);">
                   <div class="category-header" style="padding: 8px 12px;">
-                    <div class="category-toggle ${subExpanded ? 'expanded' : ''}" onclick="event.stopPropagation(); MenuBuilder.toggleCategory('${subcat.id}')">
+                    <div class="category-toggle ${subExpanded ? 'expanded' : ''}" onclick="event.stopPropagation(); MenuBuilder.toggleSubCategory('${subcat.id}')">
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M9 18l6-6-6-6"/>
                       </svg>
@@ -4227,7 +4228,7 @@
                         <circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>
                       </svg>
                     </div>
-                    <div class="category-info" onclick="event.stopPropagation(); MenuBuilder.toggleCategory('${subcat.id}')" style="cursor: pointer;">
+                    <div class="category-info" onclick="event.stopPropagation(); MenuBuilder.toggleSubCategory('${subcat.id}')" style="cursor: pointer;">
                       <div class="category-name" style="font-size: 14px;">${this.escapeHtml(subcat.name)}</div>
                       <div class="category-count">${subcat.items.length} items</div>
                     </div>
@@ -4502,6 +4503,19 @@
           this.expandedCategoryId = null;
         } else {
           this.expandedCategoryId = categoryId;
+          this.expandedSubCategoryId = null;
+          this.expandedItemId = null;
+          this.expandedModifierIds.clear();
+        }
+        this.render();
+      },
+
+      // Toggle subcategory expanded/collapsed (independent of parent)
+      toggleSubCategory(subcatId) {
+        if (this.expandedSubCategoryId === subcatId) {
+          this.expandedSubCategoryId = null;
+        } else {
+          this.expandedSubCategoryId = subcatId;
           this.expandedItemId = null;
           this.expandedModifierIds.clear();
         }