From 77e81efa2d726c1653056598037715f365abc0cd Mon Sep 17 00:00:00 2001
From: Ben Finklea <ben@volacci.com>
Date: Sat, 24 Jan 2026 23:05:07 -0600
Subject: [PATCH] Fix menu button to use new ComfyUI menu API

The legacy .comfy-menu is hidden in newer ComfyUI versions.
Updated createMenuButton to use the new ComfyButton/ComfyButtonGroup
components from ComfyUI's UI system, matching how ComfyUI-Manager
implements its button.

The button now appears in the top menu bar next to the Manager button.
Falls back to legacy menu for older ComfyUI versions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 js/modelsync-panel.js | 48 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 3 deletions(-)

diff --git a/js/modelsync-panel.js b/js/modelsync-panel.js
index d751d8f..56fca7d 100644
--- a/js/modelsync-panel.js
+++ b/js/modelsync-panel.js
@@ -29,8 +29,50 @@ class ModelSyncPanel {
     await this.refreshData();
   }
 
-  createMenuButton() {
-    // Wait for menu to be available
+  async createMenuButton() {
+    const self = this;
+
+    // Try to add new-style button first (ComfyUI 2024+)
+    try {
+      const { ComfyButton } = await import("../../scripts/ui/components/button.js");
+      const { ComfyButtonGroup } = await import("../../scripts/ui/components/buttonGroup.js");
+
+      // Wait for app.menu to be available
+      const waitForMenu = () => {
+        return new Promise((resolve) => {
+          const check = () => {
+            if (window.app?.menu?.settingsGroup) {
+              resolve(true);
+            } else {
+              setTimeout(check, 100);
+            }
+          };
+          check();
+          // Timeout after 10 seconds
+          setTimeout(() => resolve(false), 10000);
+        });
+      };
+
+      const menuReady = await waitForMenu();
+      if (menuReady && window.app?.menu?.settingsGroup) {
+        const syncButton = new ComfyButton({
+          icon: "sync",
+          action: () => self.toggle(),
+          tooltip: "Model Sync - Track and sync model updates",
+          content: "Model Sync",
+          classList: "comfyui-button comfyui-menu-mobile-collapse"
+        });
+
+        const syncGroup = new ComfyButtonGroup(syncButton.element);
+        window.app.menu.settingsGroup.element.before(syncGroup.element);
+        console.log("[ModelSync] New-style menu button added");
+        return;
+      }
+    } catch (e) {
+      console.log("[ModelSync] New-style menu not available, trying legacy:", e.message);
+    }
+
+    // Fall back to old-style button
     const tryCreateButton = () => {
       const menu = document.querySelector(".comfy-menu") || document.querySelector(".comfyui-menu");
       if (!menu) {
@@ -51,7 +93,7 @@ class ModelSyncPanel {
 
       // Insert into menu
       menu.appendChild(button);
-      console.log("[ModelSync] Menu button added");
+      console.log("[ModelSync] Legacy menu button added");
     };
 
     tryCreateButton();