Show keybinding on topbar dropdown menus (#1127)

* Show keybinding on topbar dropdown menus, resolve #1092

* Add text-muted to tailwind config

* Add Playwright test

* Preserve Primevue classes in menu item template

* Extend MenuItem

* Revert adding undo/redo to core keybindings

* Change test selector

* refactor

* Extract as component

* refactor

* nit

* fix extension API

---------

Co-authored-by: huchenlei <huchenlei@proton.me>

src/components/actionbar/ComfyQueueButton.vue

@@ -47,6 +47,7 @@
 import SplitButton from 'primevue/splitbutton'
 import Button from 'primevue/button'
 import BatchCountEdit from './BatchCountEdit.vue'
+import ButtonGroup from 'primevue/buttongroup'
 import { useI18n } from 'vue-i18n'
 import {
   AutoQueueMode,

src/components/topbar/CommandMenubar.vue

@@ -0,0 +1,55 @@
+<template>
+  <Menubar
+    :model="items"
+    class="top-menubar border-none p-0 bg-transparent"
+    :pt="{
+      rootList: 'gap-0 flex-nowrap w-auto',
+      submenu: `dropdown-direction-${dropdownDirection}`,
+      item: 'relative'
+    }"
+  >
+    <template #item="{ item, props }">
+      <a class="p-menubar-item-link" v-bind="props.action">
+        <span v-if="item.icon" class="p-menubar-item-icon" :class="item.icon" />
+        <span class="p-menubar-item-label">{{ item.label }}</span>
+        <span
+          v-if="item?.comfyCommand?.keybinding"
+          class="ml-auto border border-surface rounded text-muted text-xs p-1 keybinding-tag"
+        >
+          {{ item.comfyCommand.keybinding.combo.toString() }}
+        </span>
+      </a>
+    </template>
+  </Menubar>
+</template>
+
+<script setup lang="ts">
+import { useMenuItemStore } from '@/stores/menuItemStore'
+import { useSettingStore } from '@/stores/settingStore'
+import Menubar from 'primevue/menubar'
+import { computed } from 'vue'
+
+const settingStore = useSettingStore()
+const dropdownDirection = computed(() =>
+  settingStore.get('Comfy.UseNewMenu') === 'Top' ? 'down' : 'up'
+)
+
+const menuItemsStore = useMenuItemStore()
+const items = menuItemsStore.menuItems
+</script>
+
+<style scoped>
+.top-menubar :deep(.p-menubar-item-link) svg {
+  display: none;
+}
+
+:deep(.p-menubar-submenu.dropdown-direction-up) {
+  @apply top-auto bottom-full flex-col-reverse;
+}
+
+.keybinding-tag {
+  background: var(--p-content-hover-background);
+  border-color: var(--p-content-border-color);
+  border-style: solid;
+}
+</style>

src/components/topbar/TopMenubar.vue

@@ -7,15 +7,7 @@
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <h1 class="comfyui-logo mx-2">ComfyUI</h1>
-      <Menubar
-        :model="items"
-        class="top-menubar border-none p-0 bg-transparent"
-        :pt="{
-          rootList: 'gap-0 flex-nowrap w-auto',
-          submenu: `dropdown-direction-${dropdownDirection}`,
-          item: 'relative'
-        }"
-      />
+      <CommandMenubar />
       <Divider layout="vertical" class="mx-2" />
       <div class="flex-grow">
         <WorkflowTabs v-if="workflowTabsPosition === 'Topbar'" />
@@ -27,11 +19,10 @@
 </template>
 
 <script setup lang="ts">
-import Menubar from 'primevue/menubar'
 import Divider from 'primevue/divider'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
+import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
 import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
-import { useMenuItemStore } from '@/stores/menuItemStore'
 import { computed, onMounted, provide, ref } from 'vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { app } from '@/scripts/app'
@@ -49,12 +40,6 @@ 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
 
 const menuRight = ref<HTMLDivElement | null>(null)
 // Menu-right holds legacy topbar elements attached by custom scripts
@@ -105,13 +90,3 @@ eventBus.on((event: string, payload: any) => {
   cursor: default;
 }
 </style>
-
-<style>
-.top-menubar .p-menubar-item-link svg {
-  display: none;
-}
-
-.p-menubar-submenu.dropdown-direction-up {
-  @apply top-auto bottom-full flex-col-reverse;
-}
-</style>