Start patcher view work

src/App.css

@@ -4,7 +4,7 @@
 
 html,
 body {
-  @apply h-screen w-screen bg-zinc-600 text-zinc-200;
+  @apply h-screen w-screen bg-zinc-600 text-zinc-200 overflow-x-hidden;
 }
 
 @layer base {

src/App.tsx

@@ -1,10 +1,22 @@
+import { useState } from "preact/hooks";
 import "./App.css";
 import SaveSelector from "./views/SaveSelector";
+import Patcher from "./views/Patcher";
 
 function App() {
+  const [currentSave, setCurrentSave] = useState<string | null>(null);
+
   return (
     <main class="h-[100vh] w-[100vw] bg-zinc-800 px-4 py-2 flex flex-col">
-      <SaveSelector />
+      {currentSave === null ? (
+        <SaveSelector
+          onFile={(path) => {
+            setCurrentSave(path);
+          }}
+        />
+      ) : (
+        <Patcher path={currentSave} />
+      )}
     </main>
   );
 }

src/views/Patcher.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "preact/hooks";
+
+interface PatcherProps {
+  className?: string;
+  path: string;
+}
+
+export default function Patcher({ path }: PatcherProps) {
+  const [filename, setFilename] = useState<string | null>(null);
+
+  async function setup() {
+    const filename = path.split("\\").pop();
+    if (filename) setFilename(filename.split(".")[0]);
+  }
+
+  async function teardown() {}
+
+  useEffect(() => {
+    setup();
+    return () => {
+      teardown();
+    };
+  }, []);
+
+  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>
+        <p className="flex justify-end  overflow-hidden text-xs text-zinc-400">
+          {path}
+        </p>
+      </div>
+    </div>
+  );
+}