Skip to content

Phase 1: Admin Form System Unification

jedmund requested to merge devin/1763997845-admin-form-unification into main

Created by: devin-ai-integration[bot]

Phase 1: Admin Form System Unification - Refactor to Shared Composables

Summary

Refactored three admin forms (EssayForm, AlbumForm, and posts edit page) to use shared composables (useDraftRecovery, useFormGuards) instead of duplicated inline logic. This eliminates ~167 lines of duplicated code and aligns all forms with the ProjectForm pattern.

Key Changes:

  • EssayForm: Replaced inline draft recovery and form guards with composables, replaced inline draft banner with DraftPrompt component
  • AlbumForm: Added autosave functionality (previously showed hardcoded "idle" status), added draft recovery and form guards using composables
  • Posts edit page: Replaced inline draft recovery and form guards with composables, replaced inline draft banner with DraftPrompt component

Code Reduction:

  • Removed 388 lines of duplicated code
  • Added 221 lines using shared composables
  • Net reduction: 167 lines

Review & Testing Checklist for Human

⚠️ IMPORTANT: This PR has NOT been tested in a browser - only eslint checks have passed.

  • Test AlbumForm autosave - AlbumForm now has autosave for the first time (previously hardcoded to "idle"). Edit an album, make changes, verify autosave triggers and status updates correctly.
  • Test draft recovery on all three forms - For each form (EssayForm, AlbumForm, posts edit page):
    1. Start editing content
    2. Wait for autosave to fail (disconnect network or force offline state)
    3. Close browser/tab
    4. Reopen the form
    5. Verify draft recovery prompt appears with correct timestamp
    6. Test both "Restore" and "Dismiss" actions
  • Test navigation guards - For each form:
    1. Make unsaved changes
    2. Try to navigate away (click back button or type new URL)
    3. Verify autosave flushes before navigation
    4. Try to close browser tab - verify beforeunload warning appears
    5. Test Cmd/Ctrl+S keyboard shortcut triggers immediate save
  • Test for regressions - Verify existing functionality still works:
    • Form validation
    • Manual save/publish actions
    • Tab switching
    • Content editing
    • Tag management (EssayForm, posts edit page)
    • Photo selection (AlbumForm)

Notes

  • All three forms now use the same composables that ProjectForm already uses successfully
  • Eslint passes with zero errors (maintained throughout refactoring)
  • Draft key logic was slightly adjusted - verify edge cases work correctly (e.g., creating new posts)
  • AlbumForm's autosave uses the same 2-second debounce as other forms

Session: https://app.devin.ai/sessions/9c28151548c1410ca9948853ad0c04ad
Requested by: Justin Edmund (justin@jedmund.com) / @jedmund

Merge request reports