feat: implement sound removal functionality in SequencerPage and update SequencerCanvas props

src/components/sequencer/SequencerCanvas.tsx

@@ -13,6 +13,7 @@ interface SequencerCanvasProps {
   onScroll?: () => void
   draggedItem?: any // Current dragged item from parent
   dragOverInfo?: {trackId: string, x: number} | null // Drag over position info
+  onRemoveSound: (soundId: string, trackId: string) => void
 }
 
 interface TrackRowProps {
@@ -23,6 +24,7 @@ interface TrackRowProps {
   currentTime: number
   draggedItem?: any // Current dragged item
   dragOverInfo?: {trackId: string, x: number} | null // Drag over position info
+  onRemoveSound: (soundId: string, trackId: string) => void
 }
 
 interface PlacedSoundItemProps {
@@ -107,7 +109,7 @@ function PlacedSoundItem({ sound, zoom, trackId, onRemove }: PlacedSoundItemProp
   )
 }
 
-function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem, dragOverInfo }: TrackRowProps) {
+function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem, dragOverInfo, onRemoveSound }: TrackRowProps) {
   const totalWidth = duration * zoom
   const playheadPosition = currentTime * zoom
 
@@ -120,7 +122,7 @@ function TrackRow({ track, duration, zoom, isPlaying, currentTime, draggedItem,
   })
 
   const handleRemoveSound = (soundId: string) => {
-    console.log('Remove sound:', soundId, 'from track:', track.id)
+    onRemoveSound(soundId, track.id)
   }
 
   return (
@@ -208,6 +210,7 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
   onScroll,
   draggedItem,
   dragOverInfo,
+  onRemoveSound,
 }, ref) => {
   const totalWidth = duration * zoom
   const timelineRef = useRef<HTMLDivElement>(null)
@@ -292,6 +295,7 @@ export const SequencerCanvas = forwardRef<HTMLDivElement, SequencerCanvasProps>(
               currentTime={currentTime}
               draggedItem={draggedItem}
               dragOverInfo={dragOverInfo}
+              onRemoveSound={onRemoveSound}
             />
           ))}
         </div>

src/pages/SequencerPage.tsx

@@ -258,6 +258,17 @@ export function SequencerPage() {
     setState(prev => ({ ...prev, duration }))
   }
 
+  const handleRemoveSound = (soundId: string, trackId: string) => {
+    setState(prev => ({
+      ...prev,
+      tracks: prev.tracks.map(track =>
+        track.id === trackId
+          ? { ...track, sounds: track.sounds.filter(sound => sound.id !== soundId) }
+          : track
+      ),
+    }))
+  }
+
   const handleVerticalScroll = useCallback(() => {
     if (trackControlsRef.current && sequencerCanvasRef.current) {
       const canvasScrollTop = sequencerCanvasRef.current.scrollTop
@@ -346,6 +357,7 @@ export function SequencerPage() {
                   onScroll={handleVerticalScroll}
                   draggedItem={draggedItem}
                   dragOverInfo={dragOverInfo}
+                  onRemoveSound={handleRemoveSound}
                 />
               </div>
             </div>