fix: add isDialogOpen utility function and update keyboard shortcuts to respect dialog state

frontend/src/composables/useKeyboardShortcuts.js

@@ -1,4 +1,5 @@
 import { onMounted, onBeforeUnmount, unref } from 'vue'
+import { isDialogOpen } from '@/utils/dialogs'
 
 /**
  * Generic global keyboard shortcuts composable.
@@ -20,6 +21,7 @@ export function useKeyboardShortcuts(options) {
     shortcuts = [],
     ignoreTyping = true,
     target = typeof window !== 'undefined' ? window : null,
+    skipWhenDialogOpen = true,
   } = options || {}
 
   function isTypingEvent(e) {
@@ -49,6 +51,7 @@ export function useKeyboardShortcuts(options) {
     const isActive = typeof active === 'function' ? active() : unref(active)
     if (!isActive) return
     if (isTypingEvent(e)) return
+    if (skipWhenDialogOpen && isDialogOpen()) return
 
     for (const def of shortcuts) {
       if (!def) continue

frontend/src/utils/dialogs.jsx

@@ -3,6 +3,10 @@ import { reactive, ref } from 'vue'
 
 let dialogs = ref([])
 
+export function isDialogOpen() {
+  return dialogs.value.some((d) => d.show)
+}
+
 export let Dialogs = {
   name: 'Dialogs',
   render() {
@@ -18,9 +22,7 @@ export let Dialogs = {
               dialog.message && (
                 <p class="text-p-base text-ink-gray-7">{dialog.message}</p>
               ),
-              dialog.html && (
+              dialog.html && <div v-html={dialog.html} />,
-                <div v-html={dialog.html} />
-              ),
               <ErrorMessage class="mt-2" message={dialog.error} />,
             ]
           },