init

tasks/podcast-tui-app/22-backup-restore.md

@@ -0,0 +1,60 @@
+# 21. Build Sync Status Indicator
+
+meta:
+  id: podcast-tui-app-21
+  feature: podcast-tui-app
+  priority: P1
+  depends_on: [20]
+  tags: [status-indicator, sync, ui, solidjs]
+
+objective:
+- Create sync status indicator component
+- Display sync state (idle, syncing, complete, error)
+- Show sync progress
+- Provide sync status in settings
+
+deliverables:
+- `src/components/SyncStatus.tsx` with status indicator
+- `src/components/SyncProgress.tsx` with progress bar
+- `src/components/SyncError.tsx` with error display
+
+steps:
+- Create `src/components/SyncStatus.tsx`:
+  - Display current sync state
+  - Show status icon (spinner, check, error)
+  - Show status message
+  - Auto-update based on state
+- Create `src/components/SyncProgress.tsx`:
+  - Progress bar visualization
+  - Percentage display
+  - Step indicators
+  - Animation
+- Create `src/components/SyncError.tsx`:
+  - Error message display
+  - Retry button
+  - Error details (expandable)
+- Add sync status to settings screen
+
+tests:
+- Unit: Test status indicator updates correctly
+- Unit: Test progress bar visualization
+- Unit: Test error display
+
+acceptance_criteria:
+- Status indicator shows correct state
+- Progress bar updates during sync
+- Error message is displayed on errors
+- Status persists across sync operations
+
+validation:
+- Run application and test sync operations
+- Trigger export/import
+- Verify status indicator updates
+- Test error cases
+
+notes:
+- Use SolidJS signals for state
+- Status states: idle, syncing, complete, error
+- Use ASCII icons for status indicators
+- Add animation for syncing state
+- Make status component reusable