valknar/audio-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
231 Commits 1 Branch 0 Tags
d03080d3d23c423bc3d0cd2e82f22adadd12857f
Commit Graph

3 Commits

Author SHA1 Message Date
Sebastian Krüger
a2cef6cc6e refactor: remove waveform color setting to preserve dynamic coloring 
- Removed waveformColor from UISettings interface
- Removed waveform color picker from Interface settings tab
- Preserves dynamic per-track waveform coloring system
- Cleaner settings UI with one less option

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-19 18:19:38 +01:00
Sebastian Krüger
adb99a2c33 feat: implement Phase 14 settings & preferences with localStorage persistence 
Added comprehensive settings system with 5 categories:
- Recording Settings (existing, integrated)
- Audio Settings (buffer size, sample rate, auto-normalize)
- Editor Settings (auto-save interval, undo limit, snap-to-grid, grid resolution, default zoom)
- Interface Settings (theme, waveform color, font size, default track height)
- Performance Settings (peak/waveform quality, spectrogram toggle, max file size)

Features:
- useSettings hook with localStorage persistence
- Automatic save/load of all settings
- Category-specific reset buttons
- Expanded GlobalSettingsDialog with 5 tabs
- Full integration with AudioEditor
- Settings merge with defaults on load (handles updates gracefully)

Settings are persisted to localStorage and automatically restored on page load.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-19 16:39:05 +01:00
Sebastian Krüger
dc9647731d feat: redesign track controls to Ableton Live style 
Major UI Redesign:
- Reduced track control width from 288px to 192px (33% narrower)
- Replaced horizontal sliders with vertical fader and circular knob
- More compact, professional appearance matching Ableton Live
- Global settings dialog replaces inline recording settings

New Components Created:
- VerticalFader.tsx: Vertical volume control with integrated level meter
  - Shows volume dB at top, level dB at bottom
  - Level meter displayed as background gradient
  - Draggable handle for precise control

- CircularKnob.tsx: Rotary pan control
  - SVG-based rotary knob with arc indicator
  - Vertical drag interaction (200px sensitivity)
  - Displays L/C/R values

- GlobalSettingsDialog.tsx: Centralized settings
  - Tabbed interface (Recording, Playback, Interface)
  - Recording settings moved from inline to dialog
  - Accessible via gear icon in header
  - Modal dialog with backdrop

Track Control Panel Changes:
- Track name: More compact (text-xs)
- Buttons: Smaller (h-6 w-6), text-based S/M buttons
- Record button: Circle indicator instead of icon
- Pan: Circular knob (40px) instead of horizontal slider
- Volume: Vertical fader with integrated meter
- Removed: Inline recording settings panel

Header Changes:
- Added Settings button (gear icon) before ThemeToggle
- Opens GlobalSettingsDialog on click
- Clean, accessible from anywhere

Props Cleanup:
- Removed recordingSettings props from Track/TrackList
- Removed onInputGainChange, onRecordMonoChange, onSampleRateChange props
- Settings now managed globally via dialog

Technical Details:
- VerticalFader uses mouse drag for smooth control
- CircularKnob rotates -135° to +135° (270° range)
- Global event listeners for drag interactions
- Proper cleanup on unmount

Benefits:
✅ 33% narrower tracks = more tracks visible
✅ Professional Ableton-style appearance
✅ Cleaner, less cluttered interface
✅ Global settings accessible anywhere
✅ Better use of vertical space
✅ Consistent with industry-standard DAWs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-18 16:15:04 +01:00