From fd19f53ab31e34a66cc2cadfbe6060f5065743dd Mon Sep 17 00:00:00 2001
From: kurt-croix <kurt-croix@users.noreply.github.com>
Date: Thu, 30 Apr 2026 13:27:12 -0500
Subject: [PATCH] fix: delete dialog no longer freezes UI buttons

Use useEffect to fire-and-forget the delete after dialog closes,
instead of calling deleteReport in AlertDialogAction onClick.
The radix AlertDialogAction close was racing with our state update,
leaving the dismissable layer in a broken state that blocked
pointer events on other buttons.
---
 src/pages/ReportList.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/pages/ReportList.tsx b/src/pages/ReportList.tsx
index f23f4f8..aaf4480 100644
--- a/src/pages/ReportList.tsx
+++ b/src/pages/ReportList.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { useRoadReports } from '@/hooks/useRoadReports';
 import { useDeleteReport, useEditReport } from '@/hooks/useReportMutations';
 import { ReportCard } from '@/components/ReportCard';
@@ -39,10 +39,20 @@ export function ReportListPage() {
 
   const [editingReport, setEditingReport] = useState<RoadReport | null>(null);
   const [deletingReport, setDeletingReport] = useState<RoadReport | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<RoadReport | null>(null);
 
   const deleteReport = useDeleteReport();
   const editReport = useEditReport();
 
+  // Fire-and-forget delete after dialog closes
+  useEffect(() => {
+    if (pendingDelete) {
+      const report = pendingDelete;
+      setPendingDelete(null);
+      deleteReport(report).catch(console.error);
+    }
+  }, [pendingDelete, deleteReport]);
+
   const filteredReports = useMemo(() => {
     if (!reports) return [];
 
@@ -221,7 +231,14 @@ export function ReportListPage() {
       />
 
       {/* Delete Confirmation */}
-      <AlertDialog open={!!deletingReport} onOpenChange={(open) => { if (!open) setDeletingReport(null); }}>
+      <AlertDialog
+        open={!!deletingReport}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeletingReport(null);
+          }
+        }}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Report</AlertDialogTitle>
@@ -234,9 +251,8 @@ export function ReportListPage() {
             <AlertDialogAction
               onClick={() => {
                 if (deletingReport) {
-                  const report = deletingReport;
+                  setPendingDelete(deletingReport);
                   setDeletingReport(null);
-                  deleteReport(report).catch(console.error);
                 }
               }}
               className="bg-red-500 hover:bg-red-600 text-white"