fix: persist uploaded screenshots across refresh

src/hooks/useLocalStorage.js

@@ -1,6 +1,6 @@
 import { STORAGE_KEY, PREVIEW_ZOOM_KEY, FIELD_IDS, ZOOM_LEVELS } from '../utils/constants';
 
-export function saveData({ formData, sectionState, selectedTechs, selectedBadges, sectionOrder }) {
+export function saveData({ formData, sectionState, selectedTechs, selectedBadges, sectionOrder, screenshots }) {
   try {
     const data = {
       fields: { ...formData },
@@ -9,6 +9,7 @@ export function saveData({ formData, sectionState, selectedTechs, selectedBadges
       badges: Array.from(selectedBadges),
       sections: { ...sectionState },
       sectionOrder: sectionOrder || [],
+      screenshots: screenshots || [],
     };
     localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
     return true;

src/hooks/useReadmeState.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { SECTIONS, DEFAULT_BADGES } from '../utils/constants';
 import { loadData, saveData, clearData } from './useLocalStorage';
 
@@ -54,15 +54,15 @@ export function useReadmeState() {
     saved?.badges ? new Set(saved.badges) : new Set(DEFAULT_BADGES)
   );
 
-  const [screenshots, setScreenshots] = useState([]);
+  const [screenshots, setScreenshots] = useState(saved?.screenshots || []);
   const [autoSaved, setAutoSaved] = useState(false);
   const saveTimerRef = useRef(null);
   const autoSaveTimerRef = useRef(null);
 
-  const scheduleSave = useCallback((fd, ss, st, sb, so) => {
+  const scheduleSave = useCallback((fd, ss, st, sb, so, screenshots) => {
     clearTimeout(saveTimerRef.current);
     saveTimerRef.current = setTimeout(() => {
-      saveData({ formData: fd, sectionState: ss, selectedTechs: st, selectedBadges: sb, sectionOrder: so });
+      saveData({ formData: fd, sectionState: ss, selectedTechs: st, selectedBadges: sb, sectionOrder: so, screenshots });
       setAutoSaved(true);
       clearTimeout(autoSaveTimerRef.current);
       autoSaveTimerRef.current = setTimeout(() => setAutoSaved(false), 2000);
@@ -72,41 +72,41 @@ export function useReadmeState() {
   const updateField = useCallback((field, value) => {
     setFormData(prev => {
       const next = { ...prev, [field]: value };
-      scheduleSave(next, sectionState, selectedTechs, selectedBadges, sectionOrder);
+      scheduleSave(next, sectionState, selectedTechs, selectedBadges, sectionOrder, screenshots);
       return next;
     });
-  }, [sectionState, selectedTechs, selectedBadges, sectionOrder, scheduleSave]);
+  }, [sectionState, selectedTechs, selectedBadges, sectionOrder, scheduleSave, screenshots]);
 
   const toggleSection = useCallback((id, checked) => {
     setSectionState(prev => {
       const next = { ...prev, [id]: checked };
-      scheduleSave(formData, next, selectedTechs, selectedBadges, sectionOrder);
+      scheduleSave(formData, next, selectedTechs, selectedBadges, sectionOrder, screenshots);
       return next;
     });
-  }, [formData, selectedTechs, selectedBadges, sectionOrder, scheduleSave]);
+  }, [formData, selectedTechs, selectedBadges, sectionOrder, scheduleSave, screenshots]);
 
   const updateSectionOrder = useCallback((newOrder) => {
     setSectionOrder(newOrder);
-    scheduleSave(formData, sectionState, selectedTechs, selectedBadges, newOrder);
-  }, [formData, sectionState, selectedTechs, selectedBadges, scheduleSave]);
+    scheduleSave(formData, sectionState, selectedTechs, selectedBadges, newOrder, screenshots);
+  }, [formData, sectionState, selectedTechs, selectedBadges, scheduleSave, screenshots]);
 
   const toggleTech = useCallback((label) => {
     setSelectedTechs(prev => {
       const next = new Set(prev);
       if (next.has(label)) next.delete(label); else next.add(label);
-      scheduleSave(formData, sectionState, next, selectedBadges, sectionOrder);
+      scheduleSave(formData, sectionState, next, selectedBadges, sectionOrder, screenshots);
       return next;
     });
-  }, [formData, sectionState, selectedBadges, sectionOrder, scheduleSave]);
+  }, [formData, sectionState, selectedBadges, sectionOrder, scheduleSave, screenshots]);
 
   const toggleBadge = useCallback((id) => {
     setSelectedBadges(prev => {
       const next = new Set(prev);
       if (next.has(id)) next.delete(id); else next.add(id);
-      scheduleSave(formData, sectionState, selectedTechs, next, sectionOrder);
+      scheduleSave(formData, sectionState, selectedTechs, next, sectionOrder, screenshots);
       return next;
     });
-  }, [formData, sectionState, selectedTechs, sectionOrder, scheduleSave]);
+  }, [formData, sectionState, selectedTechs, sectionOrder, scheduleSave, screenshots]);
 
   const applyTemplate = useCallback((template) => {
     setFormData(prev => {
@@ -123,12 +123,12 @@ export function useReadmeState() {
         bibtexCitation: template.bibtexCitation || '',
       };
       const nextSections = { ...sectionState, academic: !!template.abstractText };
-      scheduleSave(next, nextSections, new Set(template.techs), selectedBadges, sectionOrder);
+      scheduleSave(next, nextSections, new Set(template.techs), selectedBadges, sectionOrder, screenshots);
       return next;
     });
     setSectionState(prev => ({ ...prev, academic: !!template.abstractText }));
     setSelectedTechs(new Set(template.techs));
-  }, [sectionState, selectedBadges, sectionOrder, scheduleSave]);
+  }, [sectionState, selectedBadges, sectionOrder, scheduleSave, screenshots]);
 
   const resetAll = useCallback(() => {
     setFormData(initialFormData);
@@ -159,6 +159,25 @@ export function useReadmeState() {
     setScreenshots(prev => prev.filter((_, i) => i !== idx));
   }, []);
 
+  useEffect(() => {
+  scheduleSave(
+    formData,
+    sectionState,
+    selectedTechs,
+    selectedBadges,
+    sectionOrder,
+    screenshots
+  );
+}, [
+  screenshots,
+  formData,
+  sectionState,
+  selectedTechs,
+  selectedBadges,
+  sectionOrder,
+  scheduleSave
+]);
+
   return {
     formData, updateField,
     sectionState, toggleSection,