feat: Warn when binding browser-reserved shortcuts (#9406)

## Summary Show a non-blocking warning in the keybinding edit dialog when users try to bind shortcuts that browsers intercept (e.g. Ctrl+T, Ctrl+W, F12). ## Changes - **What**: Add `RESERVED_BY_BROWSER` set of known browser-intercepted shortcuts, `isBrowserReserved` getter on `KeyComboImpl`, and a warning `<Message>` in the keybinding edit dialog. Users can still save the binding. ## Review Focus Whether the list of browser-reserved shortcuts is comprehensive enough, and whether a non-blocking warning (vs blocking) is the right UX choice. ## Before https://github.com/user-attachments/assets/5abfc062-5ed1-4fcd-b394-ff98221d82a8 ## After https://github.com/user-attachments/assets/12a49e24-051f-4579-894a-164dbf1cb7b7 Fixes #1087 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9406-feat-Warn-when-binding-browser-reserved-shortcuts-31a6d73d36508162a021e88ab76914f6) by [Unito](https://www.unito.io) --------- Co-authored-by: Kelly Yang <124ykl@gmail.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com> Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: AustinMroz <austin@comfy.org> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Terry Jia <terryjia88@gmail.com> Co-authored-by: Alexander Brown <DrJKL0424@gmail.com> Co-authored-by: Dante <bunggl@naver.com> Co-authored-by: Deep Mehta <42841935+deepme987@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Yourz <crazilou@vip.qq.com> Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
2026-04-23 07:50:15 +00:00 · 2026-03-12 16:31:09 +01:00
parent 37c6ddfcd9
commit ef477d0381
11 changed files with 308 additions and 133 deletions
--- a/src/composables/useEditKeybindingDialog.ts
+++ b/src/composables/useEditKeybindingDialog.ts
@@ -0,0 +1,60 @@
+import { computed, reactive } from 'vue'
+
+import EditKeybindingContent from '@/components/dialog/content/setting/keybinding/EditKeybindingContent.vue'
+import EditKeybindingFooter from '@/components/dialog/content/setting/keybinding/EditKeybindingFooter.vue'
+import EditKeybindingHeader from '@/components/dialog/content/setting/keybinding/EditKeybindingHeader.vue'
+import type { KeyComboImpl } from '@/platform/keybindings/keyCombo'
+import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
+import { useDialogService } from '@/services/dialogService'
+
+export const DIALOG_KEY = 'edit-keybinding'
+
+export interface EditKeybindingDialogState {
+  commandId: string
+  newCombo: KeyComboImpl | null
+  currentCombo: KeyComboImpl | null
+}
+
+export function useEditKeybindingDialog() {
+  const { showSmallLayoutDialog } = useDialogService()
+  const keybindingStore = useKeybindingStore()
+
+  function show(options: {
+    commandId: string
+    commandLabel: string
+    currentCombo: KeyComboImpl | null
+  }) {
+    const dialogState = reactive<EditKeybindingDialogState>({
+      commandId: options.commandId,
+      newCombo: options.currentCombo,
+      currentCombo: options.currentCombo
+    })
+
+    const existingKeybindingOnCombo = computed(() => {
+      if (!dialogState.newCombo) return null
+      if (dialogState.currentCombo?.equals(dialogState.newCombo)) return null
+      return keybindingStore.getKeybinding(dialogState.newCombo)
+    })
+
+    function onUpdateCombo(combo: KeyComboImpl) {
+      dialogState.newCombo = combo
+    }
+
+    showSmallLayoutDialog({
+      key: DIALOG_KEY,
+      headerComponent: EditKeybindingHeader,
+      footerComponent: EditKeybindingFooter,
+      component: EditKeybindingContent,
+      props: {
+        dialogState,
+        onUpdateCombo,
+        commandLabel: options.commandLabel,
+        existingKeybindingOnCombo
+      },
+      headerProps: {},
+      footerProps: { dialogState, existingKeybindingOnCombo }
+    })
+  }
+
+  return { show }
+}