cosmetic fixes

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

@@ -22,7 +22,7 @@
   width: min(95vw, 95%);
   height: min(calc(100dvh - 2rem), 1024px);
   max-height: 1024px;
-  margin-inline: 0 auto;
+  margin-inline: auto;
   overflow-x: hidden;
 }
 
@@ -86,6 +86,7 @@
   width: min(100%, 96rem);
   height: min(100dvh - 1.5rem, 100%);
   max-height: 100dvh;
+  border: 0;
 }
 
 .conversation-modal-header {
@@ -94,7 +95,6 @@
   justify-content: space-between;
   gap: 1rem;
   padding-bottom: 1rem;
-  border-bottom: 1px solid var(--surface-border-soft);
 }
 
 .conversation-modal-eyebrow {

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

@@ -74,14 +74,31 @@ export class ChatPageComponent implements OnDestroy {
   readonly isDictating = signal(false);
   readonly isTranscribingDictation = signal(false);
   readonly emojiOptions = [
-    '😀', '😁', '😂', '🤣', '😊',
+    '😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',
-    '😉', '😍', '😘', '😎', '🤔',
+    '😋', '😎', '😍', '😘', '🥰', '😗', '😙', '😚', '🙂', '🤗',
-    '😅', '😭', '😡', '😴', '🙃',
+    '🤩', '🤔', '🤨', '😐', '😑', '😶', '🙄', '😏', '😣', '😥',
-    '👍', '👎', '👏', '🙏', '🤝',
+    '😮', '🤐', '😯', '😪', '😫', '🥱', '😴', '😌', '😛', '😜',
-    '🎉', '🔥', '❤️', '💡', '✅',
+    '😝', '🤤', '😒', '😓', '😔', '😕', '🙃', '🫠', '🤑', '😲',
-    '🚀', '👀', '📹', '📎', '💬',
+    '☹️', '🙁', '😖', '😞', '😟', '😤', '😢', '😭', '😦', '😧',
-    '🌍', '⚡', '⭐', '🎵', '📷',
+    '😨', '😩', '🤯', '😬', '😰', '😱', '🥵', '🥶', '😳', '🤪',
-    '🗑️', '⏩', '🛑', '🙌', '👌',
+    '😵', '🥴', '😠', '😡', '🤬', '😷', '🤒', '🤕', '🤢', '🤮',
+    '🤧', '😇', '🥳', '🥺', '🤠', '🤡', '🤥', '🤫', '🤭', '🧐',
+    '🤓', '😈', '👿', '👹', '👺', '💀', '☠️', '👻', '👽', '🤖',
+    '💩', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿', '😾',
+    '🙈', '🙉', '🙊', '💋', '💌', '💘', '💝', '💖', '💗', '💓',
+    '💞', '💕', '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍',
+    '🤎', '💔', '❤️‍🔥', '❤️‍🩹', '❣️', '💯', '💢', '💥', '💫', '💦',
+    '💨', '🕳️', '💬', '🗨️', '🗯️', '💭', '💤', '👋', '🤚', '🖐️',
+    '✋', '🖖', '🫱', '🫲', '🫳', '🫴', '👌', '🤌', '🤏', '✌️',
+    '🤞', '🫰', '🤟', '🤘', '🤙', '👈', '👉', '👆', '👇', '☝️',
+    '👍', '👎', '✊', '👊', '🤛', '🤜', '👏', '🙌', '🫶', '👐',
+    '🤲', '🙏', '✍️', '💅', '🤳', '💪', '🦾', '🦿', '🦵', '🦶',
+    '👂', '🦻', '👃', '🧠', '🫀', '🫁', '🦷', '🦴', '👀', '👁️',
+    '👅', '👄', '🫦', '🌍', '🌎', '🌏', '🌕', '⭐', '🌟', '✨',
+    '⚡', '🔥', '💧', '🌈', '☀️', '🌤️', '⛅', '🌧️', '⛈️', '🌩️',
+    '❄️', '☃️', '☔', '🍎', '🍊', '🍋', '🍉', '🍇', '🍓', '🍒',
+    '🍑', '🍍', '🥥', '🥑', '🍔', '🍕', '🌮', '🍣', '🍪', '🎂',
+    '☕', '🍵', '🍹', '🎉', '🎈', '🎁', '🏆', '🚀', '📷', '🎵',
   ];
   readonly peerId = computed(() => this.routeParamMap().get('peerId') ?? '');
   readonly peer = computed(() => this.session.peers().find((item) => item.id === this.peerId()) ?? null);
@@ -274,7 +291,7 @@ export class ChatPageComponent implements OnDestroy {
     }
 
     this.session.selectPeer(peerId);
-    await this.session.connectToPeer(peerId);
+    await this.session.reconnectToPeer(peerId);
   }
 
   async sendMessage(): Promise<void> {
@@ -730,7 +747,7 @@ export class ChatPageComponent implements OnDestroy {
   }
 
   canReconnectWebRtc(): boolean {
-    return this.indicatorTone(this.webRtcState()) === 'offline';
+    return !!this.peerId() && this.indicatorTone(this.webRtcState()) !== 'ok';
   }
 
   async switchPeer(peerId: string): Promise<void> {

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

@@ -382,6 +382,15 @@ export class ChatSessionService {
     await this.negotiatePeer(peerId, bundle);
   }
 
+  async reconnectToPeer(peerId: string): Promise<void> {
+    if (!peerId) {
+      return;
+    }
+
+    this.releasePeerBundle(peerId, true);
+    await this.connectToPeer(peerId);
+  }
+
   localCallStreamForPeer(peerId: string): MediaStream | null {
     return this.localCallStreams().find((entry) => entry.peerId === peerId)?.stream ?? null;
   }