Docking action bar on top menu bar (#1119)

* Teleport when docked

* Docking logic

* Remove unnecessary v-show

* Docked panel style

* Drop zone highlight

* Rename test

* Add playwright test

browser_tests/actionbar.spec.ts

@@ -113,4 +113,15 @@ test.describe('Actionbar', () => {
     ).toBe(END)
     expect(promptNumber, 'queued prompt count should be 2').toBe(2)
   })
+
+  test('Can dock actionbar into top menu', async ({ comfyPage }) => {
+    await comfyPage.page.dragAndDrop(
+      '.actionbar .drag-handle',
+      '.comfyui-menu',
+      {
+        targetPosition: { x: 0, y: 0 }
+      }
+    )
+    expect(await comfyPage.actionbar.isDocked()).toBe(true)
+  })
 })

browser_tests/helpers/actionbar.ts

@@ -9,6 +9,11 @@ export class ComfyActionbar {
     this.root = page.locator('.actionbar')
     this.queueButton = new ComfyQueueButton(this)
   }
+
+  async isDocked() {
+    const className = await this.root.getAttribute('class')
+    return className?.includes('is-docked') ?? false
+  }
 }
 
 class ComfyQueueButton {