feat: wire public posts api

src/components/messageStream/overlays/ImageLightbox.tsx

@@ -9,15 +9,24 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { ChevronLeft, ChevronRight, Download, X } from "lucide-react";
+import { postNoBody } from "../../../api";
 import type { Attachment } from "../../../types/post";
+import { autolink } from "../utils/autolink";
 
 type LightboxState = {
   images: Attachment[];
   index: number;
+  caption?: string;
+  postId?: string;
 } | null;
 
 type Ctx = {
-  openLightbox: (images: Attachment[], startIndex?: number) => void;
+  openLightbox: (
+    images: Attachment[],
+    startIndex?: number,
+    caption?: string,
+    postId?: string,
+  ) => void;
   closeLightbox: () => void;
 };
 
@@ -33,11 +42,19 @@ export function useLightbox(): Ctx {
 export function ImageLightboxProvider({ children }: PropsWithChildren) {
   const [state, setState] = useState<LightboxState>(null);
 
-  const openLightbox = useCallback((images: Attachment[], startIndex = 0) => {
-    if (!images.length) return;
-    const i = Math.min(Math.max(0, startIndex), images.length - 1);
-    setState({ images, index: i });
-  }, []);
+  const openLightbox = useCallback(
+    (
+      images: Attachment[],
+      startIndex = 0,
+      caption?: string,
+      postId?: string,
+    ) => {
+      if (!images.length) return;
+      const i = Math.min(Math.max(0, startIndex), images.length - 1);
+      setState({ images, index: i, caption, postId });
+    },
+    [],
+  );
 
   const closeLightbox = useCallback(() => setState(null), []);
 
@@ -48,6 +65,8 @@ export function ImageLightboxProvider({ children }: PropsWithChildren) {
         <LightboxView
           images={state.images}
           startIndex={state.index}
+          caption={state.caption}
+          postId={state.postId}
           onClose={closeLightbox}
         />
       ) : null}
@@ -58,10 +77,14 @@ export function ImageLightboxProvider({ children }: PropsWithChildren) {
 function LightboxView({
   images,
   startIndex,
+  caption: captionText,
+  postId,
   onClose,
 }: {
   images: Attachment[];
   startIndex: number;
+  caption?: string;
+  postId?: string;
   onClose: () => void;
 }) {
   const [index, setIndex] = useState(startIndex);
@@ -92,6 +115,7 @@ function LightboxView({
   }, [goPrev, goNext, onClose]);
 
   const current = images[index];
+  const caption = captionText?.trim();
   if (!current) return null;
 
   return createPortal(
@@ -118,7 +142,14 @@ function LightboxView({
         download={current.filename}
         target="_blank"
         rel="noopener noreferrer"
-        onClick={(e) => e.stopPropagation()}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (postId) {
+            void postNoBody(
+              `/api/posts/${postId}/attachments/${current.id}/download`,
+            );
+          }
+        }}
         className="absolute right-16 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
         aria-label="Download"
       >
@@ -155,11 +186,8 @@ function LightboxView({
         </>
       ) : null}
 
-      <img
-        src={current.url}
-        alt={current.filename}
-        className="max-h-[92vh] max-w-[92vw] object-contain select-none"
-        draggable={false}
+      <div
+        className="relative inline-block max-h-[92vh] max-w-[92vw]"
         onClick={(e) => e.stopPropagation()}
         onTouchStart={(e) => {
           touchStartX.current = e.touches[0].clientX;
@@ -173,7 +201,21 @@ function LightboxView({
           }
           touchStartX.current = null;
         }}
-      />
+      >
+        <img
+          src={current.url}
+          alt={current.filename}
+          className="max-h-[92vh] max-w-[92vw] object-contain select-none"
+          draggable={false}
+        />
+        {caption ? (
+          <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent px-4 pb-4 pt-12 text-sm leading-snug text-white sm:px-5 sm:pb-5">
+            <div className="max-h-[32vh] overflow-y-auto whitespace-pre-wrap break-words">
+              {autolink(caption)}
+            </div>
+          </div>
+        ) : null}
+      </div>
     </div>,
     document.body,
   );