61 lines
1.6 KiB
Markdown
61 lines
1.6 KiB
Markdown
# 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
|