From 9ded1294786f23ff9741094d0dc56eb77f819bb1 Mon Sep 17 00:00:00 2001
From: AgendaPro Dev <urieljareth@agendapro.dev>
Date: Mon, 27 Jul 2026 16:32:58 -0600
Subject: [PATCH] fix: harden PWA install prompt

---
 src/components/AdminShell.tsx       |  2 +-
 src/components/AppShell.tsx         |  2 +-
 src/components/InstallAppPrompt.tsx | 29 +++++++++++++++++++++++++----
 src/components/Modal.tsx            |  1 +
 src/lib/useInstallPrompt.ts         | 22 ++++++++++++++++------
 5 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/AdminShell.tsx b/src/components/AdminShell.tsx
index 4f8ad16..f08ea59 100644
--- a/src/components/AdminShell.tsx
+++ b/src/components/AdminShell.tsx
@@ -133,7 +133,7 @@ export function AdminShell() {
             <span className="text-sm font-extrabold">Admin</span>
           </div>
           <div className="ml-auto w-auto">
-            <InstallAppPrompt />
+            <InstallAppPrompt compact />
           </div>
         </header>
         <main className="flex-1 overflow-y-auto">
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index e763e41..34ab9bf 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -166,7 +166,7 @@ export function AppShell() {
             <span className="text-sm font-extrabold">AgendaMax</span>
           </div>
           <div className="ml-auto w-auto">
-            <InstallAppPrompt />
+            <InstallAppPrompt compact />
           </div>
         </header>
         <main className="flex-1 overflow-y-auto">
diff --git a/src/components/InstallAppPrompt.tsx b/src/components/InstallAppPrompt.tsx
index 9133381..a0db0a7 100644
--- a/src/components/InstallAppPrompt.tsx
+++ b/src/components/InstallAppPrompt.tsx
@@ -3,16 +3,26 @@ import { Download, PlusSquare, Share } from "lucide-react";
 import { Modal } from "./Modal";
 import { useInstallPrompt } from "../lib/useInstallPrompt";
 
-export function InstallAppPrompt() {
+export function InstallAppPrompt({ compact = false }: { compact?: boolean }) {
   const { state, install } = useInstallPrompt();
   const [iosOpen, setIosOpen] = useState(false);
+  const buttonClassName = compact
+    ? "btn btn-secondary h-9 w-9 shrink-0 justify-center p-0"
+    : "btn btn-secondary w-full justify-start";
 
   if (state === "unsupported" || state === "installed") return null;
   if (state === "ios-instructions") {
     return (
       <>
-        <button type="button" className="btn btn-secondary w-full justify-start" onClick={() => setIosOpen(true)}>
-          <Download className="h-4 w-4" /> Instalar AgendaMax
+        <button
+          type="button"
+          className={buttonClassName}
+          aria-label="Instalar AgendaMax"
+          title={compact ? "Instalar AgendaMax" : undefined}
+          onClick={() => setIosOpen(true)}
+        >
+          <Download className="h-4 w-4" />
+          <span className={compact ? "sr-only" : undefined}>Instalar AgendaMax</span>
         </button>
         <Modal open={iosOpen} onClose={() => setIosOpen(false)} title="Instalar AgendaMax" subtitle="Safari lo añade a tu pantalla de inicio.">
           <div className="safe-area-bottom">
@@ -25,5 +35,16 @@ export function InstallAppPrompt() {
       </>
     );
   }
-  return <button type="button" className="btn btn-secondary w-full justify-start" onClick={() => void install()}><Download className="h-4 w-4" /> Instalar AgendaMax</button>;
+  return (
+    <button
+      type="button"
+      className={buttonClassName}
+      aria-label="Instalar AgendaMax"
+      title={compact ? "Instalar AgendaMax" : undefined}
+      onClick={() => void install()}
+    >
+      <Download className="h-4 w-4" />
+      <span className={compact ? "sr-only" : undefined}>Instalar AgendaMax</span>
+    </button>
+  );
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 0992928..642b89c 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -48,6 +48,7 @@ export function Modal({ open, onClose, title, subtitle, children, size = "md", f
             </div>
             <button
               onClick={onClose}
+              aria-label="Cerrar"
               className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
             >
               <X className="h-5 w-5" />
diff --git a/src/lib/useInstallPrompt.ts b/src/lib/useInstallPrompt.ts
index 57513a2..430af97 100644
--- a/src/lib/useInstallPrompt.ts
+++ b/src/lib/useInstallPrompt.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export type InstallPromptState = "unsupported" | "available" | "ios-instructions" | "installed";
 
@@ -26,6 +26,7 @@ export function useInstallPrompt() {
   });
   const [deferred, setDeferred] = useState<BeforeInstallPromptEvent | null>(null);
   const [dismissed, setDismissed] = useState(false);
+  const installInFlight = useRef(false);
 
   useEffect(() => {
     if (isStandalone()) {
@@ -40,6 +41,7 @@ export function useInstallPrompt() {
     };
     const onInstalled = () => {
       setDeferred(null);
+      setDismissed(false);
       setState("installed");
     };
 
@@ -52,13 +54,21 @@ export function useInstallPrompt() {
   }, []);
 
   const install = async () => {
-    if (!deferred) return;
+    if (!deferred || installInFlight.current) return;
     const event = deferred;
+    installInFlight.current = true;
     setDeferred(null);
-    await event.prompt();
-    const choice = await event.userChoice;
-    if (choice.outcome === "accepted") setState("installed");
-    else setDismissed(true);
+    try {
+      await event.prompt();
+      const choice = await event.userChoice;
+      if (choice.outcome === "accepted") setState("installed");
+      else setDismissed(true);
+    } catch {
+      setDeferred(event);
+      setState("available");
+    } finally {
+      installInFlight.current = false;
+    }
   };
 
   return { state: dismissed ? "unsupported" : state, install, dismiss: () => setDismissed(true) };