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:
@@ -21,6 +21,28 @@ const EFFECT_CATEGORIES = {
|
||||
'Pitch & Time': ['pitch', 'timestretch'] as EffectType[],
|
||||
};
|
||||
|
||||
const EFFECT_DESCRIPTIONS: Record<EffectType, string> = {
|
||||
'compressor': 'Reduce dynamic range and control peaks',
|
||||
'limiter': 'Prevent audio from exceeding a maximum level',
|
||||
'gate': 'Reduce noise by cutting low-level signals',
|
||||
'lowpass': 'Allow frequencies below cutoff to pass',
|
||||
'highpass': 'Allow frequencies above cutoff to pass',
|
||||
'bandpass': 'Allow frequencies within a range to pass',
|
||||
'notch': 'Remove a specific frequency range',
|
||||
'lowshelf': 'Boost or cut low frequencies',
|
||||
'highshelf': 'Boost or cut high frequencies',
|
||||
'peaking': 'Boost or cut a specific frequency band',
|
||||
'delay': 'Create echoes and rhythmic repeats',
|
||||
'reverb': 'Simulate acoustic space and ambience',
|
||||
'chorus': 'Thicken sound with subtle pitch variations',
|
||||
'flanger': 'Create sweeping comb filter effects',
|
||||
'phaser': 'Create phase-shifted modulation effects',
|
||||
'distortion': 'Add harmonic saturation and grit',
|
||||
'bitcrusher': 'Reduce bit depth for lo-fi effects',
|
||||
'pitch': 'Shift pitch without changing tempo',
|
||||
'timestretch': 'Change tempo without affecting pitch',
|
||||
};
|
||||
|
||||
export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserProps) {
|
||||
const [search, setSearch] = React.useState('');
|
||||
const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
|
||||
@@ -40,7 +62,8 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
|
||||
|
||||
Object.entries(EFFECT_CATEGORIES).forEach(([category, effects]) => {
|
||||
const matchingEffects = effects.filter((effect) =>
|
||||
EFFECT_NAMES[effect].toLowerCase().includes(searchLower)
|
||||
EFFECT_NAMES[effect].toLowerCase().includes(searchLower) ||
|
||||
EFFECT_DESCRIPTIONS[effect].toLowerCase().includes(searchLower)
|
||||
);
|
||||
if (matchingEffects.length > 0) {
|
||||
filtered[category] = matchingEffects;
|
||||
@@ -101,7 +124,7 @@ export function EffectBrowser({ open, onClose, onSelectEffect }: EffectBrowserPr
|
||||
)}
|
||||
>
|
||||
<div className="font-medium text-sm">{EFFECT_NAMES[effect]}</div>
|
||||
<div className="text-xs text-muted-foreground capitalize">{effect}</div>
|
||||
<div className="text-xs text-muted-foreground">{EFFECT_DESCRIPTIONS[effect]}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ export interface EffectDeviceProps {
|
||||
onToggleEnabled?: () => void;
|
||||
onRemove?: () => void;
|
||||
onUpdateParameters?: (parameters: any) => void;
|
||||
onToggleExpanded?: () => void;
|
||||
}
|
||||
|
||||
export function EffectDevice({
|
||||
@@ -19,16 +20,17 @@ export function EffectDevice({
|
||||
onToggleEnabled,
|
||||
onRemove,
|
||||
onUpdateParameters,
|
||||
onToggleExpanded,
|
||||
}: EffectDeviceProps) {
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
const isExpanded = effect.expanded || false;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'flex-shrink-0 flex flex-col h-full transition-all duration-200 rounded-md overflow-hidden',
|
||||
'flex-shrink-0 flex flex-col h-full transition-all duration-200 overflow-hidden rounded-md',
|
||||
effect.enabled
|
||||
? 'bg-card border border-border/50 shadow-md'
|
||||
: 'bg-card/40 border border-border/30 shadow-sm opacity-60',
|
||||
? 'bg-card border-l border-r border-b border-border'
|
||||
: 'bg-card/40 border-l border-r border-b border-border/50 opacity-60 hover:opacity-80',
|
||||
isExpanded ? 'min-w-96' : 'w-10'
|
||||
)}
|
||||
>
|
||||
@@ -39,7 +41,7 @@ export function EffectDevice({
|
||||
<div className={cn('h-0.5 w-full', effect.enabled ? 'bg-primary' : 'bg-muted-foreground/20')} />
|
||||
|
||||
<button
|
||||
onClick={() => setIsExpanded(true)}
|
||||
onClick={onToggleExpanded}
|
||||
className="w-full h-full flex flex-col items-center justify-between py-1 hover:bg-primary/10 transition-colors group"
|
||||
title={`Expand ${effect.name}`}
|
||||
>
|
||||
@@ -72,7 +74,7 @@ export function EffectDevice({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setIsExpanded(false)}
|
||||
onClick={onToggleExpanded}
|
||||
title="Collapse device"
|
||||
className="h-5 w-5 flex-shrink-0"
|
||||
>
|
||||
|
||||
202
components/effects/EffectsPanel.tsx
Normal file
202
components/effects/EffectsPanel.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { ChevronDown, ChevronUp, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { EffectDevice } from './EffectDevice';
|
||||
import { EffectBrowser } from './EffectBrowser';
|
||||
import type { Track } from '@/types/track';
|
||||
import type { EffectType } from '@/lib/audio/effects/chain';
|
||||
import { cn } from '@/lib/utils/cn';
|
||||
|
||||
export interface EffectsPanelProps {
|
||||
track: Track | null; // Selected track
|
||||
visible: boolean;
|
||||
height: number;
|
||||
onToggleVisible: () => void;
|
||||
onResizeHeight: (height: number) => void;
|
||||
onAddEffect?: (effectType: EffectType) => void;
|
||||
onToggleEffect?: (effectId: string) => void;
|
||||
onRemoveEffect?: (effectId: string) => void;
|
||||
onUpdateEffect?: (effectId: string, parameters: any) => void;
|
||||
onToggleEffectExpanded?: (effectId: string) => void;
|
||||
}
|
||||
|
||||
export function EffectsPanel({
|
||||
track,
|
||||
visible,
|
||||
height,
|
||||
onToggleVisible,
|
||||
onResizeHeight,
|
||||
onAddEffect,
|
||||
onToggleEffect,
|
||||
onRemoveEffect,
|
||||
onUpdateEffect,
|
||||
onToggleEffectExpanded,
|
||||
}: EffectsPanelProps) {
|
||||
const [effectBrowserOpen, setEffectBrowserOpen] = React.useState(false);
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
const resizeStartRef = React.useRef({ y: 0, height: 0 });
|
||||
|
||||
// Resize handler
|
||||
const handleResizeStart = React.useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
setIsResizing(true);
|
||||
resizeStartRef.current = { y: e.clientY, height };
|
||||
},
|
||||
[height]
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isResizing) return;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const delta = resizeStartRef.current.y - e.clientY;
|
||||
const newHeight = Math.max(200, Math.min(600, resizeStartRef.current.height + delta));
|
||||
onResizeHeight(newHeight);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsResizing(false);
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [isResizing, onResizeHeight]);
|
||||
|
||||
if (!visible) {
|
||||
// Collapsed state - just show header bar
|
||||
return (
|
||||
<div className="h-8 bg-card border-t border-border flex items-center px-3 gap-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={onToggleVisible}
|
||||
className="flex items-center gap-2 flex-1 hover:text-primary transition-colors text-sm font-medium"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
<span>Device View</span>
|
||||
{track && (
|
||||
<span className="text-muted-foreground">- {track.name}</span>
|
||||
)}
|
||||
</button>
|
||||
{track && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{track.effectChain.effects.length} device(s)
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="bg-card border-t border-border flex flex-col flex-shrink-0 transition-all duration-300 ease-in-out"
|
||||
style={{ height }}
|
||||
>
|
||||
{/* Resize handle */}
|
||||
<div
|
||||
className={cn(
|
||||
'h-1 cursor-ns-resize hover:bg-primary/50 transition-colors group flex items-center justify-center',
|
||||
isResizing && 'bg-primary/50'
|
||||
)}
|
||||
onMouseDown={handleResizeStart}
|
||||
title="Drag to resize panel"
|
||||
>
|
||||
<div className="h-px w-16 bg-border group-hover:bg-primary transition-colors" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="h-10 flex-shrink-0 border-b border-border flex items-center px-3 gap-2 bg-muted/30">
|
||||
<button
|
||||
onClick={onToggleVisible}
|
||||
className="flex items-center gap-2 flex-1 hover:text-primary transition-colors"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
<span className="text-sm font-medium">Device View</span>
|
||||
{track && (
|
||||
<>
|
||||
<span className="text-sm text-muted-foreground">-</span>
|
||||
<div
|
||||
className="w-0.5 h-4 rounded-full"
|
||||
style={{ backgroundColor: track.color }}
|
||||
/>
|
||||
<span className="text-sm font-semibold text-foreground">{track.name}</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{track && (
|
||||
<>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{track.effectChain.effects.length} device(s)
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => setEffectBrowserOpen(true)}
|
||||
title="Add effect"
|
||||
className="h-7 w-7"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Device Rack */}
|
||||
<div className="flex-1 overflow-x-auto overflow-y-hidden custom-scrollbar bg-background/50 p-3">
|
||||
{!track ? (
|
||||
<div className="h-full flex items-center justify-center text-sm text-muted-foreground">
|
||||
Select a track to view its devices
|
||||
</div>
|
||||
) : track.effectChain.effects.length === 0 ? (
|
||||
<div className="h-full flex flex-col items-center justify-center text-sm text-muted-foreground gap-2">
|
||||
<p>No devices on this track</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setEffectBrowserOpen(true)}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Add Device
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-full gap-3">
|
||||
{track.effectChain.effects.map((effect) => (
|
||||
<EffectDevice
|
||||
key={effect.id}
|
||||
effect={effect}
|
||||
onToggleEnabled={() => onToggleEffect?.(effect.id)}
|
||||
onRemove={() => onRemoveEffect?.(effect.id)}
|
||||
onUpdateParameters={(params) => onUpdateEffect?.(effect.id, params)}
|
||||
onToggleExpanded={() => onToggleEffectExpanded?.(effect.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Effect Browser Dialog */}
|
||||
{track && (
|
||||
<EffectBrowser
|
||||
open={effectBrowserOpen}
|
||||
onClose={() => setEffectBrowserOpen(false)}
|
||||
onSelectEffect={(effectType) => {
|
||||
if (onAddEffect) {
|
||||
onAddEffect(effectType);
|
||||
}
|
||||
setEffectBrowserOpen(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user