feat: add global socket event listeners for error handling and credits notifications in SocketContext

src/pages/SoundboardPage.tsx

@@ -1,6 +1,7 @@
 import { AddUrlDialog } from '@/components/AddUrlDialog'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent } from '@/components/ui/card'
+import { useSocket } from '@/contexts/SocketContext'
 import { useAddUrlShortcut } from '@/hooks/use-keyboard-shortcuts'
 import { useTheme } from '@/hooks/use-theme'
 import { formatDuration } from '@/lib/format-duration'
@@ -105,6 +106,7 @@ export function SoundboardPage() {
   const [searchTerm, setSearchTerm] = useState('')
   const [addUrlDialogOpen, setAddUrlDialogOpen] = useState(false)
   const [currentColors, setCurrentColors] = useState<string[]>(lightModeColors)
+  const { socket, isConnected } = useSocket()
 
   // Setup keyboard shortcut for CTRL+U
   useAddUrlShortcut(() => setAddUrlDialogOpen(true))
@@ -144,6 +146,13 @@ export function SoundboardPage() {
 
   const handlePlaySound = async (soundId: number) => {
     try {
+      // Try socket.io first if connected
+      if (socket && isConnected) {
+        socket.emit('play_sound', { soundId })
+        return
+      }
+      
+      // Fallback to API request
       await apiService.post(`/api/soundboard/sounds/${soundId}/play`)
     } catch {
       setError('Failed to play sound')