From 66e776774a281533b112e08481f1c8432c36d4fc Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 3 Feb 2026 16:06:33 -0800
Subject: [PATCH] feat: add default keybindings for toggle mode and assets
 panel (#8593)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Add default keyboard shortcuts for mode toggle and assets panel access.

## Changes
- **Ctrl+Shift+A**: Toggle between Simple Mode and Graph Mode
(`Comfy.ToggleLinear`)
- **A**: Open/toggle assets panel (`Workspace.ToggleSidebarTab.assets`)
- Show keybinding in ModeToggle button tooltip (e.g. "Simple Mode
(Ctrl+Shift+A)")

## Keybinding Rationale
- `A` follows the existing pattern: `w` (workflows), `n` (node-lib), `m`
(model-lib)
- `Ctrl+Shift+A` chosen because:
  - Ctrl+Shift is the standard modifier pattern for toggle commands
  - "A" mnemonic for "App mode"
  - Does not conflict with existing keybindings

## Testing
- Verified typecheck passes
- Verified lint passes

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Tooltips now show dynamic keyboard shortcut suffixes for mode and tab
controls.
  * Added keyboard shortcut: A — toggles the assets sidebar.
  * Added keyboard shortcut: Ctrl+Shift+A — toggles linear mode.

* **Localization**
* Added a localized shortcut suffix template so displayed shortcuts
respect translations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8593-feat-add-default-keybindings-for-toggle-mode-and-assets-panel-2fc6d73d36508172bd6ed3378f43de55)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
---
 src/components/sidebar/ModeToggle.vue  | 16 ++++++++++++++--
 src/components/sidebar/SideToolbar.vue |  9 +++++----
 src/locales/en/main.json               |  1 +
 src/platform/keybindings/defaults.ts   | 14 ++++++++++++++
 4 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/components/sidebar/ModeToggle.vue b/src/components/sidebar/ModeToggle.vue
index a9cd6f080..b962bac47 100644
--- a/src/components/sidebar/ModeToggle.vue
+++ b/src/components/sidebar/ModeToggle.vue
@@ -1,10 +1,22 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import Button from '@/components/ui/button/Button.vue'
 import { t } from '@/i18n'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
 const canvasStore = useCanvasStore()
+const keybindingStore = useKeybindingStore()
+
+const keybindingSuffix = computed(() => {
+  const shortcut = keybindingStore
+    .getKeybindingByCommandId('Comfy.ToggleLinear')
+    ?.combo.toString()
+  return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
+})
+
 function toggleLinearMode() {
   useCommandStore().execute('Comfy.ToggleLinear', {
     metadata: { source: 'button' }
@@ -18,7 +30,7 @@ function toggleLinearMode() {
   >
     <Button
       v-tooltip="{
-        value: t('linearMode.linearMode'),
+        value: t('linearMode.linearMode') + keybindingSuffix,
         showDelay: 300,
         hideDelay: 300
       }"
@@ -30,7 +42,7 @@ function toggleLinearMode() {
     </Button>
     <Button
       v-tooltip="{
-        value: t('linearMode.graphMode'),
+        value: t('linearMode.graphMode') + keybindingSuffix,
         showDelay: 300,
         hideDelay: 300
       }"
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 90727dec5..0af974f73 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -66,6 +66,7 @@ import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPa
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -151,10 +152,10 @@ const onTabClick = async (item: SidebarTabExtension) => {
 
 const keybindingStore = useKeybindingStore()
 const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
-  const keybinding = keybindingStore.getKeybindingByCommandId(
-    `Workspace.ToggleSidebarTab.${tab.id}`
-  )
-  return keybinding ? ` (${keybinding.combo.toString()})` : ''
+  const shortcut = keybindingStore
+    .getKeybindingByCommandId(`Workspace.ToggleSidebarTab.${tab.id}`)
+    ?.combo.toString()
+  return shortcut ? t('g.shortcutSuffix', { shortcut }) : ''
 }
 
 const isOverflowing = ref(false)
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 3b5fe6435..2d4eb5bbf 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -1,5 +1,6 @@
 {
   "g": {
+    "shortcutSuffix": " ({shortcut})",
     "user": "User",
     "you": "You",
     "currentUser": "Current user",
diff --git a/src/platform/keybindings/defaults.ts b/src/platform/keybindings/defaults.ts
index f791d4246..87a0176bc 100644
--- a/src/platform/keybindings/defaults.ts
+++ b/src/platform/keybindings/defaults.ts
@@ -48,6 +48,20 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
     },
     commandId: 'Workspace.ToggleSidebarTab.model-library'
   },
+  {
+    combo: {
+      key: 'a'
+    },
+    commandId: 'Workspace.ToggleSidebarTab.assets'
+  },
+  {
+    combo: {
+      ctrl: true,
+      shift: true,
+      key: 'a'
+    },
+    commandId: 'Comfy.ToggleLinear'
+  },
   {
     combo: {
       key: 's',