feat: wire public posts api

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -1,6 +1,8 @@
+import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
+import { postDisplayText } from "../utils/postText";
 
 const MAX_VISIBLE = 4;
 
@@ -10,7 +12,9 @@ function imageRatio(att: Attachment) {
 
 export function AlbumBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
+  const { lang } = useI18n();
   const images = post.attachments;
+  const text = postDisplayText(post, lang);
   const shouldMerge = images.length > MAX_VISIBLE;
 
   if (!shouldMerge) {
@@ -20,7 +24,7 @@ export function AlbumBubble({ post }: { post: Post }) {
           <button
             key={att.id}
             type="button"
-            onClick={() => openLightbox(images, i)}
+            onClick={() => openLightbox(images, i, text, post.id)}
             className="relative block max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
             aria-label={att.filename}
           >
@@ -33,9 +37,9 @@ export function AlbumBubble({ post }: { post: Post }) {
             />
           </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>
@@ -54,7 +58,7 @@ export function AlbumBubble({ post }: { post: Post }) {
             <button
               key={att.id}
               type="button"
-              onClick={() => openLightbox(images, i)}
+              onClick={() => openLightbox(images, i, text, post.id)}
               className="relative block h-full w-full overflow-hidden"
               aria-label={att.filename}
             >
@@ -75,9 +79,9 @@ export function AlbumBubble({ post }: { post: Post }) {
           );
         })}
       </div>
-      {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>