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

src/components/playlists/PlaylistRow.tsx

@@ -5,16 +5,17 @@ import type { Playlist } from '@/lib/api/services/playlists'
 import { formatDateDistanceToNow } from '@/utils/format-date'
 import { formatDuration } from '@/utils/format-duration'
 import { cn } from '@/lib/utils'
-import { Calendar, Clock, Edit, Heart, Music, Play, User } from 'lucide-react'
+import { Calendar, Clock, Edit, Heart, Music, Play, Trash2, User } from 'lucide-react'
 
 interface PlaylistRowProps {
   playlist: Playlist
   onEdit: (playlist: Playlist) => void
   onSetCurrent: (playlist: Playlist) => void
   onFavoriteToggle?: (playlistId: number, isFavorited: boolean) => void
+  onDelete?: (playlist: Playlist) => void
 }
 
-export function PlaylistRow({ playlist, onEdit, onSetCurrent, onFavoriteToggle }: PlaylistRowProps) {
+export function PlaylistRow({ playlist, onEdit, onSetCurrent, onFavoriteToggle, onDelete }: PlaylistRowProps) {
   const handleFavoriteToggle = () => {
     if (onFavoriteToggle) {
       onFavoriteToggle(playlist.id, !playlist.is_favorited)
@@ -121,6 +122,17 @@ export function PlaylistRow({ playlist, onEdit, onSetCurrent, onFavoriteToggle }
               <Play className="h-4 w-4" />
             </Button>
           )}
+          {onDelete && !playlist.is_main && playlist.is_deletable && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => onDelete(playlist)}
+              className="h-8 w-8 p-0 text-destructive hover:text-destructive"
+              title={`Delete "${playlist.name}"`}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          )}
         </div>
       </TableCell>
     </TableRow>