🩹(frontend) improve join notification handling

Notifications now close if the designated user leaves the room before
the toaster duration ends. This prevents bugs and ensures cleaner UX.

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -7,7 +7,6 @@ import { Div } from '@/primitives'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
-  // fixme - remove toast if the user quit room in the 5s she joined
   // fixme - don't show toast on mobile screen
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
@@ -27,6 +26,23 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
+  useEffect(() => {
+    const removeJoinNotification = (participant: Participant) => {
+      const existingToast = toastQueue.visibleToasts.find(
+        (toast) =>
+          toast.content.participant === participant &&
+          toast.content.type === NotificationType.Joined
+      )
+      if (existingToast) {
+        toastQueue.close(existingToast.key)
+      }
+    }
+    room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification)
+    return () => {
+      room.off(RoomEvent.ParticipantConnected, removeJoinNotification)
+    }
+  }, [room])
+
   // fixme - close all related toasters when hands are lowered remotely
   useEffect(() => {
     const decoder = new TextDecoder()