From 58424aaaf18c0952bd3ad470f13ecb58765e3b6d Mon Sep 17 00:00:00 2001
From: Xevion <xevion@xevion.dev>
Date: Wed, 27 Nov 2024 08:13:21 -0600
Subject: [PATCH] Add 'Escape' key listener, add patch button, back button
 functionality

---
 src/App.tsx           |  7 ++++++-
 src/views/Patcher.tsx | 26 ++++++++++++++++++++++----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fd311b4..99de8d2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,7 +15,12 @@ function App() {
           }}
         />
       ) : (
-        <Patcher path={currentSave} />
+        <Patcher
+          path={currentSave}
+          onComplete={() => {
+            setCurrentSave(null);
+          }}
+        />
       )}
     </main>
   );
diff --git a/src/views/Patcher.tsx b/src/views/Patcher.tsx
index 3f51b8b..2fd68b4 100644
--- a/src/views/Patcher.tsx
+++ b/src/views/Patcher.tsx
@@ -3,16 +3,26 @@ import { useEffect, useState } from "preact/hooks";
 interface PatcherProps {
   className?: string;
   path: string;
+  onComplete?: () => void;
 }
 
-export default function Patcher({ path }: PatcherProps) {
+export default function Patcher({ onComplete, path }: PatcherProps) {
   const [filename, setFilename] = useState<string | null>(null);
 
   async function setup() {
     const filename = path.split("\\").pop();
     if (filename) setFilename(filename.split(".")[0]);
   }
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onComplete?.();
+    };
 
+    window.addEventListener("keydown", handleKeyPress);
+    return () => {
+      window.removeEventListener("keydown", handleKeyPress);
+    };
+  }, []);
   async function teardown() {}
 
   useEffect(() => {
@@ -23,13 +33,21 @@ export default function Patcher({ path }: PatcherProps) {
   }, []);
 
   return (
-    <div className="max-w-[600px]">
-      <div className="rounded-xl bg-black/40 px-3.5 py-2">
-        <p className="text-sm text-zinc-300">{filename}</p>
+    <div className="max-w-[600px] flex flex-col">
+      <div className="rounded-xl bg-black/40 px-3.5 py-2 shadow-lg mb-2.5">
+        <p className="text-sm text-zinc-300 select-none">{filename}</p>
         <p className="flex justify-end  overflow-hidden text-xs text-zinc-400">
           {path}
         </p>
       </div>
+
+      <button
+        type="button"
+        style={{ textShadow: "2px 2px 10px rgba(0,0,0,0.42)" }}
+        class="text-white bg-emerald-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center drop-shadow-"
+      >
+        Patch
+      </button>
     </div>
   );
 }