Rename AppMenu to Actionbar (#1099)

* Rename AppMenu to Actionbar

* nit

* nit

browser_tests/ComfyPage.ts

@@ -1,7 +1,7 @@
 import type { Page, Locator, APIRequestContext } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import { ComfyAppMenu } from './helpers/appMenu'
+import { ComfyActionbar } from './helpers/actionbar'
 import dotenv from 'dotenv'
 dotenv.config()
 import * as fs from 'fs'
@@ -374,7 +374,7 @@ export class ComfyPage {
   // Components
   public readonly searchBox: ComfyNodeSearchBox
   public readonly menu: ComfyMenu
-  public readonly appMenu: ComfyAppMenu
+  public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
 
   constructor(
@@ -389,7 +389,7 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
     this.searchBox = new ComfyNodeSearchBox(page)
     this.menu = new ComfyMenu(page)
-    this.appMenu = new ComfyAppMenu(page)
+    this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
   }
 

browser_tests/appMenu.spec.ts

@@ -6,7 +6,7 @@ import { webSocketFixture } from './fixtures/ws.ts'
 
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
-test.describe('AppMenu', () => {
+test.describe('Actionbar', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
   })
@@ -23,12 +23,12 @@ test.describe('AppMenu', () => {
     ws
   }) => {
     // Enable change auto-queue mode
-    const queueOpts = await comfyPage.appMenu.queueButton.toggleOptions()
+    const queueOpts = await comfyPage.actionbar.queueButton.toggleOptions()
     expect(await queueOpts.getMode()).toBe('disabled')
     await queueOpts.setMode('change')
     await comfyPage.nextFrame()
     expect(await queueOpts.getMode()).toBe('change')
-    await comfyPage.appMenu.queueButton.toggleOptions()
+    await comfyPage.actionbar.queueButton.toggleOptions()
 
     // Intercept the prompt queue endpoint
     let promptNumber = 0

browser_tests/helpers/actionbar.ts

@@ -1,12 +1,12 @@
 import type { Page, Locator } from '@playwright/test'
 import type { AutoQueueMode } from '../../src/stores/queueStore'
 
-export class ComfyAppMenu {
+export class ComfyActionbar {
   public readonly root: Locator
   public readonly queueButton: ComfyQueueButton
 
   constructor(public readonly page: Page) {
-    this.root = page.locator('.app-menu')
+    this.root = page.locator('.actionbar')
     this.queueButton = new ComfyQueueButton(this)
   }
 }
@@ -15,15 +15,15 @@ class ComfyQueueButton {
   public readonly root: Locator
   public readonly primaryButton: Locator
   public readonly dropdownButton: Locator
-  constructor(public readonly appMenu: ComfyAppMenu) {
-    this.root = appMenu.root.getByTestId('queue-button')
+  constructor(public readonly actionbar: ComfyActionbar) {
+    this.root = actionbar.root.getByTestId('queue-button')
     this.primaryButton = this.root.locator('.p-splitbutton-button')
     this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
   }
 
   public async toggleOptions() {
     await this.dropdownButton.click()
-    return new ComfyQueueButtonOptions(this.appMenu.page)
+    return new ComfyQueueButtonOptions(this.actionbar.page)
   }
 }
 

src/components/actionbar/ComfyActionbar.vue

@@ -1,11 +1,11 @@
 <template>
   <Panel
     v-show="visible"
-    class="app-menu w-fit"
+    class="actionbar w-fit"
     :style="style"
     :class="{ 'is-dragging': isDragging }"
   >
-    <div class="app-menu-content flex items-center" ref="panelRef">
+    <div class="actionbar-content flex items-center" ref="panelRef">
       <span class="drag-handle cursor-move mr-2 p-0!" ref="dragHandleRef">
       </span>
       <div class="queue-button-group flex">
@@ -216,13 +216,13 @@ useEventListener(window, 'resize', adjustMenuPosition)
 </script>
 
 <style scoped>
-.app-menu {
+.actionbar {
   pointer-events: all;
   position: fixed;
   z-index: 1000;
 }
 
-.app-menu.is-dragging {
+.actionbar.is-dragging {
   user-select: none;
 }
 

src/views/GraphView.vue

@@ -6,7 +6,7 @@
   <GlobalToast />
   <UnloadWindowConfirmDialog />
   <BrowserTabTitle />
-  <AppMenu />
+  <Actionbar />
 </template>
 
 <script setup lang="ts">
@@ -41,7 +41,7 @@ import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySideba
 import GlobalToast from '@/components/toast/GlobalToast.vue'
 import UnloadWindowConfirmDialog from '@/components/dialog/UnloadWindowConfirmDialog.vue'
 import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
-import AppMenu from '@/components/appMenu/AppMenu.vue'
+import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import TopMenubar from '@/components/topbar/TopMenubar.vue'
 import { setupAutoQueueHandler } from '@/services/autoQueueService'