feat: add post like

components/profile/follow-list-drawer.tsx

@@ -1,40 +1,16 @@
 "use client";
 
 /**
- * FollowListDrawer — the followers / following list for a profile.
- *
- * Opens as a right-side drawer on desktop and a bottom sheet on mobile. The
- * list is virtualized (fixed-height rows) and paginated: it fetches a page at
- * a time from the BFF and loads the next page as you scroll near the bottom.
- * The search field queries the backend across the profile's followers /
- * following (debounced), so it works against the full set, not just the
- * loaded page.
- *
- * State-update notes (React 19 / set-state-in-effect rule): the (re)load runs
- * inside a debounce timer callback and pagination runs from the scroll
- * handler — never synchronously inside an effect body.
+ * FollowListDrawer — the followers / following list for a profile. A thin
+ * wrapper over the generic virtualized UserListDrawer, wired to the
+ * relationships followers/following endpoints.
  */
 
-import { useEffect, useRef, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { Loader2, Search } from "lucide-react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-} from "@/components/ui/drawer";
-import { useMediaQuery } from "@/components/selection-toolbar/shared";
-import { relationships, type UserSummary } from "@/lib/social";
-import { cn } from "@/lib/utils";
+import { relationships } from "@/lib/social";
+import { UserListDrawer } from "@/components/social/user-list-drawer";
 
 export type FollowMode = "followers" | "following";
 
-const PAGE = 30;
-const ROW = 64; // px — fixed row height for the virtualizer
-
 export function FollowListDrawer({
   open,
   mode,
@@ -46,227 +22,17 @@ export function FollowListDrawer({
   handle: string;
   onClose: () => void;
 }) {
-  const isMobile = useMediaQuery("(max-width: 767px)");
-  const direction = isMobile ? "bottom" : "right";
-
-  const [q, setQ] = useState("");
-  const [items, setItems] = useState<UserSummary[]>([]);
-  const [total, setTotal] = useState(0);
-  const [status, setStatus] = useState<"idle" | "loading" | "error">("idle");
-
-  // reqRef tags the current query "session"; a newer reload bumps it so any
-  // in-flight reload/append for an older query is ignored on arrival.
-  const reqRef = useRef(0);
-  const busyRef = useRef(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  const fetchPage = mode === "followers" ? relationships.followers : relationships.following;
-
-  // (Re)load page 0 whenever the drawer opens or the mode/handle/query
-  // changes. Debounced so typing in search doesn't spam the BFF.
-  useEffect(() => {
-    if (!open) return;
-    const t = window.setTimeout(() => {
-      const token = ++reqRef.current;
-      busyRef.current = true;
-      setItems([]);
-      setStatus("loading");
-      fetchPage(handle, { q, limit: PAGE, offset: 0 })
-        .then((res) => {
-          if (reqRef.current !== token) return;
-          setItems(res.users);
-          setTotal(res.total);
-          setStatus("idle");
-        })
-        .catch(() => {
-          if (reqRef.current === token) setStatus("error");
-        })
-        .finally(() => {
-          if (reqRef.current === token) busyRef.current = false;
-        });
-    }, 250);
-    return () => window.clearTimeout(t);
-  }, [open, mode, handle, q, fetchPage]);
-
-  function loadMore() {
-    if (busyRef.current || items.length >= total) return;
-    const token = reqRef.current; // same session — don't bump
-    const offset = items.length;
-    busyRef.current = true;
-    setStatus("loading");
-    fetchPage(handle, { q, limit: PAGE, offset })
-      .then((res) => {
-        if (reqRef.current !== token) return;
-        setItems((prev) => [...prev, ...res.users]);
-        setTotal(res.total);
-        setStatus("idle");
-      })
-      .catch(() => {
-        if (reqRef.current === token) setStatus("error");
-      })
-      .finally(() => {
-        if (reqRef.current === token) busyRef.current = false;
-      });
-  }
-
-  // TanStack Virtual returns non-memoizable functions; the React Compiler
-  // simply skips memoizing this component, which is fine here.
-  // eslint-disable-next-line react-hooks/incompatible-library
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => ROW,
-    overscan: 8,
-  });
-
-  const empty = status !== "loading" && items.length === 0;
-
   return (
-    <Drawer
+    <UserListDrawer
       open={open}
-      direction={direction}
-      onOpenChange={(o) => {
-        if (!o) onClose();
-      }}
-    >
-      <DrawerContent
-        direction={direction}
-        className={cn(
-          "bg-card flex flex-col",
-          isMobile ? "h-[85vh]" : "h-full w-[88vw] max-w-sm",
-        )}
-      >
-        <DrawerHeader className="border-b border-border text-left">
-          <DrawerTitle className="text-base capitalize">{mode}</DrawerTitle>
-          <div className="relative mt-2">
-            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <input
-              type="search"
-              value={q}
-              onChange={(e) => setQ(e.target.value)}
-              placeholder={`Search ${mode}`}
-              autoComplete="off"
-              className="w-full rounded-lg border border-border bg-background py-2 pl-9 pr-3 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
-            />
-          </div>
-        </DrawerHeader>
-
-        <div
-          ref={scrollRef}
-          onScroll={(e) => {
-            const el = e.currentTarget;
-            if (el.scrollHeight - el.scrollTop - el.clientHeight < 240) {
-              loadMore();
-            }
-          }}
-          className="flex-1 min-h-0 overflow-y-auto overscroll-contain"
-        >
-          {status === "error" ? (
-            <Message>Couldn&apos;t load. Pull down to retry.</Message>
-          ) : empty ? (
-            <Message>
-              {q.trim()
-                ? "No matches."
-                : mode === "followers"
-                  ? "No followers yet."
-                  : "Not following anyone yet."}
-            </Message>
-          ) : (
-            <div
-              style={{
-                height: virtualizer.getTotalSize(),
-                position: "relative",
-                width: "100%",
-              }}
-            >
-              {virtualizer.getVirtualItems().map((vi) => {
-                const u = items[vi.index];
-                if (!u) return null;
-                return (
-                  <div
-                    key={vi.key}
-                    style={{
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: vi.size,
-                      transform: `translateY(${vi.start}px)`,
-                    }}
-                  >
-                    <Row user={u} onNavigate={onClose} />
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {status === "loading" ? (
-            <div className="flex justify-center py-4">
-              <Loader2 className="size-5 animate-spin text-muted-foreground" />
-            </div>
-          ) : null}
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-}
-
-function Row({
-  user,
-  onNavigate,
-}: {
-  user: UserSummary;
-  onNavigate: () => void;
-}) {
-  return (
-    <Link
-      href={`/u/${user.handle}`}
-      onClick={onNavigate}
-      className="flex h-16 items-center gap-3 px-4 transition-colors hover:bg-muted/50"
-    >
-      <RowAvatar src={user.avatar_url} name={user.name} />
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-semibold text-foreground">
-          {user.name}
-        </p>
-        <p className="truncate text-sm text-muted-foreground">@{user.handle}</p>
-      </div>
-    </Link>
-  );
-}
-
-function RowAvatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={40}
-        height={40}
-        className="size-10 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
-function Message({ children }: { children: React.ReactNode }) {
-  return (
-    <p className="px-4 py-10 text-center text-sm text-muted-foreground">
-      {children}
-    </p>
+      onClose={onClose}
+      title={mode === "followers" ? "Followers" : "Following"}
+      depsKey={`${mode}:${handle}`}
+      fetchPage={(params) =>
+        mode === "followers"
+          ? relationships.followers(handle, params)
+          : relationships.following(handle, params)
+      }
+    />
   );
 }

components/profile/profile-header.tsx

@@ -87,7 +87,9 @@ export function ProfileHeader({
   // without a refetch. Re-seeds per profile via the call-site key.
   const [followers, setFollowers] = useState(followerCount ?? 0);
   const [following, setFollowing] = useState(followingCount ?? 0);
-  const [rel, setRel] = useState<RelationshipState | null>(relationship ?? null);
+  const [rel, setRel] = useState<RelationshipState | null>(
+    relationship ?? null,
+  );
 
   // Which follow list (if any) is open in the drawer.
   const [followList, setFollowList] = useState<FollowMode | null>(null);
@@ -110,7 +112,7 @@ export function ProfileHeader({
         />
         <div className="space-y-2">
           <div className="space-y-1">
-            <h1 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground leading-tight">
+            <h1 className="font-(family-name:--font-title) font-semibold text-xl sm:text-2xl text-foreground leading-tight">
               {name}
             </h1>
             <p className="text-sm text-muted-foreground">@{handle}</p>