Pressing ESC to open overlay now works across the app.

Pressing the 'Escape' key now closes all open dialogs (though there should only ever be 1). Due to this, the logic in `AppInfoOverlay` has been removed.

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
+import { onBeforeUnmount, onMounted } from 'vue'
 import { changeLocale } from '@i18n'
 
 import { 
@@ -13,18 +13,47 @@ import {
 } from '@components'
 
 import { useAppStore } from '@stores'
+import { getOpenDialogs } from '@composables'
 
 const appStore = useAppStore()
 const {
     setMaxThreads
 } = appStore
 
+//const settingsDialog = useDialog('settings')
+
+// Keydown event listener
+const onKeydown = (event: KeyboardEvent) => {
+    console.log('Keydown fired!\n', event.key)
+
+    const openDialogs = getOpenDialogs()
+    if (openDialogs.length > 0) {
+        for (const dialog of openDialogs) {
+            dialog.visible.value = false
+        }
+
+        return
+    }
+
+    // No dialogs open + pressing ESC -> open settings overlay.
+    // if (event.key == 'Escape') {
+    //     settingsDialog.setVisible(!settingsDialog.visible.value)
+    // }
+}
+
 onMounted(async () => {
     const settings = await GetSettings()
     changeLocale(settings.general.locale)
 
     // We don't use `navigator.hardwareConcurrency` as it is known to be unreliable.
     setMaxThreads(await NumCPU())
+
+    // Add keydown event listener when the app mounts
+    window.addEventListener('keydown', onKeydown)
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', onKeydown)
 })
 </script>
 

frontend/src/components/general/AppInfoOverlay.vue

@@ -3,27 +3,11 @@ import { version } from "@frontend/package.json" with { type: "json" }
 
 import { CardOverlay } from "@components"
 import { useDialog } from "@composables"
-import { onMounted, onUnmounted } from "vue"
 
 const { 
     setVisible,
     visible, closable, draggable
 } = useDialog('app-info')
-
-const onEscape = (e: KeyboardEvent) => {
-    if (!visible.value) return
-    if (e.key == "Escape") setVisible(false)
-
-    console.log(e)
-}
-
-onMounted(() => {
-    window.addEventListener("keydown", onEscape)
-})
-
-onUnmounted(() => {
-    window.removeEventListener("keydown", onEscape)
-})
 </script>
 
 <template>

frontend/src/composables/dialog.ts

@@ -14,7 +14,10 @@ export interface DialogState {
 
 const dialogs: Record<string, DialogState> = {}
 
+export const closeAllDialogs = () => Object.values(dialogs).forEach(d => d.visible.value = false)
 export const openDialogCount = () => Object.keys(dialogs).reduce((amt, key) => amt + (dialogs[key].visible.value ? 1 : 0), 0)
+export const getOpenDialogs = () => Object.values(dialogs).filter(d => d.visible.value)
+
 export const useDialog = (id: string): Dialog => {
     // Initialize the dialog state if it doesn't exist.
     if (!dialogs[id]) {
@@ -25,17 +28,9 @@ export const useDialog = (id: string): Dialog => {
         }
     }
 
-    const setVisible = (val = true) => {
-        dialogs[id].visible.value = val
-    }
-
-    const setDraggable = (val = true) => {
-        dialogs[id].draggable.value = val
-    }
-
-    const setClosable = (val = true) => {
-        dialogs[id].closable.value = val
-    }
+    const setVisible = (val = true) => dialogs[id].visible.value = val
+    const setDraggable = (val = true) => dialogs[id].draggable.value = val
+    const setClosable = (val = true) => dialogs[id].closable.value = val
 
     return {
         visible: dialogs[id].visible,

frontend/src/types/primevue.ts

@@ -2,11 +2,6 @@ export type Layout = 'grid' | 'list'
 
 export type Alignment = "center" | "left" | "right"
 
-export interface ChangeEvent<V> {
-    originalEvent: Event
-    value: V
-}
-
 export interface OptionItem<T> {
     index: number
     option: T
@@ -26,6 +21,11 @@ export interface ItemProps<V> {
     items: V[]
 }
 
+export interface ChangeEvent<V> {
+    originalEvent: Event
+    value: V
+}
+
 export interface BreadcrumbPage {
     route: string
     home?: boolean