feat: implement favorites toggle functionality in PlaylistEditHeader and PlaylistEditPage

src/components/playlists/playlist-edit/PlaylistEditHeader.tsx

@@ -1,17 +1,21 @@
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import type { Playlist } from '@/lib/api/services/playlists'
+import { Heart } from 'lucide-react'
+import { cn } from '@/lib/utils'
 
 interface PlaylistEditHeaderProps {
   playlist: Playlist
   isEditMode: boolean
   onSetCurrent: () => void
+  onFavoriteToggle?: (playlistId: number, shouldFavorite: boolean) => void
 }
 
 export function PlaylistEditHeader({
   playlist,
   isEditMode,
   onSetCurrent,
+  onFavoriteToggle,
 }: PlaylistEditHeaderProps) {
   return (
     <div className="flex items-center justify-between mb-6">
@@ -25,6 +29,24 @@ export function PlaylistEditHeader({
       </div>
 
       <div className="flex items-center gap-2">
+        {onFavoriteToggle && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onFavoriteToggle(playlist.id, !playlist.is_favorited)}
+            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>
+        )}
         {!playlist.is_current && !isEditMode && (
           <Button variant="outline" onClick={onSetCurrent}>
             Set as Current