feat: implement TTS event handling for creation, completion, and failure in TTSPage and SocketContext

src/pages/TTSPage.tsx

@@ -14,6 +14,7 @@ import {
   type TTSSortOrder,
   ttsService,
 } from '@/lib/api/services/tts'
+import { TTS_EVENTS, ttsEvents } from '@/lib/events'
 import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
@@ -82,15 +83,30 @@ export function TTSPage() {
     }
   }, [debouncedSearchQuery, sortBy, sortOrder, pageSize])
 
-  // Listen for TTS generation events to refresh the list
+  // Listen for TTS events to refresh the list
   useEffect(() => {
-    const handleTTSGenerated = () => {
+    const handleTTSCompleted = () => {
       fetchTTSHistory()
     }
 
-    window.addEventListener('tts-generated', handleTTSGenerated)
+    const handleTTSFailed = () => {
+      fetchTTSHistory()
+    }
+
+    const handleTTSCreated = () => {
+      fetchTTSHistory()
+    }
+
+    // Subscribe to TTS events
+    ttsEvents.on(TTS_EVENTS.TTS_COMPLETED, handleTTSCompleted)
+    ttsEvents.on(TTS_EVENTS.TTS_FAILED, handleTTSFailed)
+    ttsEvents.on(TTS_EVENTS.TTS_CREATED, handleTTSCreated)
+
     return () => {
-      window.removeEventListener('tts-generated', handleTTSGenerated)
+      // Cleanup event listeners
+      ttsEvents.off(TTS_EVENTS.TTS_COMPLETED, handleTTSCompleted)
+      ttsEvents.off(TTS_EVENTS.TTS_FAILED, handleTTSFailed)
+      ttsEvents.off(TTS_EVENTS.TTS_CREATED, handleTTSCreated)
     }
   }, [fetchTTSHistory])