fix: address final PWA review findings

This commit is contained in:
AgendaPro Dev
2026-07-27 17:19:45 -06:00
parent 43f5d1374c
commit 0b466f33f3
5 changed files with 89 additions and 11 deletions
+6 -2
View File
@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useId } from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
import { cn } from "../lib/format";
@@ -14,6 +14,7 @@ interface ModalProps {
}
export function Modal({ open, onClose, title, subtitle, children, size = "md", footer }: ModalProps) {
const titleId = useId();
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => {
@@ -35,6 +36,9 @@ export function Modal({ open, onClose, title, subtitle, children, size = "md", f
<div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
<div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm animate-fade-in" onClick={onClose} />
<div
role="dialog"
aria-modal="true"
aria-labelledby={title ? titleId : undefined}
className={cn(
"relative z-10 flex max-h-[92vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl animate-slide-up sm:rounded-2xl",
maxW
@@ -43,7 +47,7 @@ export function Modal({ open, onClose, title, subtitle, children, size = "md", f
{(title || subtitle) && (
<div className="flex items-start justify-between gap-3 border-b border-slate-100 px-5 py-4">
<div className="min-w-0">
{title && <h2 className="text-lg font-bold text-slate-900">{title}</h2>}
{title && <h2 id={titleId} className="text-lg font-bold text-slate-900">{title}</h2>}
{subtitle && <p className="mt-0.5 text-sm text-slate-500">{subtitle}</p>}
</div>
<button
+33 -3
View File
@@ -7,6 +7,32 @@ interface BeforeInstallPromptEvent extends Event {
userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>;
}
const DISMISSED_STORAGE_KEY = "agendamax-install-dismissed";
function hasDismissedPrompt() {
try {
return window.sessionStorage.getItem(DISMISSED_STORAGE_KEY) === "1";
} catch {
return false;
}
}
function clearDismissedPrompt() {
try {
window.sessionStorage.removeItem(DISMISSED_STORAGE_KEY);
} catch {
// Storage can be unavailable in privacy-restricted browsers.
}
}
function persistDismissedPrompt() {
try {
window.sessionStorage.setItem(DISMISSED_STORAGE_KEY, "1");
} catch {
// Storage can be unavailable in privacy-restricted browsers.
}
}
function isStandalone() {
return window.matchMedia("(display-mode: standalone)").matches ||
("standalone" in navigator && Boolean((navigator as Navigator & { standalone?: boolean }).standalone));
@@ -25,7 +51,7 @@ export function useInstallPrompt() {
return isIOSSafari() ? "ios-instructions" : "unsupported";
});
const [deferred, setDeferred] = useState<BeforeInstallPromptEvent | null>(null);
const [dismissed, setDismissed] = useState(false);
const [dismissed, setDismissed] = useState(() => typeof window !== "undefined" && hasDismissedPrompt());
const installInFlight = useRef(false);
useEffect(() => {
@@ -37,10 +63,11 @@ export function useInstallPrompt() {
const onBeforeInstallPrompt = (event: Event) => {
event.preventDefault();
setDeferred(event as BeforeInstallPromptEvent);
setState("available");
if (!hasDismissedPrompt()) setState("available");
};
const onInstalled = () => {
setDeferred(null);
clearDismissedPrompt();
setDismissed(false);
setState("installed");
};
@@ -62,7 +89,10 @@ export function useInstallPrompt() {
await event.prompt();
const choice = await event.userChoice;
if (choice.outcome === "accepted") setState("installed");
else setDismissed(true);
else {
persistDismissedPrompt();
setDismissed(true);
}
} catch {
setDeferred(event);
setState("available");