terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

terry-staging #11

Merged
terry merged 37 commits from terry-staging into main 2026-05-29 19:29:58 +00:00
Conversation 0 Commits 37 Files Changed 39 +29 -30
1 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ed6e0023b8 - Show all commits

59
src/components/messageStream/overlays/ImageLightbox.tsx
View File

@@ -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