add a hotkey for settings (#991)

* add a hotkey for settings

for #942

* playwright test for settings menu hotkey

* make hotkey intercompatible with both old and new UI

browser_tests/interaction.spec.ts

@@ -422,3 +422,15 @@ test.describe('Load duplicate workflow', () => {
     expect(await comfyPage.getGraphNodesCount()).toBe(1)
   })
 })
+
+test.describe('Menu interactions', () => {
+  test('Can open settings with hotkey', async ({ comfyPage }) => {
+    await comfyPage.page.keyboard.down('ControlOrMeta')
+    await comfyPage.page.keyboard.press(',')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
+    const settingsLocator = comfyPage.page.locator('.settings-container')
+    await expect(settingsLocator).toBeVisible()
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(settingsLocator).not.toBeVisible()
+  })
+})

src/components/sidebar/SidebarSettingsToggleIcon.vue

@@ -1,6 +1,7 @@
 <template>
   <SidebarIcon
     icon="pi pi-cog"
+    class="comfy-settings-btn"
     @click="showSetting"
     :tooltip="$t('settings')"
   />

src/extensions/core/keybinds.ts

@@ -41,7 +41,8 @@ app.registerExtension({
         o: '#comfy-file-input',
         Backspace: '#comfy-clear-button',
         d: '#comfy-load-default-button',
-        g: '#comfy-group-selected-nodes-button'
+        g: '#comfy-group-selected-nodes-button',
+        ',': '.comfy-settings-btn'
       }
 
       const modifierKeybindId = modifierKeyIdMap[event.key]