feat: social graph features

app/(app)/notifications/page.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+/**
+ * /notifications — the signed-in user's notification feed.
+ *
+ * Lists everything newest-first and marks the whole feed read on open
+ * (fire-and-forget), so the header bell's unread dot clears after a
+ * visit. Each row links to the actor's profile, where follow requests can
+ * be accepted/rejected.
+ *
+ * Anonymous visitors are bounced through the auth gate (then home if they
+ * dismiss it), mirroring /u/me.
+ */
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+import { Bell } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { notifications, type AppNotification } from "@/lib/social";
+
+export default function NotificationsPage() {
+  const { user, loading } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const router = useRouter();
+
+  const [items, setItems] = useState<AppNotification[]>([]);
+  const [state, setState] = useState<"loading" | "ready" | "error">("loading");
+
+  // Auth gate — same pattern as /u/me.
+  useEffect(() => {
+    if (loading || user) return;
+    let cancelled = false;
+    (async () => {
+      const ok = await requireAuth();
+      if (!ok && !cancelled) router.replace("/");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, user, requireAuth, router]);
+
+  // Load the feed + mark everything read once we have a user.
+  useEffect(() => {
+    if (!user) return;
+    let cancelled = false;
+    notifications
+      .list()
+      .then((rows) => {
+        if (!cancelled) {
+          setItems(rows ?? []);
+          setState("ready");
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setState("error");
+      });
+    notifications.markAllRead().catch(() => {
+      /* non-critical */
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [user]);
+
+  if (loading || !user) {
+    return (
+      <main className="flex-1 flex items-center justify-center px-4 py-12">
+        <p className="text-sm text-muted-foreground">
+          {loading ? "Loading…" : "Sign in to view your notifications."}
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-6 space-y-6">
+      <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground">
+        Notifications
+      </h1>
+
+      {state === "error" ? (
+        <p className="text-sm text-destructive">
+          Could not load notifications. Please try again.
+        </p>
+      ) : state === "loading" ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : items.length === 0 ? (
+        <Empty />
+      ) : (
+        <ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
+          {items.map((n) => (
+            <NotificationRow key={n.id} n={n} />
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}
+
+function NotificationRow({ n }: { n: AppNotification }) {
+  const display = n.actor_name || (n.actor_handle ? `@${n.actor_handle}` : "Someone");
+  const message = messageFor(n.kind);
+  const unread = !n.read_at;
+
+  const body = (
+    <div
+      className={cnRow(unread)}
+    >
+      <Avatar src={n.actor_avatar_url ?? null} name={display} />
+      <div className="min-w-0 flex-1">
+        <p className="text-sm text-foreground leading-snug">
+          <span className="font-semibold">{display}</span> {message}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {timeAgo(n.created_at)}
+        </p>
+      </div>
+      {unread ? (
+        <span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
+      ) : null}
+    </div>
+  );
+
+  // Link to the actor's profile when we know their handle.
+  return n.actor_handle ? (
+    <li>
+      <Link href={`/u/${n.actor_handle}`} className="block">
+        {body}
+      </Link>
+    </li>
+  ) : (
+    <li>{body}</li>
+  );
+}
+
+function cnRow(unread: boolean) {
+  return [
+    "flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50",
+    unread ? "bg-primary/5" : "",
+  ].join(" ");
+}
+
+/** Human-readable tail for each notification kind. Add cases as new
+ *  notification kinds are introduced on the backend. */
+function messageFor(kind: string): string {
+  switch (kind) {
+    case "follow_request":
+      return "requested to follow you.";
+    case "follow_accepted":
+      return "accepted your follow request.";
+    default:
+      return "sent you a notification.";
+  }
+}
+
+function Avatar({ src, name }: { src: string | null; name: string }) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={40}
+        height={40}
+        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
+        unoptimized
+      />
+    );
+  }
+  const initials =
+    name
+      .replace(/^@/, "")
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div className="size-10 shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10">
+      {initials}
+    </div>
+  );
+}
+
+function Empty() {
+  return (
+    <div className="flex flex-col items-center text-center gap-3 py-16 text-muted-foreground">
+      <Bell className="size-8" />
+      <p className="text-sm">No notifications yet.</p>
+    </div>
+  );
+}
+
+/** Compact relative time ("just now", "5m", "3h", "2d"), falling back to
+ *  a date for anything older than a week. */
+function timeAgo(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
+  if (secs < 45) return "just now";
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString();
+}

app/(app)/u/[handle]/layout.tsx

@@ -120,11 +120,17 @@ export default function PublicProfileLayout(props: {
   return (
     <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
       <ProfileHeader
+        key={data.handle}
         avatarURL={data.avatar_url}
         name={data.name}
         handle={data.handle}
         postCount={data.post_count}
+        followerCount={data.follower_count}
+        followingCount={data.following_count}
+        relationship={data.relationship}
+        enableActions
         joinedAt={data.joined_at}
+        country={data.country}
       />
       <ProfileTabs tabs={tabs} />
       <PublicProfileContext.Provider value={data}>

app/(app)/u/me/layout.tsx

@@ -13,7 +13,7 @@
  * via a query param (kept simple — no new route for the form).
  */
 
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
   AtSign,
@@ -23,6 +23,7 @@ import {
 } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
+import { profile } from "@/lib/social";
 import { ProfileHeader } from "@/components/profile/profile-header";
 import { ProfileTabs, type ProfileTab } from "@/components/profile/profile-tabs";
 
@@ -43,6 +44,37 @@ export default function MeLayout({ children }: { children: React.ReactNode }) {
     };
   }, [loading, user, requireAuth, router]);
 
+  // Own profile counts (posts / followers / following) for the header
+  // stat line. /auth/me doesn't carry these, so we read them from the
+  // public profile endpoint (which returns no relationship for self).
+  const [counts, setCounts] = useState<{
+    posts: number;
+    followers: number;
+    following: number;
+  } | null>(null);
+  const handle = user?.handle;
+  useEffect(() => {
+    if (!handle) return;
+    let cancelled = false;
+    profile
+      .get(handle)
+      .then((p) => {
+        if (!cancelled) {
+          setCounts({
+            posts: p.post_count,
+            followers: p.follower_count,
+            following: p.following_count,
+          });
+        }
+      })
+      .catch(() => {
+        /* counts are non-critical; leave the stat line minimal on error */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [handle]);
+
   if (loading || !user) {
     return (
       <main className="flex-1 flex items-center justify-center px-4 py-12">
@@ -80,11 +112,16 @@ export default function MeLayout({ children }: { children: React.ReactNode }) {
   return (
     <main className="flex-1 max-w-3xl w-full mx-auto px-4 sm:px-6">
       <ProfileHeader
+        // Re-seed the header's count state once the async counts land.
+        key={counts ? "me-ready" : "me-pending"}
         avatarURL={user.avatar_url}
         name={user.name}
         handle={user.handle}
         joinedAt={user.created_at}
         editHref="/u/me?edit=1"
+        postCount={counts?.posts}
+        followerCount={counts?.followers}
+        followingCount={counts?.following}
       />
       {/* Tab strip hides on /u/me?edit=1 (see ConditionalTabs). The
           Suspense boundary is required by Next.js because useSearchParams

components/notification-bell.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+/**
+ * NotificationBell — header affordance for signed-in users. Links to the
+ * /notifications page and shows a dot when there are unread items. The
+ * unread count is fetched once on mount (good enough until websocket/push
+ * delivery lands); visiting the page marks everything read.
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { Bell } from "lucide-react";
+import { notifications } from "@/lib/social";
+
+export function NotificationBell() {
+  const [unread, setUnread] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    notifications
+      .unreadCount()
+      .then((r) => {
+        if (!cancelled) setUnread(r?.count ?? 0);
+      })
+      .catch(() => {
+        /* badge is non-critical — ignore */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <Link
+      href="/notifications"
+      aria-label={
+        unread > 0 ? `Notifications (${unread} unread)` : "Notifications"
+      }
+      className="relative size-9 inline-flex items-center justify-center rounded-lg text-foreground hover:bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <Bell className="size-5" />
+      {unread > 0 ? (
+        <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary ring-2 ring-background" />
+      ) : null}
+    </Link>
+  );
+}

components/profile/profile-actions.tsx

@@ -0,0 +1,853 @@
+"use client";
+
+/**
+ * ProfileActions — the action row on someone else's profile header.
+ *
+ * Renders a primary follow button whose label/behaviour is derived from
+ * the viewer's RelationshipState toward the target, plus a shield
+ * overflow button opening a menu (Remove from followers / Block / Report).
+ *
+ * Follows are REQUEST-BASED: pressing "Follow" sends a request that the
+ * target accepts or rejects later, so the button flips to "Requested"
+ * (tap again to cancel) rather than straight to "Following".
+ *
+ * Primary button by state (viewer → target):
+ *   • they've requested you      → "Accept" + "Reject"
+ *   • you follow them            → "Unfollow"
+ *   • you've requested them      → "Requested"   (tap = cancel)
+ *   • they follow you            → "Follow back"
+ *   • no edge                    → "Follow"
+ *   • you blocked / they blocked → no primary button (menu only)
+ *
+ * Overflow menu:
+ *   • "Remove from followers"  — only when they currently follow you
+ *   • "Block user" / "Unblock user"
+ *   • "Report user"
+ *
+ * Block confirms in a dialog (desktop) / drawer (mobile); Report collects
+ * a category + reason in the same responsive container. Each successful
+ * action calls onResult so the header can refresh its live counts.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  Ban,
+  CalendarDays,
+  Check,
+  Clock,
+  Flag,
+  Globe,
+  Info,
+  Loader2,
+  Shield,
+  UserCheck,
+  UserMinus,
+  UserPlus,
+  X,
+} from "lucide-react";
+import { toast } from "sonner";
+import {
+  relationships,
+  SocialError,
+  type ReportCategory,
+  type RelationshipResult,
+  type RelationshipState,
+} from "@/lib/social";
+import { countryName } from "@/lib/countries";
+import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function ProfileActions({
+  handle,
+  name,
+  joinedAt,
+  country,
+  relationship,
+  onResult,
+}: {
+  handle: string;
+  /** Display name for menu labels / dialog copy. */
+  name: string;
+  /** ISO timestamp the account was created — shown in the "About this
+   *  account" (More info) modal. */
+  joinedAt?: string;
+  /** ISO-2 account country, shown in the "About this account" modal. */
+  country?: string | null;
+  relationship: RelationshipState | null;
+  /** Called after any successful mutation with the recomputed result so
+   *  the parent header can update its follower/following counts and the
+   *  relationship it passes back in. */
+  onResult: (r: RelationshipResult) => void;
+}) {
+  const { user } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const [busy, setBusy] = useState(false);
+  const [blockOpen, setBlockOpen] = useState(false);
+  const [reportOpen, setReportOpen] = useState(false);
+  const [aboutOpen, setAboutOpen] = useState(false);
+
+  const rel = relationship;
+  const display = `@${handle}`;
+
+  // Run a relationship mutation behind the auth gate, with a busy guard
+  // and toast on failure. `label` describes the action for error copy.
+  async function run(
+    fn: () => Promise<RelationshipResult>,
+    onDone?: (r: RelationshipResult) => void,
+  ) {
+    if (busy) return;
+    if (!(await requireAuth())) return;
+    setBusy(true);
+    try {
+      const r = await fn();
+      onResult(r);
+      onDone?.(r);
+    } catch (err) {
+      const msg =
+        err instanceof SocialError
+          ? err.message
+          : "Something went wrong. Please try again.";
+      toast.error(msg);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const follow = () =>
+    run(
+      () => relationships.follow(handle),
+      () => toast(`Follow request sent to ${display}`, { duration: 2500 }),
+    );
+  const unfollow = () => run(() => relationships.unfollow(handle));
+  const accept = () =>
+    run(
+      () => relationships.accept(handle),
+      () => toast(`${display} now follows you`, { duration: 2500 }),
+    );
+  const reject = () => run(() => relationships.reject(handle));
+  const removeFollower = () =>
+    run(
+      () => relationships.removeFollower(handle),
+      () => toast(`Removed ${display} from your followers`, { duration: 2500 }),
+    );
+  const unblock = () =>
+    run(
+      () => relationships.unblock(handle),
+      () => toast(`Unblocked ${display}`, { duration: 2500 }),
+    );
+
+  // ── Primary button ───────────────────────────────────────────────────
+  const blocked = !!rel?.blocked;
+  const blockedBy = !!rel?.blocked_by;
+
+  let primary: React.ReactNode = null;
+  if (blocked) {
+    primary = (
+      <Button variant="outline" onClick={unblock} disabled={busy} className="min-w-32">
+        {busy ? <Spinner /> : null}
+        Unblock
+      </Button>
+    );
+  } else if (blockedBy) {
+    // They blocked the viewer — nothing to do but report (menu).
+    primary = null;
+  } else if (rel?.requests_you) {
+    primary = (
+      <div className="flex items-center gap-2">
+        <Button onClick={accept} disabled={busy} className="min-w-24">
+          {busy ? <Spinner /> : <Check className="size-4" />}
+          Accept
+        </Button>
+        <Button variant="outline" onClick={reject} disabled={busy}>
+          Reject
+        </Button>
+      </div>
+    );
+  } else if (rel?.following) {
+    primary = (
+      <Button variant="outline" onClick={unfollow} disabled={busy} className="min-w-32">
+        {busy ? <Spinner /> : <UserCheck className="size-4" />}
+        Unfollow
+      </Button>
+    );
+  } else if (rel?.follow_requested) {
+    primary = (
+      <Button variant="outline" onClick={unfollow} disabled={busy} className="min-w-32">
+        {busy ? <Spinner /> : <Clock className="size-4" />}
+        Requested
+      </Button>
+    );
+  } else if (rel?.follows_you) {
+    primary = (
+      <Button onClick={follow} disabled={busy} className="min-w-32">
+        {busy ? <Spinner /> : <UserPlus className="size-4" />}
+        Follow back
+      </Button>
+    );
+  } else {
+    primary = (
+      <Button onClick={follow} disabled={busy} className="min-w-32">
+        {busy ? <Spinner /> : <UserPlus className="size-4" />}
+        Follow
+      </Button>
+    );
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        {primary}
+        {/* Block / Report / Remove are signed-in-only (their BFF routes
+            require auth) and only appear when `authed`. "More info" is
+            public, so the menu always renders with at least that item. */}
+        <OverflowMenu
+          name={name}
+          display={display}
+          rel={rel}
+          busy={busy}
+          authed={!!user}
+          onRemoveFollower={removeFollower}
+          onBlock={() => setBlockOpen(true)}
+          onUnblock={unblock}
+          onReport={() => setReportOpen(true)}
+          onAbout={() => setAboutOpen(true)}
+        />
+      </div>
+
+      <BlockModal
+        open={blockOpen}
+        onClose={() => setBlockOpen(false)}
+        display={display}
+        onConfirm={async () => {
+          const r = await relationships.block(handle);
+          onResult(r);
+          toast(`Blocked ${display}`, { duration: 2500 });
+        }}
+      />
+
+      <ReportModal
+        open={reportOpen}
+        onClose={() => setReportOpen(false)}
+        display={display}
+        onSubmit={async (category, reason) => {
+          await relationships.report(handle, category, reason);
+          toast(`Thanks — your report about ${display} was submitted`, {
+            duration: 3000,
+          });
+        }}
+      />
+
+      <AboutModal
+        open={aboutOpen}
+        onClose={() => setAboutOpen(false)}
+        display={display}
+        joinedAt={joinedAt}
+        country={country}
+      />
+    </>
+  );
+}
+
+function Spinner() {
+  return <Loader2 className="size-4 animate-spin" />;
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// Overflow (shield) menu — desktop popover / mobile drawer.
+// ───────────────────────────────────────────────────────────────────────────
+
+type MenuAction = {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+};
+
+function OverflowMenu({
+  name,
+  display,
+  rel,
+  busy,
+  authed,
+  onRemoveFollower,
+  onBlock,
+  onUnblock,
+  onReport,
+  onAbout,
+}: {
+  name: string;
+  display: string;
+  rel: RelationshipState | null;
+  busy: boolean;
+  /** Whether a viewer is signed in. Block/Report/Remove are gated on
+   *  this; "More info" is shown to everyone. */
+  authed: boolean;
+  onRemoveFollower: () => void;
+  onBlock: () => void;
+  onUnblock: () => void;
+  onReport: () => void;
+  onAbout: () => void;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [popPos, setPopPos] = useState<{ top: number; left: number } | null>(
+    null,
+  );
+
+  // Desktop popover position — right-aligned under the trigger. We measure
+  // in event handlers (the open click + resize/scroll), never synchronously
+  // inside an effect body, so opening the menu can't trigger a cascading
+  // render. The effect below only wires the resize/scroll listeners.
+  const recompute = useCallback(() => {
+    const btn = triggerRef.current;
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    const w = 240;
+    const pad = 8;
+    let left = rect.right - w;
+    if (left < pad) left = pad;
+    if (left + w > window.innerWidth - pad) left = window.innerWidth - w - pad;
+    setPopPos({ top: rect.bottom + 6, left });
+  }, []);
+
+  useEffect(() => {
+    if (!open || isMobile) return;
+    window.addEventListener("resize", recompute);
+    window.addEventListener("scroll", recompute, true);
+    return () => {
+      window.removeEventListener("resize", recompute);
+      window.removeEventListener("scroll", recompute, true);
+    };
+  }, [open, isMobile, recompute]);
+
+  // Click-outside + Escape (desktop only).
+  useEffect(() => {
+    if (!open || isMobile) return;
+    function onPointer(e: PointerEvent) {
+      if (popoverRef.current?.contains(e.target as Node)) return;
+      if (triggerRef.current?.contains(e.target as Node)) return;
+      setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    const t = setTimeout(() => {
+      document.addEventListener("pointerdown", onPointer);
+      document.addEventListener("keydown", onKey);
+    }, 0);
+    return () => {
+      clearTimeout(t);
+      document.removeEventListener("pointerdown", onPointer);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, isMobile]);
+
+  const blocked = !!rel?.blocked;
+  const items: MenuAction[] = [];
+  // Signed-in-only moderation actions.
+  if (authed) {
+    if (rel?.follows_you && !blocked && !rel?.blocked_by) {
+      items.push({
+        key: "remove",
+        label: "Remove from followers",
+        icon: <UserMinus className="size-4" />,
+        onClick: () => {
+          setOpen(false);
+          onRemoveFollower();
+        },
+      });
+    }
+    items.push(
+      blocked
+        ? {
+            key: "unblock",
+            label: "Unblock user",
+            icon: <Shield className="size-4" />,
+            onClick: () => {
+              setOpen(false);
+              onUnblock();
+            },
+          }
+        : {
+            key: "block",
+            label: "Block user",
+            icon: <Ban className="size-4" />,
+            danger: true,
+            onClick: () => {
+              setOpen(false);
+              onBlock();
+            },
+          },
+    );
+    items.push({
+      key: "report",
+      label: "Report user",
+      icon: <Flag className="size-4" />,
+      danger: true,
+      onClick: () => {
+        setOpen(false);
+        onReport();
+      },
+    });
+  }
+  // Public — always at the bottom.
+  items.push({
+    key: "about",
+    label: "More info",
+    icon: <Info className="size-4" />,
+    onClick: () => {
+      setOpen(false);
+      onAbout();
+    },
+  });
+
+  const trigger = (
+    <button
+      ref={triggerRef}
+      type="button"
+      onClick={() => {
+        // Measure synchronously in the click (an event handler — safe),
+        // so the popover renders at the right spot on first paint.
+        if (!open && !isMobile) recompute();
+        setOpen((v) => !v);
+      }}
+      disabled={busy}
+      aria-label={`More options for ${name}`}
+      aria-haspopup="menu"
+      aria-expanded={open}
+      className={cn(
+        "size-9 inline-flex items-center justify-center rounded-lg shrink-0",
+        "border border-border text-foreground hover:bg-muted",
+        "transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:opacity-50",
+      )}
+    >
+      <Shield className="size-4" />
+    </button>
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerContent className="bg-card">
+            <DrawerHeader className="text-left border-b border-border pb-3">
+              <DrawerTitle>{display}</DrawerTitle>
+            </DrawerHeader>
+            <div className="p-3 space-y-1 pb-6">
+              {items.map((it) => (
+                <MenuButton key={it.key} item={it} mobile />
+              ))}
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {trigger}
+      {open && popPos
+        ? createPortal(
+            <div
+              ref={popoverRef}
+              role="menu"
+              style={{ position: "fixed", top: popPos.top, left: popPos.left, zIndex: 60 }}
+              className={cn(
+                "w-60 rounded-lg border border-border bg-card shadow-lg py-1",
+                "animate-in fade-in-0 zoom-in-95",
+              )}
+            >
+              {items.map((it) => (
+                <MenuButton key={it.key} item={it} />
+              ))}
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}
+
+function MenuButton({ item, mobile = false }: { item: MenuAction; mobile?: boolean }) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={item.onClick}
+      className={cn(
+        "w-full flex items-center gap-3 text-left transition-colors rounded-md",
+        mobile ? "px-3 py-3" : "px-3 py-2",
+        item.danger
+          ? "text-destructive hover:bg-destructive/10"
+          : "text-foreground hover:bg-muted",
+      )}
+    >
+      <span className={cn("shrink-0", item.danger ? "text-destructive" : "text-muted-foreground")}>
+        {item.icon}
+      </span>
+      <span className="text-sm font-medium truncate">{item.label}</span>
+    </button>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// ResponsiveModal — dialog on desktop, bottom drawer on mobile.
+// ───────────────────────────────────────────────────────────────────────────
+
+function ResponsiveModal({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+
+  // Desktop: Escape + body-scroll lock (the drawer handles its own).
+  useEffect(() => {
+    if (!open || isMobile) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, isMobile, onClose]);
+
+  if (!open) return null;
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={(o) => !o && onClose()}>
+        <DrawerContent className="bg-card">
+          <DrawerHeader className="text-left">
+            <DrawerTitle>{title}</DrawerTitle>
+            {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+          </DrawerHeader>
+          <div className="px-4 pb-6">{children}</div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    <>
+      <div
+        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
+        onClick={onClose}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
+      >
+        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
+          <div className="flex items-start gap-3 px-5 pt-5 pb-1">
+            <div className="flex-1 min-w-0">
+              <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
+                {title}
+              </h2>
+              {description ? (
+                <p className="mt-1 text-sm text-muted-foreground leading-relaxed">
+                  {description}
+                </p>
+              ) : null}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close"
+              className="shrink-0 size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+          <div className="px-5 pb-5 pt-2">{children}</div>
+        </div>
+      </div>
+    </>,
+    document.body,
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// Block confirm
+// ───────────────────────────────────────────────────────────────────────────
+
+function BlockModal({
+  open,
+  onClose,
+  display,
+  onConfirm,
+}: {
+  open: boolean;
+  onClose: () => void;
+  display: string;
+  onConfirm: () => Promise<void>;
+}) {
+  const [working, setWorking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setWorking(false);
+      setError(null);
+    }
+  }, [open]);
+
+  async function confirm() {
+    setWorking(true);
+    setError(null);
+    try {
+      await onConfirm();
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Something went wrong.",
+      );
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onClose={() => !working && onClose()}
+      title={`Block ${display}?`}
+      description={`They won't be able to follow you or see that you follow them. Any existing follow between you will be removed. You can unblock them later.`}
+    >
+      {error ? <p className="mb-3 text-sm text-destructive">{error}</p> : null}
+      <div className="flex items-center justify-end gap-2">
+        <Button variant="ghost" onClick={onClose} disabled={working}>
+          Cancel
+        </Button>
+        <Button variant="destructive" onClick={confirm} disabled={working}>
+          {working ? <Spinner /> : null}
+          Block
+        </Button>
+      </div>
+    </ResponsiveModal>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// Report form
+// ───────────────────────────────────────────────────────────────────────────
+
+const REPORT_CATEGORIES: { value: ReportCategory; label: string }[] = [
+  { value: "spam", label: "Spam or misleading" },
+  { value: "harassment", label: "Harassment or bullying" },
+  { value: "impersonation", label: "Impersonation" },
+  { value: "inappropriate", label: "Inappropriate content" },
+  { value: "other", label: "Something else" },
+];
+
+function ReportModal({
+  open,
+  onClose,
+  display,
+  onSubmit,
+}: {
+  open: boolean;
+  onClose: () => void;
+  display: string;
+  onSubmit: (category: ReportCategory, reason: string) => Promise<void>;
+}) {
+  const [category, setCategory] = useState<ReportCategory>("spam");
+  const [reason, setReason] = useState("");
+  const [working, setWorking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setCategory("spam");
+      setReason("");
+      setWorking(false);
+      setError(null);
+    }
+  }, [open]);
+
+  async function submit() {
+    if (reason.trim() === "") {
+      setError("Please add a brief reason.");
+      return;
+    }
+    setWorking(true);
+    setError(null);
+    try {
+      await onSubmit(category, reason.trim());
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Something went wrong.",
+      );
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onClose={() => !working && onClose()}
+      title={`Report ${display}`}
+      description="Reports are private and reviewed by our team."
+    >
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <label className="block text-sm font-medium text-foreground">
+            Reason
+          </label>
+          <div className="space-y-1.5">
+            {REPORT_CATEGORIES.map((c) => (
+              <label
+                key={c.value}
+                className={cn(
+                  "flex items-center gap-3 rounded-md border px-3 py-2.5 cursor-pointer transition-colors",
+                  category === c.value
+                    ? "border-primary bg-primary/5"
+                    : "border-border hover:bg-muted",
+                )}
+              >
+                <input
+                  type="radio"
+                  name="report-category"
+                  value={c.value}
+                  checked={category === c.value}
+                  onChange={() => setCategory(c.value)}
+                  className="accent-primary"
+                />
+                <span className="text-sm text-foreground">{c.label}</span>
+              </label>
+            ))}
+          </div>
+        </div>
+        <div className="space-y-2">
+          <label htmlFor="report-reason" className="block text-sm font-medium text-foreground">
+            Details
+          </label>
+          <textarea
+            id="report-reason"
+            value={reason}
+            onChange={(e) => setReason(e.target.value)}
+            rows={3}
+            maxLength={2000}
+            placeholder="Tell us what's happening"
+            className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+          />
+        </div>
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+        <div className="flex items-center justify-end gap-2 pt-1">
+          <Button variant="ghost" onClick={onClose} disabled={working}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={submit} disabled={working}>
+            {working ? <Spinner /> : null}
+            Submit report
+          </Button>
+        </div>
+      </div>
+    </ResponsiveModal>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// About this account ("More info")
+// ───────────────────────────────────────────────────────────────────────────
+
+function AboutModal({
+  open,
+  onClose,
+  display,
+  joinedAt,
+  country,
+}: {
+  open: boolean;
+  onClose: () => void;
+  display: string;
+  joinedAt?: string;
+  country?: string | null;
+}) {
+  const joined = joinedAt
+    ? new Date(joinedAt).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : "Unknown";
+  const basedIn = countryName(country) ?? "—";
+
+  return (
+    <ResponsiveModal
+      open={open}
+      onClose={onClose}
+      title="About this account"
+      description={`Public details about ${display}.`}
+    >
+      <dl className="space-y-2.5">
+        <InfoRow
+          icon={<CalendarDays className="size-4" />}
+          label="Joined"
+          value={joined}
+        />
+        <InfoRow
+          icon={<Globe className="size-4" />}
+          label="Based in"
+          value={basedIn}
+        />
+      </dl>
+    </ResponsiveModal>
+  );
+}
+
+function InfoRow({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-start gap-3 px-3 py-2.5">
+      <span className="shrink-0 mt-0.5 text-muted-foreground">{icon}</span>
+      <div className="min-w-0">
+        <dt className="text-xs uppercase tracking-wide text-muted-foreground">
+          {label}
+        </dt>
+        <dd className="text-sm text-foreground wrap-break-word">{value}</dd>
+      </div>
+    </div>
+  );
+}

components/profile/profile-edit-form.tsx

@@ -18,12 +18,40 @@
 import { useRef, useState } from "react";
 import Image from "next/image";
 import { ImagePlus, Save, X } from "lucide-react";
+import { toast } from "sonner";
 import { useAuth } from "@/components/auth/auth-provider";
 import { auth, AuthError, type User } from "@/lib/auth";
+import { COUNTRIES } from "@/lib/countries";
+import { SAMPRADAYAS } from "@/lib/sampradayas";
 import { compressImage } from "@/lib/compress-image";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Combobox, type ComboboxOption } from "@/components/ui/combobox";
+import { DatePicker } from "@/components/ui/date-picker";
+
+/** Normalises a stored date/timestamp to the "YYYY-MM-DD" an
+ *  <input type="date"> expects. Returns "" for null. */
+function dateInput(s: string | null): string {
+  return s ? s.slice(0, 10) : "";
+}
+
+// Option lists for the comboboxes. "" is a real, selectable value meaning
+// "not specified" for the optional fields.
+const COUNTRY_OPTIONS: ComboboxOption[] = [
+  { value: "", label: "Not specified" },
+  ...COUNTRIES.map((c) => ({ value: c.code, label: c.name })),
+];
+const SAMPRADAYA_OPTIONS: ComboboxOption[] = [
+  { value: "", label: "Not specified" },
+  ...SAMPRADAYAS.map((s) => ({ value: s.code, label: s.name })),
+];
+const GENDER_OPTIONS: ComboboxOption[] = [
+  { value: "", label: "Prefer not to say" },
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "other", label: "Other" },
+];
 
 export function ProfileEditForm({
   user,
@@ -38,29 +66,81 @@ export function ProfileEditForm({
   const [name, setName] = useState(user.name);
   const [handle, setHandle] = useState(user.handle);
   const [avatarUrl, setAvatarUrl] = useState<string | null>(user.avatar_url);
+  const [country, setCountry] = useState<string>(user.country ?? "");
+  // Devotional details. Each "" means "not specified".
+  const [sampradaya, setSampradaya] = useState<string>(user.sampradaya ?? "");
+  const [gender, setGender] = useState<string>(user.gender ?? "");
+  // `?? false` guards against a cached user object from before this field
+  // existed (undefined → uncontrolled checkbox → React warning).
+  const [initiated, setInitiated] = useState<boolean>(user.initiated ?? false);
+  const [initiatedAt, setInitiatedAt] = useState<string>(
+    dateInput(user.initiated_at),
+  );
+  const [rounds, setRounds] = useState<string>(
+    user.daily_chanting_rounds != null ? String(user.daily_chanting_rounds) : "",
+  );
   const [saving, setSaving] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  // Originals normalised for comparison. The initiation date only counts
+  // when the devotee is marked initiated — un-checking it clears the date.
+  const origRounds =
+    user.daily_chanting_rounds != null ? String(user.daily_chanting_rounds) : "";
+  const effInitiatedAt = initiated ? initiatedAt : "";
+
   const dirty =
     name.trim() !== user.name ||
     handle.trim() !== user.handle ||
-    avatarUrl !== user.avatar_url;
+    avatarUrl !== user.avatar_url ||
+    country !== (user.country ?? "") ||
+    sampradaya !== (user.sampradaya ?? "") ||
+    gender !== (user.gender ?? "") ||
+    initiated !== (user.initiated ?? false) ||
+    effInitiatedAt !== dateInput(user.initiated_at) ||
+    rounds !== origRounds;
 
   async function onSubmit(e: React.SyntheticEvent) {
     e.preventDefault();
     setError(null);
+
+    // Client-side guard for the round count (the BFF re-checks 1–1008).
+    if (rounds !== "") {
+      const n = Number(rounds);
+      if (!Number.isInteger(n) || n < 1 || n > 1008) {
+        setError("Daily chanting rounds must be a whole number between 1 and 1008.");
+        return;
+      }
+    }
+
     setSaving(true);
     try {
       // Patch only what's changed — keeps the audit log tidy and avoids
       // bumping updated_at when the user just clicked "Save" without edits.
-      const updated = await auth.updateProfile(
-        name.trim() !== user.name ? name.trim() : undefined,
-        avatarUrl === user.avatar_url ? undefined : (avatarUrl ?? ""),
-        handle.trim() !== user.handle ? handle.trim() : undefined,
-      );
+      // Empty strings clear the nullable fields; 0 clears the round count.
+      const patch: Parameters<typeof auth.updateProfile>[0] = {};
+      if (name.trim() !== user.name) patch.name = name.trim();
+      if (avatarUrl !== user.avatar_url) patch.avatar_url = avatarUrl ?? "";
+      if (handle.trim() !== user.handle) patch.handle = handle.trim();
+      if (country !== (user.country ?? "")) patch.country = country;
+      // "" clears the lineage; a code sets it.
+      if (sampradaya !== (user.sampradaya ?? "")) patch.sampradaya = sampradaya;
+      if (gender !== (user.gender ?? "")) patch.gender = gender;
+      if (initiated !== (user.initiated ?? false)) patch.initiated = initiated;
+      if (effInitiatedAt !== dateInput(user.initiated_at)) {
+        patch.initiated_at = effInitiatedAt;
+      }
+      if (rounds !== origRounds) {
+        patch.daily_chanting_rounds = rounds === "" ? 0 : Number(rounds);
+      }
+
+      const updated = await auth.updateProfile(patch);
+      // Update the cached user in place and STAY on the edit form. The
+      // form's fields re-baseline against the new `user` prop (so it's no
+      // longer "dirty"), and we keep the ?edit=1 URL rather than bouncing
+      // back to the profile view. Exit is via Cancel/✕.
       setUser(updated);
-      onDone();
+      toast.success("Profile saved");
     } catch (err) {
       setError(err instanceof AuthError ? err.message : "Could not save.");
     } finally {
@@ -89,7 +169,7 @@ export function ProfileEditForm({
   }
 
   return (
-    <form onSubmit={onSubmit} className="space-y-6 rounded-2xl bg-card ring-1 ring-foreground/10 p-5 sm:p-6">
+    <form onSubmit={onSubmit} className="space-y-8 rounded-2xl bg-card ring-1 ring-foreground/10 p-5 sm:p-6">
       <div className="flex items-center justify-between">
         <h2 className="font-[family-name:var(--font-title)] text-xl sm:text-2xl font-semibold text-foreground">
           Edit profile
@@ -139,7 +219,10 @@ export function ProfileEditForm({
         </div>
       </section>
 
-      <div className="space-y-4">
+      <div className="space-y-4 pt-6 border-t border-border">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+          Account
+        </h3>
         <div className="space-y-1.5">
           <Label htmlFor="profile-name">Display name</Label>
           <Input
@@ -153,8 +236,17 @@ export function ProfileEditForm({
 
         <div className="space-y-1.5">
           <Label htmlFor="profile-handle">Handle</Label>
-          <div className="flex items-center gap-2">
-            <span className="text-sm text-muted-foreground">@</span>
+          {/* "@" sits inside the field as a fixed, non-editable prefix —
+              pointer-events-none lets clicks fall through to the input, and
+              the input is padded so the text never overlaps it. The stored
+              value is still just the handle (no leading @). */}
+          <div className="relative">
+            <span
+              aria-hidden
+              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted-foreground"
+            >
+              @
+            </span>
             <Input
               id="profile-handle"
               value={handle}
@@ -162,6 +254,7 @@ export function ProfileEditForm({
               maxLength={32}
               pattern="[a-zA-Z0-9._-]+"
               required
+              className="pl-7"
             />
           </div>
           <p className="text-xs text-muted-foreground">
@@ -169,6 +262,23 @@ export function ProfileEditForm({
           </p>
         </div>
 
+        <div className="space-y-1.5">
+          <Label htmlFor="profile-country">Country</Label>
+          <Combobox
+            id="profile-country"
+            ariaLabel="Country"
+            options={COUNTRY_OPTIONS}
+            value={country}
+            onChange={setCountry}
+            placeholder="Not specified"
+            searchPlaceholder="Search countries…"
+            emptyText="No matching country."
+          />
+          <p className="text-xs text-muted-foreground">
+            Shown on your profile&apos;s “About this account” panel.
+          </p>
+        </div>
+
         <div className="space-y-1.5">
           <Label htmlFor="profile-email">Email</Label>
           {user.email ? (
@@ -184,9 +294,92 @@ export function ProfileEditForm({
         </div>
       </div>
 
+      <div className="space-y-4 pt-6 border-t border-border">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+          Devotional details
+        </h3>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="profile-sampradaya">Sampradāya</Label>
+          <Combobox
+            id="profile-sampradaya"
+            ariaLabel="Sampradāya"
+            options={SAMPRADAYA_OPTIONS}
+            value={sampradaya}
+            onChange={setSampradaya}
+            placeholder="Not specified"
+            searchPlaceholder="Search sampradāya…"
+            emptyText="No matching sampradāya."
+          />
+          <p className="text-xs text-muted-foreground">
+            Optional. Leave blank if you&apos;d rather not say.
+          </p>
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="profile-gender">Gender</Label>
+          <Combobox
+            id="profile-gender"
+            ariaLabel="Gender"
+            options={GENDER_OPTIONS}
+            value={gender}
+            onChange={setGender}
+            searchable={false}
+            placeholder="Prefer not to say"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-3">
+          <div className="min-w-0">
+            <Label htmlFor="profile-initiated">Initiated</Label>
+            <p className="text-xs text-muted-foreground">
+              Have you received initiation (dīkṣā)?
+            </p>
+          </div>
+          <input
+            id="profile-initiated"
+            type="checkbox"
+            checked={initiated}
+            onChange={(e) => setInitiated(e.target.checked)}
+            className="size-5 shrink-0 accent-primary"
+          />
+        </div>
+
+        {initiated ? (
+          <div className="space-y-1.5">
+            <Label htmlFor="profile-initiated-at">Initiation date</Label>
+            <DatePicker
+              id="profile-initiated-at"
+              ariaLabel="Initiation date"
+              value={initiatedAt}
+              onChange={setInitiatedAt}
+              max={new Date().toISOString().slice(0, 10)}
+              placeholder="Select initiation date"
+            />
+          </div>
+        ) : null}
+
+        <div className="space-y-1.5">
+          <Label htmlFor="profile-rounds">Daily chanting rounds</Label>
+          <Input
+            id="profile-rounds"
+            type="number"
+            inputMode="numeric"
+            min={1}
+            max={1008}
+            value={rounds}
+            onChange={(e) => setRounds(e.target.value)}
+            placeholder="e.g. 16"
+          />
+          <p className="text-xs text-muted-foreground">
+            Your daily japa vow (1–1008). Leave blank if you&apos;d rather not say.
+          </p>
+        </div>
+      </div>
+
       {error ? <p className="text-sm text-destructive">{error}</p> : null}
 
-      <div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
+      <div className="flex items-center justify-end gap-2 pt-6 border-t border-border">
         <Button
           type="button"
           variant="ghost"

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,

components/site-header.tsx

@@ -24,6 +24,7 @@
 
 import Link from "next/link";
 import { ReadingSettings } from "@/components/reading-settings";
+import { NotificationBell } from "@/components/notification-bell";
 import { useAuth } from "@/components/auth/auth-provider";
 
 export function SiteHeader() {
@@ -53,6 +54,13 @@ export function SiteHeader() {
             <ReadingSettings />
           </div>
         ) : null}
+        {/* Notification bell — signed-in users only (anonymous viewers get
+            the reading-settings gear above instead). */}
+        {!loading && user ? (
+          <div className="absolute right-2 top-1/2 -translate-y-1/2">
+            <NotificationBell />
+          </div>
+        ) : null}
       </div>
     </header>
   );

components/social/post-card-menu.tsx

@@ -30,9 +30,26 @@ import {
   DrawerTitle,
 } from "@/components/ui/drawer";
 import { cn } from "@/lib/utils";
-import type { Post } from "@/lib/social";
+import {
+  posts,
+  relationships,
+  type Post,
+  type PostReportCategory,
+} from "@/lib/social";
 import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
+import { ReportDialog, type ReportOption } from "@/components/social/report-dialog";
+
+// Post report categories — mirrors the BFF allow-list (postReportCategories).
+const POST_REPORT_OPTIONS: ReportOption[] = [
+  { value: "spam", label: "Spam or misleading" },
+  { value: "harassment", label: "Harassment or abuse" },
+  { value: "misinformation", label: "False information" },
+  { value: "inappropriate", label: "Inappropriate content" },
+  { value: "other", label: "Something else" },
+];
 
 type MenuItem = {
   key: string;
@@ -54,8 +71,11 @@ export function PostCardMenu({
   onDelete?: (id: string) => void;
 }) {
   const { user, loading } = useAuth();
+  const { requireAuth } = useAuthGate();
   const isMobile = useMediaQuery("(max-width: 767px)");
   const [open, setOpen] = useState(false);
+  const [blockOpen, setBlockOpen] = useState(false);
+  const [reportOpen, setReportOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
   const [popPos, setPopPos] = useState<{ top: number; left: number } | null>(
@@ -147,16 +167,15 @@ export function PostCardMenu({
       });
     }
   } else {
-    if (isAuthed) {
+    // Block needs the author's handle (the block API is keyed by handle).
+    if (isAuthed && authorHandle) {
       items.push({
         key: "block",
         label: `Block ${authorDisplay}`,
         icon: <Ban className="size-4" />,
         onClick: () => {
           setOpen(false);
-          toast(`Blocking ${authorDisplay} is coming soon`, {
-            duration: 2500,
-          });
+          setBlockOpen(true);
         },
       });
     }
@@ -166,7 +185,11 @@ export function PostCardMenu({
       icon: <Flag className="size-4" />,
       onClick: () => {
         setOpen(false);
-        toast("Post reporting is coming soon", { duration: 2500 });
+        // Reporting requires auth (the BFF route is protected). Gate
+        // anonymous viewers through the login modal, then open the form.
+        void (async () => {
+          if (await requireAuth()) setReportOpen(true);
+        })();
       },
     });
   }
@@ -193,54 +216,74 @@ export function PostCardMenu({
     </button>
   );
 
-  // Mobile: bottom drawer
-  if (isMobile) {
-    return (
-      <>
-        {trigger}
-        <Drawer open={open} onOpenChange={(o) => setOpen(o)}>
-          <DrawerContent className="bg-card">
-            <DrawerHeader className="text-left border-b border-border pb-3">
-              <DrawerTitle>Post options</DrawerTitle>
-            </DrawerHeader>
-            <div className="p-3 space-y-1">
-              {items.map((item) => (
-                <MenuItemButton key={item.key} item={item} mobile />
-              ))}
-            </div>
-          </DrawerContent>
-        </Drawer>
-      </>
-    );
-  }
+  // Menu surface: bottom drawer on mobile, floating popover on desktop.
+  const menu = isMobile ? (
+    <Drawer open={open} onOpenChange={(o) => setOpen(o)}>
+      <DrawerContent className="bg-card">
+        <DrawerHeader className="text-left border-b border-border pb-3">
+          <DrawerTitle>Post options</DrawerTitle>
+        </DrawerHeader>
+        <div className="p-3 space-y-1">
+          {items.map((item) => (
+            <MenuItemButton key={item.key} item={item} mobile />
+          ))}
+        </div>
+      </DrawerContent>
+    </Drawer>
+  ) : open && popPos ? (
+    createPortal(
+      <div
+        ref={popoverRef}
+        role="menu"
+        style={{
+          position: "fixed",
+          top: popPos.top,
+          left: popPos.left,
+          zIndex: 60,
+        }}
+        className={cn(
+          "w-60 rounded-lg border border-border bg-card shadow-lg py-1",
+          "animate-in fade-in-0 zoom-in-95",
+        )}
+      >
+        {items.map((item) => (
+          <MenuItemButton key={item.key} item={item} />
+        ))}
+      </div>,
+      document.body,
+    )
+  ) : null;
 
-  // Desktop: floating popover anchored to the trigger.
   return (
     <>
       {trigger}
-      {open && popPos
-        ? createPortal(
-            <div
-              ref={popoverRef}
-              role="menu"
-              style={{
-                position: "fixed",
-                top: popPos.top,
-                left: popPos.left,
-                zIndex: 60,
-              }}
-              className={cn(
-                "w-60 rounded-lg border border-border bg-card shadow-lg py-1",
-                "animate-in fade-in-0 zoom-in-95",
-              )}
-            >
-              {items.map((item) => (
-                <MenuItemButton key={item.key} item={item} />
-              ))}
-            </div>,
-            document.body,
-          )
-        : null}
+      {menu}
+
+      {/* Block confirm — only meaningful when we know the author's handle. */}
+      {authorHandle ? (
+        <ConfirmModal
+          open={blockOpen}
+          onClose={() => setBlockOpen(false)}
+          title={`Block ${authorDisplay}?`}
+          message="They won't be able to follow you or see that you follow them, and any follow between you will be removed. You can unblock them later."
+          confirmLabel="Block"
+          onConfirm={async () => {
+            await relationships.block(authorHandle);
+            toast(`Blocked ${authorDisplay}`, { duration: 2500 });
+          }}
+        />
+      ) : null}
+
+      <ReportDialog
+        open={reportOpen}
+        onClose={() => setReportOpen(false)}
+        title="Report post"
+        options={POST_REPORT_OPTIONS}
+        onSubmit={async (category, reason) => {
+          await posts.report(post.id, category as PostReportCategory, reason);
+          toast("Thanks — your report was submitted", { duration: 3000 });
+        }}
+      />
     </>
   );
 }

components/social/report-dialog.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+/**
+ * ReportDialog — a responsive report form (dialog on desktop, bottom
+ * drawer on mobile). Collects a category (radio list) + an optional
+ * free-text reason and hands them to `onSubmit`. Generic over the option
+ * set so it works for posts, users, etc.
+ *
+ * `onSubmit` may throw to keep the dialog open with an inline error.
+ */
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Loader2, X } from "lucide-react";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type ReportOption = { value: string; label: string };
+
+export function ReportDialog({
+  open,
+  onClose,
+  title,
+  description = "Reports are private and reviewed by our team.",
+  options,
+  onSubmit,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  options: ReportOption[];
+  onSubmit: (category: string, reason: string) => Promise<void>;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const [category, setCategory] = useState(options[0]?.value ?? "");
+  const [reason, setReason] = useState("");
+  const [working, setWorking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset transient state each time the dialog opens.
+  useEffect(() => {
+    if (open) {
+      setCategory(options[0]?.value ?? "");
+      setReason("");
+      setWorking(false);
+      setError(null);
+    }
+  }, [open, options]);
+
+  // Desktop: Escape + scroll lock (the drawer handles its own).
+  useEffect(() => {
+    if (!open || isMobile) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape" && !working) onClose();
+    }
+    document.addEventListener("keydown", onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [open, isMobile, working, onClose]);
+
+  async function submit() {
+    setWorking(true);
+    setError(null);
+    try {
+      await onSubmit(category, reason.trim());
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  if (!open) return null;
+
+  const formBody = (
+    <div className="space-y-4">
+      <div className="space-y-1.5">
+        {options.map((o) => (
+          <label
+            key={o.value}
+            className={cn(
+              "flex items-center gap-3 rounded-md border px-3 py-2.5 cursor-pointer transition-colors",
+              category === o.value
+                ? "border-primary bg-primary/5"
+                : "border-border hover:bg-muted",
+            )}
+          >
+            <input
+              type="radio"
+              name="report-category"
+              value={o.value}
+              checked={category === o.value}
+              onChange={() => setCategory(o.value)}
+              className="accent-primary"
+            />
+            <span className="text-sm text-foreground">{o.label}</span>
+          </label>
+        ))}
+      </div>
+      <div className="space-y-1.5">
+        <label
+          htmlFor="report-reason"
+          className="block text-sm font-medium text-foreground"
+        >
+          Details <span className="text-muted-foreground font-normal">(optional)</span>
+        </label>
+        <textarea
+          id="report-reason"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          rows={3}
+          maxLength={2000}
+          placeholder="Add any context that will help us review this"
+          className="w-full bg-background text-foreground text-sm rounded-md border border-border px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        />
+      </div>
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      <div className="flex items-center justify-end gap-2 pt-1">
+        <Button variant="ghost" onClick={onClose} disabled={working}>
+          Cancel
+        </Button>
+        <Button variant="destructive" onClick={submit} disabled={working}>
+          {working ? <Loader2 className="size-4 animate-spin" /> : null}
+          Submit report
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={(o) => !o && !working && onClose()}>
+        <DrawerContent className="bg-card">
+          <DrawerHeader className="text-left">
+            <DrawerTitle>{title}</DrawerTitle>
+            <DrawerDescription>{description}</DrawerDescription>
+          </DrawerHeader>
+          <div className="px-4 pb-6">{formBody}</div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    <>
+      <div
+        className="fixed inset-0 z-100 bg-foreground/40 backdrop-blur-sm animate-in fade-in-0"
+        onClick={() => !working && onClose()}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="fixed left-1/2 top-1/2 z-101 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4"
+      >
+        <div className="rounded-2xl border border-border bg-card shadow-xl overflow-hidden">
+          <div className="flex items-start gap-3 px-5 pt-5 pb-1">
+            <div className="flex-1 min-w-0">
+              <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
+                {title}
+              </h2>
+              <p className="mt-1 text-sm text-muted-foreground leading-relaxed">
+                {description}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => !working && onClose()}
+              aria-label="Close"
+              className="shrink-0 size-8 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted inline-flex items-center justify-center"
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+          <div className="px-5 pb-5 pt-2">{formBody}</div>
+        </div>
+      </div>
+    </>,
+    document.body,
+  );
+}

components/ui/combobox.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+/**
+ * Combobox — a shadcn-style single-select dropdown with optional search.
+ *
+ * Trigger button shows the selected label (or a placeholder); clicking it
+ * opens a panel with an optional search box and a filtered, keyboard-
+ * navigable list. Selecting an option calls `onChange(value)` and closes.
+ *
+ * Notes:
+ *   • All state changes happen in event handlers (click / keydown / input)
+ *     — never synchronously inside an effect — so opening can't trigger
+ *     React's "cascading renders" warning. The only effect just wires the
+ *     outside-pointerdown listener.
+ *   • `value === ""` is a valid selectable value (e.g. a "Not specified"
+ *     option), so the field can represent "cleared".
+ *   • The panel is absolutely positioned within a relative wrapper, so the
+ *     parent must not clip overflow (forms/cards here don't).
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Check, ChevronsUpDown, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ComboboxOption = { value: string; label: string };
+
+export function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyText = "No results.",
+  searchable = true,
+  disabled = false,
+  id,
+  ariaLabel,
+}: {
+  options: ComboboxOption[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  searchable?: boolean;
+  disabled?: boolean;
+  id?: string;
+  ariaLabel?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selected = options.find((o) => o.value === value) ?? null;
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!searchable || q === "") return options;
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [options, query, searchable]);
+
+  const active =
+    filtered.length === 0 ? -1 : Math.min(activeIndex, filtered.length - 1);
+
+  // Close on outside pointerdown. (Listener only — no setState in body.)
+  useEffect(() => {
+    if (!open) return;
+    function onPointer(e: PointerEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", onPointer);
+    return () => document.removeEventListener("pointerdown", onPointer);
+  }, [open]);
+
+  function openMenu() {
+    setQuery("");
+    const i = options.findIndex((o) => o.value === value);
+    setActiveIndex(i < 0 ? 0 : i);
+    setOpen(true);
+    if (searchable) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }
+
+  function toggle() {
+    if (disabled) return;
+    if (open) setOpen(false);
+    else openMenu();
+  }
+
+  function select(v: string) {
+    onChange(v);
+    setOpen(false);
+  }
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (active >= 0) select(filtered[active].value);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  }
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        type="button"
+        id={id}
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        disabled={disabled}
+        onClick={toggle}
+        onKeyDown={onKeyDown}
+        className={cn(
+          "w-full h-10 flex items-center justify-between gap-2 rounded-md border border-border bg-background px-3 text-sm text-left",
+          "outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:opacity-50",
+        )}
+      >
+        <span className={cn("truncate", !selected && "text-muted-foreground")}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+      </button>
+
+      {open ? (
+        <div className="absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-card shadow-lg animate-in fade-in-0 zoom-in-95">
+          {searchable ? (
+            <div className="flex items-center gap-2 border-b border-border px-3">
+              <Search className="size-4 shrink-0 text-muted-foreground" />
+              <input
+                ref={inputRef}
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  setActiveIndex(0);
+                }}
+                onKeyDown={onKeyDown}
+                placeholder={searchPlaceholder}
+                className="w-full h-9 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+          ) : null}
+          <ul role="listbox" className="max-h-56 overflow-y-auto py-1">
+            {filtered.length === 0 ? (
+              <li className="px-3 py-2 text-sm text-muted-foreground">
+                {emptyText}
+              </li>
+            ) : (
+              filtered.map((o, i) => (
+                <li
+                  key={o.value || "__empty__"}
+                  role="option"
+                  aria-selected={o.value === value}
+                  onMouseEnter={() => setActiveIndex(i)}
+                  onClick={() => select(o.value)}
+                  className={cn(
+                    "flex items-center justify-between gap-2 px-3 py-2 text-sm cursor-pointer",
+                    i === active ? "bg-muted" : "",
+                  )}
+                >
+                  <span className="truncate">{o.label}</span>
+                  {o.value === value ? (
+                    <Check className="size-4 shrink-0 text-primary" />
+                  ) : null}
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}

components/ui/date-picker.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+/**
+ * DatePicker — a calendar popover for picking a single date, no external
+ * deps. Trigger button shows the formatted date (or a placeholder);
+ * clicking opens a month grid with prev/next navigation. Value in/out is
+ * an ISO "YYYY-MM-DD" string ("" = no date). `max`/`min` (also ISO) bound
+ * the selectable range — out-of-range days render disabled.
+ *
+ * The panel is portaled to <body> with fixed positioning and collision
+ * handling: it opens below the trigger, flips above when there isn't room,
+ * and clamps to the viewport horizontally. Position is measured in event
+ * handlers (open click + scroll/resize) — never synchronously inside an
+ * effect — so opening can't trigger React's cascading-render warning.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { CalendarDays, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const PANEL_W = 288; // matches w-72
+const PANEL_H = 332; // approximate; used only for the flip decision
+const GAP = 6;
+const MARGIN = 8;
+
+function pad2(n: number) {
+  return String(n).padStart(2, "0");
+}
+function toISO(y: number, m0: number, d: number) {
+  return `${y}-${pad2(m0 + 1)}-${pad2(d)}`;
+}
+/** Parse "YYYY-MM-DD" → {y, m0 (0-based), d}, or null. */
+function parseISO(s: string): { y: number; m0: number; d: number } | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+  if (!m) return null;
+  return { y: Number(m[1]), m0: Number(m[2]) - 1, d: Number(m[3]) };
+}
+function prettyDate(s: string): string {
+  const p = parseISO(s);
+  if (!p) return "";
+  return new Date(p.y, p.m0, p.d).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  max,
+  min,
+  id,
+  ariaLabel,
+  placeholder = "Select a date",
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  max?: string;
+  min?: string;
+  id?: string;
+  ariaLabel?: string;
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  // Either `top` (opens below, anchored to the trigger's bottom) or
+  // `bottom` (opens above, anchored just over the trigger's top) is set —
+  // anchoring the relevant edge keeps the panel flush to the trigger
+  // regardless of its actual height. `maxHeight` clamps it to the
+  // available space (scrolls if it ever can't fit).
+  const [pos, setPos] = useState<{
+    left: number;
+    top?: number;
+    bottom?: number;
+    maxHeight: number;
+  } | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const today = new Date();
+  const todayISO = toISO(today.getFullYear(), today.getMonth(), today.getDate());
+
+  const initial = parseISO(value) ?? {
+    y: today.getFullYear(),
+    m0: today.getMonth(),
+    d: today.getDate(),
+  };
+  const [view, setView] = useState<{ y: number; m0: number }>({
+    y: initial.y,
+    m0: initial.m0,
+  });
+
+  // Measure the trigger and place the panel flush to it — below by
+  // default, flipped above only when below lacks room and above has more.
+  // Called from event handlers only (open click + scroll/resize).
+  function recompute() {
+    const btn = triggerRef.current;
+    if (!btn) return;
+    const rect = btn.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let left = rect.left;
+    if (left + PANEL_W > vw - MARGIN) left = vw - MARGIN - PANEL_W;
+    if (left < MARGIN) left = MARGIN;
+
+    const spaceBelow = vh - rect.bottom - GAP - MARGIN;
+    const spaceAbove = rect.top - GAP - MARGIN;
+
+    if (spaceBelow >= PANEL_H || spaceBelow >= spaceAbove) {
+      // Below: top edge anchored just under the trigger.
+      setPos({ left, top: rect.bottom + GAP, maxHeight: Math.max(180, spaceBelow) });
+    } else {
+      // Above: bottom edge anchored just over the trigger (grows upward),
+      // so it stays adjacent no matter how tall the calendar is.
+      setPos({ left, bottom: vh - rect.top + GAP, maxHeight: Math.max(180, spaceAbove) });
+    }
+  }
+
+  // Outside-click + Escape + reposition on scroll/resize, while open.
+  useEffect(() => {
+    if (!open) return;
+    function onPointer(e: PointerEvent) {
+      if (triggerRef.current?.contains(e.target as Node)) return;
+      if (panelRef.current?.contains(e.target as Node)) return;
+      setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointer);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("resize", recompute);
+    window.addEventListener("scroll", recompute, true);
+    return () => {
+      document.removeEventListener("pointerdown", onPointer);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("resize", recompute);
+      window.removeEventListener("scroll", recompute, true);
+    };
+  }, [open]);
+
+  function openMenu() {
+    const p = parseISO(value);
+    if (p) setView({ y: p.y, m0: p.m0 });
+    recompute();
+    setOpen(true);
+  }
+  function toggle() {
+    if (open) setOpen(false);
+    else openMenu();
+  }
+
+  function shiftMonth(delta: number) {
+    setView((v) => {
+      const d = new Date(v.y, v.m0 + delta, 1);
+      return { y: d.getFullYear(), m0: d.getMonth() };
+    });
+  }
+
+  function pick(day: number) {
+    onChange(toISO(view.y, view.m0, day));
+    setOpen(false);
+  }
+
+  const monthLabel = new Date(view.y, view.m0, 1).toLocaleDateString(undefined, {
+    month: "long",
+    year: "numeric",
+  });
+  const startWeekday = new Date(view.y, view.m0, 1).getDay();
+  const daysInMonth = new Date(view.y, view.m0 + 1, 0).getDate();
+  const cells: (number | null)[] = [
+    ...Array(startWeekday).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
+  ];
+
+  function disabled(day: number) {
+    const iso = toISO(view.y, view.m0, day);
+    if (max && iso > max) return true;
+    if (min && iso < min) return true;
+    return false;
+  }
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        aria-label={ariaLabel}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={toggle}
+        className={cn(
+          "w-full h-10 flex items-center gap-2 rounded-md border border-border bg-background px-3 text-sm text-left",
+          "outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        )}
+      >
+        <CalendarDays className="size-4 shrink-0 text-muted-foreground" />
+        <span className={cn("truncate flex-1", !value && "text-muted-foreground")}>
+          {value ? prettyDate(value) : placeholder}
+        </span>
+        {value ? (
+          <span
+            role="button"
+            aria-label="Clear date"
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange("");
+              setOpen(false);
+            }}
+            className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted"
+          >
+            <X className="size-3.5" />
+          </span>
+        ) : null}
+      </button>
+
+      {open && pos && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={panelRef}
+              style={{
+                position: "fixed",
+                top: pos.top,
+                bottom: pos.bottom,
+                left: pos.left,
+                width: PANEL_W,
+                maxHeight: pos.maxHeight,
+                overflowY: "auto",
+                zIndex: 70,
+              }}
+              className="rounded-md border border-border bg-card p-3 shadow-lg animate-in fade-in-0 zoom-in-95"
+            >
+              <div className="flex items-center justify-between mb-2">
+                <button
+                  type="button"
+                  aria-label="Previous month"
+                  onClick={() => shiftMonth(-1)}
+                  className="size-8 inline-flex items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                  <ChevronLeft className="size-4" />
+                </button>
+                <span className="text-sm font-medium">{monthLabel}</span>
+                <button
+                  type="button"
+                  aria-label="Next month"
+                  onClick={() => shiftMonth(1)}
+                  className="size-8 inline-flex items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                  <ChevronRight className="size-4" />
+                </button>
+              </div>
+
+              <div className="grid grid-cols-7 gap-0.5 mb-1">
+                {WEEKDAYS.map((w) => (
+                  <div
+                    key={w}
+                    className="h-7 flex items-center justify-center text-xs text-muted-foreground"
+                  >
+                    {w}
+                  </div>
+                ))}
+              </div>
+
+              <div className="grid grid-cols-7 gap-0.5">
+                {cells.map((day, i) => {
+                  if (day === null) return <div key={`b${i}`} className="h-9" />;
+                  const iso = toISO(view.y, view.m0, day);
+                  const isSelected = iso === value;
+                  const isToday = iso === todayISO;
+                  const isDisabled = disabled(day);
+                  return (
+                    <button
+                      key={iso}
+                      type="button"
+                      disabled={isDisabled}
+                      onClick={() => pick(day)}
+                      className={cn(
+                        "h-9 rounded-md text-sm inline-flex items-center justify-center transition-colors",
+                        isSelected
+                          ? "bg-primary text-primary-foreground font-medium"
+                          : "hover:bg-muted",
+                        !isSelected && isToday ? "ring-1 ring-primary/40" : "",
+                        isDisabled
+                          ? "opacity-30 cursor-not-allowed hover:bg-transparent"
+                          : "",
+                      )}
+                    >
+                      {day}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}

lib/auth.ts

@@ -33,6 +33,22 @@ export type User = {
    * the "Change password" modal and the "Set a password" flow.
    */
   has_password: boolean;
+  /** Account country as an ISO-3166-1 alpha-2 code (e.g. "IN"), or null
+   *  when unknown. Captured best-effort at signup; user-editable. */
+  country: string | null;
+  /** Devotional profile. */
+  /** Spiritual lineage code (e.g. "gaudiya"); new accounts default to
+   *  "gaudiya" but it's optional, so null means "not specified". */
+  sampradaya: string | null;
+  gender: string | null;
+  initiated: boolean;
+  /** ISO date "YYYY-MM-DD" (or full timestamp from the DB), null if unset. */
+  initiated_at: string | null;
+  daily_chanting_rounds: number | null;
+  /** System-managed notification scheduling ("HH:MM"), set by the backend
+   *  later — surfaced here for completeness, no UI edits them today. */
+  preferred_chanting_time: string | null;
+  peak_active_time: string | null;
   created_at: string;
   updated_at: string;
 };
@@ -189,18 +205,27 @@ export const auth = {
       }),
     }),
 
-  updateProfile: (
-    name?: string,
-    avatarURL?: string | null,
-    handle?: string,
-  ) =>
+  /**
+   * Partial profile patch. Only the keys present in `patch` are sent — an
+   * omitted key leaves that field unchanged; an explicit `""`/`null` (for
+   * the nullable fields) or `0` (for daily_chanting_rounds) clears it.
+   */
+  updateProfile: (patch: {
+    name?: string;
+    avatar_url?: string | null;
+    handle?: string;
+    country?: string | null;
+    sampradaya?: string;
+    gender?: string | null;
+    initiated?: boolean;
+    initiated_at?: string | null;
+    daily_chanting_rounds?: number | null;
+    preferred_chanting_time?: string | null;
+    peak_active_time?: string | null;
+  }) =>
     authFetch<User>("/users/me", {
       method: "PATCH",
-      body: JSON.stringify({
-        name: name ?? undefined,
-        avatar_url: avatarURL === undefined ? undefined : avatarURL,
-        handle: handle ?? undefined,
-      }),
+      body: JSON.stringify(patch),
     }),
 
   /**

lib/countries.ts

@@ -0,0 +1,51 @@
+/**
+ * Country helpers for the profile country field.
+ *
+ * We store ISO-3166-1 alpha-2 codes (e.g. "IN") on the account and render
+ * human names with the platform's `Intl.DisplayNames` so labels localise
+ * for free and we don't ship a 250-entry name table. The code list below
+ * is the static ISO alpha-2 set; names are derived at module load.
+ */
+
+// ISO-3166-1 alpha-2 codes (officially assigned).
+const CODES: string[] = [
+  "AD","AE","AF","AG","AI","AL","AM","AO","AQ","AR","AS","AT","AU","AW","AX","AZ",
+  "BA","BB","BD","BE","BF","BG","BH","BI","BJ","BL","BM","BN","BO","BQ","BR","BS",
+  "BT","BV","BW","BY","BZ","CA","CC","CD","CF","CG","CH","CI","CK","CL","CM","CN",
+  "CO","CR","CU","CV","CW","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE",
+  "EG","EH","ER","ES","ET","FI","FJ","FK","FM","FO","FR","GA","GB","GD","GE","GF",
+  "GG","GH","GI","GL","GM","GN","GP","GQ","GR","GS","GT","GU","GW","GY","HK","HM",
+  "HN","HR","HT","HU","ID","IE","IL","IM","IN","IO","IQ","IR","IS","IT","JE","JM",
+  "JO","JP","KE","KG","KH","KI","KM","KN","KP","KR","KW","KY","KZ","LA","LB","LC",
+  "LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MF","MG","MH","MK",
+  "ML","MM","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA",
+  "NC","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG",
+  "PH","PK","PL","PM","PN","PR","PS","PT","PW","PY","QA","RE","RO","RS","RU","RW",
+  "SA","SB","SC","SD","SE","SG","SH","SI","SJ","SK","SL","SM","SN","SO","SR","SS",
+  "ST","SV","SX","SY","SZ","TC","TD","TF","TG","TH","TJ","TK","TL","TM","TN","TO",
+  "TR","TT","TV","TW","TZ","UA","UG","UM","US","UY","UZ","VA","VC","VE","VG","VI",
+  "VN","VU","WF","WS","YE","YT","ZA","ZM","ZW",
+];
+
+const regionNames =
+  typeof Intl !== "undefined" && "DisplayNames" in Intl
+    ? new Intl.DisplayNames(["en"], { type: "region" })
+    : null;
+
+/** Localized country name for an ISO-2 code, or null when the code is
+ *  empty/unknown. Falls back to the raw code if the platform can't name it. */
+export function countryName(code: string | null | undefined): string | null {
+  if (!code) return null;
+  const cc = code.toUpperCase();
+  try {
+    return regionNames?.of(cc) ?? cc;
+  } catch {
+    return cc;
+  }
+}
+
+/** `{ code, name }` for every country, sorted by name — feeds the picker. */
+export const COUNTRIES: { code: string; name: string }[] = CODES.map((c) => ({
+  code: c,
+  name: countryName(c) || c,
+})).sort((a, b) => a.name.localeCompare(b.name));

lib/sampradayas.ts

@@ -0,0 +1,26 @@
+/**
+ * Sampradāya (spiritual lineage) options for the profile field.
+ *
+ * Stored as a lowercase `code` on the account; the `name` is the display
+ * label shown in the searchable picker. Only Gaudiya exists today —
+ * append more entries here as they're supported (the BFF allow-list in
+ * user_service.go must be extended in lockstep).
+ */
+
+export const SAMPRADAYAS: { code: string; name: string }[] = [
+  { code: "gaudiya", name: "Gaudiya" },
+];
+
+/** Display label for a sampradāya code, or null when unknown. */
+export function sampradayaName(code: string | null | undefined): string | null {
+  if (!code) return null;
+  return SAMPRADAYAS.find((s) => s.code === code)?.name ?? null;
+}
+
+/** Resolve a typed display name back to its code (case-insensitive), or
+ *  null when it doesn't match a known lineage. */
+export function sampradayaCode(name: string): string | null {
+  const n = name.trim().toLowerCase();
+  if (!n) return null;
+  return SAMPRADAYAS.find((s) => s.name.toLowerCase() === n)?.code ?? null;
+}

lib/social.ts

@@ -101,12 +101,42 @@ export type Collection = {
   updated_at: string;
 };
 
+/** The viewer's relationship to a profile, all "viewer → target". Null
+ *  when the viewer is anonymous or looking at their own profile. */
+export type RelationshipState = {
+  /** viewer → target follow is accepted (you follow them). */
+  following: boolean;
+  /** viewer → target follow is pending (you've requested). */
+  follow_requested: boolean;
+  /** target → viewer follow is accepted (they follow you). */
+  follows_you: boolean;
+  /** target → viewer follow is pending (they've asked to follow you). */
+  requests_you: boolean;
+  /** you have blocked them. */
+  blocked: boolean;
+  /** they have blocked you. */
+  blocked_by: boolean;
+};
+
+/** Returned by every relationship mutation: the recomputed state plus
+ *  the target's live follower/following counts. */
+export type RelationshipResult = {
+  relationship: RelationshipState;
+  follower_count: number;
+  following_count: number;
+};
+
 export type PublicProfile = {
   handle: string;
   name: string;
   avatar_url: string | null;
   joined_at: string;
+  /** ISO-3166-1 alpha-2 account country, or null when unknown. */
+  country: string | null;
   post_count: number;
+  follower_count: number;
+  following_count: number;
+  relationship: RelationshipState | null;
   public_collections: Collection[];
 };
 
@@ -168,6 +198,14 @@ export const posts = {
   unreshare(id: string) {
     return call<void>(`/posts/${id}/reshare`, { method: "DELETE" });
   },
+  /** Report a post. category from PostReportCategory; reason optional.
+   *  Auth-required (401 for anonymous callers). Returns nothing (204). */
+  report(id: string, category: PostReportCategory, reason: string) {
+    return call<void>(`/posts/${id}/report`, {
+      method: "POST",
+      body: JSON.stringify({ category, reason }),
+    });
+  },
   /** R2 presigned PUT for a single post image. Returns the public URL the post should persist. */
   async uploadImage(file: File): Promise<string> {
     const { upload_url, public_url } = await call<{
@@ -347,3 +385,112 @@ export const profile = {
     return call<Post[]>(`/u/${encodeURIComponent(handle)}/feed?${qs}`);
   },
 };
+
+// ─── Relationships (follow / block / report) ───────────────────────────────
+
+/** Allowed user-report categories — mirrors the BFF allow-list. */
+export type ReportCategory =
+  | "spam"
+  | "harassment"
+  | "impersonation"
+  | "inappropriate"
+  | "other";
+
+/** Allowed post-report categories — mirrors the BFF allow-list. */
+export type PostReportCategory =
+  | "spam"
+  | "harassment"
+  | "misinformation"
+  | "inappropriate"
+  | "other";
+
+// ─── Notifications ─────────────────────────────────────────────────────────
+
+/** One in-app notification for the signed-in user. `read_at` is absent
+ *  (undefined) while unread. Actor fields describe who triggered it. */
+export type AppNotification = {
+  id: string;
+  kind: string;
+  created_at: string;
+  read_at?: string | null;
+  actor_id?: string | null;
+  actor_name?: string | null;
+  actor_handle?: string | null;
+  actor_avatar_url?: string | null;
+};
+
+export const notifications = {
+  /** The caller's notifications, newest first. */
+  list(limit = 30, offset = 0) {
+    const qs = new URLSearchParams({
+      limit: String(limit),
+      offset: String(offset),
+    });
+    return call<AppNotification[]>(`/notifications?${qs}`);
+  },
+  /** Unread count for the header bell badge. */
+  unreadCount() {
+    return call<{ count: number }>("/notifications/unread-count");
+  },
+  /** Mark every notification read (called when the page opens). */
+  markAllRead() {
+    return call<void>("/notifications/read", { method: "POST" });
+  },
+};
+
+export const relationships = {
+  /** Send a follow REQUEST. The target must accept before it counts as a
+   *  follow — the returned relationship reflects `follow_requested: true`
+   *  until then. Requires the viewer to be signed in (401 otherwise). */
+  follow(handle: string) {
+    return call<RelationshipResult>(`/u/${encodeURIComponent(handle)}/follow`, {
+      method: "POST",
+    });
+  },
+  /** Unfollow, or cancel a still-pending request. Idempotent. */
+  unfollow(handle: string) {
+    return call<RelationshipResult>(`/u/${encodeURIComponent(handle)}/follow`, {
+      method: "DELETE",
+    });
+  },
+  /** Accept the target's pending request to follow you. */
+  accept(handle: string) {
+    return call<RelationshipResult>(
+      `/u/${encodeURIComponent(handle)}/follow/accept`,
+      { method: "POST" },
+    );
+  },
+  /** Reject the target's pending request to follow you. */
+  reject(handle: string) {
+    return call<RelationshipResult>(
+      `/u/${encodeURIComponent(handle)}/follow/reject`,
+      { method: "POST" },
+    );
+  },
+  /** Remove the target from your followers (they currently follow you). */
+  removeFollower(handle: string) {
+    return call<RelationshipResult>(
+      `/u/${encodeURIComponent(handle)}/follower`,
+      { method: "DELETE" },
+    );
+  },
+  /** Block the target. Severs follows both ways. */
+  block(handle: string) {
+    return call<RelationshipResult>(`/u/${encodeURIComponent(handle)}/block`, {
+      method: "POST",
+    });
+  },
+  /** Remove your block on the target. */
+  unblock(handle: string) {
+    return call<RelationshipResult>(`/u/${encodeURIComponent(handle)}/block`, {
+      method: "DELETE",
+    });
+  },
+  /** File a report against the target. Returns nothing (204). */
+  report(handle: string, category: ReportCategory, reason: string) {
+    return call<void>(`/u/${encodeURIComponent(handle)}/report`, {
+      method: "POST",
+      body: JSON.stringify({ category, reason }),
+    });
+  },
+};