feat: implement real-time updates for credits and sound play counts using custom events

src/pages/SoundboardPage.tsx

@@ -115,6 +115,30 @@ export function SoundboardPage() {
     fetchSounds()
   }, [])
 
+  // Listen for sound_play_count_changed events from socket
+  useEffect(() => {
+    const handleSoundPlayCountChanged = (event: CustomEvent) => {
+      const { sound_id, play_count } = event.detail;
+      
+      // Update the sound in the local state
+      setSounds(prevSounds => 
+        prevSounds.map(sound => 
+          sound.id === sound_id 
+            ? { ...sound, play_count }
+            : sound
+        )
+      );
+    };
+
+    // Listen for the custom event
+    window.addEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
+    };
+  }, []);
+
   const { theme } = useTheme()
 
   useEffect(() => {
@@ -203,8 +227,7 @@ export function SoundboardPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Soundboard</h1>
+      <div className="flex items-center">
         <div className="flex gap-2">
           <Button
             onClick={() => setAddUrlDialogOpen(true)}