feat: implement favorites functionality across playlists components

src/components/playlists/PlaylistRow.tsx

@@ -4,15 +4,22 @@ import { TableCell, TableRow } from '@/components/ui/table'
 import type { Playlist } from '@/lib/api/services/playlists'
 import { formatDateDistanceToNow } from '@/utils/format-date'
 import { formatDuration } from '@/utils/format-duration'
-import { Calendar, Clock, Edit, Music, Play, User } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Calendar, Clock, Edit, Heart, Music, Play, User } from 'lucide-react'
 
 interface PlaylistRowProps {
   playlist: Playlist
   onEdit: (playlist: Playlist) => void
   onSetCurrent: (playlist: Playlist) => void
+  onFavoriteToggle?: (playlistId: number, isFavorited: boolean) => void
 }
 
-export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps) {
+export function PlaylistRow({ playlist, onEdit, onSetCurrent, onFavoriteToggle }: PlaylistRowProps) {
+  const handleFavoriteToggle = () => {
+    if (onFavoriteToggle) {
+      onFavoriteToggle(playlist.id, !playlist.is_favorited)
+    }
+  }
   return (
     <TableRow className="hover:bg-muted/50">
       <TableCell>
@@ -76,6 +83,24 @@ export function PlaylistRow({ playlist, onEdit, onSetCurrent }: PlaylistRowProps
       </TableCell>
       <TableCell className="text-center">
         <div className="flex items-center justify-center gap-1">
+          {onFavoriteToggle && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={handleFavoriteToggle}
+              className="h-8 w-8 p-0"
+              title={playlist.is_favorited ? "Remove from favorites" : "Add to favorites"}
+            >
+              <Heart 
+                className={cn(
+                  'h-4 w-4 transition-all duration-200',
+                  playlist.is_favorited 
+                    ? 'fill-current text-red-500 hover:text-red-600' 
+                    : 'text-muted-foreground hover:text-foreground'
+                )} 
+              />
+            </Button>
+          )}
           <Button
             size="sm"
             variant="ghost"