From 0024f1d64791de7e8d2f81458064c8d119b6fad5 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sun, 17 Aug 2025 01:08:39 +0200
Subject: [PATCH] feat: implement favorites toggle functionality in
 PlaylistEditHeader and PlaylistEditPage

---
 .../playlist-edit/PlaylistEditHeader.tsx      | 22 +++++++++++++
 src/pages/PlaylistEditPage.tsx                | 33 +++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/src/components/playlists/playlist-edit/PlaylistEditHeader.tsx b/src/components/playlists/playlist-edit/PlaylistEditHeader.tsx
index 07cb00b..f559d5b 100644
--- a/src/components/playlists/playlist-edit/PlaylistEditHeader.tsx
+++ b/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
diff --git a/src/pages/PlaylistEditPage.tsx b/src/pages/PlaylistEditPage.tsx
index 0f07bc6..510b496 100644
--- a/src/pages/PlaylistEditPage.tsx
+++ b/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">