fix: prevent keybinding warning flash by checking dialog visibility and command ownership

Amp-Thread-ID: https://ampcode.com/threads/T-019c07ff-3277-70f9-a664-d2ebd3d5228f
Co-authored-by: Amp <amp@ampcode.com>

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

@@ -145,7 +145,7 @@ import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
 import { useToast } from 'primevue/usetoast'
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
@@ -194,27 +194,23 @@ const selectedCommandData = ref<ICommandData | null>(null)
 const editDialogVisible = ref(false)
 const newBindingKeyCombo = ref<KeyComboImpl | null>(null)
 const currentEditingCommand = ref<ICommandData | null>(null)
-const keybindingInput = ref<InstanceType<typeof InputText> | null>(null)
+const keybindingInput = ref()
 
 const existingKeybindingOnCombo = computed<KeybindingImpl | null>(() => {
-  if (!currentEditingCommand.value) {
-    return null
-  }
-
-  // If the new keybinding is the same as the current editing command, then don't show the error
   if (
-    currentEditingCommand.value.keybinding?.combo?.equals(
-      newBindingKeyCombo.value
-    )
+    !editDialogVisible.value ||
+    !currentEditingCommand.value ||
+    !newBindingKeyCombo.value
   ) {
     return null
   }
 
-  if (!newBindingKeyCombo.value) {
+  const existing = keybindingStore.getKeybinding(newBindingKeyCombo.value)
+  if (!existing || existing.commandId === currentEditingCommand.value.id) {
     return null
   }
 
-  return keybindingStore.getKeybinding(newBindingKeyCombo.value)
+  return existing
 })
 
 function editKeybinding(commandData: ICommandData) {
@@ -225,11 +221,9 @@ function editKeybinding(commandData: ICommandData) {
   editDialogVisible.value = true
 }
 
-watchEffect(() => {
-  if (editDialogVisible.value) {
-    // nextTick doesn't work here, so we use a timeout instead
+watch(editDialogVisible, (visible) => {
+  if (visible) {
     setTimeout(() => {
-      // @ts-expect-error - $el is an internal property of the InputText component
       keybindingInput.value?.$el?.focus()
     }, 300)
   }
@@ -265,18 +259,20 @@ function cancelEdit() {
 }
 
 async function saveKeybinding() {
-  if (currentEditingCommand.value && newBindingKeyCombo.value) {
-    const updated = keybindingStore.updateKeybindingOnCommand(
-      new KeybindingImpl({
-        commandId: currentEditingCommand.value.id,
-        combo: newBindingKeyCombo.value
-      })
-    )
-    if (updated) {
-      await keybindingService.persistUserKeybindings()
-    }
-  }
+  if (!currentEditingCommand.value || !newBindingKeyCombo.value) return
+
+  const updated = keybindingStore.updateKeybindingOnCommand(
+    new KeybindingImpl({
+      commandId: currentEditingCommand.value.id,
+      combo: newBindingKeyCombo.value
+    })
+  )
+
   cancelEdit()
+
+  if (updated) {
+    await keybindingService.persistUserKeybindings()
+  }
 }
 
 async function resetKeybinding(commandData: ICommandData) {