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

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