feat: wire public posts api

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -1,10 +1,14 @@
+import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
+import { postDisplayText } from "../utils/postText";
 
 export function ImageWithTextBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
+  const { lang } = useI18n();
   const att = post.attachments[0];
+  const text = postDisplayText(post, lang);
   if (!att) return null;
   const ratio =
     att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
@@ -13,7 +17,7 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
     <div className="flex flex-col gap-1.5">
       <button
         type="button"
-        onClick={() => openLightbox([att], 0)}
+        onClick={() => openLightbox([att], 0, text, post.id)}
         className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
         aria-label={att.filename}
       >
@@ -25,9 +29,9 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
           style={{ aspectRatio: ratio }}
         />
       </button>
-      {post.text ? (
+      {text ? (
         <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
-          {autolink(post.text)}
+          {autolink(text)}
         </div>
       ) : null}
     </div>