From d3d054ad32551ce91198608d7a0a6d804eaa508d Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Wed, 27 May 2026 13:37:14 +0800
Subject: [PATCH] Toggle lightbox captions on image click

---
 .../messageStream/overlays/ImageLightbox.tsx  | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/messageStream/overlays/ImageLightbox.tsx b/src/components/messageStream/overlays/ImageLightbox.tsx
index 7f48097..a9aaa3a 100644
--- a/src/components/messageStream/overlays/ImageLightbox.tsx
+++ b/src/components/messageStream/overlays/ImageLightbox.tsx
@@ -84,6 +84,7 @@ function LightboxView({
   onClose: () => void;
 }) {
   const [index, setIndex] = useState(startIndex);
+  const [isCaptionVisible, setIsCaptionVisible] = useState(true);
   const touchStartX = useRef<number | null>(null);
 
   const goPrev = useCallback(
@@ -110,8 +111,13 @@ function LightboxView({
     };
   }, [goPrev, goNext, onClose]);
 
+  useEffect(() => {
+    setIsCaptionVisible(true);
+  }, [captionText, index]);
+
   const current = images[index];
   const caption = captionText?.trim();
+  const showCaption = !!caption && isCaptionVisible;
   if (!current) return null;
 
   return createPortal(
@@ -165,12 +171,15 @@ function LightboxView({
 
       <div
         className={`flex min-h-0 w-full flex-1 items-center justify-center px-4 pt-16 ${
-          caption ? "pb-3" : "pb-16"
+          showCaption ? "pb-3" : "pb-16"
         }`}
       >
         <div
-          className="max-h-full max-w-[92vw]"
-          onClick={(e) => e.stopPropagation()}
+          className="flex h-full w-full items-center justify-center"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (caption) setIsCaptionVisible((visible) => !visible);
+          }}
           onTouchStart={(e) => {
             touchStartX.current = e.touches[0].clientX;
           }}
@@ -187,13 +196,13 @@ function LightboxView({
           <img
             src={current.url}
             alt={current.filename}
-            className="max-h-full max-w-[92vw] object-contain select-none"
+            className="max-h-full max-w-full object-contain select-none"
             draggable={false}
           />
         </div>
       </div>
 
-      {caption ? (
+      {showCaption ? (
         <div
           className="shrink-0 border-t border-white/10 bg-gradient-to-t from-black via-black/90 to-black/70 px-4 py-4 text-sm leading-snug text-white sm:px-6"
           onClick={(e) => e.stopPropagation()}