feat: add reusable confirmation dialogs for destructive actions

job-tracker-ui/src/components/Correspondence.tsx

@@ -28,6 +28,7 @@ import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { api } from "../api";
 import { useToast } from "../toast";
 import { CorrespondenceMessage, GmailMessageSummary, GmailStatus } from "../types";
+import { useDialogActions } from "../dialogs";
 
 function parseRawEmail(raw: string): {
   subject?: string;
@@ -73,6 +74,7 @@ function parseRawEmail(raw: string): {
 export default function Correspondence({ jobId }: { jobId: number }) {
   const theme = useTheme();
   const { toast } = useToast();
+  const { confirmAction } = useDialogActions();
   const [messages, setMessages] = useState<CorrespondenceMessage[]>([]);
   const [from, setFrom] = useState<"Me" | "Company">("Me");
   const [text, setText] = useState("");
@@ -233,9 +235,8 @@ export default function Correspondence({ jobId }: { jobId: number }) {
     }
   };
 
-
   const deleteMessage = async (messageId: number) => {
-    if (!confirmAction("Remove this correspondence message?")) return;
+    if (!(await confirmAction("Remove this correspondence message?", { title: "Delete message", confirmLabel: "Delete", destructive: true }))) return;
     try {
       await api.delete(`/correspondence/${messageId}`);
       await load();
@@ -527,8 +528,3 @@ export default function Correspondence({ jobId }: { jobId: number }) {
     </Box>
   );
 }
-tions>
-      </Dialog>
-    </Box>
-  );
-}