refactor Notifications rc

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

components/layout/layout-wrapper.tsx

@@ -210,9 +210,19 @@ export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: Layou
       
       {/* Incoming call notification */}
       {!isSignInPage && isAuthenticated && (
+        <>
+          {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={() => setIncomingCall(null)}
+            onDismiss={() => {
+              console.log('[LayoutWrapper] Call dismissed');
+              setIncomingCall(null);
+            }}
             onAccept={(roomId) => {
               console.log('[LayoutWrapper] Call accepted, navigating to room:', roomId);
               setIncomingCall(null);
@@ -223,6 +233,7 @@ export function LayoutWrapper({ children, isSignInPage, isAuthenticated }: Layou
               // TODO: Send reject signal to RocketChat if needed
             }}
           />
+        </>
       )}
     </AuthCheck>
   );

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({