feat(waveform): implement dynamic audio waveform visualization in SampleCard (#1)

[Simultech369]

Summary of Changes

This pull request resolves #1 by implementing a dynamic, interactive audio waveform visualization in SampleCard, replacing static decorative placeholder bars with realistic, interactive waveform peaks, playback progress tracking, and active audio controls.

🎯 Key Implementations

1. AudioWaveform Component (src/components/AudioWaveform.tsx)

   • Realistic Waveform Synthesis: Deterministic peak generation (intro build-up, chorus peaks, rhythmic transients, outro decay) based on seed or custom peak data.
   • Zero Heavy Dependencies: Pure React + CSS GPU-accelerated transforms (scaleY) ensuring 60fps rendering in dense marketplace grids.
   • Interactive Playback & Progress: Visual progress filling (activeColor vs inactiveColor), hover time positioning, and interactive click/touch/keyboard seeking.
   • Active Playback Animations: Dynamic frequency-bar dancing during audio playback.
   • Graceful Fallbacks: Loading skeleton shimmer and resilient error fallback states.

2. SampleCard Integration (src/components/SampleCard.tsx)

   • Replaced static bars with dynamic <AudioWaveform seed={id} ... />.
   • Added interactive preview playback controls with Play/Pause toggling, elapsed time display, and instant seek support.

3. Comprehensive Unit Tests (src/__tests__/waveform.test.tsx)

   • 17 unit tests verifying peak synthesis, bar counts, progress calculation, hover scaling, seek handlers, loading/error states, and SampleCard playback integration.

---

🧪 Verification & Testing

• vitest run src/__tests__/waveform.test.tsx: