From c672236412878bb33c87b71407144111d11926bb Mon Sep 17 00:00:00 2001
From: Webifi <john@webifi.com>
Date: Mon, 5 Jun 2023 16:13:40 -0500
Subject: [PATCH] properly close modal stack in order on escape

---
 package-lock.json                  |  7 +++++++
 package.json                       |  1 +
 src/App.svelte                     |  5 +++++
 src/additional-svelte-typings.d.ts |  6 ++++++
 src/lib/ChatOptionMenu.svelte      |  9 ---------
 src/lib/ChatSettingsModal.svelte   | 11 +----------
 src/lib/EditMessage.svelte         | 12 ++++++------
 src/lib/PromptConfirm.svelte       | 11 +----------
 src/lib/PromptInput.svelte         |  6 +++---
 src/lib/Util.svelte                | 21 +++++++++++++++++++++
 10 files changed, 51 insertions(+), 38 deletions(-)
 create mode 100644 src/additional-svelte-typings.d.ts

diff --git a/package-lock.json b/package-lock.json
index db06df2..e1170c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "gpt-tokenizer": "^2.0.0",
         "postcss": "^8.4.24",
         "sass": "^1.61.0",
+        "stacking-order": "^2.0.0",
         "svelte": "^3.58.0",
         "svelte-check": "^3.4.3",
         "svelte-fa": "^3.0.3",
@@ -3976,6 +3977,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stacking-order": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stacking-order/-/stacking-order-2.0.0.tgz",
+      "integrity": "sha512-nnv68iFGwrKXYlmXJKD5qBuH8D49BEv6zAgesXoKeGqMmMit6/Hyvb6R0BG9odpjqQm35YjlTsZUyB0ffbFDrg==",
+      "dev": true
+    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
diff --git a/package.json b/package.json
index 04c3e36..f5a420b 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "gpt-tokenizer": "^2.0.0",
     "postcss": "^8.4.24",
     "sass": "^1.61.0",
+    "stacking-order": "^2.0.0",
     "svelte": "^3.58.0",
     "svelte-check": "^3.4.3",
     "svelte-fa": "^3.0.3",
diff --git a/src/App.svelte b/src/App.svelte
index ee62ee6..314c726 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,6 +9,7 @@
   import NewChat from './lib/NewChat.svelte'
   import { chatsStorage, apiKeyStorage } from './lib/Storage.svelte'
   import { Modals, closeModal } from 'svelte-modals'
+  import { triggerModalEsc } from './lib/Util.svelte'
 
   // The definition of the routes with some conditions
   const routes = {
@@ -51,6 +52,10 @@
   />
 </Modals>
 
+<svelte:window
+  on:keydown={(e) => triggerModalEsc(e)}
+/>
+
 <style>
   .backdrop {
     position: fixed;
diff --git a/src/additional-svelte-typings.d.ts b/src/additional-svelte-typings.d.ts
new file mode 100644
index 0000000..abf95c4
--- /dev/null
+++ b/src/additional-svelte-typings.d.ts
@@ -0,0 +1,6 @@
+declare namespace svelteHTML {
+  interface HTMLAttributes<> {
+    // Custom on:modal-esc event
+    'on:modal-esc'?: (event: any) => any
+  }
+}
diff --git a/src/lib/ChatOptionMenu.svelte b/src/lib/ChatOptionMenu.svelte
index 8b57c5b..39b1540 100644
--- a/src/lib/ChatOptionMenu.svelte
+++ b/src/lib/ChatOptionMenu.svelte
@@ -139,12 +139,3 @@
 </div>
 
 <input style="display:none" type="file" accept=".json" on:change={(e) => importChatFromFile(e)} bind:this={chatFileInput} >
-
-<svelte:window
-  on:keydown={(event) => {
-    if (event.key === 'Escape') {
-      event.stopPropagation()
-      showChatMenu = false
-    }
-  }}
-/>
diff --git a/src/lib/ChatSettingsModal.svelte b/src/lib/ChatSettingsModal.svelte
index 31304b8..2e29a6c 100644
--- a/src/lib/ChatSettingsModal.svelte
+++ b/src/lib/ChatSettingsModal.svelte
@@ -253,7 +253,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="modal chat-settings" class:is-active={showSettingsModal}>
+<div class="modal chat-settings" class:is-active={showSettingsModal} on:modal-esc={closeSettings}>
   <div class="modal-background" on:click={closeSettings} />
   <div class="modal-card wide" on:click={() => { showProfileMenu = false }}>
     <header class="modal-card-head">
@@ -322,12 +322,3 @@
 </div>
 
 <input style="display:none" type="file" accept=".json" on:change={(e) => importProfileFromFile(e)} bind:this={profileFileInput} >
-
-<svelte:window
-  on:keydown={(event) => {
-    if (event.key === 'Escape') {
-      event.stopPropagation()
-      closeSettings()
-    }
-  }}
-/>
\ No newline at end of file
diff --git a/src/lib/EditMessage.svelte b/src/lib/EditMessage.svelte
index 38ed667..7a9bd63 100644
--- a/src/lib/EditMessage.svelte
+++ b/src/lib/EditMessage.svelte
@@ -67,12 +67,12 @@
   }
 
   const keydown = (event:KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      event.stopPropagation()
-      event.preventDefault()
-      message.content = original
-      editing = false
-    }
+    // if (event.key === 'Escape') {
+    //   event.stopPropagation()
+    //   event.preventDefault()
+    //   message.content = original
+    //   editing = false
+    // }
   }
 
   const scrollToMessage = (uuid:string | string[] | undefined) => {
diff --git a/src/lib/PromptConfirm.svelte b/src/lib/PromptConfirm.svelte
index cc8ce39..5b31d08 100644
--- a/src/lib/PromptConfirm.svelte
+++ b/src/lib/PromptConfirm.svelte
@@ -29,7 +29,7 @@
 </script>
 
 {#if isOpen}
-<div class="modal is-active">
+<div class="modal is-active" on:modal-esc={doCancel}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="modal-background" on:click={doCancel} />
   <div class="modal-content nomax">
@@ -59,12 +59,3 @@
   </div>
 </div>
 {/if}
-
-<svelte:window
-  on:keydown={(event) => {
-    if (event.key === 'Escape') {
-      event.stopPropagation()
-      doCancel()
-    }
-  }}
-/>
diff --git a/src/lib/PromptInput.svelte b/src/lib/PromptInput.svelte
index 423cb6f..b747200 100644
--- a/src/lib/PromptInput.svelte
+++ b/src/lib/PromptInput.svelte
@@ -45,7 +45,7 @@
 </script>
 
 {#if isOpen}
-<div class="modal is-active">
+<div class="modal is-active" on:modal-esc={doClose}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="modal-background" on:click={doClose} />
   <div class="modal-content nomax">
@@ -97,11 +97,11 @@
 </div>
 {/if}
 
-<svelte:window
+<!-- <svelte:window
   on:keydown={(event) => {
     if (event.key === 'Escape') {
       event.stopPropagation()
       onClose()
     }
   }}
-/>
+/> -->
diff --git a/src/lib/Util.svelte b/src/lib/Util.svelte
index 30a27f4..c429c73 100644
--- a/src/lib/Util.svelte
+++ b/src/lib/Util.svelte
@@ -1,4 +1,5 @@
 <script  context="module" lang="ts">
+  import { compare } from 'stacking-order'
   export const sizeTextElements = () => {
     const els = document.querySelectorAll('textarea.auto-size')
     for (let i:number = 0, l = els.length; i < l; i++) autoGrowInput(els[i] as HTMLTextAreaElement)
@@ -27,4 +28,24 @@
         offset
     })
   }
+
+  export const triggerModalEsc = (event:KeyboardEvent|undefined):boolean|void => {
+    if (!event || event.key !== 'Escape') return
+    const stack = Array.from(document.querySelectorAll('.modal')).filter(s =>
+      window.getComputedStyle(s).getPropertyValue('display') !== 'none'
+    )
+    const top:HTMLElement = stack.length === 1
+      ? stack[0]
+      : stack.find(m1 => {
+        return stack.find(m2 => {
+          return m1 !== m2 && compare(m1, m2) > 0 && m1
+        })
+      }) as any
+    if (top) {
+      // trigger modal-esc event on topmost modal when esc key is pressed
+      const e = new CustomEvent('modal-esc', { detail: top })
+      top.dispatchEvent(e)
+    }
+  }
+
 </script> 
\ No newline at end of file