feat: add sound favorited event handling and update SoundsPage component

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 (