diff --git a/src/components/messageStream/overlays/ImageLightbox.tsx b/src/components/messageStream/overlays/ImageLightbox.tsx index d14d51d..7b2dc2c 100644 --- a/src/components/messageStream/overlays/ImageLightbox.tsx +++ b/src/components/messageStream/overlays/ImageLightbox.tsx @@ -10,6 +10,7 @@ import { import { createPortal } from "react-dom"; import { ChevronLeft, ChevronRight, X } from "lucide-react"; import type { Attachment } from "../../../types/post"; +import { useI18n } from "../../../i18n"; import { AttachmentDownloadPill } from "../AttachmentDownloadPill"; import { BubbleImage } from "../BubbleImage"; import { autolink } from "../utils/autolink"; @@ -147,8 +148,10 @@ function LightboxView({ postId?: string; onClose: () => void; }) { + const { t } = useI18n(); const [index, setIndex] = useState(startIndex); const [isCaptionVisible, setIsCaptionVisible] = useState(true); + const [showSaveHint, setShowSaveHint] = useState(true); const touchStartX = useRef(null); // Clamp at the ends instead of wrapping; the nav arrows / swipe / arrow @@ -187,6 +190,12 @@ function LightboxView({ }, [captionText, index]); const current = images[index]; + + useEffect(() => { + const timer = window.setTimeout(() => setShowSaveHint(false), 2000); + return () => window.clearTimeout(timer); + }, []); + const caption = captionText?.trim(); const showCaption = !!caption && isCaptionVisible; const hasMany = images.length > 1; @@ -260,6 +269,30 @@ function LightboxView({ ) : null} + {showSaveHint ? ( +
+
e.stopPropagation()} + > + +
+ ☝️ +
+
+ {t("longPressImageSave")} +
+
+
+ ) : null} +
{