Allow extension register custom topbar menu command (#982)

* Refactor command store

* Rename coreMenuStore to menuStore

* Extension API to register command

* Update README

* Add playwright test

src/components/appMenu/AppMenu.vue

@@ -29,7 +29,7 @@
             icon="pi pi-times"
             :severity="executingPrompt ? 'danger' : 'secondary'"
             :disabled="!executingPrompt"
-            @click="() => commandStore.getCommand('Comfy.Interrupt')()"
+            @click="() => commandStore.getCommandFunction('Comfy.Interrupt')()"
           >
           </Button>
           <Button
@@ -37,7 +37,9 @@
             icon="pi pi-stop"
             :severity="hasPendingTasks ? 'danger' : 'secondary'"
             :disabled="!hasPendingTasks"
-            @click="() => commandStore.getCommand('Comfy.ClearPendingTasks')()"
+            @click="
+              () => commandStore.getCommandFunction('Comfy.ClearPendingTasks')()
+            "
           />
         </ButtonGroup>
       </div>
@@ -48,14 +50,15 @@
           icon="pi pi-refresh"
           severity="secondary"
           @click="
-            () => commandStore.getCommand('Comfy.RefreshNodeDefinitions')()
+            () =>
+              commandStore.getCommandFunction('Comfy.RefreshNodeDefinitions')()
           "
         />
         <Button
           v-tooltip.bottom="$t('menu.resetView')"
           icon="pi pi-expand"
           severity="secondary"
-          @click="() => commandStore.getCommand('Comfy.ResetView')()"
+          @click="() => commandStore.getCommandFunction('Comfy.ResetView')()"
         />
       </ButtonGroup>
     </div>

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -36,7 +36,9 @@
           icon="pi pi-stop"
           severity="danger"
           text
-          @click="() => commandStore.getCommand('Comfy.ClearPendingTasks')()"
+          @click="
+            () => commandStore.getCommandFunction('Comfy.ClearPendingTasks')()
+          "
           v-tooltip.bottom="$t('sideToolbar.queueTab.clearPendingTasks')"
         />
         <Button

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -6,27 +6,33 @@
         icon="pi pi-th-large"
         v-tooltip="$t('sideToolbar.browseTemplates')"
         text
-        @click="() => commandStore.getCommand('Comfy.BrowseTemplates')()"
+        @click="
+          () => commandStore.getCommandFunction('Comfy.BrowseTemplates')()
+        "
       />
       <Button
         class="browse-workflows-button"
         icon="pi pi-folder-open"
         v-tooltip="'Browse for an image or exported workflow'"
         text
-        @click="() => commandStore.getCommand('Comfy.OpenWorkflow')()"
+        @click="() => commandStore.getCommandFunction('Comfy.OpenWorkflow')()"
       />
       <Button
         class="new-default-workflow-button"
         icon="pi pi-code"
         v-tooltip="'Load default workflow'"
         text
-        @click="() => commandStore.getCommand('Comfy.LoadDefaultWorkflow')()"
+        @click="
+          () => commandStore.getCommandFunction('Comfy.LoadDefaultWorkflow')()
+        "
       />
       <Button
         class="new-blank-workflow-button"
         icon="pi pi-plus"
         v-tooltip="'Create a new blank workflow'"
-        @click="() => commandStore.getCommand('Comfy.NewBlankWorkflow')()"
+        @click="
+          () => commandStore.getCommandFunction('Comfy.NewBlankWorkflow')()
+        "
         text
       />
     </template>

src/components/topbar/TopMenubar.vue

@@ -1,13 +1,10 @@
 <template>
   <teleport to=".comfyui-body-top">
-    <div
-      class="top-menubar comfyui-menu flex items-center"
-      v-show="betaMenuEnabled"
-    >
+    <div class="comfyui-menu flex items-center" v-show="betaMenuEnabled">
       <h1 class="comfyui-logo mx-2">ComfyUI</h1>
       <Menubar
         :model="items"
-        class="border-none p-0 bg-transparent"
+        class="top-menubar border-none p-0 bg-transparent"
         :pt="{
           rootList: 'gap-0 flex-nowrap'
         }"
@@ -26,7 +23,7 @@
 import Menubar from 'primevue/menubar'
 import Divider from 'primevue/divider'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
-import { useCoreMenuItemStore } from '@/stores/coreMenuItemStore'
+import { useMenuItemStore } from '@/stores/menuItemStore'
 import { computed, onMounted, ref } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'
@@ -38,8 +35,8 @@ const workflowTabsPosition = computed(() =>
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
-const coreMenuItemsStore = useCoreMenuItemStore()
-const items = coreMenuItemsStore.menuItems
+const menuItemsStore = useMenuItemStore()
+const items = menuItemsStore.menuItems
 
 const menuRight = ref<HTMLDivElement | null>(null)
 // Menu-right holds legacy topbar elements attached by custom scripts