Merge pull request #123 from keyxmakerx/claude/fix-backdrop-customizer-uAn3g

fix: drill panel reorg button now uses custom event dispatch

Author: keyxmakerx

internal/templates/layouts/app.templ

@@ -659,13 +659,14 @@ templ SidebarDrillPanel(campaignID string, et SidebarEntityType, count int) {
 					>{ strconv.Itoa(count) }</span>
 				}
 			</a>
-			<!-- Reorg toggle for owners (delegates to main sidebar-reorg-toggle) -->
+			<!-- Reorg toggle for owners (dispatches custom event to sidebar_reorg.js) -->
 			if GetCampaignRole(ctx) >= 3 {
 				<button
 					type="button"
 					class="w-5 h-5 flex items-center justify-center rounded text-gray-500 hover:text-gray-300 hover:bg-white/10 transition-colors shrink-0"
 					title="Reorder pages"
-					onclick="var t=document.getElementById('sidebar-reorg-toggle');if(t)t.click();"
+					data-reorg-toggle
+					onclick="document.dispatchEvent(new CustomEvent('chronicle:toggle-reorg'))"
 				>
 					<i class="fa-solid fa-grip-vertical text-[10px]"></i>
 				</button>

static/js/sidebar_reorg.js

@@ -76,6 +76,14 @@
       if (icon) icon.className = 'fa-solid fa-check text-[10px]';
     }
 
+    // Sync visual state on any secondary reorg toggle buttons (e.g. drill panel).
+    document.querySelectorAll('[data-reorg-toggle]').forEach(function (b) {
+      b.classList.add('bg-accent/20', 'text-accent');
+      b.title = 'Done reordering';
+      var i = b.querySelector('i');
+      if (i) i.className = 'fa-solid fa-check text-[10px]';
+    });
+
     if (level === 'categories') {
       activateCategoryReorg();
     } else {
@@ -105,6 +113,14 @@
       if (icon) icon.className = 'fa-solid fa-grip-vertical text-[10px]';
     }
 
+    // Reset visual state on any secondary reorg toggle buttons.
+    document.querySelectorAll('[data-reorg-toggle]').forEach(function (b) {
+      b.classList.remove('bg-accent/20', 'text-accent');
+      b.title = 'Reorder pages';
+      var i = b.querySelector('i');
+      if (i) i.className = 'fa-solid fa-grip-vertical text-[10px]';
+    });
+
     cleanupTouchDrag();
   }
 
@@ -515,6 +531,11 @@
       toggle();
     });
 
+    // Allow other buttons (e.g. drill panel) to toggle reorg via custom event.
+    document.addEventListener('chronicle:toggle-reorg', function () {
+      toggle();
+    });
+
     // Exit reorg mode on navigation.
     window.addEventListener('chronicle:navigated', function () {
       if (active) deactivate();