fix(app): harden account and workflow state

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import {
   Box,
+  Alert,
   Button,
   Checkbox,
   FormControl,
@@ -10,6 +11,7 @@ import {
   MenuItem,
   Paper,
   Select,
+  Skeleton,
   Tab,
   Tabs,
   Typography,
@@ -26,6 +28,8 @@ import AiUsageCard from "./AiUsageCard";
 import AiPrivacySettingsCard from "./AiPrivacySettingsCard";
 import { ThemeModePref } from "../themePrefs";
 import { useI18n } from "../i18n/I18nProvider";
+import { api, getApiErrorMessage } from "../api";
+import { useToast } from "../toast";
 
 interface Props {
   pageSize: 15 | 20 | 25;
@@ -51,39 +55,10 @@ function SectionCard({ title, subtitle, children }: { title: string; subtitle?:
   );
 }
 
-const NOTIFICATION_PREFS_KEY = "settings.notificationPrefs";
-
 type NotificationPrefs = {
-  emailFollowUpReminders: boolean;
-  emailGhostedJobAlerts: boolean;
-  inAppReminderHighlights: boolean;
+  emailFollowUpRemindersEnabled: boolean;
 };
 
-function loadNotificationPrefs(): NotificationPrefs {
-  try {
-    const raw = window.localStorage.getItem(NOTIFICATION_PREFS_KEY);
-    if (!raw) {
-      return {
-        emailFollowUpReminders: true,
-        emailGhostedJobAlerts: true,
-        inAppReminderHighlights: true,
-      };
-    }
-    return {
-      emailFollowUpReminders: true,
-      emailGhostedJobAlerts: true,
-      inAppReminderHighlights: true,
-      ...JSON.parse(raw),
-    };
-  } catch {
-    return {
-      emailFollowUpReminders: true,
-      emailGhostedJobAlerts: true,
-      inAppReminderHighlights: true,
-    };
-  }
-}
-
 export default function SettingsView({
   pageSize,
   onPageSizeChange,
@@ -95,11 +70,31 @@ export default function SettingsView({
   const navigate = useNavigate();
   const [tab, setTab] = useState(0);
   const { language, setLanguage, t } = useI18n();
-  const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs>(() => loadNotificationPrefs());
+  const { toast } = useToast();
+  const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs | null>(null);
+  const [notificationError, setNotificationError] = useState<string | null>(null);
+  const [savingNotifications, setSavingNotifications] = useState(false);
 
   useEffect(() => {
-    window.localStorage.setItem(NOTIFICATION_PREFS_KEY, JSON.stringify(notificationPrefs));
-  }, [notificationPrefs]);
+    let active = true;
+    api.get<NotificationPrefs>("/notification-settings")
+      .then(({ data }) => { if (active) setNotificationPrefs(data); })
+      .catch((error) => { if (active) setNotificationError(getApiErrorMessage(error, "Notification settings could not be loaded.")); });
+    return () => { active = false; };
+  }, []);
+
+  const saveNotifications = async () => {
+    if (!notificationPrefs) return;
+    setSavingNotifications(true);
+    setNotificationError(null);
+    try {
+      const { data } = await api.put<NotificationPrefs>("/notification-settings", notificationPrefs);
+      setNotificationPrefs(data);
+      toast("Notification settings saved.", "success");
+    } catch (error) {
+      setNotificationError(getApiErrorMessage(error, "Notification settings could not be saved."));
+    } finally { setSavingNotifications(false); }
+  };
 
   return (
     <Paper sx={{ mt: 0, p: 2.5, borderRadius: 4, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
@@ -214,20 +209,15 @@ export default function SettingsView({
 
       <TabPanel value={tab} index={2}>
         <SectionCard title={t("settingsNotificationsTitle")} subtitle={t("settingsNotificationsBody")}>
-          <Box sx={{ display: "grid", gap: 1 }}>
+          {notificationError ? <Alert severity="error" sx={{ mb: 1.5 }}>{notificationError}</Alert> : null}
+          {!notificationPrefs ? <Skeleton variant="rounded" height={70} /> : <Box sx={{ display: "grid", gap: 1 }}>
             <FormControlLabel
-              control={<Checkbox checked={notificationPrefs.emailFollowUpReminders} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailFollowUpReminders: e.target.checked }))} />}
+              control={<Checkbox checked={notificationPrefs.emailFollowUpRemindersEnabled} onChange={(e) => setNotificationPrefs({ emailFollowUpRemindersEnabled: e.target.checked })} />}
               label={t("settingsNotificationsFollowUpReminders")}
             />
-            <FormControlLabel
-              control={<Checkbox checked={notificationPrefs.emailGhostedJobAlerts} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailGhostedJobAlerts: e.target.checked }))} />}
-              label={t("settingsNotificationsGhostedJobs")}
-            />
-            <FormControlLabel
-              control={<Checkbox checked={notificationPrefs.inAppReminderHighlights} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, inAppReminderHighlights: e.target.checked }))} />}
-              label={t("settingsNotificationsInAppReminders")}
-            />
-          </Box>
+            <Typography variant="caption" color="text.secondary">Disabling this prevents the background reminder worker from sending follow-up email to your account. In-app reminders remain available.</Typography>
+            <Box><Button variant="contained" disabled={savingNotifications} onClick={() => void saveNotifications()}>{savingNotifications ? "Saving…" : "Save notification settings"}</Button></Box>
+          </Box>}
           <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1.5 }}>
             {t("settingsNotificationsDelivery")}
           </Typography>