notifications

client/src/app/chat-page.component.scss

@@ -251,6 +251,8 @@
 
 .peer-dropdown-trigger {
   width: 100%;
+  padding-top: 0.56rem;
+  padding-bottom: 0.56rem;
 }
 
 .peer-dropdown-menu {

client/src/app/chat-session.service.ts

@@ -1855,6 +1855,7 @@ export class ChatSessionService {
     this.incomingVoiceCallPeerId.set(peerId);
     this.upsertCallMode(this.incomingCallModes, peerId, mode);
     this.startRingtone();
+    this.showIncomingCallNotification(peerId);
     this.addSystemMessage(peerId, mode === 'video' ? 'Incoming video call.' : 'Incoming audio call.');
   }
 
@@ -2729,6 +2730,45 @@ export class ChatSessionService {
     this.ringtoneAudio.currentTime = 0;
   }
 
+  private showIncomingCallNotification(peerId: string): void {
+    if (typeof Notification === 'undefined') {
+      return;
+    }
+
+    const peerName = this.peers().find((peer) => peer.id === peerId)?.displayName ?? 'A user';
+    const body = `${peerName} is calling you with PrivateChat.`;
+
+    const createNotification = () => {
+      const notification = new Notification('PrivateChat', {
+        body,
+        tag: `incoming-call-${peerId}`,
+        requireInteraction: true,
+      });
+
+      notification.onclick = () => {
+        notification.close();
+        window.focus();
+      };
+    };
+
+    if (Notification.permission === 'granted') {
+      createNotification();
+      return;
+    }
+
+    if (Notification.permission !== 'default') {
+      return;
+    }
+
+    void Notification.requestPermission().then((permission) => {
+      if (permission === 'granted') {
+        createNotification();
+      }
+    }).catch(() => {
+      // Ignore rejected notification permission requests.
+    });
+  }
+
   private preloadRingtone(): Promise<void> {
     if (this.ringtonePreloadPromise) {
       return this.ringtonePreloadPromise;