feat: wire public posts api

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -1,9 +1,12 @@
 import { Download } from "lucide-react";
+import { postNoBody } from "../../../api";
+import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
 import { fileIcon } from "../utils/fileIcon";
 import { formatBytes } from "../utils/formatBytes";
+import { postDisplayText } from "../utils/postText";
 
-function AttachmentRow({ att }: { att: Attachment }) {
+function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
   const isImageAsDoc = att.mime.startsWith("image/");
   const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
 
@@ -14,6 +17,9 @@ function AttachmentRow({ att }: { att: Attachment }) {
       target="_blank"
       rel="noopener noreferrer"
       className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5"
+      onClick={() => {
+        void postNoBody(`/api/posts/${postId}/attachments/${att.id}/download`);
+      }}
     >
       <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12">
         {isImageAsDoc && att.thumbnailUrl ? (
@@ -49,14 +55,16 @@ function AttachmentRow({ att }: { att: Attachment }) {
 }
 
 export function FileDocBubble({ post }: { post: Post }) {
+  const { lang } = useI18n();
+  const text = postDisplayText(post, lang);
   return (
     <div className="flex flex-col gap-1">
       {post.attachments.map((att) => (
-        <AttachmentRow key={att.id} att={att} />
+        <AttachmentRow key={att.id} postId={post.id} att={att} />
       ))}
-      {post.text ? (
+      {text ? (
         <div className="mt-1 whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
-          {post.text}
+          {text}
         </div>
       ) : null}
     </div>