diff --git a/components/dialogs/ImportDialog.tsx b/components/dialogs/ImportDialog.tsx
index 9a12afe..7672dbb 100644
--- a/components/dialogs/ImportDialog.tsx
+++ b/components/dialogs/ImportDialog.tsx
@@ -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