Fix stale UI after accept: await invalidations, dismiss toasts

- Await all query invalidations in respondMutation/cancelMutation
  onSuccess so UI has fresh data before mutation promise resolves
- Use deterministic toast IDs (connection-request-{id}) for Sonner
  toasts so they can be dismissed from any accept surface
- Dismiss stale connection toasts in respondMutation.onSuccess
- Fix handleCancel setting resolved before API call completes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/connections/ConnectionRequestCard.tsx

@@ -38,12 +38,11 @@ export default function ConnectionRequestCard({ request, direction }: Connection
   };
 
   const handleCancel = async () => {
-    setResolved(true);
     try {
       await cancelRequest(request.id);
+      setResolved(true);
       toast.success('Request cancelled');
     } catch (err) {
-      setResolved(false);
       toast.error(getErrorMessage(err, 'Failed to cancel request'));
     }
   };

frontend/src/components/notifications/NotificationToaster.tsx

@@ -19,9 +19,11 @@ export default function NotificationToaster() {
         await api.put(`/connections/requests/${requestId}/respond`, { action });
         toast.dismiss(toastId);
         toast.success(action === 'accept' ? 'Connection accepted' : 'Request declined');
-        queryClient.invalidateQueries({ queryKey: ['connections'] });
-        queryClient.invalidateQueries({ queryKey: ['people'] });
-        queryClient.invalidateQueries({ queryKey: ['notifications'] });
+        await Promise.all([
+          queryClient.invalidateQueries({ queryKey: ['connections'] }),
+          queryClient.invalidateQueries({ queryKey: ['people'] }),
+          queryClient.invalidateQueries({ queryKey: ['notifications'] }),
+        ]);
       } catch (err) {
         toast.dismiss(toastId);
         toast.error(getErrorMessage(err, 'Failed to respond to request'));
@@ -109,7 +111,7 @@ export default function NotificationToaster() {
           </div>
         </div>
       ),
-      { duration: 30000 },
+      { id: `connection-request-${requestId}`, duration: 30000 },
     );
   };
 

frontend/src/hooks/useConnections.ts

@@ -1,4 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
 import api from '@/lib/api';
 import type { Connection, ConnectionRequest, UmbralSearchResponse } from '@/types';
 
@@ -46,8 +47,8 @@ export function useConnections() {
       });
       return data;
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['connections'] });
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['connections'] });
     },
   });
 
@@ -56,10 +57,14 @@ export function useConnections() {
       const { data } = await api.put(`/connections/requests/${requestId}/respond`, { action });
       return data;
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['connections'] });
-      queryClient.invalidateQueries({ queryKey: ['people'] });
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    onSuccess: async (_, variables) => {
+      // Dismiss any lingering Sonner toast for this request
+      toast.dismiss(`connection-request-${variables.requestId}`);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['connections'] }),
+        queryClient.invalidateQueries({ queryKey: ['people'] }),
+        queryClient.invalidateQueries({ queryKey: ['notifications'] }),
+      ]);
     },
   });
 
@@ -68,9 +73,11 @@ export function useConnections() {
       const { data } = await api.put(`/connections/requests/${requestId}/cancel`);
       return data;
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['connections'] });
-      queryClient.invalidateQueries({ queryKey: ['notifications'] });
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['connections'] }),
+        queryClient.invalidateQueries({ queryKey: ['notifications'] }),
+      ]);
     },
   });