final feature set

tasks/merged-waveform/07-merged-waveform-component.md

@@ -0,0 +1,46 @@
+# 07. Create Merged Progress-Waveform Component
+
+meta:
+  id: merged-waveform-07
+  feature: merged-waveform
+  priority: P2
+  depends_on: [merged-waveform-06]
+  tags: [ui, waveform, component]
+
+objective:
+- Design and implement a single component that shows progress bar and waveform
+- Component starts as progress bar, expands to waveform when playing
+- Provide smooth transitions between states
+
+deliverables:
+- MergedWaveform component
+- State management for progress vs waveform display
+- Visual styling for progress bar and waveform
+
+steps:
+1. Create `src/components/MergedWaveform.tsx`
+2. Design component state machine (progress bar → waveform)
+3. Implement progress bar visualization
+4. Add waveform expansion animation
+5. Style progress bar and waveform with theme colors
+
+tests:
+- Unit: Test component state transitions
+- Integration: Test component in Player
+- Visual: Verify smooth expansion animation
+
+acceptance_criteria:
+- Component displays progress bar when paused
+- Component smoothly expands to waveform when playing
+- Visual styles match theme and existing UI
+
+validation:
+- Test with paused and playing states
+- Verify expansion is smooth and visually appealing
+- Check theme color integration
+
+notes:
+- Use existing Waveform component as base
+- Add CSS transitions for smooth expansion
+- Keep component size manageable (fit in progress bar area)
+- Consider responsive to terminal width changes