From 4f857cd7d19c4919b5a3f94a36d1bd0c6d388405 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Thu, 23 Oct 2025 12:14:13 -1000
Subject: [PATCH] Fixes and improvements to hack action bar

---
 src/components/Hack/HackActions.tsx     | 39 ++++++++++--
 src/components/Hack/StickyActionBar.tsx | 84 ++++++++++++++++++++-----
 src/utils/idb.ts                        |  4 +-
 3 files changed, 107 insertions(+), 20 deletions(-)

diff --git a/src/components/Hack/HackActions.tsx b/src/components/Hack/HackActions.tsx
index cc87659..5350143 100644
--- a/src/components/Hack/HackActions.tsx
+++ b/src/components/Hack/HackActions.tsx
@@ -29,15 +29,28 @@ const HackActions: React.FC<HackActionsProps> = ({
   const [status, setStatus] = React.useState<"idle" | "ready" | "patching" | "done" | "downloading">("idle");
   const [error, setError] = React.useState<string | null>(null);
   const [patchBlob, setPatchBlob] = React.useState<Blob | null>(null);
+  const baseRomName = React.useMemo(() => baseRoms.find(r => r.id === baseRomId)?.name || null, [baseRomId]);
 
   React.useEffect(() => {
-    if (isLinked(baseRomId) && (hasPermission(baseRomId) || hasCached(baseRomId))) {
+    if ((isLinked(baseRomId) && hasPermission(baseRomId)) || hasCached(baseRomId)) {
       if (status !== "downloading" && status !== "patching" && status !== "done") {
         setStatus("ready");
       }
     }
   }, [baseRomId, isLinked, hasPermission, hasCached, status]);
 
+  React.useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
+    if (error) {
+      timeoutId = setTimeout(() => {
+        setError(null);
+      }, 3000);
+    }
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    }
+  }, [error]);
+
   // Pre-download patch on mount (or when patchUrl changes) and cache as Blob
   React.useEffect(() => {
     let aborted = false;
@@ -76,11 +89,25 @@ const HackActions: React.FC<HackActionsProps> = ({
     };
   }, [patchUrl]);
 
-  function onSelectFile(e: React.ChangeEvent<HTMLInputElement>) {
+  async function onSelectFile(e: React.ChangeEvent<HTMLInputElement>) {
     const f = e.target.files?.[0] ?? null;
     setFile(f);
-    setStatus(f ? "ready" : "idle");
-    if (f) importUploadedBlob(f);
+    if (f) {
+      const id = await importUploadedBlob(f);
+      if (!id) {
+        setError("That ROM doesn't match any supported base ROM.");
+        setStatus("idle");
+        e.target.value = "";
+        return;
+      }
+      if (id !== baseRomId) {
+        setError(`This ROM matches "${id}", but this hack requires "${baseRomName}".`);
+        setStatus("idle");
+        e.target.value = "";
+        return;
+      }
+      setStatus("ready");
+    }
   }
 
   async function onPatch() {
@@ -145,10 +172,12 @@ const HackActions: React.FC<HackActionsProps> = ({
       title={title}
       version={version}
       author={author}
+      baseRomPlatform={platform}
       onPatch={onPatch}
       status={status}
+      error={error}
       isLinked={isLinked(baseRomId)}
-      ready={hasPermission(baseRomId) || hasCached(baseRomId)}
+      romReady={hasPermission(baseRomId) || hasCached(baseRomId)}
       onClickLink={() => (isLinked(baseRomId) ? ensurePermission(baseRomId, true) : linkRom(baseRomId))}
       supported={supported}
       onUploadChange={onSelectFile}
diff --git a/src/components/Hack/StickyActionBar.tsx b/src/components/Hack/StickyActionBar.tsx
index fd6e1fc..c6a2641 100644
--- a/src/components/Hack/StickyActionBar.tsx
+++ b/src/components/Hack/StickyActionBar.tsx
@@ -1,24 +1,61 @@
 "use client";
 
 import React from "react";
+import { platformAccept } from "@/utils/idb";
+import type { Platform } from "@/data/baseRoms";
 
-export default function StickyActionBar({ title, version, author, onPatch, status, isLinked, ready, onClickLink, supported, onUploadChange }: {
+export default function StickyActionBar({ title, version, author, baseRomPlatform, onPatch, status, error, isLinked, romReady, onClickLink, supported, onUploadChange }: {
   title: string;
   version?: string;
   author: string;
+  baseRomPlatform?: Platform;
   onPatch: () => void;
   status: "idle" | "ready" | "patching" | "done" | "downloading";
+  error: string | null;
   isLinked: boolean;
-  ready: boolean;
+  romReady: boolean;
   onClickLink: () => void;
   supported: boolean;
   onUploadChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
-  const isDisabled = status === "patching" || (mounted && !ready && !isLinked && !supported);
+  const uploadInputRef = React.useRef<HTMLInputElement | null>(null);
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
+  const [showError, setShowError] = React.useState(false);
+  const [patchAgainReady, setPatchAgainReady] = React.useState(true);
+
+  // Keep error mounted to allow fade-out when error becomes null
+  React.useEffect(() => {
+    let timeoutId: number | undefined;
+    if (error) {
+      setErrorMessage(error);
+      // next frame to ensure transition runs
+      requestAnimationFrame(() => setShowError(true));
+    } else if (errorMessage !== null) {
+      setShowError(false);
+      timeoutId = window.setTimeout(() => setErrorMessage(null), 300);
+    } else {
+      setShowError(false);
+    }
+    return () => {
+      if (timeoutId) window.clearTimeout(timeoutId);
+    };
+  }, [error, errorMessage]);
+
+  React.useEffect(() => {
+    if (status === "done") {
+      setPatchAgainReady(false);
+      setTimeout(() => {
+        setPatchAgainReady(true);
+      }, 3000);
+    } else {
+      setPatchAgainReady(true);
+    }
+  }, [status]);
+
   return (
-    <div className="sticky top-18 z-30">
+    <div className="sticky top-18 z-30 flex flex-col gap-2">
       <div className="mx-auto flex w-full lg:max-w-screen-lg items-center justify-between gap-4 rounded-md border border-[var(--border)] bg-[var(--surface-2)]/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--background)_70%,transparent)]">
         <div className="min-w-0">
           <div className="flex items-center gap-2">
@@ -33,39 +70,58 @@ export default function StickyActionBar({ title, version, author, onPatch, statu
           <span className={`rounded-full px-2 py-0.5 text-xs ring-1 ${
             status === "downloading"
               ? "bg-[var(--surface-2)] text-foreground/85 ring-[var(--border)]"
-              : ready
+              : romReady
               ? "bg-emerald-600/60 text-white ring-emerald-700/80 dark:bg-emerald-500/25 dark:text-emerald-100 dark:ring-emerald-400/90"
               : isLinked
               ? "bg-amber-600/60 text-white ring-amber-700/80 dark:bg-amber-500/50 dark:text-amber-100 dark:ring-amber-400/90"
               : "bg-red-600/60 text-white ring-red-700/80 dark:bg-red-500/50 dark:text-red-100 dark:ring-red-400/90"
           }`}>
-            {status === "downloading" ? "Downloading..." : ready ? "Ready" : isLinked ? "Permission needed" : "Base ROM needed"}
+            {status === "downloading" ? "Downloading..." : romReady ? "Ready" : isLinked ? "Permission needed" : "Base ROM needed"}
           </span>
-          {!ready && !isLinked && (
+          {!romReady && !isLinked && (
             <label className="inline-flex items-center gap-2 text-xs text-foreground/80">
-              <input type="file" onChange={onUploadChange} className="rounded-md bg-[var(--surface-2)] px-2 py-1 text-xs ring-1 ring-inset ring-[var(--border)]" />
-              <span>Upload base ROM</span>
+              <input ref={uploadInputRef} type="file" accept={platformAccept(baseRomPlatform)} onChange={onUploadChange} className="hidden" />
+              <button
+                type="button"
+                onClick={() => uploadInputRef.current?.click()}
+                className="rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 py-2 text-foreground text-xs cursor-pointer hover:bg-[var(--surface-3)] hover:text-foreground/80 disabled:cursor-not-allowed disabled:opacity-60"
+              >
+                Select Base ROM
+              </button>
             </label>
           )}
-          {!ready && isLinked && (
+          {!romReady && isLinked && (
             <button
               type="button"
               onClick={onClickLink}
               disabled={!supported}
-              className="rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 py-2 text-xs disabled:cursor-not-allowed disabled:opacity-60"
+              className="rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 py-2 text-xs cursor-pointer hover:bg-[var(--surface-3)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
             >
               Grant permission
             </button>
           )}
           <button
             onClick={onPatch}
-            disabled={isDisabled}
-            className="shine-wrap btn-premium h-9 min-w-[7.5rem] text-sm font-semibold disabled:cursor-not-allowed disabled:opacity-70"
+            disabled={!mounted || (status !== "ready" && status !== "done") || !patchAgainReady}
+            className="shine-wrap btn-premium h-9 min-w-[7.5rem] text-sm font-semibold cursor-pointer disabled:cursor-not-allowed disabled:opacity-70"
           >
-            <span>{status === "patching" ? "Patching…" : status === "done" ? "Patched" : "Patch Now"}</span>
+            <span>{status === "patching" ? "Patching…" : (
+              status === "done" ? (
+                patchAgainReady ? "Patch Again" : "Patched"
+              ) : "Patch Now"
+            )}</span>
           </button>
         </div>
       </div>
+      {errorMessage !== null && (
+        <div
+          className={`absolute -bottom-2 left-1/2 -translate-x-1/2 mx-auto flex lg:max-w-screen-lg rounded-md border border-[var(--border)] bg-[var(--surface-2)]/80 px-4 py-3 backdrop-blur supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--background)_70%,transparent)] text-sm text-red-400 transition-all duration-300 ${showError ? "opacity-100 translate-y-full" : "opacity-0 -translate-y-1/2 pointer-events-none"}`}
+          role="alert"
+          aria-live="polite"
+        >
+          {errorMessage}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/utils/idb.ts b/src/utils/idb.ts
index 9a09af6..e21a3a5 100644
--- a/src/utils/idb.ts
+++ b/src/utils/idb.ts
@@ -115,7 +115,9 @@ export async function getAllBlobEntries(): Promise<Array<{ id: string; blob: Blo
   });
 }
 
-export function platformAccept(p: Platform | Platform[]): string {
+export function platformAccept(p?: Platform | Platform[] | null): string {
+  if (!p) return platformAcceptAll();
+
   if (Array.isArray(p)) {
     // Gather all individual extensions and dedupe
     const extSet = new Set<string>();