feat: web UI chat render, panels, presence + analytics

frontend/src/lib/components/MessageBubble.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
   import type { MessageView } from "$lib/api/types";
+  import Contact from "$lib/components/Contact.svelte";
   import EntityText from "$lib/components/EntityText.svelte";
   import ForwardHeader from "$lib/components/ForwardHeader.svelte";
+  import InlineButtons from "$lib/components/InlineButtons.svelte";
+  import Location from "$lib/components/Location.svelte";
   import MediaAlbum from "$lib/components/MediaAlbum.svelte";
   import MessageMedia from "$lib/components/MessageMedia.svelte";
   import MessageMeta from "$lib/components/MessageMeta.svelte";
+  import Poll from "$lib/components/Poll.svelte";
+  import Reactions from "$lib/components/Reactions.svelte";
   import ReplyHeader from "$lib/components/ReplyHeader.svelte";
   import Avatar from "$lib/components/ui/Avatar.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
+  import WebPage from "$lib/components/WebPage.svelte";
   import { accountName, peerColorIndex, peerName } from "$lib/format/peer";
   import { accounts } from "$lib/stores/accounts.svelte";
   import { peers } from "$lib/stores/peers.svelte";
@@ -41,6 +47,11 @@
 
   const deleted = $derived(message.deleted_at !== null);
   const hasText = $derived(Boolean(message.text));
+  const special = $derived(
+    Boolean(
+      message.web_page || message.poll || message.contact || message.location
+    )
+  );
 
   const ownId = $derived(accounts.selected?.tg_user_id ?? null);
   const sender = $derived(
@@ -107,14 +118,25 @@
         deleted
       </span>
     {/if}
-    {#if message.media.length > 1}
-      <MediaAlbum
-        media={message.media}
-        chatId={message.chat_id}
-        onopen={onmedia}
-      />
-    {:else if message.has_media}
-      <MessageMedia {message} {own} onopen={() => onmedia(0)} />
+    {#if message.poll}
+      <Poll poll={message.poll} />
+    {/if}
+    {#if message.contact}
+      <Contact contact={message.contact} />
+    {/if}
+    {#if message.location}
+      <Location location={message.location} />
+    {/if}
+    {#if !special}
+      {#if message.media.length > 1}
+        <MediaAlbum
+          media={message.media}
+          chatId={message.chat_id}
+          onopen={onmedia}
+        />
+      {:else if message.has_media}
+        <MessageMedia {message} {own} onopen={() => onmedia(0)} />
+      {/if}
     {/if}
     {#if hasText}
       <div class="text">
@@ -124,10 +146,19 @@
           {own}
         />
       </div>
-    {:else if !(message.has_media || deleted)}
+    {:else if !(message.has_media || deleted || special)}
       <div class="text empty">(no text)</div>
     {/if}
-    <MessageMeta {message} {onversions} />
+    {#if message.web_page}
+      <WebPage {message} {own} {onmedia} />
+    {/if}
+    {#if message.reactions.length}
+      <Reactions reactions={message.reactions} {own} />
+    {/if}
+    <MessageMeta {message} {own} {onversions} />
+    {#if message.inline_buttons.length}
+      <InlineButtons rows={message.inline_buttons} />
+    {/if}
     {#if lastInGroup}
       <svg aria-hidden="true" class="svg-appendix" height="20" width="9">
         <path