From ed6e0023b8e6545c5d5bbd38e929dbffc49cbb7d Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 02:27:20 +0800
Subject: [PATCH] ui(lightbox): hide nav arrow at the gallery ends

Clamp goPrev / goNext instead of wrapping the index, and hide the
left chevron on the first image and the right chevron on the last
one. Arrow keys, swipe gestures, and the on-screen buttons all
behave like a linear gallery now, so users get a clear cue that
they have reached the end instead of unexpectedly looping back.
---
 .../messageStream/overlays/ImageLightbox.tsx  | 59 +++++++++----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/messageStream/overlays/ImageLightbox.tsx b/src/components/messageStream/overlays/ImageLightbox.tsx
index 617f9d3..fc5f32a 100644
--- a/src/components/messageStream/overlays/ImageLightbox.tsx
+++ b/src/components/messageStream/overlays/ImageLightbox.tsx
@@ -151,12 +151,11 @@ function LightboxView({
   const [isCaptionVisible, setIsCaptionVisible] = useState(true);
   const touchStartX = useRef<number | null>(null);
 
-  const goPrev = useCallback(
-    () => setIndex((i) => (i - 1 + images.length) % images.length),
-    [images.length],
-  );
+  // Clamp at the ends instead of wrapping; the nav arrows / swipe / arrow
+  // keys should all behave like a linear gallery, not a carousel.
+  const goPrev = useCallback(() => setIndex((i) => Math.max(0, i - 1)), []);
   const goNext = useCallback(
-    () => setIndex((i) => (i + 1) % images.length),
+    () => setIndex((i) => Math.min(images.length - 1, i + 1)),
     [images.length],
   );
 
@@ -234,31 +233,31 @@ function LightboxView({
 
       {/* Image stage */}
       <div className="relative flex min-h-0 w-full flex-1 items-center justify-center">
-        {hasMany ? (
-          <>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                goPrev();
-              }}
-              className="absolute left-2 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white shadow-lg ring-1 ring-white/25 transition hover:bg-black/80 md:left-6"
-              aria-label="Previous"
-            >
-              <ChevronLeft className="h-6 w-6" />
-            </button>
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation();
-                goNext();
-              }}
-              className="absolute right-2 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white shadow-lg ring-1 ring-white/25 transition hover:bg-black/80 md:right-6"
-              aria-label="Next"
-            >
-              <ChevronRight className="h-6 w-6" />
-            </button>
-          </>
+        {hasMany && index > 0 ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              goPrev();
+            }}
+            className="absolute left-2 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white shadow-lg ring-1 ring-white/25 transition hover:bg-black/80 md:left-6"
+            aria-label="Previous"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+        ) : null}
+        {hasMany && index < images.length - 1 ? (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              goNext();
+            }}
+            className="absolute right-2 top-1/2 z-10 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full bg-black/60 text-white shadow-lg ring-1 ring-white/25 transition hover:bg-black/80 md:right-6"
+            aria-label="Next"
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
         ) : null}
 
         <div