feat: add reusable confirmation dialogs for destructive actions

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

@@ -95,7 +95,7 @@ export default function Attachments({ jobId }: { jobId: number }) {
   };
 
   const remove = async (a: AttachmentItem) => {
-    if (!confirmAction(`Delete attachment "${a.fileName}"?`)) return;
+    if (!(await confirmAction(`Delete attachment "${a.fileName}"?`, { title: "Delete attachment", confirmLabel: "Delete", destructive: true }))) return;
     try {
       await api.delete(`/attachments/${a.id}`);
       toast("Deleted attachment.", "success");

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>
-  );
-}

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

@@ -17,6 +17,7 @@ type UserDto = {
 
 export default function UserManagementCard() {
   const { toast } = useToast();
+  const { confirmAction } = useDialogActions();
   const token = getAuthToken();
 
   const [supported, setSupported] = useState<boolean | null>(null);
@@ -150,7 +151,7 @@ export default function UserManagementCard() {
                 variant="outlined"
                 color="error"
                 onClick={async () => {
-                  if (!window.confirm("Delete this user?")) return;
+                  if (!(await confirmAction("Delete this user?", { title: "Delete user", confirmLabel: "Delete", destructive: true }))) return;
                   try {
                     await api.delete(`/users/${u.id}`);
                     toast("User deleted.", "info");