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

frontend/src/lib/components/MessageMedia.svelte

@@ -8,6 +8,7 @@
   } from "$lib/api/media";
   import type { MessageView } from "$lib/api/types";
   import AudioFile from "$lib/components/media/AudioFile.svelte";
+  import TgsSticker from "$lib/components/media/TgsSticker.svelte";
   import VideoNote from "$lib/components/media/VideoNote.svelte";
   import VoiceMessage from "$lib/components/media/VoiceMessage.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
@@ -123,9 +124,7 @@
       playsinline
     ></video>
   {:else if ready && isTgsSticker}
-    <div class="media-sticker tgs">
-      <span class="tgs-emoji">{message.sticker?.emoji ?? "🎞"}</span>
-    </div>
+    <TgsSticker url={ready.url} />
   {:else if ready && isAnimation}
     <button class="media-thumb" onclick={onopen} type="button">
       <video src={ready.url} autoplay loop muted playsinline></video>
@@ -215,23 +214,6 @@
     object-fit: contain;
   }
 
-  .tgs {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 8rem;
-    height: 8rem;
-    border-radius: var(--border-radius-default-small);
-
-    background-color: var(--color-primary-tint);
-  }
-
-  .tgs-emoji {
-    font-size: 3.5rem;
-    line-height: 1;
-  }
-
   .gif-badge {
     position: absolute;
     top: 0.375rem;