krispire/spsays-training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: new user scroll fix, add image lightbox

Browse Source
This commit is contained in:
gosangam
2026-08-09 10:58:49 +05:30
parent ce373e3e03
commit df49e7afcc
4 changed files with 271 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/feed/new-users-strip.tsx
+8 -3
View File
@@ -89,8 +89,13 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
</div>
</div>
{/* Bleed to the section edges (-mx-5) but keep a px-5 gutter so the
first/last tiles have breathing room as they scroll past. */}
{/* Bleed to the page edges, with a matching inner gutter so the first and
last tiles still have breathing room as they scroll past.
The negative margin MUST match the feed container's horizontal padding
(`main` is `px-4 sm:px-6`). It was `-mx-5` (20px) against a 16px
mobile padding, so the row hung 4px past each edge and gave the whole
document a horizontal scrollbar. Keep these three in lockstep with the
page padding if it ever changes. */}
<div
ref={scrollRef}
onPointerDown={onPointerDown}
@@ -98,7 +103,7 @@ export function NewUsersStrip({ users }: { users: UserSummary[] }) {
onPointerUp={onPointerUp}
onPointerCancel={onPointerUp}
onClickCapture={onClickCapture}
className="-mx-5 flex gap-3 overflow-x-auto px-5 py-1 snap-x scroll-px-5 cursor-grab select-none active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
className="-mx-4 sm:-mx-6 flex gap-3 overflow-x-auto px-4 sm:px-6 py-1 snap-x scroll-px-4 sm:scroll-px-6 cursor-grab select-none active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
>
{users.map((u) => (
<Link
components/social/post/post-card.tsx
+29 -4
View File
@@ -20,6 +20,7 @@
* posts (or imported data) still scroll to + highlight the text on click.
*/
import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ExternalLink, Repeat2 } from "lucide-react";
@@ -30,6 +31,7 @@ import { UserAvatar } from "@/components/ui/user-avatar";
import { timeAgo } from "@/lib/time";
import { PostActionsFooter } from "./post-actions-footer";
import { PostCardMenu } from "./post-card-menu";
import { PostImageLightbox } from "./post-image-lightbox";
export function PostCard({
post,
@@ -38,6 +40,11 @@ export function PostCard({
post: Post;
onDelete?: (id: string) => void;
}) {
// Which attached photo the full-screen viewer is showing (null = closed).
// Owned here rather than inside the lightbox so the thumbnails can open it
// at their own index.
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
const sourceHref =
hasHighlight(post.source_url) || !post.caption
? post.source_url
@@ -125,10 +132,20 @@ export function PostCard({
: "grid-cols-3"
}`}
>
{post.images.map((img) => (
<div
{post.images.map((img, i) => (
// Each thumbnail opens the full-screen viewer at its own index.
// A <button> rather than a click-handled <div> so it's keyboard
// reachable and announced — the grid is the only way in.
<button
key={img.id}
className="relative aspect-square rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10"
type="button"
onClick={() => setLightboxIndex(i)}
aria-label={
post.images.length > 1
? `View photo ${i + 1} of ${post.images.length}`
: "View photo"
}
className="relative aspect-square rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10 cursor-zoom-in transition hover:ring-foreground/30 outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
<Image
src={img.url}
@@ -138,11 +155,19 @@ export function PostCard({
className="object-cover"
unoptimized
/>
</div>
</button>
))}
</div>
) : null}
<PostImageLightbox
images={post.images ?? []}
index={lightboxIndex}
caption={post.caption}
onIndexChange={setLightboxIndex}
onClose={() => setLightboxIndex(null)}
/>
<div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
<Link
href={sourceHref}
components/social/post/post-image-lightbox.tsx
+168
View File
@@ -0,0 +1,168 @@
"use client";
/**
* PostImageLightbox — full-screen viewer for a post's attached photos.
*
* Opened by tapping any image on a PostCard. Controlled by the caller: `index`
* is the photo being shown (null = closed), so the card owns the state and this
* component stays a pure presentation layer.
*
* Dismiss: tap the backdrop ring around the photo, the ✕, or press Escape.
* Navigate a multi-photo post with ← / → or the on-screen chevrons.
*
* Rendered through a portal onto <body> so it escapes the feed's virtualised,
* transformed rows — an overlay nested inside one of those would be clipped by
* the row's stacking context and positioned against the transform, not the
* viewport.
*/
import { useCallback, useEffect } from "react";
import { createPortal } from "react-dom";
import Image from "next/image";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import type { PostImage } from "@/lib/social";
export function PostImageLightbox({
images,
index,
caption,
onIndexChange,
onClose,
}: {
images: PostImage[];
/** Photo currently shown; null closes the viewer. */
index: number | null;
/** The post's caption, shown in a gradient scrim along the bottom.
* Clamped to three lines with an ellipsis so a long passage can't cover
* the photo. Omit (or pass empty) to hide the scrim entirely. */
caption?: string | null;
onIndexChange: (i: number) => void;
onClose: () => void;
}) {
const open = index !== null;
const count = images.length;
// Wrap around at both ends so a long press on → never dead-ends.
const goPrev = useCallback(() => {
if (index === null || count < 2) return;
onIndexChange((index - 1 + count) % count);
}, [index, count, onIndexChange]);
const goNext = useCallback(() => {
if (index === null || count < 2) return;
onIndexChange((index + 1) % count);
}, [index, count, onIndexChange]);
useEffect(() => {
if (!open) return;
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") onClose();
else if (e.key === "ArrowLeft") goPrev();
else if (e.key === "ArrowRight") goNext();
}
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose, goPrev, goNext]);
// Lock body scroll while open so the feed underneath doesn't drift.
useEffect(() => {
if (!open) return;
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = prev;
};
}, [open]);
if (!open || typeof document === "undefined") return null;
const img = images[index];
if (!img) return null;
return createPortal(
<div
role="dialog"
aria-modal="true"
aria-label={
count > 1 ? `Photo ${index + 1} of ${count}` : "Photo"
}
onClick={onClose}
className="fixed inset-0 z-100 bg-black/90 backdrop-blur-sm animate-in fade-in-0"
>
{/* The photo sits inset from the edges, leaving a genuine backdrop ring
that closes on tap. `fill` resolves against this box (padding would
NOT inset an absolutely-positioned child), hence inset-* rather than
p-*. stopPropagation keeps a tap on the photo itself from closing. */}
<div
onClick={(e) => e.stopPropagation()}
className="absolute inset-4 sm:inset-12"
>
<Image
// Keyed so switching photos swaps the element instead of
// cross-fading a stale bitmap into the new slot.
key={img.id}
src={img.url}
alt=""
fill
sizes="100vw"
className="object-contain"
unoptimized
priority
/>
</div>
<button
type="button"
onClick={onClose}
aria-label="Close"
className="fixed top-4 right-4 size-10 inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
>
<X className="size-5" />
</button>
{count > 1 ? (
<>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
goPrev();
}}
aria-label="Previous photo"
className="fixed left-2 sm:left-4 top-1/2 -translate-y-1/2 size-10 inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
>
<ChevronLeft className="size-5" />
</button>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
goNext();
}}
aria-label="Next photo"
className="fixed right-2 sm:right-4 top-1/2 -translate-y-1/2 size-10 inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
>
<ChevronRight className="size-5" />
</button>
{/* Counter sits top-left so it never collides with the caption
scrim along the bottom. */}
<span className="fixed top-5 left-4 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white tabular-nums">
{index + 1} / {count}
</span>
</>
) : null}
{/* Caption scrim. `pointer-events-none` so it never intercepts a tap
meant for the backdrop — the whole strip stays click-to-close — and
the gradient fades upward so the photo's lower edge stays readable
rather than being cut by a hard band. */}
{caption?.trim() ? (
<div className="pointer-events-none fixed inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/60 to-transparent px-4 pt-16 pb-6">
<p className="mx-auto max-w-2xl text-center font-(family-name:--font-title) text-sm sm:text-base leading-relaxed text-white/95 line-clamp-3">
&ldquo;{caption.trim()}&rdquo;
</p>
</div>
) : null}
</div>,
document.body,
);
}
components/social/post/post-scroll-card.tsx
+66 -8
View File
@@ -40,6 +40,7 @@ import { useAuth } from "@/components/auth/auth-provider";
import { postSourceHref, quoteCardBgStyle } from "./post-card-shared";
import { PostActionsFooter } from "./post-actions-footer";
import { PostCardMenu } from "./post-card-menu";
import { PostImageLightbox } from "./post-image-lightbox";
import { FeedFollowButton } from "./feed-follow-button";
import { UpdateBackgroundModal } from "../update-background-modal";
import { MentionsDrawer } from "../mentions-drawer";
@@ -68,6 +69,8 @@ export function PostScrollCard({
const { user } = useAuth();
const isAuthor = !!user && user.id === post.user_id;
const [bgModal, setBgModal] = useState(false);
// Which attached photo the full-screen viewer is showing (null = closed).
const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
const [expanded, setExpanded] = useState(false);
const [mentionsOpen, setMentionsOpen] = useState(false);
// Live mention count — seeded from the hydrated post, adjusted when the
@@ -176,7 +179,7 @@ export function PostScrollCard({
{/* Media — image carousel or gradient-with-quote */}
<div className="relative">
{hasImages ? (
<ImageCarousel images={images} />
<ImageCarousel images={images} onOpen={setLightboxIndex} />
) : (
<QuotePanel post={post} />
)}
@@ -225,14 +228,36 @@ export function PostScrollCard({
onClose={() => setMentionsOpen(false)}
onCountChange={(d) => setMentionCount((c) => Math.max(0, c + d))}
/>
<PostImageLightbox
images={images}
index={lightboxIndex}
caption={post.caption}
onIndexChange={setLightboxIndex}
onClose={() => setLightboxIndex(null)}
/>
</article>
);
}
// ─── Pieces ──────────────────────────────────────────────────────────────
function ImageCarousel({ images }: { images: PostImage[] }) {
function ImageCarousel({
images,
onOpen,
}: {
images: PostImage[];
/** Tapping a slide opens the full-screen viewer at that index. */
onOpen: (index: number) => void;
}) {
const [active, setActive] = useState(0);
const scrollerRef = useRef<HTMLDivElement>(null);
// Where the pointer went down, plus the scroller's position at that moment.
// Swiping the carousel and tapping a photo have to stay independent: the
// carousel scrolls natively (CSS scroll-snap), and browsers still fire a
// click after some swipe gestures. Comparing both the pointer travel AND
// whether the strip actually scrolled lets us drop those.
const tapStart = useRef({ x: 0, y: 0, scrollLeft: 0 });
function onScroll(e: React.UIEvent<HTMLDivElement>) {
const el = e.currentTarget;
@@ -241,9 +266,35 @@ function ImageCarousel({ images }: { images: PostImage[] }) {
setActive(Math.round(el.scrollLeft / w));
}
function onPointerDown(e: React.PointerEvent) {
tapStart.current = {
x: e.clientX,
y: e.clientY,
scrollLeft: scrollerRef.current?.scrollLeft ?? 0,
};
}
/** True only for a genuine tap — barely any pointer travel and no scroll. */
function wasTap(e: React.MouseEvent) {
const moved =
Math.abs(e.clientX - tapStart.current.x) > 8 ||
Math.abs(e.clientY - tapStart.current.y) > 8;
const scrolled =
Math.abs(
(scrollerRef.current?.scrollLeft ?? 0) - tapStart.current.scrollLeft,
) > 4;
return !moved && !scrolled;
}
if (images.length === 1) {
// Single image: no scroller, so every click is unambiguously a tap.
return (
<div className="relative aspect-square bg-muted">
<button
type="button"
onClick={() => onOpen(0)}
aria-label="View photo"
className="relative block w-full aspect-square bg-muted cursor-zoom-in outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
>
<Image
src={images[0].url}
alt=""
@@ -252,13 +303,14 @@ function ImageCarousel({ images }: { images: PostImage[] }) {
className="object-cover"
unoptimized
/>
</div>
</button>
);
}
return (
<div className="relative">
<div
ref={scrollerRef}
onScroll={onScroll}
className={cn(
"flex overflow-x-auto snap-x snap-mandatory",
@@ -266,11 +318,17 @@ function ImageCarousel({ images }: { images: PostImage[] }) {
)}
>
{images.map((img, i) => (
<div
<button
key={img.id}
className="relative w-full shrink-0 snap-start aspect-square bg-muted"
type="button"
onPointerDown={onPointerDown}
onClick={(e) => {
if (!wasTap(e)) return; // that was a swipe — let it scroll
onOpen(i);
}}
aria-roledescription="slide"
aria-label={`${i + 1} of ${images.length}`}
aria-label={`View photo ${i + 1} of ${images.length}`}
className="relative block w-full shrink-0 snap-start aspect-square bg-muted cursor-zoom-in outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
>
<Image
src={img.url}
@@ -280,7 +338,7 @@ function ImageCarousel({ images }: { images: PostImage[] }) {
className="object-cover"
unoptimized
/>
</div>
</button>
))}
</div>
<div className="absolute inset-x-0 bottom-3 flex items-center justify-center gap-1.5 pointer-events-none">