feat: social graph features

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,
+  );
+}