spsays-training/components/feed/new-users-strip.tsx

"use client";

/**
 * NewUsersStrip — the "new on the platform" discovery row at the top of the
 * home feed. Up to 5 accounts that joined in the last 24h, each rendered as a
 * card tile. The row scrolls horizontally (native touch/trackpad swipe + a
 * mouse drag-to-scroll affordance) and bleeds to the section's edges with a
 * gutter so tiles peek in from the sides. Renders nothing when empty.
 */

import { useRef } from "react";
import Link from "next/link";
import type { UserSummary } from "@/lib/social";
import { UserAvatar } from "@/components/ui/user-avatar";

export function NewUsersStrip({ users }: { users: UserSummary[] }) {
  const scrollRef = useRef<HTMLDivElement>(null);
  // Mouse drag-to-scroll. Touch/trackpad use native overflow scrolling, so we
  // only engage for mouse; `moved` suppresses the click that would otherwise
  // fire after a drag (and navigate to a profile).
  const drag = useRef({
    down: false,
    startX: 0,
    startScroll: 0,
    moved: false,
    pointerId: -1,
    captured: false,
  });

  if (users.length === 0) return null;

  function onPointerDown(e: React.PointerEvent) {
    if (e.pointerType !== "mouse") return;
    const el = scrollRef.current;
    if (!el) return;
    // Record the start but DON'T capture yet — capturing here would retarget
    // the click to this container, so a plain click on a card never reaches
    // the <Link> (no navigation). We capture only once a real drag starts.
    drag.current = {
      down: true,
      startX: e.clientX,
      startScroll: el.scrollLeft,
      moved: false,
      pointerId: e.pointerId,
      captured: false,
    };
  }
  function onPointerMove(e: React.PointerEvent) {
    if (!drag.current.down) return;
    const el = scrollRef.current;
    if (!el) return;
    const dx = e.clientX - drag.current.startX;
    if (Math.abs(dx) > 4) {
      drag.current.moved = true;
      // Capture now so the drag keeps tracking even if the pointer leaves
      // the strip; a click (no movement) never gets here, so it navigates.
      if (!drag.current.captured) {
        el.setPointerCapture(drag.current.pointerId);
        drag.current.captured = true;
      }
    }
    if (drag.current.moved) el.scrollLeft = drag.current.startScroll - dx;
  }
  function onPointerUp() {
    if (!drag.current.down) return;
    drag.current.down = false;
    if (drag.current.captured) {
      scrollRef.current?.releasePointerCapture(drag.current.pointerId);
      drag.current.captured = false;
    }
  }
  function onClickCapture(e: React.MouseEvent) {
    if (drag.current.moved) {
      e.preventDefault();
      e.stopPropagation();
    }
  }

  return (
    <section className="rounded-xl">
      <div className="mb-4 flex items-center gap-2.5">
        <div className="min-w-0">
          <h2 className="text-sm font-semibold text-foreground">
            New to Prabhupāda Says
          </h2>
          <p className="text-xs text-muted-foreground">
            Welcome them by sending a follow request.
          </p>
        </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. */}
      <div
        ref={scrollRef}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        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"
      >
        {users.map((u) => (
          <Link
            key={u.handle}
            href={`/u/${u.handle}`}
            draggable={false}
            className="group snap-start shrink-0 w-32 flex flex-col items-center gap-2 rounded-xl bg-card ring-1 ring-foreground/10 px-3 py-4 text-center transition hover:ring-foreground/25 hover:bg-muted/40"
          >
            <UserAvatar
              src={u.avatar_url}
              name={u.name}
              className="size-16 group-hover:ring-foreground/30 transition"
            />
            <span className="block w-full truncate text-xs font-medium text-foreground">
              {u.name}
            </span>
            <span className="-mt-1 block w-full truncate text-[11px] text-muted-foreground">
              @{u.handle}
            </span>
          </Link>
        ))}
      </div>
    </section>
  );
}