From dc2122305788c92ab7fcf1e07f0caf72cc5539a7 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 5 Oct 2024 16:10:26 -0400
Subject: [PATCH 1/4] Rename floating to top

---
 browser_tests/actionbar.spec.ts       | 2 +-
 browser_tests/browserTabTitle.spec.ts | 2 +-
 browser_tests/extensionAPI.spec.ts    | 2 +-
 browser_tests/groupNode.spec.ts       | 4 ++--
 browser_tests/interaction.spec.ts     | 2 +-
 browser_tests/menu.spec.ts            | 6 +++---
 browser_tests/propertiesPanel.spec.ts | 2 +-
 browser_tests/templates.spec.ts       | 2 +-
 src/stores/coreSettings.ts            | 7 ++++---
 src/types/apiTypes.ts                 | 2 +-
 10 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/browser_tests/actionbar.spec.ts b/browser_tests/actionbar.spec.ts
index ae0c257c..5185ca04 100644
--- a/browser_tests/actionbar.spec.ts
+++ b/browser_tests/actionbar.spec.ts
@@ -8,7 +8,7 @@ const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 test.describe('Actionbar', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test.afterEach(async ({ comfyPage }) => {
diff --git a/browser_tests/browserTabTitle.spec.ts b/browser_tests/browserTabTitle.spec.ts
index 45dc0420..abbe90df 100644
--- a/browser_tests/browserTabTitle.spec.ts
+++ b/browser_tests/browserTabTitle.spec.ts
@@ -4,7 +4,7 @@ import { comfyPageFixture as test } from './ComfyPage'
 test.describe('Browser tab title', () => {
   test.describe('Beta Menu', () => {
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
     })
 
     test.afterEach(async ({ comfyPage }) => {
diff --git a/browser_tests/extensionAPI.spec.ts b/browser_tests/extensionAPI.spec.ts
index 7bbbbac3..9902d668 100644
--- a/browser_tests/extensionAPI.spec.ts
+++ b/browser_tests/extensionAPI.spec.ts
@@ -3,7 +3,7 @@ import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Topbar commands', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test.afterEach(async ({ comfyPage }) => {
diff --git a/browser_tests/groupNode.spec.ts b/browser_tests/groupNode.spec.ts
index 0c86272e..e24255ce 100644
--- a/browser_tests/groupNode.spec.ts
+++ b/browser_tests/groupNode.spec.ts
@@ -13,7 +13,7 @@ test.describe('Group Node', () => {
     let libraryTab
 
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
       libraryTab = comfyPage.menu.nodeLibraryTab
       await comfyPage.convertAllNodesToGroupNode(groupNodeName)
       await libraryTab.open()
@@ -182,7 +182,7 @@ test.describe('Group Node', () => {
     }
 
     test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+      await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
       await comfyPage.loadWorkflow(WORKFLOW_NAME)
       await comfyPage.menu.nodeLibraryTab.open()
 
diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts
index 2cd25a51..743884e0 100644
--- a/browser_tests/interaction.spec.ts
+++ b/browser_tests/interaction.spec.ts
@@ -480,7 +480,7 @@ test.describe('Load workflow', () => {
 
 test.describe('Load duplicate workflow', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test.afterEach(async ({ comfyPage }) => {
diff --git a/browser_tests/menu.spec.ts b/browser_tests/menu.spec.ts
index 840c9751..801ac3d6 100644
--- a/browser_tests/menu.spec.ts
+++ b/browser_tests/menu.spec.ts
@@ -3,7 +3,7 @@ import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test.afterEach(async ({ comfyPage }) => {
@@ -508,7 +508,7 @@ test.describe('Menu', () => {
       comfyPage
     }) => {
       await comfyPage.setSetting('Comfy.UseNewMenu', position)
-      expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Floating')
+      expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Top')
     })
 
     test(`Can migrate deprecated menu positions on initial load (${position})`, async ({
@@ -516,7 +516,7 @@ test.describe('Menu', () => {
     }) => {
       await comfyPage.setSetting('Comfy.UseNewMenu', position)
       await comfyPage.setup()
-      expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Floating')
+      expect(await comfyPage.getSetting('Comfy.UseNewMenu')).toBe('Top')
     })
   })
 
diff --git a/browser_tests/propertiesPanel.spec.ts b/browser_tests/propertiesPanel.spec.ts
index b9c96b71..8e997bdd 100644
--- a/browser_tests/propertiesPanel.spec.ts
+++ b/browser_tests/propertiesPanel.spec.ts
@@ -3,7 +3,7 @@ import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Properties Panel', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test.afterEach(async ({ comfyPage }) => {
diff --git a/browser_tests/templates.spec.ts b/browser_tests/templates.spec.ts
index 16c603e6..75968bdf 100644
--- a/browser_tests/templates.spec.ts
+++ b/browser_tests/templates.spec.ts
@@ -3,7 +3,7 @@ import { comfyPageFixture as test } from './ComfyPage'
 
 test.describe('Templates', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test.afterEach(async ({ comfyPage }) => {
diff --git a/src/stores/coreSettings.ts b/src/stores/coreSettings.ts
index c13689ad..84d044f9 100644
--- a/src/stores/coreSettings.ts
+++ b/src/stores/coreSettings.ts
@@ -376,10 +376,11 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Use new menu and workflow management.',
     experimental: true,
     type: 'combo',
-    options: ['Disabled', 'Floating'],
+    options: ['Disabled', 'Top', 'Bottom'],
     migrateDeprecatedValue: (value: string) => {
-      if (['Top', 'Bottom'].includes(value)) {
-        return 'Floating'
+      // Floating is now supported by dragging the docked actionbar off.
+      if (value === 'Floating') {
+        return 'Top'
       }
       return value
     }
diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts
index 4a460f45..abe72831 100644
--- a/src/types/apiTypes.ts
+++ b/src/types/apiTypes.ts
@@ -494,7 +494,7 @@ const zSettings = z.record(z.any()).and(
       'Comfy.SnapToGrid.GridSize': z.number(),
       'Comfy.TextareaWidget.FontSize': z.number(),
       'Comfy.TextareaWidget.Spellcheck': z.boolean(),
-      'Comfy.UseNewMenu': z.enum(['Disabled', 'Floating']),
+      'Comfy.UseNewMenu': z.enum(['Disabled', 'Top', 'Bottom']),
       'Comfy.TreeExplorer.ItemPadding': z.number(),
       'Comfy.Validation.Workflows': z.boolean(),
       'Comfy.Workflow.SortNodeIdOnSave': z.boolean(),

From f02d85c1bd8da318c1ab50444f57db0b6fd143b7 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 5 Oct 2024 16:43:42 -0400
Subject: [PATCH 2/4] Adjust teleport target

---
 src/components/topbar/TopMenubar.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index 12bb63cb..c49ca935 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport to=".comfyui-body-top">
+  <teleport :to="teleportTarget">
     <div
       ref="topMenuRef"
       class="comfyui-menu flex items-center"
@@ -42,6 +42,11 @@ const workflowTabsPosition = computed(() =>
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
+const teleportTarget = computed(() =>
+  settingStore.get('Comfy.UseNewMenu') === 'Top'
+    ? '.comfyui-body-top'
+    : '.comfyui-body-bottom'
+)
 const menuItemsStore = useMenuItemStore()
 const items = menuItemsStore.menuItems
 

From 3fb9f4a06497ff2b1729f273cec6b57e247d9395 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 5 Oct 2024 17:54:44 -0400
Subject: [PATCH 3/4] Fix dropdown direction for bottom menubar

---
 src/components/topbar/TopMenubar.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index c49ca935..b6680c02 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -11,7 +11,9 @@
         :model="items"
         class="top-menubar border-none p-0 bg-transparent"
         :pt="{
-          rootList: 'gap-0 flex-nowrap w-auto'
+          rootList: 'gap-0 flex-nowrap w-auto',
+          submenu: `dropdown-direction-${dropdownDirection}`,
+          item: 'relative'
         }"
       />
       <Divider layout="vertical" class="mx-2" />
@@ -47,6 +49,10 @@ const teleportTarget = computed(() =>
     ? '.comfyui-body-top'
     : '.comfyui-body-bottom'
 )
+const dropdownDirection = computed(() =>
+  settingStore.get('Comfy.UseNewMenu') === 'Top' ? 'down' : 'up'
+)
+
 const menuItemsStore = useMenuItemStore()
 const items = menuItemsStore.menuItems
 
@@ -104,4 +110,8 @@ eventBus.on((event: string, payload: any) => {
 .top-menubar .p-menubar-item-link svg {
   display: none;
 }
+
+.p-menubar-submenu.dropdown-direction-up {
+  @apply top-auto bottom-full flex-col-reverse;
+}
 </style>

From de339b97f5452517527e1482976b8a5914654304 Mon Sep 17 00:00:00 2001
From: huchenlei <huchenlei@proton.me>
Date: Sat, 5 Oct 2024 17:56:14 -0400
Subject: [PATCH 4/4] Fix z-index

---
 src/assets/css/style.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index de0a12ac..1e9596df 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -126,7 +126,8 @@ body {
   /* Span across all columns */
   grid-column: 1/-1;
   grid-row: 3;
-  z-index: 10;
+  /* Bottom menu bar dropdown needs to be above of graph canvas splitter overlay which is z-index: 999 */
+  z-index: 1000;
   display: flex;
   flex-direction: column;
 }