Mike/PodTui

Files

Michael Freno f08afb2ed1 init

2026-02-03 23:29:36 -05:00

1.6 KiB

Raw Blame History

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