From e21da647a097644090b2f35d9614d93f00e98e72 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 20 May 2026 21:06:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20handle=20notifications=20?=
 =?UTF-8?q?by=20reusing=20the=20existing=20notif=20region?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render the notification region from the main window into the PiP
document via a portal, rather than duplicating it. This keeps a
single listener, a single store, and a single component instance —
so notifications stay consistent across both windows without extra
synchronization.

Simplest approach I could find. Good enough as a first pass;
worth revisiting if the requirements grow.

Co-authored-by: Cyril <c.gromoff@gmail.com>
---
 .../notifications/MainNotificationToast.tsx      | 12 +++---------
 .../notifications/NotificationProvider.tsx       | 16 ++++++++++++++++
 .../src/features/pip/components/PipView.tsx      |  2 ++
 3 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 src/frontend/src/features/notifications/NotificationProvider.tsx

diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx
index 6e5ea93c..5de48fc4 100644
--- a/src/frontend/src/features/notifications/MainNotificationToast.tsx
+++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx
@@ -3,18 +3,17 @@ import { useRoomContext } from '@livekit/components-react'
 import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
 import { useTranslation } from 'react-i18next'
-import { Div } from '@/primitives'
 import { NotificationType } from './NotificationType'
 import { NotificationDuration } from './NotificationDuration'
 import { decodeNotificationDataReceived } from './utils'
 import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
-import { ToastProvider, toastQueue } from './components/ToastProvider'
-import { WaitingParticipantNotification } from './components/WaitingParticipantNotification'
+import { toastQueue } from './components/ToastProvider'
 import { layoutStore } from '@/stores/layout'
 import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { Emoji } from '@/features/reactions/types'
 import { useReactions } from '@/features/reactions/hooks/useReactions'
+import { NotificationProvider } from './NotificationProvider'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
@@ -233,10 +232,5 @@ export const MainNotificationToast = () => {
   // the 'notifications' namespace might not be loaded yet
   useTranslation(['notifications'])
 
-  return (
-    <Div position="absolute" bottom={0} right={5} zIndex={1000}>
-      <ToastProvider />
-      <WaitingParticipantNotification />
-    </Div>
-  )
+  return <NotificationProvider />
 }
diff --git a/src/frontend/src/features/notifications/NotificationProvider.tsx b/src/frontend/src/features/notifications/NotificationProvider.tsx
new file mode 100644
index 00000000..761c5875
--- /dev/null
+++ b/src/frontend/src/features/notifications/NotificationProvider.tsx
@@ -0,0 +1,16 @@
+import { Div } from '@/primitives'
+import { ToastProvider } from './components/ToastProvider'
+import { WaitingParticipantNotification } from './components/WaitingParticipantNotification'
+
+export const NotificationProvider = ({
+  bottom = 0,
+  right = 5,
+}: {
+  bottom?: number
+  right?: number
+}) => (
+  <Div position="absolute" bottom={bottom} right={right} zIndex={1000}>
+    <ToastProvider />
+    <WaitingParticipantNotification />
+  </Div>
+)
diff --git a/src/frontend/src/features/pip/components/PipView.tsx b/src/frontend/src/features/pip/components/PipView.tsx
index c99cb95f..1028f8ae 100644
--- a/src/frontend/src/features/pip/components/PipView.tsx
+++ b/src/frontend/src/features/pip/components/PipView.tsx
@@ -4,6 +4,7 @@ import { PipFloatingReactions } from './PipFloatingReactions'
 import { PipStage } from './layout/PipStage'
 import { ReactionsToolbar } from '@/features/reactions/components/toolbar/ReactionsToolbar'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
+import { NotificationProvider } from '@/features/notifications/NotificationProvider'
 
 const Container = styled('div', {
   base: {
@@ -53,6 +54,7 @@ export const PipView = () => {
       <ReactionsToolbar adjustedCentering={false} />
       <PipControlBar showScreenShare={false} />
       <PipFloatingReactions />
+      <NotificationProvider bottom={30} />
     </Container>
   )
 }