From 13e5526268a6c1dacbb3ed73bb3f58c149e2c7c4 Mon Sep 17 00:00:00 2001
From: fspecii <fspecii@users.noreply.github.com>
Date: Wed, 4 Feb 2026 17:08:46 +0200
Subject: [PATCH] Fix: Implement delete functionality for songs

- Added handleDeleteSong function in App.tsx to delete songs
- Shows confirmation dialog before deleting
- Calls backend API to delete song from database and filesystem
- Updates UI state: removes from songs list, liked songs, play queue
- Handles edge cases: stops playback if deleted song is currently playing
- Clears selection if deleted song is currently selected
- Passes onDelete handler to SongList, RightSidebar, and Player components
- Shows success/error toast notifications

Fixes #8
---
 App.tsx | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/App.tsx b/App.tsx
index c69fdf9..522142e 100644
--- a/App.tsx
+++ b/App.tsx
@@ -767,6 +767,55 @@ export default function App() {
     }
   };
 
+  const handleDeleteSong = async (song: Song) => {
+    if (!token) return;
+
+    // Show confirmation dialog
+    const confirmed = window.confirm(
+      `Are you sure you want to delete "${song.title}"? This action cannot be undone.`
+    );
+
+    if (!confirmed) return;
+
+    try {
+      // Call API to delete song
+      await songsApi.deleteSong(song.id, token);
+
+      // Remove from songs list
+      setSongs(prev => prev.filter(s => s.id !== song.id));
+
+      // Remove from liked songs if it was liked
+      setLikedSongIds(prev => {
+        const next = new Set(prev);
+        next.delete(song.id);
+        return next;
+      });
+
+      // Handle if deleted song is currently selected
+      if (selectedSong?.id === song.id) {
+        setSelectedSong(null);
+      }
+
+      // Handle if deleted song is currently playing
+      if (currentSong?.id === song.id) {
+        setCurrentSong(null);
+        setIsPlaying(false);
+        if (audioRef.current) {
+          audioRef.current.pause();
+          audioRef.current.src = '';
+        }
+      }
+
+      // Remove from play queue if present
+      setPlayQueue(prev => prev.filter(s => s.id !== song.id));
+
+      showToast('Song deleted successfully');
+    } catch (error) {
+      console.error('Failed to delete song:', error);
+      showToast('Failed to delete song', 'error');
+    }
+  };
+
   const createPlaylist = async (name: string, description: string) => {
     if (!token) return;
     try {
@@ -943,6 +992,7 @@ export default function App() {
                 onShowDetails={handleShowDetails}
                 onNavigateToProfile={handleNavigateToProfile}
                 onReusePrompt={handleReuse}
+                onDelete={handleDeleteSong}
               />
             </div>
 
@@ -962,6 +1012,7 @@ export default function App() {
                   onPlay={playSong}
                   isPlaying={isPlaying}
                   currentSong={currentSong}
+                  onDelete={handleDeleteSong}
                 />
               </div>
             )}
@@ -1031,6 +1082,7 @@ export default function App() {
         onOpenVideo={() => currentSong && openVideoGenerator(currentSong)}
         onReusePrompt={() => currentSong && handleReuse(currentSong)}
         onAddToPlaylist={() => currentSong && openAddToPlaylistModal(currentSong)}
+        onDelete={() => currentSong && handleDeleteSong(currentSong)}
       />
 
       <CreatePlaylistModal
@@ -1092,6 +1144,7 @@ export default function App() {
               onPlay={playSong}
               isPlaying={isPlaying}
               currentSong={currentSong}
+              onDelete={handleDeleteSong}
             />
           </div>
         </div>