PodTui/tasks/real-time-audio-visualization/06-add-visualizer-controls.md

06. Add visualizer controls and settings

meta: id: real-time-audio-visualization-06 feature: real-time-audio-visualization priority: P2 depends_on: [real-time-audio-visualization-05] tags: [ui, controls, settings]

objective:

• Add user controls for visualizer settings
• Create settings panel for customization
• Allow users to adjust visualizer parameters

deliverables:

• src/components/VisualizerSettings.tsx - Settings component
• Updated src/components/Player.tsx - Settings panel integration
• src/types/settings.ts - Visualizer settings type definition
• src/stores/settings.ts - Settings state management

steps:

• Define visualizer settings types:
  • Number of bars (resolution)
  • Sensitivity (autosens toggle + manual value)
  • Noise reduction level
  • Frequency cutoffs (low/high)
  • Bar width and spacing
  • Color scheme options
• Create VisualizerSettings component:
  • Display current settings
  • Allow adjusting each parameter
  • Show real-time feedback
  • Save settings to app store
• Integrate with Player component:
  • Add settings button
  • Show settings panel when toggled
  • Apply settings to RealtimeWaveform component
• Update settings state management:
  • Load saved settings from app store
  • Save settings on change
  • Provide default values
• Create UI for settings:
  • Keyboard shortcuts for quick adjustment
  • Visual feedback for changes
  • Help text for each setting
• Add settings persistence
• Create tests for settings component

tests:

• Unit: Test settings type definitions
• Unit: Test settings state management
• Unit: Test VisualizerSettings component
• Integration: Test settings apply to visualization
• Integration: Test settings persistence
• Manual: Test all settings controls

acceptance_criteria:

• VisualizerSettings component renders correctly
• All settings can be adjusted
• Changes apply in real-time
• Settings persist between sessions
• Keyboard shortcuts work
• Component handles invalid settings gracefully

validation:

• Run: bun test for unit tests
• Run: bun test for integration tests
• Manual: Test all settings
• Manual: Test keyboard shortcuts
• Manual: Test settings persistence

notes:

• Settings should have sensible defaults
• Some settings may require visualizer re-initialization
• Consider limiting certain settings to avoid performance issues
• Add tooltips or help text for complex settings
• Settings should be optional - users can start without them
• Keep UI simple and intuitive