gravl/.planning/phases/04-workout-modification/04-06-PLAN.md

Phase 04-06: Persistence Improvements

Goal: Make custom workout modifications resilient to network failures, browser crashes, and session interruptions. Users should never lose edits.

Problem Statement

Currently, users can modify program workouts and fork them as custom workouts (phases 04-01 through 04-05). However:

• Edits are stored only in React state; closing the browser loses all changes
• Network failures during save have no recovery mechanism (hard failure)
• No indication of sync status or unsaved changes
• No offline support for draft modifications

This creates friction: users may spend time modifying a workout only to have changes disappear.

Solution: Persistence Layer

We'll implement a three-tier approach:

1. Draft Persistence (localStorage) - auto-save edits locally, recover on page reload
2. Error Recovery (retry logic) - graceful handling of network failures with user-triggered retry
3. Sync Status UI (feedback) - show "unsaved", "saving", "saved", "error" states

Scope (MVP)

04-06-01: Draft Persistence

Focus: Save workout edit state to localStorage; restore on page load

Tasks:

1. Add custom React hook useDraftWorkout() that:
   • Syncs exercise state to localStorage after each change
   • Loads draft on component mount
   • Provides clearDraft() for post-save cleanup
   • Keys draft by workout.id to support multiple concurrent edits
2. Update WorkoutEditPage to use useDraftWorkout()
3. Show draft recovery prompt on mount if draft exists
4. Clear draft after successful save

Success Criteria:

• User modifies a workout, closes browser, reopens page → edits are recovered
• Draft is cleared after successful save
• Manual "clear draft" option in UI (if user wants to discard changes)

04-06-02: Save Error Handling & Retry

Focus: Graceful failure + user-controlled retry

Tasks:

1. Wrap handleSave in try-catch with specific error handling:
   • Network errors → show "Connection failed. Retry?" UI
   • Validation errors → show specific field errors
   • Server errors → show "Server error. Please try again" UI
2. Add handleRetry() to re-attempt last failed save
3. Update save button to show states: Spara → Sparar... → Sparat! (2s) → Spara
4. Show persistent error banner if save fails
5. Log errors for debugging

Success Criteria:

• Network failure during save shows retry option (not hard crash)
• User can click retry; attempt re-sends
• Save state is clearly indicated (saving, saved, error)
• Draft is NOT cleared if save fails

04-06-03: Sync Status & Visual Feedback

Focus: Users always know if changes are saved

Tasks:

1. Add sync status to WorkoutEditPage state: syncStatus = 'idle' | 'saving' | 'saved' | 'error'
2. Show status indicator in header:
   • Sparar... (gray spinner) while saving
   • ✓ Sparat (green) for 2s after success
   • ✗ Sparningsfel (red) if failed
3. Auto-hide error after 5s or on next change
4. Disable back/cancel buttons while saving

Success Criteria:

• User sees real-time feedback of save progress
• Users cannot accidentally navigate away during save

Success Criteria (Phase Level)

• Edits survive browser reload (draft persistence)
• Network failures are recoverable (retry logic)
• Users always know sync status (UI feedback)
• Draft is auto-cleared post-save
• Error states have clear recovery paths

Files to Modify/Create

New:

• frontend/src/hooks/useDraftWorkout.js - Draft persistence hook

Modified:

• frontend/src/pages/WorkoutEditPage.jsx - Use draft hook, add error handling, show sync status
• frontend/src/pages/WorkoutEditPage.css - Add status indicator styles (spinner, checkmark, error)

Implementation Order

1. Start with 04-06-01 (draft persistence) — simplest, highest value
2. Then 04-06-02 (error recovery) — integrates with draft
3. Then 04-06-03 (UI feedback) — polish and completeness

Out of Scope

• Offline queue (sync when reconnected) — v2 feature
• Conflict resolution (concurrent edits) — v2 feature
• Analytics/telemetry — v2 feature
• Undo/redo — v2 feature