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

frontend/src/lib/components/WebPage.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { MessageView } from "$lib/api/types";
+  import MessageMedia from "$lib/components/MessageMedia.svelte";
+
+  interface Props {
+    message: MessageView;
+    onmedia: (index: number) => void;
+    own: boolean;
+  }
+
+  let { message, own, onmedia }: Props = $props();
+
+  const web = $derived(message.web_page);
+</script>
+
+{#if web}
+  <div class="WebPage">
+    {#if web.has_photo}
+      <div class="photo">
+        <MessageMedia {message} {own} onopen={() => onmedia(0)} />
+      </div>
+    {/if}
+    <a class="card" href={web.url} target="_blank" rel="noopener">
+      {#if web.site_name}
+        <div class="site">{web.site_name}</div>
+      {:else if web.display_url}
+        <div class="site">{web.display_url}</div>
+      {/if}
+      {#if web.title}
+        <div class="title">{web.title}</div>
+      {/if}
+      {#if web.description}
+        <div class="desc">{web.description}</div>
+      {/if}
+    </a>
+  </div>
+{/if}
+
+<style lang="scss">
+  .WebPage {
+    margin-top: 0.25rem;
+    padding-left: 0.5rem;
+    border-left: 3px solid var(--color-primary);
+  }
+
+  .photo {
+    margin-bottom: 0.25rem;
+  }
+
+  .card {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .site {
+    font-size: 0.875rem;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+  }
+
+  .title {
+    font-weight: var(--font-weight-medium);
+  }
+
+  .desc {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--color-text);
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+  }
+</style>