feat: 1-to-1 message render + web data-lake backend

frontend/src/lib/components/MediaAlbum.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { MediaRef } from "$lib/api/types";
+  import AlbumTile from "$lib/components/media/AlbumTile.svelte";
+
+  interface Props {
+    chatId: number;
+    media: MediaRef[];
+    onopen: (index: number) => void;
+  }
+
+  let { media, chatId, onopen }: Props = $props();
+
+  const columns = $derived.by(() => {
+    const count = media.length;
+    if (count === 2) {
+      return 2;
+    }
+    if (count === 4) {
+      return 2;
+    }
+    return 3;
+  });
+</script>
+
+<div class="MediaAlbum" style:--cols={columns}>
+  {#each media as item, index (item.id ?? index)}
+    <AlbumTile media={item} {chatId} onopen={() => onopen(index)} />
+  {/each}
+</div>
+
+<style lang="scss">
+  .MediaAlbum {
+    display: grid;
+    grid-template-columns: repeat(var(--cols), 1fr);
+    gap: 0.125rem;
+
+    overflow: hidden;
+    max-width: 20rem;
+    margin-bottom: 0.25rem;
+    border-radius: var(--border-radius-default-small);
+  }
+</style>