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/scripts/changeTracker.ts

@@ -7,8 +7,8 @@ import { ComfyWorkflow } from './workflows'
 export class ChangeTracker {
   static MAX_HISTORY = 50
   #app: ComfyApp
-  undo = []
-  redo = []
+  undoQueue = []
+  redoQueue = []
   activeState = null
   isOurLoad = false
   workflow: ComfyWorkflow | null
@@ -54,12 +54,12 @@ export class ChangeTracker {
       return
     }
     if (!ChangeTracker.graphEqual(this.activeState, currentState)) {
-      this.undo.push(this.activeState)
-      if (this.undo.length > ChangeTracker.MAX_HISTORY) {
-        this.undo.shift()
+      this.undoQueue.push(this.activeState)
+      if (this.undoQueue.length > ChangeTracker.MAX_HISTORY) {
+        this.undoQueue.shift()
       }
       this.activeState = clone(currentState)
-      this.redo.length = 0
+      this.redoQueue.length = 0
       this.workflow.unsaved = true
       api.dispatchEvent(
         new CustomEvent('graphChanged', { detail: this.activeState })
@@ -80,13 +80,21 @@ export class ChangeTracker {
     }
   }
 
+  async undo() {
+    await this.updateState(this.undoQueue, this.redoQueue)
+  }
+
+  async redo() {
+    await this.updateState(this.redoQueue, this.undoQueue)
+  }
+
   async undoRedo(e) {
     if (e.ctrlKey || e.metaKey) {
       if (e.key === 'y') {
-        this.updateState(this.redo, this.undo)
+        await this.redo()
         return true
       } else if (e.key === 'z') {
-        this.updateState(this.undo, this.redo)
+        await this.undo()
         return true
       }
     }
@@ -276,4 +284,4 @@ export class ChangeTracker {
   }
 }
 
-const globalTracker = new ChangeTracker({} as ComfyWorkflow)
+export const globalTracker = new ChangeTracker({} as ComfyWorkflow)

src/scripts/ui/menu/menu.css

@@ -122,24 +122,6 @@
 }
 
 /* Menu */
-.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;
-  padding: 4px 8px;
-  align-items: center;
-  gap: 8px;
-  box-sizing: border-box;
-  z-index: 1000;
-  order: 0;
-  grid-column: 1/-1;
-  overflow: auto;
-  max-height: 90vh;
-}
-
 .comfyui-menu>* {
   flex-shrink: 0;
 }
@@ -183,13 +165,6 @@
   flex: auto;
 }
 
-.comfyui-logo {
-  font-size: 1.2em;
-  margin: 0;
-  user-select: none;
-  cursor: default;
-}
-
 /** Send to workflow widget selection dialog */
 .comfy-widget-selection-dialog {
   border: none;