feat(web): improve album layout and captions for multi-attachments

web/src/components/MessageComposer.tsx

@@ -508,24 +508,31 @@ export function MessageComposer() {
         });
       }
       const kindSet = new Set(uploaded.map((item) => item.kind));
-      const inferredType: "file" | "image" | "video" | "audio" =
-        kindSet.size === 1 ? uploaded[0].kind : "file";
+      let inferredType: "file" | "image" | "video" | "audio" = "file";
+      if ([...kindSet].every((kind) => kind === "image")) {
+        inferredType = "image";
+      } else if ([...kindSet].every((kind) => kind === "image" || kind === "video")) {
+        inferredType = "video";
+      } else if ([...kindSet].every((kind) => kind === "audio")) {
+        inferredType = "audio";
+      } else if (kindSet.size === 1) {
+        inferredType = uploaded[0].kind;
+      }
       const messageType =
         inferredType === "video" && uploaded.length === 1 && sendAsCircle ? "circle_video" : inferredType;
       const caption = captionDraft.trim() || null;
-      const fallbackText = uploaded[0]?.fileUrl ?? null;
       const clientMessageId = makeClientMessageId();
       addOptimisticMessage({
         chatId: activeChatId,
         senderId: me.id,
         type: messageType,
-        text: caption || fallbackText,
+        text: caption,
         clientMessageId,
       });
       const replyToMessageId = replyToByChat[activeChatId]?.id ?? undefined;
       const created = await sendMessageWithClientId(
         activeChatId,
-        caption || fallbackText || "",
+        caption,
         messageType,
         clientMessageId,
         replyToMessageId