peer list at top, emoji w/o bubbles

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

@@ -22,6 +22,9 @@ import type { CallMode, ChatEntry, ConnectionState, PeerSummary } from './models
   styleUrl: './chat-page.component.scss',
 })
 export class ChatPageComponent implements OnDestroy {
+  private readonly graphemeSegmenter = typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly ngZone = inject(NgZone);
@@ -554,6 +557,17 @@ export class ChatPageComponent implements OnDestroy {
     await this.session.deleteMessage(entry);
   }
 
+  isEmojiOnlyEntry(entry: ChatEntry): boolean {
+    if (entry.kind !== 'text' || entry.direction === 'system' || !entry.text?.trim()) {
+      return false;
+    }
+
+    return entry.text
+      .trim()
+      .split(/\s+/u)
+      .every((token) => this.isEmojiToken(token));
+  }
+
   async deleteConversation(peerId: string, event?: Event): Promise<void> {
     event?.stopPropagation();
     await this.session.deleteConversation(peerId);
@@ -926,4 +940,19 @@ export class ChatPageComponent implements OnDestroy {
       });
     });
   }
+
+  private isEmojiToken(token: string): boolean {
+    if (!token) {
+      return false;
+    }
+
+    const graphemes = this.graphemeSegmenter
+      ? Array.from(this.graphemeSegmenter.segment(token), ({ segment }) => segment)
+      : [token];
+
+    return graphemes.every((grapheme) =>
+      /[\p{Emoji}\p{Extended_Pictographic}\u20E3]/u.test(grapheme)
+      && /^[\p{Emoji}\p{Emoji_Component}\p{Extended_Pictographic}\u200D\uFE0F\u20E3]+$/u.test(grapheme),
+    );
+  }
 }