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,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>
   );

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