Floating menu option (#726)

* Add floating menu

* Fix

* Updates

* Add auto-queue change test

* Fix

src/scripts/ui/menu/index.ts

@@ -11,7 +11,7 @@ import { getInterruptButton } from './interruptButton'
 import './menu.css'
 import type { ComfySettingsDialog } from '../settings'
 
-type MenuPosition = 'Disabled' | 'Top' | 'Bottom'
+type MenuPosition = 'Disabled' | 'Top' | 'Bottom' | 'Floating'
 
 const collapseOnMobile = (t) => {
   ;(t.element ?? t).classList.add('comfyui-menu-mobile-collapse')
@@ -89,7 +89,7 @@ export class ComfyAppMenu {
       })
     )
 
-    this.actionsGroup = new ComfyButtonGroup(
+    const actionButtons = [
       new ComfyButton({
         icon: 'refresh',
         content: 'Refresh',
@@ -123,13 +123,14 @@ export class ComfyAppMenu {
           }
         }
       })
-    )
+    ]
+    this.actionsGroup = new ComfyButtonGroup(...actionButtons)
+
     // Keep the settings group as there are custom scripts attaching extra
     // elements to it.
     this.settingsGroup = new ComfyButtonGroup()
-    this.viewGroup = new ComfyButtonGroup(
-      getInterruptButton('nlg-hide').element
-    )
+    const interruptButton = getInterruptButton('nlg-hide').element
+    this.viewGroup = new ComfyButtonGroup(interruptButton)
     this.mobileMenuButton = new ComfyButton({
       icon: 'menu',
       action: (_, btn) => {
@@ -165,15 +166,36 @@ export class ComfyAppMenu {
       experimental: true,
       tooltip: 'On small screens the menu will always be at the top.',
       type: 'combo',
-      options: ['Disabled', 'Top', 'Bottom'],
+      options: ['Disabled', 'Floating', 'Top', 'Bottom'],
       onChange: async (v: MenuPosition) => {
         if (v && v !== 'Disabled') {
-          if (!resizeHandler) {
-            resizeHandler = () => {
-              this.calculateSizeBreak()
+          const floating = v === 'Floating'
+          if (floating) {
+            if (resizeHandler) {
+              window.removeEventListener('resize', resizeHandler)
+              resizeHandler = null
+            }
+            this.element.classList.add('floating')
+            document.body.classList.add('comfyui-floating-menu')
+          } else {
+            this.element.classList.remove('floating')
+            document.body.classList.remove('comfyui-floating-menu')
+            if (!resizeHandler) {
+              resizeHandler = () => {
+                this.calculateSizeBreak()
+              }
+              window.addEventListener('resize', resizeHandler)
             }
-            window.addEventListener('resize', resizeHandler)
           }
+
+          for (const b of [
+            ...actionButtons.map((b) => b.element),
+            interruptButton,
+            this.queueButton.element
+          ]) {
+            b.style.display = floating ? 'none' : null
+          }
+
           this.updatePosition(v)
         } else {
           if (resizeHandler) {
@@ -204,7 +226,11 @@ export class ComfyAppMenu {
     } else {
       this.app.bodyTop.prepend(this.element)
     }
-    this.calculateSizeBreak()
+    if (v === 'Floating') {
+      this.updateSizeBreak(0, this.#sizeBreaks.indexOf(this.#sizeBreak), -999)
+    } else {
+      this.calculateSizeBreak()
+    }
   }
 
   updateSizeBreak(idx: number, prevIdx: number, direction: number) {

src/scripts/ui/menu/menu.css

@@ -1,3 +1,6 @@
+:root {
+  --comfy-floating-menu-height: 45px;
+}
 .relative {
   position: relative;
 }
@@ -118,6 +121,9 @@
   overflow: hidden;
 }
 
+.comfyui-button-group:empty {
+  display: none;
+}
 .comfyui-button-group > .comfyui-button,
 .comfyui-button-group > .comfyui-button-wrapper > .comfyui-button {
   padding: 4px 10px;
@@ -142,6 +148,22 @@
   overflow: auto;
   max-height: 90vh;
 }
+.comfyui-menu.floating {
+  width: max-content;
+  padding: 8px 0 8px 12px;
+  overflow: hidden;
+  border-bottom-right-radius: 12px;
+  height: var(--comfy-floating-menu-height);
+  position: absolute;
+}
+
+.comfyui-menu.floating .comfyui-logo {
+  padding-right: 8px;
+}
+
+.comfyui-floating-menu .comfyui-body-left {
+  margin-top: var(--comfy-floating-menu-height);
+}
 
 .comfyui-menu>* {
   flex-shrink: 0;
@@ -708,4 +730,5 @@
 }
 .comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
   bottom: 41px;
-}
+}
+

src/scripts/ui/menu/workflows.ts

@@ -232,7 +232,7 @@ export class ComfyWorkflowsMenu {
           const r = getExtraMenuOptions?.apply?.(this, arguments)
           const setting = app.ui.settings.getSettingValue(
             'Comfy.UseNewMenu',
-            false
+            'Disabled'
           )
           if (setting && setting != 'Disabled') {
             const t = this