fix: ImportDialog not respecting open prop causing unwanted display

Fixed critical bug where ImportDialog was always rendered regardless of
the open prop value. The component interface didn't match the actual
implementation, causing it to appear on page load.

Changes:
- Added `open` prop to ImportDialogProps interface
- Added early return when `open` is false to prevent rendering
- Renamed `onCancel` to `onClose` to match Track component usage
- Made fileName, sampleRate, and channels optional props
- Dialog now only appears when explicitly opened by user action

This fixes the issue where the dialog appeared immediately on page load
when loading a saved project.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-19 11:39:34 +01:00
parent 594ff7f4c9
commit cd310ce7e4

View File

@@ -4,20 +4,24 @@ import { useState } from 'react';
import { ImportOptions } from '@/lib/audio/decoder';
export interface ImportDialogProps {
open: boolean;
onClose: () => void;
onImport: (options: ImportOptions) => void;
onCancel: () => void;
fileName: string;
originalSampleRate?: number;
originalChannels?: number;
fileName?: string;
sampleRate?: number;
channels?: number;
}
export function ImportDialog({
open,
onClose,
onImport,
onCancel,
fileName,
originalSampleRate,
originalChannels,
sampleRate: originalSampleRate,
channels: originalChannels,
}: ImportDialogProps) {
// Don't render if not open
if (!open) return null;
const [options, setOptions] = useState<ImportOptions>({
convertToMono: false,
targetSampleRate: undefined,
@@ -134,7 +138,7 @@ export function ImportDialog({
<div className="flex justify-end space-x-3 mt-6">
<button
onClick={onCancel}
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
>
Cancel