feat(email): add new-message drafting

job-tracker-ui/src/views/CorrespondenceInboxPage.tsx

@@ -50,6 +50,12 @@ type EmailProviderStatus = {
   canSend: boolean;
 };
 
+type JobChoice = {
+  id: number;
+  jobTitle: string;
+  company?: { name?: string | null } | null;
+};
+
 export function emailProviderStatusLabel(provider: EmailProviderStatus) {
   if (!provider.connected) return `${provider.displayName}: Not connected`;
   const identity = provider.address || "Connected account";
@@ -110,6 +116,12 @@ export default function CorrespondenceInboxPage() {
   const { confirm } = useConfirm();
   const [items, setItems] = useState<CorrespondenceInboxItem[]>([]);
   const [providers, setProviders] = useState<EmailProviderStatus[]>([]);
+  const [providerStatusLoaded, setProviderStatusLoaded] = useState(false);
+  const [jobs, setJobs] = useState<JobChoice[]>([]);
+  const [jobsLoaded, setJobsLoaded] = useState(false);
+  const [composeSetupOpen, setComposeSetupOpen] = useState(false);
+  const [composeJobId, setComposeJobId] = useState<number | "">("");
+  const [composeProvider, setComposeProvider] = useState("");
   const [providerStatusError, setProviderStatusError] = useState(false);
   const [selectedMessageId, setSelectedMessageId] = useState<number | null>(null);
   const [messageDetail, setMessageDetail] = useState<EmailMessageDetail | null>(null);
@@ -161,7 +173,15 @@ export default function CorrespondenceInboxPage() {
       .catch(() => {
         setProviders([]);
         setProviderStatusError(true);
-      });
+      })
+      .finally(() => setProviderStatusLoaded(true));
+  }, []);
+
+  useEffect(() => {
+    api.get<{ items?: JobChoice[] }>("/jobapplications", { params: { page: 1, pageSize: 100, sortBy: "dateApplied", sortDir: "desc" } })
+      .then((response) => setJobs(Array.isArray(response.data?.items) ? response.data.items : []))
+      .catch(() => setJobs([]))
+      .finally(() => setJobsLoaded(true));
   }, []);
 
   const loadStoredDrafts = useCallback(async () => {
@@ -182,6 +202,7 @@ export default function CorrespondenceInboxPage() {
     const inbound = items.filter((item) => item.direction === "inbound").length;
     return { linked, inbound };
   }, [items]);
+  const sendCapableProviders = useMemo(() => providers.filter((provider) => provider.connected && provider.canSend), [providers]);
 
   const showMessage = async (item: CorrespondenceInboxItem) => {
     if (selectedMessageId === item.id) {
@@ -273,6 +294,41 @@ export default function CorrespondenceInboxPage() {
     setDraftError(null);
   };
 
+  const openComposeSetup = () => {
+    setComposeJobId((current) => current || jobs[0]?.id || "");
+    setComposeProvider((current) => current || sendCapableProviders[0]?.provider || "");
+    setComposeSetupOpen(true);
+  };
+
+  const startNewMessage = async () => {
+    const job = jobs.find((candidate) => candidate.id === composeJobId);
+    const provider = sendCapableProviders.find((candidate) => candidate.provider === composeProvider);
+    if (!job || !provider) return;
+    if (draft?.bodyText.trim() && !(await confirm({
+      title: "Replace email draft?",
+      message: draft.id ? "Your current draft is already saved and can be resumed later." : "Your current unsaved draft text will be lost.",
+      confirmLabel: "Replace draft",
+      destructive: !draft.id,
+    }))) return;
+    setDraft({
+      jobApplicationId: job.id,
+      companyName: job.company?.name || "Unknown company",
+      jobTitle: job.jobTitle || "Unknown role",
+      provider: provider.provider,
+      providerName: provider.displayName,
+      fromAddress: provider.address || "Connected account",
+      to: "",
+      subject: "",
+      bodyText: "",
+      threadId: "",
+      clientRequestId: globalThis.crypto.randomUUID(),
+    });
+    setComposeSetupOpen(false);
+    setSendResult(null);
+    setSendError(null);
+    setDraftError(null);
+  };
+
   const updateDraft = (changes: Partial<Pick<EmailDraft, "to" | "subject" | "bodyText">>) => {
     setDraft((current) => current ? {
       ...current,
@@ -463,6 +519,7 @@ export default function CorrespondenceInboxPage() {
           {view === "inbox" ? <Chip label={`${filteredSummary.inbound} inbound`} variant="outlined" /> : null}
           <Button variant={view === "inbox" ? "contained" : "text"} size="small" onClick={() => setSearchParams({})}>Linked messages</Button>
           <Button variant={view === "review" ? "contained" : "text"} size="small" onClick={() => setSearchParams({ view: "review" })}>Review suggestions</Button>
+          <Button variant="outlined" size="small" onClick={openComposeSetup} disabled={jobs.length === 0 || sendCapableProviders.length === 0}>Compose new email</Button>
         </Box>
       </Box>
 
@@ -480,6 +537,8 @@ export default function CorrespondenceInboxPage() {
       {providerStatusError ? (
         <Alert severity="warning" sx={{ mb: 2 }}>Email provider status is temporarily unavailable. Saved JobTracker correspondence remains available.</Alert>
       ) : null}
+      {jobsLoaded && jobs.length === 0 ? <Alert severity="info" sx={{ mb: 2 }}>Add a job before composing a new email.</Alert> : null}
+      {providerStatusLoaded && !providerStatusError && sendCapableProviders.length === 0 ? <Alert severity="info" sx={{ mb: 2 }}>Reconnect Gmail or Outlook with send access before composing a new email.</Alert> : null}
       {draftError && !draft ? <Alert severity="warning" sx={{ mb: 2 }}>{draftError}</Alert> : null}
 
       {storedDrafts.length > 0 ? (
@@ -495,6 +554,30 @@ export default function CorrespondenceInboxPage() {
         </Alert>
       ) : null}
 
+      {composeSetupOpen ? (
+        <Paper component="section" aria-labelledby="compose-new-title" variant="outlined" sx={{ p: 2, borderRadius: 3, mb: 2 }}>
+          <Typography id="compose-new-title" component="h2" variant="h6" sx={{ fontWeight: 900, mb: 1.5 }}>Compose new email</Typography>
+          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr auto" }, gap: 1.25, alignItems: "center" }}>
+            <FormControl fullWidth>
+              <InputLabel id="compose-job-label">Job</InputLabel>
+              <Select labelId="compose-job-label" value={composeJobId} label="Job" onChange={(event) => setComposeJobId(Number(event.target.value))}>
+                {jobs.map((job) => <MenuItem key={job.id} value={job.id}>{job.company?.name || "Unknown company"} · {job.jobTitle}</MenuItem>)}
+              </Select>
+            </FormControl>
+            <FormControl fullWidth>
+              <InputLabel id="compose-provider-label">Sending provider</InputLabel>
+              <Select labelId="compose-provider-label" value={composeProvider} label="Sending provider" onChange={(event) => setComposeProvider(String(event.target.value))}>
+                {sendCapableProviders.map((provider) => <MenuItem key={provider.provider} value={provider.provider}>{provider.displayName} · {provider.address || "Connected account"}</MenuItem>)}
+              </Select>
+            </FormControl>
+            <Box sx={{ display: "flex", gap: 1 }}>
+              <Button onClick={() => setComposeSetupOpen(false)}>Cancel</Button>
+              <Button variant="contained" onClick={() => void startNewMessage()} disabled={!composeJobId || !composeProvider}>Start draft</Button>
+            </Box>
+          </Box>
+        </Paper>
+      ) : null}
+
       {view === "review" ? <GmailReviewPage embedded /> : <>
         <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "2fr 1fr 1fr auto" }, gap: 1.25, mb: 2 }}>
         <TextField label="Search" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Company, role, recruiter, subject" />