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

frontend/src/lib/components/media/TgsSticker.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  interface Props {
+    size?: number;
+    url: string;
+  }
+
+  let { url, size = 12 }: Props = $props();
+
+  let container = $state<HTMLDivElement | null>(null);
+
+  $effect(() => {
+    const target = container;
+    if (!target) {
+      return;
+    }
+    let active = true;
+    let anim: { destroy: () => void } | null = null;
+    (async () => {
+      try {
+        const [lottieModule, pako] = await Promise.all([
+          import("lottie-web"),
+          import("pako"),
+        ]);
+        const response = await fetch(url);
+        const bytes = new Uint8Array(await response.arrayBuffer());
+        const json = JSON.parse(pako.inflate(bytes, { to: "string" }));
+        if (!active) {
+          return;
+        }
+        anim = lottieModule.default.loadAnimation({
+          container: target,
+          renderer: "svg",
+          loop: true,
+          autoplay: true,
+          animationData: json,
+        });
+      } catch {
+        // tgs decode/render failed — leave empty
+      }
+    })();
+    return () => {
+      active = false;
+      anim?.destroy();
+    };
+  });
+</script>
+
+<div
+  class="TgsSticker"
+  bind:this={container}
+  style="--tgs-size: {size}rem;"
+></div>
+
+<style lang="scss">
+  .TgsSticker {
+    width: var(--tgs-size);
+    height: var(--tgs-size);
+  }
+</style>