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:
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