full screen chat for iphone

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

@@ -55,10 +55,17 @@ export class ChatPageComponent implements OnDestroy {
     this.conversationContainer = value;
   }
   private conversationContainer?: ElementRef<HTMLDivElement>;
+  @ViewChild('fullscreenConversationContainer')
+  set fullscreenConversationContainerRef(value: ElementRef<HTMLDivElement> | undefined) {
+    this.fullscreenConversationContainer = value;
+  }
+  private fullscreenConversationContainer?: ElementRef<HTMLDivElement>;
 
   messageText = '';
   readonly forwardingEntryId = signal<string | null>(null);
   readonly callChoicePeerId = signal<string | null>(null);
+  readonly conversationModalOpen = signal(false);
+  readonly peerDropdownOpen = signal(false);
   readonly emojiPickerOpen = signal(false);
   readonly isRecordingVoice = signal(false);
   readonly isDictating = signal(false);
@@ -75,6 +82,7 @@ export class ChatPageComponent implements OnDestroy {
   ];
   readonly peerId = computed(() => this.routeParamMap().get('peerId') ?? '');
   readonly peer = computed(() => this.session.peers().find((item) => item.id === this.peerId()) ?? null);
+  readonly displayedPeer = computed(() => this.peer() ?? this.session.peers()[0] ?? null);
   readonly currentUser = computed(() => this.session.currentUser());
   readonly callModalPeerId = computed(() =>
     this.session.activeVoiceCallPeerId()
@@ -574,6 +582,33 @@ export class ChatPageComponent implements OnDestroy {
     return this.session.peers().filter((peer) => peer.id !== entry.peerId);
   }
 
+  togglePeerDropdown(): void {
+    if (this.session.peers().length === 0) {
+      return;
+    }
+
+    this.peerDropdownOpen.update((open) => !open);
+  }
+
+  closePeerDropdown(): void {
+    this.peerDropdownOpen.set(false);
+  }
+
+  openConversationModal(): void {
+    this.closePeerDropdown();
+    this.conversationModalOpen.set(true);
+    this.scrollConversationToBottom();
+  }
+
+  closeConversationModal(): void {
+    this.conversationModalOpen.set(false);
+  }
+
+  async selectPeerFromDropdown(peerId: string): Promise<void> {
+    this.closePeerDropdown();
+    await this.switchPeer(peerId);
+  }
+
   async forwardEntry(entry: ChatEntry, targetPeerId: string, select: HTMLSelectElement): Promise<void> {
     if (!targetPeerId) {
       return;
@@ -693,6 +728,8 @@ export class ChatPageComponent implements OnDestroy {
     this.stopVoiceRecording(true);
     this.forwardingEntryId.set(null);
     this.callChoicePeerId.set(null);
+    this.conversationModalOpen.set(false);
+    this.peerDropdownOpen.set(false);
     this.emojiPickerOpen.set(false);
     this.session.selectPeer(peerId);
     await this.router.navigate(['/chat', peerId]);
@@ -874,15 +911,18 @@ export class ChatPageComponent implements OnDestroy {
   }
 
   private scrollConversationToBottom(): void {
-    const container = this.conversationContainer?.nativeElement;
-
-    if (!container) {
-      return;
-    }
-
     queueMicrotask(() => {
       requestAnimationFrame(() => {
-        container.scrollTop = container.scrollHeight;
+        for (const container of [
+          this.conversationContainer?.nativeElement,
+          this.fullscreenConversationContainer?.nativeElement,
+        ]) {
+          if (!container) {
+            continue;
+          }
+
+          container.scrollTop = container.scrollHeight;
+        }
       });
     });
   }