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

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;