From 6ae28cb32105cc05538039dbc7304cde9317ba4d Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Thu, 13 Aug 2026 03:59:01 +0200
Subject: [PATCH] fix(frontend): render document albums as file rows instead of
 broken images

---
 frontend/src/lib/components/MediaAlbum.svelte |  31 +++-
 .../src/lib/components/MessageMedia.svelte    |  67 +-------
 .../src/lib/components/media/FileChip.svelte  | 149 ++++++++++++++++++
 3 files changed, 178 insertions(+), 69 deletions(-)
 create mode 100644 frontend/src/lib/components/media/FileChip.svelte

diff --git a/frontend/src/lib/components/MediaAlbum.svelte b/frontend/src/lib/components/MediaAlbum.svelte
index 37b6b73..a8617b6 100644
--- a/frontend/src/lib/components/MediaAlbum.svelte
+++ b/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);
diff --git a/frontend/src/lib/components/MessageMedia.svelte b/frontend/src/lib/components/MessageMedia.svelte
index c440d49..ed98d37 100644
--- a/frontend/src/lib/components/MessageMedia.svelte
+++ b/frontend/src/lib/components/MessageMedia.svelte
@@ -10,6 +10,7 @@
   } from "$lib/api/media";
   import type { MessageView } from "$lib/api/types";
   import AudioFile from "$lib/components/media/AudioFile.svelte";
+  import FileChip from "$lib/components/media/FileChip.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";
@@ -142,18 +143,8 @@
           <Icon name="timer" size="1.25rem" />
           <span>Самоуничтожающееся медиа</span>
         </button>
-      {:else if asFile}
-        <button class="media-file" onclick={save} type="button">
-          <span class="file-glyph">
-            <Icon name={saving ? "timer" : "document"} size="1.25rem" />
-          </span>
-          <span class="file-text">
-            <span class="file-name">{fileName}</span>
-            <span class="file-sub">
-              {formatBytes(ref?.file_size ?? null) || mediaKindLabel(kind)}
-            </span>
-          </span>
-        </button>
+      {:else if asFile && ref}
+        <FileChip media={ref} />
       {:else if !loaded}
         <div class="media-skeleton"><Spinner /></div>
       {:else if ready && kind === "voice"}
@@ -370,58 +361,6 @@
     }
   }
 
-  .media-file {
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-
-    width: 100%;
-    max-width: 18rem;
-    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
-    border: 0;
-    border-radius: var(--border-radius-default-small);
-
-    text-align: start;
-
-    background-color: var(--color-primary-tint);
-  }
-
-  .file-glyph {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 50%;
-
-    color: var(--color-white);
-    background-color: var(--color-primary);
-  }
-
-  .file-text {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .file-name {
-    overflow: hidden;
-
-    font-size: 0.9375rem;
-    color: var(--color-text);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .file-sub {
-    font-size: 0.75rem;
-    color: var(--color-text-secondary);
-  }
-
   .media-chip {
     cursor: pointer;
     display: flex;
diff --git a/frontend/src/lib/components/media/FileChip.svelte b/frontend/src/lib/components/media/FileChip.svelte
new file mode 100644
index 0000000..f7a0ea7
--- /dev/null
+++ b/frontend/src/lib/components/media/FileChip.svelte
@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { downloadMedia } from "$lib/api/download";
+  import type { MediaRef } from "$lib/api/types";
+  import Icon from "$lib/components/ui/Icon.svelte";
+  import { formatBytes, mediaKindLabel } from "$lib/format/media";
+  import { shareUi } from "$lib/stores/shares.svelte";
+  import { toasts } from "$lib/stores/toasts.svelte";
+
+  interface Props {
+    media: MediaRef;
+  }
+
+  const { media }: Props = $props();
+
+  let saving = $state(false);
+
+  const name = $derived(
+    media.file_name ?? mediaKindLabel(media.kind) ?? "Файл"
+  );
+  const size = $derived(formatBytes(media.file_size));
+
+  async function save() {
+    if (media.id === null || saving) {
+      return;
+    }
+    saving = true;
+    try {
+      await downloadMedia(media.id);
+    } catch {
+      toasts.error("Не удалось скачать файл");
+    } finally {
+      saving = false;
+    }
+  }
+
+  function share() {
+    if (media.id !== null) {
+      shareUi.share({ kind: "media", mediaId: media.id }, name);
+    }
+  }
+</script>
+
+<div class="FileChip">
+  <button class="file-main" type="button" title={name} onclick={save}>
+    <span class="file-glyph">
+      <Icon name={saving ? "timer" : "document"} size="1.25rem" />
+    </span>
+    <span class="file-text">
+      <span class="file-name">{name}</span>
+      <span class="file-sub">{size || mediaKindLabel(media.kind)}</span>
+    </span>
+  </button>
+  <button
+    class="file-share"
+    type="button"
+    aria-label="Доступ по ссылке"
+    onclick={share}
+  >
+    <Icon name="allow-share" size="1.125rem" />
+  </button>
+</div>
+
+<style lang="scss">
+  .FileChip {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    width: 100%;
+    max-width: 20rem;
+    padding: 0.25rem 0.375rem 0.25rem 0.25rem;
+    border-radius: var(--border-radius-default-small);
+
+    background-color: var(--color-primary-tint);
+  }
+
+  .file-main {
+    cursor: pointer;
+
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.625rem;
+
+    min-width: 0;
+    padding: 0.25rem;
+    border: 0;
+
+    font-family: inherit;
+    text-align: start;
+
+    background: transparent;
+  }
+
+  .file-glyph {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+
+    color: var(--color-white);
+    background-color: var(--color-primary);
+  }
+
+  .file-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .file-name {
+    overflow: hidden;
+
+    font-size: 0.9375rem;
+    color: var(--color-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-sub {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+  }
+
+  .file-share {
+    cursor: pointer;
+
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 2rem;
+    height: 2rem;
+    border: 0;
+    border-radius: 50%;
+
+    color: var(--color-primary);
+    background: transparent;
+
+    &:hover {
+      background-color: var(--color-primary-opacity);
+    }
+  }
+</style>