feat: add sound favorited event handling and update SoundsPage component

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)

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

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 (