From cd310ce7e49b1704f0879e7a6e08e161317f3e51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 19 Nov 2025 11:39:34 +0100
Subject: [PATCH] fix: ImportDialog not respecting open prop causing unwanted
 display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 components/dialogs/ImportDialog.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

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