feat: refine UI with effects panel improvements and visual polish

Major improvements:
- Fixed multi-file import (FileList to Array conversion)
- Auto-select first track when adding to empty project
- Global effects panel folding state (independent of track selection)
- Effects panel collapsed/disabled when no track selected
- Effect device expansion state persisted per-device
- Effect browser with searchable descriptions

Visual refinements:
- Removed center dot from pan knob for cleaner look
- Simplified fader: removed volume fill overlay, dynamic level meter visible through semi-transparent handle
- Level meter capped at fader position (realistic mixer behavior)
- Solid background instead of gradient for fader track
- Subtle volume overlay up to fader handle
- Fixed track control width flickering (consistent 4px border)
- Effect devices: removed shadows/rounded corners for flatter DAW-style look, added consistent border-radius
- Added border between track control and waveform area

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-18 18:13:38 +01:00
parent 839128a93f
commit 17381221d8
10 changed files with 570 additions and 283 deletions

View File

@@ -66,7 +66,7 @@ export const TRACK_COLORS: Record<TrackColor, string> = {
gray: 'rgb(156, 163, 175)',
};
export const DEFAULT_TRACK_HEIGHT = 240; // Increased from 180 to accommodate vertical controls
export const MIN_TRACK_HEIGHT = 120; // Increased from 60 for vertical fader/knob layout
export const MAX_TRACK_HEIGHT = 400; // Increased from 300 for better waveform viewing
export const DEFAULT_TRACK_HEIGHT = 300; // Knob + fader with labels + R/S/M buttons
export const MIN_TRACK_HEIGHT = 220; // Minimum to fit knob + fader with labels + buttons
export const MAX_TRACK_HEIGHT = 500; // Increased for better waveform viewing
export const COLLAPSED_TRACK_HEIGHT = 48; // Extracted constant for collapsed state