fix(cv): protect unsaved builder edits

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useBlocker, useNavigate, useParams } from "react-router-dom";
 
 import {
   Alert, Box, Button, Chip, Collapse, Divider, FormControl, FormControlLabel, IconButton, InputLabel,
@@ -67,6 +67,9 @@ export default function CvBuilderEditor() {
   const [loadError, setLoadError] = useState<string | null>(null);
 
   const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const saveRevision = useRef(0);
+  const latestSettings = useRef<CvVariantSettings | null>(null);
+  const latestName = useRef("");
   const previewTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -96,8 +99,12 @@ export default function CvBuilderEditor() {
   }, [variantId]);
 
   const applyVariant = (variant: CvVariant) => {
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveRevision.current += 1;
     setName(variant.name);
     setSettings(variant.settings);
+    latestName.current = variant.name;
+    latestSettings.current = variant.settings;
     setIsPublic(variant.isPublic);
     setPublicSlug(variant.publicSlug);
     setSaveState("saved");
@@ -123,23 +130,40 @@ export default function CvBuilderEditor() {
     };
   }, [settings]);
 
+  const performSave = useCallback(async (next: CvVariantSettings, nextName: string, revision: number) => {
+    setSaveState("saving");
+    try {
+      await cvBuilderApi.save(variantId, { name: nextName, settings: next, source: "autosave" });
+      if (saveRevision.current === revision) setSaveState("saved");
+      return true;
+    } catch {
+      if (saveRevision.current === revision) setSaveState("error");
+      return false;
+    }
+  }, [variantId]);
+
   const scheduleSave = useCallback(
-    (next: CvVariantSettings, nextName?: string) => {
+    (next: CvVariantSettings, nextName = latestName.current) => {
+      latestSettings.current = next;
+      latestName.current = nextName;
+      const revision = ++saveRevision.current;
       setSaveState("unsaved");
       if (saveTimer.current) clearTimeout(saveTimer.current);
+      if (!nextName.trim()) return;
       saveTimer.current = setTimeout(async () => {
-        setSaveState("saving");
-        try {
-          await cvBuilderApi.save(variantId, { name: nextName ?? name, settings: next, source: "autosave" });
-          setSaveState("saved");
-        } catch {
-          setSaveState("error");
-        }
+        await performSave(next, nextName, revision);
       }, 800);
     },
-    [variantId, name],
+    [performSave],
   );
 
+  const retrySave = useCallback(async () => {
+    if (!latestSettings.current || !latestName.current.trim()) return false;
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    const revision = ++saveRevision.current;
+    return performSave(latestSettings.current, latestName.current, revision);
+  }, [performSave]);
+
   const update = (patch: Partial<CvVariantSettings>) => {
     setSettings((prev) => {
       if (!prev) return prev;
@@ -151,9 +175,33 @@ export default function CvBuilderEditor() {
 
   const renameVariant = (value: string) => {
     setName(value);
+    latestName.current = value;
     if (settings) scheduleSave(settings, value);
   };
 
+  const hasUnsavedChanges = saveState === "unsaved" || saveState === "saving" || saveState === "error";
+  const blocker = useBlocker(hasUnsavedChanges);
+
+  useEffect(() => {
+    if (blocker.state !== "blocked") return;
+    if (window.confirm("This CV has unsaved changes. Leave and discard them?")) blocker.proceed();
+    else blocker.reset();
+  }, [blocker]);
+
+  useEffect(() => {
+    const warnBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (!hasUnsavedChanges) return;
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", warnBeforeUnload);
+    return () => window.removeEventListener("beforeunload", warnBeforeUnload);
+  }, [hasUnsavedChanges]);
+
+  useEffect(() => () => {
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+  }, []);
+
   const togglePublic = async () => {
     try {
       const updated = await cvBuilderApi.setPublic(variantId, !isPublic);
@@ -238,8 +286,9 @@ export default function CvBuilderEditor() {
         <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
           <Tooltip title="Back to CVs"><IconButton size="small" onClick={() => navigate("/career/builder")}><ArrowBackIcon fontSize="small" /></IconButton></Tooltip>
           <TextField variant="standard" fullWidth value={name} onChange={(e) => renameVariant(e.target.value)}
+            error={!name.trim()} helperText={!name.trim() ? "Enter a name before saving." : undefined}
             slotProps={{ input: { style: { fontWeight: 800, fontSize: "1.05rem" } }, htmlInput: { "aria-label": "CV name" } }} />
-          <SaveBadge state={saveState} />
+          <SaveBadge state={saveState} canRetry={!!name.trim()} onRetry={() => void retrySave()} />
         </Stack>
         <Stack direction="row" spacing={1} sx={{ mb: 1, flexWrap: "wrap", gap: 1 }}>
           <Button size="small" variant="outlined" startIcon={<PictureAsPdfIcon />} onClick={exportPdf}>PDF</Button>
@@ -322,7 +371,7 @@ function EditorSkeleton() {
   );
 }
 
-function SaveBadge({ state }: { state: SaveState }) {
+function SaveBadge({ state, canRetry, onRetry }: { state: SaveState; canRetry: boolean; onRetry: () => void }) {
   const map: Record<SaveState, { label: string; color: "default" | "warning" | "success" | "error" }> = {
     idle: { label: "", color: "default" },
     unsaved: { label: "Unsaved", color: "warning" },
@@ -332,7 +381,14 @@ function SaveBadge({ state }: { state: SaveState }) {
   };
   const m = map[state];
   if (!m.label) return null;
-  return <Chip size="small" label={m.label} color={m.color} variant="outlined" aria-live="polite" />;
+  return (
+    <Stack spacing={0.5} alignItems="flex-end" aria-live="polite">
+      <Chip size="small" label={m.label} color={m.color} variant="outlined" />
+      {(state === "unsaved" || state === "error") ? (
+        <Button size="small" disabled={!canRetry} onClick={onRetry}>Save now</Button>
+      ) : null}
+    </Stack>
+  );
 }
 
 // ---------- Content tab ----------