From 620394c224b489eb5918ab120e9499cc56e7eefa Mon Sep 17 00:00:00 2001
From: O3H <owen77stubbs@gmail.com>
Date: Wed, 23 Oct 2024 03:29:21 +0100
Subject: [PATCH] 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                          | 31 ++++++++++++++++++-
 .../src/components/general/AppInfoOverlay.vue | 16 ----------
 frontend/src/composables/dialog.ts            | 17 ++++------
 frontend/src/types/primevue.ts                | 10 +++---
 4 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 38aec34..dcea524 100644
--- a/frontend/src/App.vue
+++ b/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>
 
diff --git a/frontend/src/components/general/AppInfoOverlay.vue b/frontend/src/components/general/AppInfoOverlay.vue
index a405767..a2c2841 100644
--- a/frontend/src/components/general/AppInfoOverlay.vue
+++ b/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>
diff --git a/frontend/src/composables/dialog.ts b/frontend/src/composables/dialog.ts
index 80eba34..09b8bde 100644
--- a/frontend/src/composables/dialog.ts
+++ b/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,
diff --git a/frontend/src/types/primevue.ts b/frontend/src/types/primevue.ts
index c965e29..d5cb835 100644
--- a/frontend/src/types/primevue.ts
+++ b/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