Feature Request: Form Data Persistence for Report Creation

[luukee]

Currently, if a user accidentally navigates away from the report creation form or refreshes the page, all their progress is lost. This creates a poor user experience, especially for longer reports with multiple steps.

Implement form data persistence using localStorage to automatically save user progress throughout the report creation process, allowing users to resume where they left off.

• Auto-save: Automatically save form data to localStorage as users type/select options
• Step persistence: Remember which step the user was on
• Data recovery: Restore form state when user returns to the report creation flow
• Cleanup: Clear saved data after successful report submission

Data to Persist

• Current step (1-6)
• Form fields:
  • Agency selection
  • Topic selection (including custom topics)
  • Source selection (including custom sources)
  • Title
  • Links (primary and secondary)
  • Description
  • Selected images (file references)
• Form validation state
• User preferences (reminder settings)

Implementation Details

• Storage key: misinfo_report_draft_{userId}
• Save frequency: On every field change + step navigation
• Data format: JSON object with timestamp
• Expiration: Auto-clear after 24 hours or successful submission

Files to Modify

• components/reports/ReportSystem.jsx - Main form state management
• components/reports/ReportSteps/*.jsx - Individual step components
• hooks/useLocalStorage.js - New custom hook (create this)

📚 Resources

• localStorage MDN Documentation
• React Custom Hooks Guide
• JSON.stringify/parse

[luukee]

@EthanL06 This should be live on the dev site (https://dev-truthsleuthlocal.netlify.app), let me know if it's working as expected and I'll close this issue.