handle email axtion email in websocket

src/components/EmailNotifications.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { useEmailWebSocket } from '@/hooks/useEmailWebSocket';
-import { useEmailEvents, EmailPayload, UnreadCountPayload } from '@/hooks/useEmailEvents';
+import { useEmailEvents, EmailPayload, UnreadCountPayload, EmailStatusPayload } from '@/hooks/useEmailEvents';
 import { useNotificationSound } from '@/hooks/useNotificationSound';
 import { Notification as NotificationIcon, VolumeHigh } from 'iconsax-react';
 
@@ -74,10 +74,18 @@ export const EmailNotifications: React.FC<EmailNotificationsProps> = ({
         );
     }, []);
 
+    const handleEmailSent = useCallback((data: EmailStatusPayload) => {
+        // Remove from notifications if it was there
+        setNotifications(prev =>
+            prev.filter(notification => notification.messageId !== data.messageId)
+        );
+    }, []);
+
     useEmailEvents(socket, {
         onNewEmail: handleNewEmail,
         onUnreadCountUpdated: handleUnreadCountUpdate,
         onEmailRead: handleEmailRead,
+        onEmailSent: handleEmailSent,
     });
 
     // Request notification permission on mount

src/lib/SocketManagment.tsx

@@ -22,13 +22,14 @@ const SocketManagment: FC = () => {
     const handleEmailActionEvent = useCallback(() => {
         queryClient.invalidateQueries({ queryKey: ['mailbox-count'] });
         queryClient.invalidateQueries({ queryKey: ['inbox'] });
+        queryClient.invalidateQueries({ queryKey: ['drafts'] });
     }, []);
 
     useEmailEvents(socket, {
         onNewEmail: handleNewEmailEvent,
         onEmailRead: handleEmailActionEvent,
         onEmailDeleted: handleEmailActionEvent,
-        // onMailboxUpdated: handleEmailActionEvent,
+        onEmailSent: handleEmailActionEvent,
     });
 
     return null