fix(frontend): render document albums as file rows instead of broken images

frontend/src/lib/components/MediaAlbum.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { isPreviewable } from "$lib/api/media";
   import type { MediaRef } from "$lib/api/types";
   import AlbumTile from "$lib/components/media/AlbumTile.svelte";
+  import FileChip from "$lib/components/media/FileChip.svelte";
 
   interface Props {
     chatId: number;
@@ -10,6 +12,10 @@
 
   let { media, chatId, onopen }: Props = $props();
 
+  const asFiles = $derived(
+    media.every((item) => !isPreviewable(item.kind, item.mime))
+  );
+
   const columns = $derived.by(() => {
     const count = media.length;
     if (count === 2) {
@@ -22,13 +28,28 @@
   });
 </script>
 
-<div class="MediaAlbum" style:--cols={columns}>
-  {#each media as item, index (item.id ?? index)}
-    <AlbumTile media={item} {chatId} onopen={() => onopen(index)} />
-  {/each}
-</div>
+{#if asFiles}
+  <div class="AlbumFiles">
+    {#each media as item, index (item.id ?? index)}
+      <FileChip media={item} />
+    {/each}
+  </div>
+{:else}
+  <div class="MediaAlbum" style:--cols={columns}>
+    {#each media as item, index (item.id ?? index)}
+      <AlbumTile media={item} {chatId} onopen={() => onopen(index)} />
+    {/each}
+  </div>
+{/if}
 
 <style lang="scss">
+  .AlbumFiles {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    margin-bottom: 0.25rem;
+  }
+
   .MediaAlbum {
     display: grid;
     grid-template-columns: repeat(var(--cols), 1fr);