337 lines
11 KiB
TypeScript
337 lines
11 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* CollectionScrollCard — Instagram-style horizontal carousel for one
|
|
* collection.
|
|
*
|
|
* • Slide 1 is the collection's "cover" — cover image (or themed
|
|
* gradient if none) overlaid with the title and item count.
|
|
* • Slides 2..N are PostGridCards for each post in the collection.
|
|
*
|
|
* Posts are fetched lazily: an IntersectionObserver triggers
|
|
* `collections.get(id)` the first time the carousel scrolls into view,
|
|
* so a feed of many collections doesn't blow N+1 requests on mount.
|
|
*
|
|
* The carousel uses native CSS scroll-snap (horizontal, mandatory) so
|
|
* touch swipes feel right on mobile. A page-dot indicator below tracks
|
|
* the current slide.
|
|
*/
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Globe,
|
|
Loader2,
|
|
Lock,
|
|
Pencil,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { collections, type Collection, type Post } from "@/lib/social";
|
|
import { PostGridCard } from "./post-grid-card";
|
|
import { quoteCardBgStyle } from "./post-card-shared";
|
|
|
|
type FetchState = "idle" | "loading" | "loaded" | "error";
|
|
|
|
export function CollectionScrollCard({
|
|
collection: c,
|
|
href,
|
|
initialPosts,
|
|
onEdit,
|
|
}: {
|
|
collection: Collection;
|
|
/** Link target for the "Open" footer + cover slide click-through. */
|
|
href: string;
|
|
/** Pre-loaded posts — skip the lazy fetch when the parent already has
|
|
* them (e.g. the single-collection page renders one card after its
|
|
* own collections.get call). */
|
|
initialPosts?: Post[];
|
|
/** When provided, shows a compact Edit chip in the cover slide's
|
|
* bottom-right corner. Owner-only — caller decides whether to pass it. */
|
|
onEdit?: () => void;
|
|
}) {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const cardRef = useRef<HTMLElement>(null);
|
|
// `fetched` only holds posts pulled by the lazy IntersectionObserver
|
|
// fetch. When the parent supplies `initialPosts`, we derive `posts`
|
|
// from it directly — no mirror-into-state effect required, which means
|
|
// fresh data from the parent (e.g. after an edit) shows up on the very
|
|
// next render without a setState-cascade.
|
|
const [fetched, setFetched] = useState<Post[]>([]);
|
|
const [fetchState, setFetchState] = useState<FetchState>(
|
|
initialPosts ? "loaded" : "idle",
|
|
);
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
const posts = initialPosts ?? fetched;
|
|
|
|
// Fetch posts the first time the carousel enters the viewport (with a
|
|
// 200px rootMargin so we kick it off just before it's visible). Skipped
|
|
// entirely when `initialPosts` was provided (fetchState starts at
|
|
// "loaded" in that case so the early-return below fires).
|
|
useEffect(() => {
|
|
if (fetchState !== "idle") return;
|
|
const el = cardRef.current;
|
|
if (!el) return;
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
for (const entry of entries) {
|
|
if (entry.isIntersecting) {
|
|
observer.disconnect();
|
|
setFetchState("loading");
|
|
collections
|
|
.get(c.id)
|
|
.then(({ posts: rows }) => {
|
|
setFetched(rows ?? []);
|
|
setFetchState("loaded");
|
|
})
|
|
.catch(() => setFetchState("error"));
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
{ rootMargin: "200px" },
|
|
);
|
|
observer.observe(el);
|
|
return () => observer.disconnect();
|
|
}, [c.id, fetchState]);
|
|
|
|
// Track which slide is currently snapped. We use scrollLeft / slideWidth
|
|
// rather than another observer because the slides are full-width siblings
|
|
// — much cheaper to compute.
|
|
function onScroll() {
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
const slideWidth = el.offsetWidth;
|
|
if (slideWidth === 0) return;
|
|
setActiveIndex(Math.round(el.scrollLeft / slideWidth));
|
|
}
|
|
|
|
function scrollByOne(direction: 1 | -1) {
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
el.scrollBy({ left: el.offsetWidth * direction, behavior: "smooth" });
|
|
}
|
|
|
|
const slideCount = 1 + posts.length;
|
|
const showArrows = slideCount > 1;
|
|
|
|
return (
|
|
<article ref={cardRef} className="space-y-3 select-none">
|
|
<div className="relative max-w-xl mx-auto">
|
|
<div
|
|
ref={scrollRef}
|
|
onScroll={onScroll}
|
|
className={cn(
|
|
"flex overflow-x-auto snap-x snap-mandatory rounded-2xl",
|
|
// Hide scrollbar — the carousel is gesture-driven; the dot
|
|
// indicator below tracks position.
|
|
"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
|
|
)}
|
|
>
|
|
{/* Cover slide */}
|
|
<CoverSlide collection={c} href={href} onEdit={onEdit} />
|
|
|
|
{/* Post slides (or placeholders while loading) */}
|
|
{fetchState === "loaded" &&
|
|
posts.map((p) => (
|
|
<div
|
|
key={p.id}
|
|
className="w-full shrink-0 snap-start p-px"
|
|
aria-roledescription="slide"
|
|
>
|
|
<PostGridCard post={p} />
|
|
</div>
|
|
))}
|
|
|
|
{fetchState === "loading" ? (
|
|
<div className="w-full shrink-0 snap-start aspect-square rounded-2xl bg-card ring-1 ring-foreground/10 flex items-center justify-center text-muted-foreground">
|
|
<Loader2 className="size-5 animate-spin" />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
{showArrows ? (
|
|
<>
|
|
<CarouselArrow
|
|
direction="prev"
|
|
onClick={() => scrollByOne(-1)}
|
|
disabled={activeIndex === 0}
|
|
/>
|
|
<CarouselArrow
|
|
direction="next"
|
|
onClick={() => scrollByOne(1)}
|
|
disabled={activeIndex >= slideCount - 1}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Dot indicator */}
|
|
{slideCount > 1 ? (
|
|
<div className="flex items-center justify-center gap-1.5">
|
|
{Array.from({ length: slideCount }).map((_, i) => (
|
|
<span
|
|
key={i}
|
|
className={cn(
|
|
"rounded-full transition-all",
|
|
i === activeIndex
|
|
? "size-1.5 bg-foreground"
|
|
: "size-1.5 bg-muted-foreground/40",
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</article>
|
|
);
|
|
}
|
|
|
|
// ─── Slide pieces ────────────────────────────────────────────────────────
|
|
|
|
function CoverSlide({
|
|
collection: c,
|
|
href,
|
|
onEdit,
|
|
}: {
|
|
collection: Collection;
|
|
href: string;
|
|
onEdit?: () => void;
|
|
}) {
|
|
// The slide wrapper hosts the Link AND any owner-action chip as
|
|
// siblings. Nesting a button inside the Link is an a11y anti-pattern
|
|
// (interactive nested in interactive), so we keep them peers and let
|
|
// DOM z-order put the chip on top of the Link's bottom-right corner.
|
|
return (
|
|
<div className="w-full shrink-0 snap-start relative aspect-square">
|
|
<Link
|
|
href={href}
|
|
className="absolute inset-0 rounded-2xl overflow-hidden ring-1 ring-foreground/10 select-none"
|
|
aria-label={`Open collection ${c.title}`}
|
|
>
|
|
{c.cover_url ? (
|
|
<>
|
|
<Image
|
|
src={c.cover_url}
|
|
alt=""
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
{/* Light scrim — enough darkness at the bottom for the title
|
|
and post-count line to read, but the top stays close to
|
|
the original image so the cover photo isn't muted into a
|
|
near-black plate. */}
|
|
<div className="absolute inset-0 bg-linear-to-t from-black/75 via-black/40 to-black/15" />
|
|
</>
|
|
) : (
|
|
<div className="absolute inset-0" style={quoteCardBgStyle()} />
|
|
)}
|
|
|
|
<div className="absolute top-4 right-4 inline-flex items-center gap-1.5 rounded-full bg-black/40 backdrop-blur-sm px-3 py-1 text-[0.6rem] uppercase tracking-[0.18em] font-medium text-white">
|
|
{c.is_public ? (
|
|
<Globe className="size-3" />
|
|
) : (
|
|
<Lock className="size-3" />
|
|
)}
|
|
Collection
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 flex flex-col p-6 sm:p-8",
|
|
// Text colour follows the surface underneath: white over the
|
|
// image's dark overlay, theme foreground over the flat
|
|
// fallback so it inverts cleanly with the palette.
|
|
c.cover_url ? "text-white" : "text-foreground",
|
|
c.cover_url
|
|
? "justify-end"
|
|
: "justify-center items-center text-center",
|
|
)}
|
|
>
|
|
<p
|
|
className={cn(
|
|
"font-(family-name:--font-title) text-2xl sm:text-3xl font-semibold leading-tight line-clamp-3 wrap-break-words",
|
|
c.cover_url && "drop-shadow-md",
|
|
)}
|
|
>
|
|
{c.title}
|
|
</p>
|
|
{c.description ? (
|
|
<p
|
|
className={cn(
|
|
"mt-2 text-sm line-clamp-2",
|
|
c.cover_url
|
|
? "text-white/85 max-w-md"
|
|
: "text-muted-foreground max-w-md mx-auto",
|
|
)}
|
|
>
|
|
{c.description}
|
|
</p>
|
|
) : null}
|
|
<p
|
|
className={cn(
|
|
"mt-3 text-[0.7rem] uppercase tracking-[0.22em] font-semibold",
|
|
c.cover_url ? "text-white/75" : "text-muted-foreground",
|
|
)}
|
|
>
|
|
{c.item_count} post{c.item_count === 1 ? "" : "s"} · Swipe to browse
|
|
→
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
|
|
{onEdit ? (
|
|
<button
|
|
type="button"
|
|
onClick={onEdit}
|
|
aria-label="Edit collection"
|
|
title="Edit collection"
|
|
className={cn(
|
|
"absolute bottom-3 right-3 z-10 inline-flex items-center gap-1",
|
|
"rounded-full bg-black/50 backdrop-blur-sm hover:bg-black/70",
|
|
"text-white text-[0.7rem] font-medium uppercase tracking-[0.16em]",
|
|
"px-2.5 py-1 transition-colors",
|
|
)}
|
|
>
|
|
<Pencil className="size-3" />
|
|
Edit
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CarouselArrow({
|
|
direction,
|
|
onClick,
|
|
disabled,
|
|
}: {
|
|
direction: "prev" | "next";
|
|
onClick: () => void;
|
|
disabled: boolean;
|
|
}) {
|
|
const Icon = direction === "prev" ? ChevronLeft : ChevronRight;
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
aria-label={direction === "prev" ? "Previous slide" : "Next slide"}
|
|
className={cn(
|
|
"hidden md:inline-flex absolute top-1/2 -translate-y-1/2 size-9 rounded-full",
|
|
"bg-black/40 text-white items-center justify-center backdrop-blur-sm",
|
|
"hover:bg-black/60 transition-all",
|
|
"disabled:opacity-0 disabled:pointer-events-none",
|
|
direction === "prev" ? "left-3" : "right-3",
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
</button>
|
|
);
|
|
}
|