fix: new user scroll fix, add image lightbox

components/social/post/post-card.tsx

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