feat: implement favorites toggle functionality in PlaylistEditHeader and PlaylistEditPage

src/pages/PlaylistEditPage.tsx

@@ -30,6 +30,7 @@ import {
   playlistsService,
 } from '@/lib/api/services/playlists'
 import { type Sound, soundsService } from '@/lib/api/services/sounds'
+import { favoritesService } from '@/lib/api/services/favorites'
 import {
   DndContext,
   type DragEndEvent,
@@ -235,6 +236,37 @@ export function PlaylistEditPage() {
     }
   }
 
+  const handleFavoriteToggle = async (playlistId: number, shouldFavorite: boolean) => {
+    try {
+      if (shouldFavorite) {
+        await favoritesService.addPlaylistFavorite(playlistId)
+        toast.success('Added to favorites')
+      } else {
+        await favoritesService.removePlaylistFavorite(playlistId)
+        toast.success('Removed from favorites')
+      }
+      
+      // Update the playlist in the local state
+      setPlaylist(prevPlaylist =>
+        prevPlaylist
+          ? {
+              ...prevPlaylist,
+              is_favorited: shouldFavorite,
+              favorite_count: shouldFavorite 
+                ? prevPlaylist.favorite_count + 1 
+                : Math.max(0, prevPlaylist.favorite_count - 1),
+            }
+          : null,
+      )
+    } catch (error) {
+      toast.error(
+        `Failed to ${shouldFavorite ? 'add to' : 'remove from'} favorites: ${
+          error instanceof Error ? error.message : 'Unknown error'
+        }`,
+      )
+    }
+  }
+
   const handleMoveSoundUp = async (index: number) => {
     if (index === 0 || sounds.length < 2) return
 
@@ -574,6 +606,7 @@ export function PlaylistEditPage() {
             playlist={playlist}
             isEditMode={isEditMode}
             onSetCurrent={handleSetCurrent}
+            onFavoriteToggle={handleFavoriteToggle}
           />
 
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">