Sebastian Krüger
ee48f9475f
Phase 6.5 Advanced Effects: - Add Pitch Shifter with semitones and cents adjustment - Add Time Stretch with pitch preservation using overlap-add - Add Distortion with soft/hard/tube types and tone control - Add Bitcrusher with bit depth and sample rate reduction - Add AdvancedParameterDialog with real-time waveform visualization - Add 4 professional presets per effect type Improvements: - Fix undefined parameter errors by adding nullish coalescing operators - Add global custom scrollbar styling with color-mix transparency - Add custom-scrollbar utility class for side panel - Improve theme-aware scrollbar appearance in light/dark modes - Fix parameter initialization when switching effect types Integration: - All advanced effects support undo/redo via EffectCommand - Effects accessible via command palette and side panel - Selection-based processing support - Toast notifications for all effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
119 lines
2.7 KiB
TypeScript
119 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { X } from 'lucide-react';
|
|
import { Button } from './Button';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
export interface ModalProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
description?: string;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
className?: string;
|
|
}
|
|
|
|
export function Modal({
|
|
open,
|
|
onClose,
|
|
title,
|
|
description,
|
|
children,
|
|
footer,
|
|
size = 'md',
|
|
className,
|
|
}: ModalProps) {
|
|
// Close on Escape key
|
|
React.useEffect(() => {
|
|
const handleEscape = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape' && open) {
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
if (open) {
|
|
document.addEventListener('keydown', handleEscape);
|
|
// Prevent body scroll when modal is open
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('keydown', handleEscape);
|
|
document.body.style.overflow = 'unset';
|
|
};
|
|
}, [open, onClose]);
|
|
|
|
if (!open) return null;
|
|
|
|
const sizeClasses = {
|
|
sm: 'max-w-sm',
|
|
md: 'max-w-md',
|
|
lg: 'max-w-lg',
|
|
xl: 'max-w-xl',
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div
|
|
className={cn(
|
|
'relative w-full bg-card border border-border rounded-lg shadow-lg',
|
|
'flex flex-col max-h-[90vh]',
|
|
sizeClasses[size],
|
|
className
|
|
)}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="modal-title"
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between p-4 border-b border-border">
|
|
<div className="flex-1">
|
|
<h2
|
|
id="modal-title"
|
|
className="text-lg font-semibold text-foreground"
|
|
>
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={onClose}
|
|
className="ml-2"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{children}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
{footer && (
|
|
<div className="flex items-center justify-end gap-2 p-4 border-t border-border">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|