Add topbar dropdown menu (#937)

* Add basic menu

* Add workflows/edit to menu bar

* Add command store

* Fix z-index

* Fix beta menu setting switch

* nit

* Drop to center

* Fix command invocation

src/components/appMenu/AppMenu.vue

@@ -65,7 +65,7 @@
         icon="pi pi-times"
         severity="secondary"
         :disabled="!executingPrompt"
-        @click="actions.interrupt"
+        @click="commandStore.getCommand('Comfy.Interrupt')"
       ></Button>
 
       <ButtonGroup>
@@ -73,25 +73,19 @@
           v-tooltip.bottom="$t('menu.refresh')"
           icon="pi pi-refresh"
           severity="secondary"
-          @click="actions.refresh"
+          @click="commandStore.getCommand('Comfy.RefreshNodeDefinitions')"
         />
         <Button
           v-tooltip.bottom="$t('menu.clipspace')"
           icon="pi pi-clipboard"
           severity="secondary"
-          @click="actions.openClipspace"
+          @click="commandStore.getCommand('Comfy.OpenClipspace')"
         />
         <Button
           v-tooltip.bottom="$t('menu.resetView')"
           icon="pi pi-expand"
           severity="secondary"
-          @click="actions.resetView"
-        />
-        <Button
-          v-tooltip.bottom="$t('menu.clear')"
-          icon="pi pi-ban"
-          severity="secondary"
-          @click="actions.clearWorkflow"
+          @click="commandStore.getCommand('Comfy.ResetView')"
         />
       </ButtonGroup>
     </div>
@@ -115,12 +109,12 @@ import {
   useQueueSettingsStore
 } from '@/stores/queueStore'
 import { app } from '@/scripts/app'
-import { api } from '@/scripts/api'
 import { storeToRefs } from 'pinia'
 import { useSettingStore } from '@/stores/settingStore'
-import { useToastStore } from '@/stores/toastStore'
+import { useCommandStore } from '@/stores/commandStore'
 
 const settingsStore = useSettingStore()
+const commandStore = useCommandStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { batchCount, mode: queueMode } = storeToRefs(useQueueSettingsStore())
 
@@ -147,31 +141,6 @@ const executingPrompt = computed(() => !!queueCountStore.count.value)
 const queuePrompt = (e: MouseEvent) => {
   app.queuePrompt(e.shiftKey ? -1 : 0, batchCount.value)
 }
-
-const actions = {
-  interrupt: async () => {
-    await api.interrupt()
-    useToastStore().add({
-      severity: 'info',
-      summary: 'Interrupted',
-      detail: 'Execution has been interrupted',
-      life: 1000
-    })
-  },
-  clearWorkflow: () => {
-    if (
-      !(settingsStore.get('Comfy.ComfirmClear') ?? true) ||
-      confirm('Clear workflow?')
-    ) {
-      app.clean()
-      app.graph.clear()
-      api.dispatchEvent(new CustomEvent('graphCleared'))
-    }
-  },
-  resetView: () => app.resetView(),
-  openClipspace: () => app['openClipspace'](),
-  refresh: () => app.refreshComboInNodes()
-}
 </script>
 
 <style scoped>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -6,27 +6,27 @@
         icon="pi pi-th-large"
         v-tooltip="$t('sideToolbar.browseTemplates')"
         text
-        @click="browseTemplates"
+        @click="() => commandStore.getCommand('Comfy.BrowseTemplates')()"
       />
       <Button
         class="browse-workflows-button"
         icon="pi pi-folder-open"
         v-tooltip="'Browse for an image or exported workflow'"
         text
-        @click="browse"
+        @click="() => commandStore.getCommand('Comfy.OpenWorkflow')()"
       />
       <Button
         class="new-default-workflow-button"
         icon="pi pi-code"
         v-tooltip="'Load default workflow'"
         text
-        @click="loadDefault"
+        @click="() => commandStore.getCommand('Comfy.LoadDefaultWorkflow')()"
       />
       <Button
         class="new-blank-workflow-button"
         icon="pi pi-plus"
         v-tooltip="'Create a new blank workflow'"
-        @click="createBlank"
+        @click="() => commandStore.getCommand('Comfy.NewBlankWorkflow')()"
         text
       />
     </template>
@@ -114,12 +114,12 @@ import TextDivider from '@/components/common/TextDivider.vue'
 import { app } from '@/scripts/app'
 import { computed, nextTick, ref } from 'vue'
 import { useWorkflowStore } from '@/stores/workflowStore'
+import { useCommandStore } from '@/stores/commandStore'
 import type { TreeNode } from 'primevue/treenode'
 import { TreeExplorerNode } from '@/types/treeExplorerTypes'
 import { ComfyWorkflow } from '@/scripts/workflows'
 import { useI18n } from 'vue-i18n'
 import { useTreeExpansion } from '@/hooks/treeHooks'
-import { showTemplateWorkflowsDialog } from '@/services/dialogService'
 
 const searchQuery = ref('')
 const isSearching = computed(() => searchQuery.value.length > 0)
@@ -144,25 +144,7 @@ const handleSearch = (query: string) => {
   })
 }
 
-const loadDefault = () => {
-  app.loadGraphData()
-  app.resetView()
-}
-
-const browse = () => {
-  app.ui.loadFile()
-}
-
-const browseTemplates = () => {
-  showTemplateWorkflowsDialog()
-}
-
-const createBlank = () => {
-  app.workflowManager.setWorkflow(null)
-  app.clean()
-  app.graph.clear()
-  app.workflowManager.activeWorkflow.track()
-}
+const commandStore = useCommandStore()
 
 const workflowStore = useWorkflowStore()
 const { t } = useI18n()

src/components/topbar/TopMenubar.vue

@@ -0,0 +1,58 @@
+<template>
+  <teleport to=".comfyui-body-top">
+    <div class="top-menubar comfyui-menu" v-if="betaMenuEnabled">
+      <h1 class="comfyui-logo mx-2">ComfyUI</h1>
+      <Menubar
+        :model="items"
+        class="border-none p-0 bg-transparent"
+        :pt="{
+          rootList: 'gap-0'
+        }"
+      />
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import Menubar from 'primevue/menubar'
+import { useCoreMenuItemStore } from '@/stores/coreMenuItemStore'
+import { computed } from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
+
+const settingStore = useSettingStore()
+const betaMenuEnabled = computed(
+  () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
+)
+const coreMenuItemsStore = useCoreMenuItemStore()
+const items = coreMenuItemsStore.menuItems
+</script>
+
+<style scoped>
+.comfyui-menu {
+  width: 100vw;
+  background: var(--comfy-menu-bg);
+  color: var(--fg-color);
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 0.8em;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  z-index: 1000;
+  order: 0;
+  grid-column: 1/-1;
+  overflow: auto;
+  max-height: 90vh;
+}
+
+.comfyui-logo {
+  font-size: 1.2em;
+  user-select: none;
+  cursor: default;
+}
+</style>
+
+<style>
+.top-menubar .p-menubar-item-link svg {
+  display: none;
+}
+</style>

src/components/topbar/WorkflowTabs.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="workflow-tabs">
+    <SelectButton
+      v-model="workflowStore.activeWorkflow"
+      :options="workflowStore.openWorkflows"
+      aria-labelledby="basic"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWorkflowStore } from '@/stores/workflowStore'
+import SelectButton from 'primevue/selectbutton'
+
+const workflowStore = useWorkflowStore()
+</script>