feat: social graph features

components/profile/profile-header.tsx

@@ -32,6 +32,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { Settings, X } from "lucide-react";
 import { cn } from "@/lib/utils";
+import type { RelationshipResult, RelationshipState } from "@/lib/social";
+import { ProfileActions } from "@/components/profile/profile-actions";
 
 export function ProfileHeader({
   avatarURL,
@@ -40,25 +42,57 @@ export function ProfileHeader({
   postCount,
   joinedAt,
   editHref,
+  followerCount,
+  followingCount,
+  relationship,
+  enableActions = false,
+  country,
 }: {
   avatarURL: string | null;
   name: string;
   handle: string;
   postCount?: number;
   joinedAt?: string;
+  /** ISO-2 account country, surfaced in the "More info" modal. */
+  country?: string | null;
   /** When provided, shows an "Edit profile" CTA below the handle AND
    *  the reading-settings gear. Acts as the canonical "this is my own
    *  profile" signal across the action row. */
   editHref?: string;
+  /** Accepted-follower / accepted-following totals for the stat line.
+   *  Omit to hide those two stats. */
+  followerCount?: number;
+  followingCount?: number;
+  /** The viewer's relationship to this profile (null for anonymous
+   *  viewers). Only consumed when `enableActions` is set. */
+  relationship?: RelationshipState | null;
+  /** Render the follow / block / report action row — set on OTHER users'
+   *  profiles (not the owner's /u/me, which shows Edit/Settings). Mount
+   *  this header with key={handle} so the live count + relationship state
+   *  below re-seeds cleanly when navigating between profiles. */
+  enableActions?: boolean;
 }) {
-  // Both action-row affordances are owner-only and ride on the same
-  // `editHref` signal — when it's absent we render no action row at
-  // all, which keeps visitor profile views clean.
-  const showReadingSettings = !!editHref;
-  const showActions = !!editHref;
+  // Owner affordances ride on `editHref`; the follow-action row rides on
+  // `enableActions`. Mutually exclusive by construction.
+  const showOwnerControls = !!editHref;
 
   const [zoomOpen, setZoomOpen] = useState(false);
 
+  // Live counts + relationship — seeded from props, updated in place after
+  // a follow/accept/block action so the stat line and buttons stay in sync
+  // 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 handleResult = (r: RelationshipResult) => {
+    setRel(r.relationship);
+    setFollowers(r.follower_count);
+    setFollowing(r.following_count);
+  };
+
+  const showCounts = typeof followerCount === "number";
+
   return (
     <>
       <header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
@@ -67,50 +101,59 @@ export function ProfileHeader({
           name={name}
           onZoom={avatarURL ? () => setZoomOpen(true) : undefined}
         />
-        <div className="space-y-1">
-          <h1 className="font-[family-name:var(--font-title)] font-semibold text-xl sm:text-2xl text-foreground leading-tight">
-            {name}
-          </h1>
-          <p className="text-sm text-muted-foreground">@{handle}</p>
-          {typeof postCount === "number" || joinedAt ? (
-            <p className="text-xs text-muted-foreground">
-              {typeof postCount === "number" ? (
-                <>
-                  <span className="tabular-nums">{postCount}</span> post
-                  {postCount === 1 ? "" : "s"}
-                </>
-              ) : null}
-              {typeof postCount === "number" && joinedAt ? " · " : null}
-              {joinedAt ? <>Joined {new Date(joinedAt).toLocaleDateString()}</> : null}
-            </p>
-          ) : null}
-        </div>
-        {showActions ? (
-          <div className="flex items-center gap-2">
-            {editHref ? (
-              <Link
-                href={editHref}
-                className="inline-flex items-center justify-center h-9 px-5 rounded-lg border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors"
-              >
-                Edit profile
-              </Link>
+        <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">
+              {name}
+            </h1>
+            <p className="text-sm text-muted-foreground">@{handle}</p>
+          </div>
+
+          {/* Stat line: posts · followers · following */}
+          <div className="flex items-center justify-center gap-5 sm:gap-7 pt-1 my-4">
+            {typeof postCount === "number" ? (
+              <Stat n={postCount} label={postCount === 1 ? "post" : "posts"} />
             ) : null}
-            {showReadingSettings ? (
-              <Link
-                href="/settings"
-                aria-label="Settings"
-                title="Settings"
-                className={cn(
-                  "size-9 inline-flex items-center justify-center rounded-lg",
-                  "border border-border text-foreground hover:bg-muted",
-                  "transition-colors outline-none",
-                  "focus-visible:ring-2 focus-visible:ring-ring",
-                )}
-              >
-                <Settings className="size-4" />
-              </Link>
+            {showCounts ? (
+              <>
+                <Stat n={followers} label="followers" />
+                <Stat n={following} label="following" />
+              </>
             ) : null}
           </div>
+        </div>
+
+        {showOwnerControls ? (
+          <div className="flex items-center gap-2">
+            <Link
+              href={editHref!}
+              className="inline-flex items-center justify-center h-9 px-5 rounded-lg border border-border text-sm font-medium text-foreground hover:bg-muted transition-colors"
+            >
+              Edit profile
+            </Link>
+            <Link
+              href="/settings"
+              aria-label="Settings"
+              title="Settings"
+              className={cn(
+                "size-9 inline-flex items-center justify-center rounded-lg",
+                "border border-border text-foreground hover:bg-muted",
+                "transition-colors outline-none",
+                "focus-visible:ring-2 focus-visible:ring-ring",
+              )}
+            >
+              <Settings className="size-4" />
+            </Link>
+          </div>
+        ) : enableActions ? (
+          <ProfileActions
+            handle={handle}
+            name={name}
+            joinedAt={joinedAt}
+            country={country}
+            relationship={rel}
+            onResult={handleResult}
+          />
         ) : null}
       </header>
       {avatarURL ? (
@@ -125,6 +168,16 @@ export function ProfileHeader({
   );
 }
 
+/** One inline profile stat — bold count over a muted label. */
+function Stat({ n, label }: { n: number; label: string }) {
+  return (
+    <div className="flex flex-col items-center leading-tight">
+      <span className="font-semibold text-lg text-foreground tabular-nums">{n}</span>
+      <span className="text-sm text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
 function Avatar({
   src,
   name,