Allow keybind overwriting (#3393)

Co-authored-by: Benjamin Lu <templu1107@proton.me>

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -80,10 +80,9 @@
           placeholder="Press keys for new binding"
           autocomplete="off"
           fluid
-          :invalid="!!existingKeybindingOnCombo"
           @keydown.stop.prevent="captureKeybinding"
         />
-        <Message v-if="existingKeybindingOnCombo" severity="error">
+        <Message v-if="existingKeybindingOnCombo" severity="warn">
           Keybinding already exists on
           <Tag
             severity="secondary"
@@ -93,9 +92,9 @@
       </div>
       <template #footer>
         <Button
-          label="Save"
-          icon="pi pi-check"
-          :disabled="!!existingKeybindingOnCombo"
+          :label="existingKeybindingOnCombo ? 'Overwrite' : 'Save'"
+          :icon="existingKeybindingOnCombo ? 'pi pi-pencil' : 'pi pi-check'"
+          :severity="existingKeybindingOnCombo ? 'warn' : undefined"
           autofocus
           @click="saveKeybinding"
         />

src/stores/keybindingStore.ts

@@ -184,6 +184,19 @@ export const useKeybindingStore = defineStore('keybinding', () => {
     return getKeybindingsByCommandId(commandId)[0]
   }
 
+  /**
+   * Adds a keybinding to the specified target reference.
+   *
+   * @param target - A ref that holds a record of keybindings. The keys represent
+   * serialized key combos, and the values are `KeybindingImpl` objects.
+   * @param keybinding - The keybinding to add, represented as a `KeybindingImpl` object.
+   * @param options - An options object.
+   * @param options.existOk - If true, allows overwriting an existing keybinding with the
+   * same combo. Defaults to false.
+   *
+   * @throws {Error} Throws an error if a keybinding with the same combo already exists in
+   * the target and `existOk` is false.
+   */
   function addKeybinding(
     target: Ref<Record<string, KeybindingImpl>>,
     keybinding: KeybindingImpl,

tests-ui/tests/store/keybindingStore.test.ts

@@ -264,4 +264,26 @@ describe('useKeybindingStore', () => {
       userNewKeybindings[0]
     )
   })
+
+  it('should replace the previous keybinding with a new one for the same combo and unset the old command', () => {
+    const store = useKeybindingStore()
+
+    const oldKeybinding = new KeybindingImpl({
+      commandId: 'command1',
+      combo: { key: 'A', ctrl: true }
+    })
+
+    store.addUserKeybinding(oldKeybinding)
+
+    const newKeybinding = new KeybindingImpl({
+      commandId: 'command2',
+      combo: { key: 'A', ctrl: true }
+    })
+
+    store.updateKeybindingOnCommand(newKeybinding)
+
+    expect(store.keybindings).toHaveLength(1)
+    expect(store.getKeybinding(newKeybinding.combo)?.commandId).toBe('command2')
+    expect(store.getKeybindingsByCommandId('command1')).toHaveLength(0)
+  })
 })