Feature: Remove message, Upgrade: pull better job data, add dedicated status section to job applications

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

@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Chip,
+  IconButton,
   CircularProgress,
   Dialog,
   DialogActions,
@@ -22,6 +23,7 @@ import {
   Typography,
 } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 
 import { api } from "../api";
 import { useToast } from "../toast";
@@ -231,6 +233,17 @@ export default function Correspondence({ jobId }: { jobId: number }) {
     }
   };
 
+
+  const deleteMessage = async (messageId: number) => {
+    try {
+      await api.delete(`/correspondence/${messageId}`);
+      await load();
+      toast("Message removed.", "success");
+    } catch {
+      toast("Failed to remove message.", "error");
+    }
+  };
+
   const importGmailMessage = async (messageId: string) => {
     try {
       setImportingMessageId(messageId);
@@ -303,11 +316,16 @@ export default function Correspondence({ jobId }: { jobId: number }) {
                       {m.content}
                     </Typography>
 
-                    <Typography variant="caption" sx={{ display: "block", mt: 0.75, color: "text.secondary" }}>
-                      {isMe ? "Me" : "Company"}
-                      {m.channel ? ` - ${m.channel}` : ""}
-                      {m.date ? ` - ${new Date(m.date).toLocaleString()}` : ""}
-                    </Typography>
+                    <Box sx={{ display: "flex", justifyContent: "space-between", gap: 1, alignItems: "flex-end", mt: 0.75 }}>
+                      <Typography variant="caption" sx={{ color: "text.secondary" }}>
+                        {isMe ? "Me" : "Company"}
+                        {m.channel ? ` - ${m.channel}` : ""}
+                        {m.date ? ` - ${new Date(m.date).toLocaleString()}` : ""}
+                      </Typography>
+                      <IconButton size="small" onClick={() => void deleteMessage(m.id)} sx={{ color: "text.secondary" }}>
+                        <DeleteOutlineIcon fontSize="small" />
+                      </IconButton>
+                    </Box>
                   </Box>
                 </Box>
               );