From ab1ba65a9fe806f29756199f3f49a6a332363fc0 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Fri, 16 Jan 2026 01:52:51 +0100
Subject: [PATCH]  refactor Notifications rc

---
 components/incoming-call-notification.tsx |  5 +++
 components/layout/layout-wrapper.tsx      | 37 +++++++++++++++--------
 hooks/use-rocketchat-calls.ts             | 15 ++++++++-
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/components/incoming-call-notification.tsx b/components/incoming-call-notification.tsx
index d8e06ea..3d92c26 100644
--- a/components/incoming-call-notification.tsx
+++ b/components/incoming-call-notification.tsx
@@ -34,10 +34,15 @@ export function IncomingCallNotification({
 
   useEffect(() => {
     if (call) {
+      console.log('[IncomingCallNotification] 📞 Call received, showing notification', {
+        from: call.from.name || call.from.username,
+        roomId: call.roomId,
+      });
       setIsVisible(true);
       
       // Auto-dismiss after 30 seconds if user doesn't interact
       const autoDismissTimer = setTimeout(() => {
+        console.log('[IncomingCallNotification] ⏰ Auto-dismissing after 30 seconds');
         setIsVisible(false);
         onDismiss();
       }, 30000); // 30 seconds
diff --git a/components/layout/layout-wrapper.tsx b/components/layout/layout-wrapper.tsx
index e0d61ad..24f7466 100644
--- a/components/layout/layout-wrapper.tsx
+++ b/components/layout/layout-wrapper.tsx
@@ -210,19 +210,30 @@ export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: Layou
       
       {/* Incoming call notification */}
       {!isSignInPage && isAuthenticated && (
-        <IncomingCallNotification
-          call={incomingCall}
-          onDismiss={() => setIncomingCall(null)}
-          onAccept={(roomId) => {
-            console.log('[LayoutWrapper] Call accepted, navigating to room:', roomId);
-            setIncomingCall(null);
-          }}
-          onReject={() => {
-            console.log('[LayoutWrapper] Call rejected');
-            setIncomingCall(null);
-            // TODO: Send reject signal to RocketChat if needed
-          }}
-        />
+        <>
+          {incomingCall && (
+            <div style={{ position: 'fixed', top: 0, right: 0, zIndex: 9999 }}>
+              {/* Debug: Show if incomingCall exists */}
+              {console.log('[LayoutWrapper] Rendering IncomingCallNotification', { incomingCall })}
+            </div>
+          )}
+          <IncomingCallNotification
+            call={incomingCall}
+            onDismiss={() => {
+              console.log('[LayoutWrapper] Call dismissed');
+              setIncomingCall(null);
+            }}
+            onAccept={(roomId) => {
+              console.log('[LayoutWrapper] Call accepted, navigating to room:', roomId);
+              setIncomingCall(null);
+            }}
+            onReject={() => {
+              console.log('[LayoutWrapper] Call rejected');
+              setIncomingCall(null);
+              // TODO: Send reject signal to RocketChat if needed
+            }}
+          />
+        </>
       )}
     </AuthCheck>
   );
diff --git a/hooks/use-rocketchat-calls.ts b/hooks/use-rocketchat-calls.ts
index 680ac8a..7764217 100644
--- a/hooks/use-rocketchat-calls.ts
+++ b/hooks/use-rocketchat-calls.ts
@@ -117,7 +117,20 @@ export function useRocketChatCalls() {
             roomId: callEvent.roomId,
           });
 
-          // Trigger notification
+          // Show incoming call notification UI (Outlook-style rectangle)
+          setIncomingCall({
+            from: callEvent.from,
+            roomId: callEvent.roomId,
+            roomName: callEvent.roomName,
+            timestamp: callEvent.timestamp,
+          });
+
+          console.log('[useRocketChatCalls] 📞 Incoming call notification UI set', {
+            from: callEvent.from.username,
+            roomId: callEvent.roomId,
+          });
+
+          // Trigger notification badge
           // For calls, we want to increment the existing count, not replace it
           // So we fetch current count first, then increment
           triggerNotification({