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<number | null>(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({
           </button>
         ) : null}
 
+        {showSaveHint ? (
+          <div className="pointer-events-none fixed inset-x-0 top-[58%] z-30 flex -translate-y-1/2 justify-center px-4">
+            <div
+              className="pointer-events-auto relative flex w-44 max-w-[calc(100vw-2rem)] flex-col items-center gap-1.5 rounded-xl bg-black/70 px-4 py-3 text-center text-white shadow-2xl ring-1 ring-white/20 backdrop-blur-md animate-scale-in"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <button
+                type="button"
+                onClick={() => setShowSaveHint(false)}
+                className="absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-white/10 text-white/80 transition hover:bg-white/20 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+                aria-label="Close hint"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-white/15 text-2xl animate-bounce">
+                ☝️
+              </div>
+              <div className="max-w-full break-words text-xs font-medium leading-4">
+                {t("longPressImageSave")}
+              </div>
+            </div>
+          </div>
+        ) : null}
+
         <div
           className="flex h-full w-full items-center justify-center px-4 py-2"
           onClick={(e) => {