feat: implement extraction event handling and update extraction list on status changes

src/contexts/SocketContext.tsx

@@ -9,10 +9,12 @@ import { Socket, io } from 'socket.io-client'
 import { toast } from 'sonner'
 import {
   AUTH_EVENTS,
+  EXTRACTION_EVENTS,
   PLAYER_EVENTS,
   SOUND_EVENTS,
   USER_EVENTS,
   authEvents,
+  extractionEvents,
   playerEvents,
   soundEvents,
   userEvents,
@@ -127,6 +129,10 @@ export function SocketProvider({ children }: SocketProviderProps) {
     newSocket.on('extraction_status_update', data => {
       const { extraction_id, status, title, error } = data
       
+      // Emit local event for other components to listen to
+      extractionEvents.emit(EXTRACTION_EVENTS.EXTRACTION_STATUS_UPDATED, data)
+      
+      // Handle specific status events
       switch (status) {
         case 'processing':
           toast.loading(`Extracting: ${title}`, {
@@ -139,6 +145,7 @@ export function SocketProvider({ children }: SocketProviderProps) {
           toast.success(`Extraction complete: ${title}`, {
             duration: 4000,
           })
+          extractionEvents.emit(EXTRACTION_EVENTS.EXTRACTION_COMPLETED, data)
           break
         case 'failed':
           toast.dismiss(`extraction-${extraction_id}`)
@@ -146,6 +153,7 @@ export function SocketProvider({ children }: SocketProviderProps) {
             description: error,
             duration: 6000,
           })
+          extractionEvents.emit(EXTRACTION_EVENTS.EXTRACTION_FAILED, data)
           break
       }
     })