feat: replace browser built-in alert/confirm/prompt pop-up with new DialogProvider

src/components/track/TrackGridPanel.tsx

@@ -13,6 +13,7 @@ import { KGAudioInterface } from '../../core/audio-interface/KGAudioInterface';
 import { KGAudioRegion } from '../../core/region/KGAudioRegion';
 import { generateNewRegionName } from '../../util/miscUtil';
 import { KGAudioFileStorage } from '../../core/io/KGAudioFileStorage';
+import { showAlert } from '../common/DialogProvider';
 import { parseMidiFirstTrackNotes } from '../../util/midiUtil';
 import * as Tone from 'tone';
 
@@ -52,7 +53,7 @@ const TrackGridPanel: React.FC<TrackGridPanelProps> = ({
   const pendingAudioImportRef = useRef<{ barNumber: number; trackIndex: number } | null>(null);
 
   // Utility function to create a region at a specific position
-  const createRegionAtPosition = (e: React.MouseEvent<HTMLDivElement>, trackIndex: number) => {
+  const createRegionAtPosition = async (e: React.MouseEvent<HTMLDivElement>, trackIndex: number) => {
     // Get the grid container element
     const gridContainer = e.currentTarget.closest('.grid-container');
     if (!gridContainer) return;
@@ -108,7 +109,7 @@ const TrackGridPanel: React.FC<TrackGridPanelProps> = ({
       if (DEBUG_MODE.TRACK_GRID_PANEL) {
         console.log(`Cannot create region at bar ${barNumber}: overlaps with existing region`);
       }
-      alert('Cannot create region: overlaps with existing region');
+      await showAlert('Cannot create region: overlaps with existing region');
       return; // Don't create the region if it overlaps
     }
     
@@ -515,7 +516,7 @@ const TrackGridPanel: React.FC<TrackGridPanelProps> = ({
     try {
       if (track.getType() === TrackType.MIDI) {
         if (!dropData.midiUrl) {
-          window.alert(
+          await showAlert(
             'This audio clip can only be imported into an audio track.\n' +
             'Please drag it onto an audio track instead.'
           );

src/components/track/TrackInfoItem.tsx

@@ -12,6 +12,7 @@ import { FLUIDR3_INSTRUMENT_MAP } from '../../constants/generalMidiConstants';
 import { DEBUG_MODE } from '../../constants/uiConstants';
 import { KGAudioInterface } from '../../core/audio-interface/KGAudioInterface';
 import { AUDIO_INTERFACE_CONSTANTS } from '../../constants/coreConstants';
+import { showAlert, showConfirm, showPrompt } from '../common/DialogProvider';
 interface TrackInfoItemProps {
   track: KGTrack;
   index: number;
@@ -97,10 +98,10 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
   }, [allTracks, track]);
   
   // Handle track name edit within the component
-  const handleTrackNameClick = (e: React.MouseEvent) => {
+  const handleTrackNameClick = async (e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent opening piano roll when clicking track name
-    
-    const newName = prompt("Enter track name:", track.getName());
+
+    const newName = await showPrompt("Enter track name:", track.getName());
     if (newName) {
       // Call the parent handler with the new name
       onTrackNameEdit(track, newName);
@@ -233,7 +234,7 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
   // Handle settings action
   const handleSettingsAction = async (action: string) => {
     if (action === 'Delete Track') {
-      const confirmed = window.confirm(`Are you sure you want to delete track "${track.getName()}"?`);
+      const confirmed = await showConfirm(`Are you sure you want to delete track "${track.getName()}"?`);
       if (confirmed) {
         try {
           if (DEBUG_MODE.TRACK_INFO) {
@@ -252,7 +253,7 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
           setShowSettingsDropdown(false);
         } catch (error) {
           console.error('Failed to delete track:', error);
-          alert('Failed to delete track. Please try again.');
+          await showAlert('Failed to delete track. Please try again.');
         }
       }
     }