From af1d5436693677f59f7783b6b5572211b547cc0f Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sat, 16 Aug 2025 22:19:31 +0200
Subject: [PATCH] feat: add sound favorited event handling and update
 SoundsPage component

---
 src/contexts/SocketContext.tsx |  4 ++++
 src/lib/events.ts              |  1 +
 src/pages/SoundsPage.tsx       | 34 +++++++++++++++++++++++++++++++---
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/contexts/SocketContext.tsx b/src/contexts/SocketContext.tsx
index 41151e4..857505f 100644
--- a/src/contexts/SocketContext.tsx
+++ b/src/contexts/SocketContext.tsx
@@ -94,6 +94,10 @@ export function SocketProvider({ children }: SocketProviderProps) {
       soundEvents.emit(SOUND_EVENTS.SOUND_PLAYED, data)
     })
 
+    newSocket.on('sound_favorited', data => {
+      soundEvents.emit(SOUND_EVENTS.SOUND_FAVORITED, data)
+    })
+
     // Listen for user events and emit them locally
     newSocket.on('user_credits_changed', data => {
       userEvents.emit(USER_EVENTS.USER_CREDITS_CHANGED, data)
diff --git a/src/lib/events.ts b/src/lib/events.ts
index 5b3dcd0..814b1ff 100644
--- a/src/lib/events.ts
+++ b/src/lib/events.ts
@@ -53,6 +53,7 @@ export const PLAYER_EVENTS = {
 // Sound event types
 export const SOUND_EVENTS = {
   SOUND_PLAYED: 'sound_played',
+  SOUND_FAVORITED: 'sound_favorited',
 } as const
 
 // User event types
diff --git a/src/pages/SoundsPage.tsx b/src/pages/SoundsPage.tsx
index 7065a6b..10bf123 100644
--- a/src/pages/SoundsPage.tsx
+++ b/src/pages/SoundsPage.tsx
@@ -39,6 +39,14 @@ interface SoundPlayedEventData {
   play_count: number
 }
 
+interface SoundFavoritedEventData {
+  sound_id: number
+  sound_name: string
+  user_id: number
+  user_name: string
+  favorite_count: number
+}
+
 const lightModeColors = [
   'bg-red-600/30 hover:bg-red-600/40 text-red-900 border-red-600/20',
   'bg-blue-700/30 hover:bg-blue-700/40 text-blue-900 border-blue-700/20',
@@ -109,9 +117,6 @@ export function SoundsPage() {
             ? {
                 ...sound,
                 is_favorited: shouldFavorite,
-                favorite_count: shouldFavorite 
-                  ? sound.favorite_count + 1 
-                  : Math.max(0, sound.favorite_count - 1),
               }
             : sound,
         ),
@@ -196,6 +201,29 @@ export function SoundsPage() {
     }
   }, [])
 
+  // Listen for sound_favorited events and update favorite status and count
+  useEffect(() => {
+    const handleSoundFavorited = (...args: unknown[]) => {
+      const eventData = args[0] as SoundFavoritedEventData
+      setSounds(prevSounds =>
+        prevSounds.map(sound =>
+          sound.id === eventData.sound_id
+            ? { 
+                ...sound, 
+                favorite_count: eventData.favorite_count
+              }
+            : sound,
+        ),
+      )
+    }
+
+    soundEvents.on(SOUND_EVENTS.SOUND_FAVORITED, handleSoundFavorited)
+
+    return () => {
+      soundEvents.off(SOUND_EVENTS.SOUND_FAVORITED, handleSoundFavorited)
+    }
+  }, [])
+
   const renderContent = () => {
     if (loading) {
       return (