feat: add delete functionality for playlists with confirmation and error handling

src/pages/PlaylistsPage.tsx

@@ -165,7 +165,7 @@ export function PlaylistsPage() {
         await favoritesService.removePlaylistFavorite(playlistId)
         toast.success('Removed from favorites')
       }
-      
+
       // Update the playlist in the local state
       setPlaylists(prevPlaylists =>
         prevPlaylists.map(playlist =>
@@ -173,8 +173,8 @@ export function PlaylistsPage() {
             ? {
                 ...playlist,
                 is_favorited: shouldFavorite,
-                favorite_count: shouldFavorite 
-                  ? playlist.favorite_count + 1 
+                favorite_count: shouldFavorite
+                  ? playlist.favorite_count + 1
                   : Math.max(0, playlist.favorite_count - 1),
               }
             : playlist,
@@ -189,6 +189,53 @@ export function PlaylistsPage() {
     }
   }
 
+  const handleDeletePlaylist = async (playlist: Playlist) => {
+    // Protect main playlist from deletion
+    if (playlist.is_main) {
+      toast.error('The main playlist cannot be deleted')
+      return
+    }
+
+    // Check if playlist is deletable
+    if (!playlist.is_deletable) {
+      toast.error('This playlist cannot be deleted')
+      return
+    }
+
+    // Confirm deletion
+    const confirmMessage = `Are you sure you want to delete the playlist "${playlist.name}"?${
+      playlist.sound_count > 0
+        ? `\n\nThis playlist contains ${playlist.sound_count} sound${playlist.sound_count !== 1 ? 's' : ''}. The sounds will not be deleted, only removed from this playlist.`
+        : ''
+    }\n\nThis action cannot be undone.`
+
+    if (!confirm(confirmMessage)) {
+      return
+    }
+
+    try {
+      await playlistsService.deletePlaylist(playlist.id)
+      toast.success(`Playlist "${playlist.name}" deleted successfully`)
+
+      // Remove the deleted playlist from the local state
+      setPlaylists(prevPlaylists =>
+        prevPlaylists.filter(p => p.id !== playlist.id)
+      )
+
+      // Update total count
+      setTotalCount(prev => prev - 1)
+
+      // If current page is now empty and not the first page, go to previous page
+      const remainingOnCurrentPage = playlists.length - 1
+      if (remainingOnCurrentPage === 0 && currentPage > 1) {
+        setCurrentPage(currentPage - 1)
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete playlist'
+      toast.error(errorMessage)
+    }
+  }
+
   const renderContent = () => {
     if (loading) {
       return <PlaylistsLoading />
@@ -209,6 +256,7 @@ export function PlaylistsPage() {
           onEdit={handleEditPlaylist}
           onSetCurrent={handleSetCurrent}
           onFavoriteToggle={handleFavoriteToggle}
+          onDelete={handleDeletePlaylist}
         />
         <AppPagination
           currentPage={currentPage}