feat: add comments

components/notifications/notifications-provider.tsx

@@ -63,6 +63,10 @@ function messageFor(e: IncomingEvent): string {
       return `${who} liked your post`;
     case "post_mention":
       return `${who} mentioned you in a post`;
+    case "post_comment":
+      return `${who} commented on your post`;
+    case "comment_reply":
+      return `${who} replied to your comment`;
     default:
       return "You have a new notification";
   }

components/social/post-actions-footer.tsx

@@ -22,7 +22,7 @@
  */
 
 import { useRef, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Pin } from "lucide-react";
 import {
   HiHeart,
   HiOutlineArrowPath,
@@ -33,12 +33,18 @@ import {
 } from "react-icons/hi2";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
-import { posts as postsApi, SocialError, type Post } from "@/lib/social";
+import {
+  posts as postsApi,
+  SocialError,
+  type Comment,
+  type Post,
+} 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 { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
 import { PostLikesDrawer } from "@/components/social/post-likes-drawer";
+import { PostCommentsDrawer } from "@/components/social/post-comments-drawer";
 import { useSharePost } from "./share-post-provider";
 
 // All icons come from the Heroicons v2 outline family (react-icons
@@ -68,6 +74,13 @@ export function PostActionsFooter({ post }: { post: Post }) {
   const [likeCount, setLikeCount] = useState<number>(post.likes_count ?? 0);
   const [likesOpen, setLikesOpen] = useState(false);
   const likeBusy = useRef(false);
+  // Comments drawer + the post's pinned comment (shown below the action row
+  // even when the drawer is closed). Seeded from the hydrated post; kept in
+  // sync as the author pins/unpins inside the drawer.
+  const [commentsOpen, setCommentsOpen] = useState(false);
+  const [pinned, setPinned] = useState<Comment | null>(
+    post.pinned_comment ?? null,
+  );
 
   const isOwner = !!user && user.id === post.user_id;
   // Owners and resharers both see Send — the post is "on their account"
@@ -161,11 +174,7 @@ export function PostActionsFooter({ post }: { post: Post }) {
           ) : null}
           <ActionButton
             label="Comment"
-            onClick={() =>
-              withAuth(() => {
-                toast("Comments are coming soon", { duration: 2000 });
-              })
-            }
+            onClick={() => setCommentsOpen(true)}
             icon={<HiOutlineChatBubbleOvalLeft className={ICON_CLASS} />}
           />
           {/* Reshare for posts not yet on your account, Send for posts
@@ -209,6 +218,22 @@ export function PostActionsFooter({ post }: { post: Post }) {
         />
       </div>
 
+      {/* Pinned comment — stays visible under the action row even with the
+          comments drawer closed. Tapping it opens the thread. */}
+      {pinned ? (
+        <button
+          type="button"
+          onClick={() => setCommentsOpen(true)}
+          className="mx-2 mt-1 flex w-[calc(100%-1rem)] items-center gap-1.5 rounded-lg bg-muted/50 px-3 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-muted"
+        >
+          <Pin className="size-3.5 shrink-0 text-primary" />
+          <span className="font-medium text-foreground shrink-0">
+            @{pinned.author_handle}
+          </span>
+          <span className="truncate">{pinned.body}</span>
+        </button>
+      ) : null}
+
       <CollectionsDrawer
         open={collectionsOpen}
         onClose={() => setCollectionsOpen(false)}
@@ -220,6 +245,12 @@ export function PostActionsFooter({ post }: { post: Post }) {
         postId={post.id}
         onClose={() => setLikesOpen(false)}
       />
+      <PostCommentsDrawer
+        open={commentsOpen}
+        post={post}
+        onClose={() => setCommentsOpen(false)}
+        onPinnedChange={setPinned}
+      />
       {/* SharePostSheet is mounted globally by SharePostProvider, so
           no per-card instance lives here. The provider's
           openShareSheet swaps the active post under the hood. */}

components/social/post-comments-drawer.tsx

@@ -0,0 +1,749 @@
+"use client";
+
+/**
+ * PostCommentsDrawer — the comments sheet for a post.
+ *
+ * Right-side on desktop, bottom on mobile (vaul `direction`), with a FULLY
+ * TRANSPARENT overlay so the post stays visible behind it while reading the
+ * thread. Anyone signed in can comment; the composer gates anonymous users
+ * through the auth modal.
+ *
+ * Threading is one level deep: top-level comments each own a single flat
+ * thread of replies. Replying to a reply still lands in that one thread,
+ * addressed (visually) to whoever was answered. The post author can pin one
+ * comment (shown first here and in the card footer) and delete any comment;
+ * a comment's author can delete their own (a thread root takes its replies
+ * with it — behind a confirm). Likes show a count only.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { HiHeart, HiOutlineHeart } from "react-icons/hi2";
+import { Loader2, Pin, PinOff, Send, Trash2, X } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import {
+  comments as commentsApi,
+  SocialError,
+  type Comment,
+  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 { Drawer, DrawerContent } from "@/components/ui/drawer";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
+
+const PAGE = 20;
+
+export function PostCommentsDrawer({
+  open,
+  post,
+  onClose,
+  onPinnedChange,
+}: {
+  open: boolean;
+  post: Post;
+  onClose: () => void;
+  /** Notifies the parent (the card footer) when the pinned comment changes,
+   *  so the footer's pinned line stays in sync without a refetch. */
+  onPinnedChange?: (pinned: Comment | null) => void;
+}) {
+  const { user } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const direction = isMobile ? "bottom" : "right";
+  const isPostAuthor = !!user && user.id === post.user_id;
+
+  const [items, setItems] = useState<Comment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasMore, setHasMore] = useState(false);
+  const [posting, setPosting] = useState(false);
+  const [draft, setDraft] = useState("");
+  // The comment being replied to (null = a new top-level comment).
+  const [replyTo, setReplyTo] = useState<{ id: string; handle: string } | null>(
+    null,
+  );
+  const [toDelete, setToDelete] = useState<Comment | null>(null);
+  const [toReport, setToReport] = useState<Comment | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Load the first page whenever the drawer opens for a post.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    setItems([]);
+    setReplyTo(null);
+    commentsApi
+      .list(post.id, { limit: PAGE, offset: 0 })
+      .then((rows) => {
+        if (cancelled) return;
+        setItems(rows ?? []);
+        setHasMore((rows?.length ?? 0) === PAGE);
+      })
+      .catch(() => {})
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [open, post.id]);
+
+  const loadMore = useCallback(async () => {
+    try {
+      const rows = await commentsApi.list(post.id, {
+        limit: PAGE,
+        offset: items.length,
+      });
+      setItems((prev) => [...prev, ...(rows ?? [])]);
+      setHasMore((rows?.length ?? 0) === PAGE);
+    } catch {
+      /* leave the list as-is on error */
+    }
+  }, [post.id, items.length]);
+
+  // Replace a comment in place (after a like toggle / reply-count bump).
+  const patch = useCallback((id: string, fn: (c: Comment) => Comment) => {
+    setItems((prev) => prev.map((c) => (c.id === id ? fn(c) : c)));
+  }, []);
+
+  async function submit() {
+    const body = draft.trim();
+    if (!body || posting) return;
+    if (!(await requireAuth())) return;
+    setPosting(true);
+    try {
+      const created = await commentsApi.create(
+        post.id,
+        body,
+        replyTo?.id,
+      );
+      setDraft("");
+      if (created.parent_id) {
+        // A reply — bump the root's count and append into its open thread.
+        bumpReply(created.parent_id, created);
+        setReplyTo(null);
+      } else {
+        // Top-level — drop it in just below any pinned comment.
+        setItems((prev) => {
+          const pinnedFirst = prev[0]?.pinned_at ? 1 : 0;
+          return [
+            ...prev.slice(0, pinnedFirst),
+            created,
+            ...prev.slice(pinnedFirst),
+          ];
+        });
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not post comment",
+        { duration: 3000 },
+      );
+    } finally {
+      setPosting(false);
+    }
+  }
+
+  // Append a freshly-created reply into its root thread's open reply list (if
+  // loaded) and bump the visible reply count.
+  const repliesRef = useRef<Record<string, (c: Comment) => void>>({});
+  function bumpReply(rootId: string, reply: Comment) {
+    patch(rootId, (c) => ({ ...c, reply_count: c.reply_count + 1 }));
+    repliesRef.current[rootId]?.(reply);
+  }
+
+  function startReply(target: Comment) {
+    // Reply chip addresses whoever was tapped; the thread is the root.
+    setReplyTo({ id: target.id, handle: target.author_handle });
+    inputRef.current?.focus();
+  }
+
+  async function pinToggle(c: Comment) {
+    const pinning = !c.pinned_at;
+    try {
+      if (pinning) await commentsApi.pin(c.id);
+      else await commentsApi.unpin(c.id);
+      // Reload the first page so pinned-first ordering is authoritative.
+      const rows = await commentsApi.list(post.id, { limit: PAGE, offset: 0 });
+      setItems(rows ?? []);
+      setHasMore((rows?.length ?? 0) === PAGE);
+      onPinnedChange?.(pinning ? { ...c, pinned_at: new Date().toISOString() } : null);
+      toast(pinning ? "Comment pinned" : "Comment unpinned", { duration: 1800 });
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not update pin",
+        { duration: 3000 },
+      );
+    }
+  }
+
+  async function confirmDelete() {
+    if (!toDelete) return;
+    const c = toDelete;
+    await commentsApi.delete(c.id);
+    if (c.parent_id) {
+      // A reply — drop the root's count; the thread list prunes itself.
+      patch(c.parent_id, (p) => ({
+        ...p,
+        reply_count: Math.max(0, p.reply_count - 1),
+      }));
+      repliesRef.current[c.parent_id]?.({ ...c, body: "__deleted__" });
+    } else {
+      setItems((prev) => prev.filter((x) => x.id !== c.id));
+      if (c.pinned_at) onPinnedChange?.(null);
+    }
+  }
+
+  return (
+    <>
+      <Drawer
+        open={open}
+        direction={direction}
+        repositionInputs={false}
+        onOpenChange={(o) => {
+          if (!o) onClose();
+        }}
+      >
+        <DrawerContent
+          direction={direction}
+          // Transparent scrim: keep the post visible behind the sheet.
+          overlayClassName="bg-transparent"
+          className={cn(
+            "bg-card flex flex-col shadow-2xl",
+            isMobile ? "h-[80vh]" : "h-full w-[420px] max-w-[92vw]",
+          )}
+        >
+          <div className="flex items-center justify-between border-b border-border px-4 py-3 shrink-0">
+            <h2 className="text-base font-semibold text-foreground">Comments</h2>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close comments"
+              className="size-8 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-3">
+            {loading ? (
+              <div className="flex justify-center py-10">
+                <Loader2 className="size-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : items.length === 0 ? (
+              <p className="py-10 text-center text-sm text-muted-foreground">
+                No comments yet. Be the first to comment.
+              </p>
+            ) : (
+              <ul className="space-y-4">
+                {items.map((c) => (
+                  <CommentRow
+                    key={c.id}
+                    comment={c}
+                    viewerId={user?.id}
+                    isPostAuthor={isPostAuthor}
+                    onReply={startReply}
+                    onLikeChange={(likes, liked) =>
+                      patch(c.id, (x) => ({
+                        ...x,
+                        likes_count: likes,
+                        viewer_has_liked: liked,
+                      }))
+                    }
+                    onPinToggle={() => pinToggle(c)}
+                    onRequestDelete={setToDelete}
+                    onRequestReport={setToReport}
+                    requireAuth={requireAuth}
+                    registerThread={(fn) => {
+                      if (fn) repliesRef.current[c.id] = fn;
+                      else delete repliesRef.current[c.id];
+                    }}
+                  />
+                ))}
+                {hasMore ? (
+                  <li>
+                    <button
+                      type="button"
+                      onClick={loadMore}
+                      className="text-sm font-medium text-primary hover:underline"
+                    >
+                      Load more comments
+                    </button>
+                  </li>
+                ) : null}
+              </ul>
+            )}
+          </div>
+
+          {/* Composer */}
+          <div className="border-t border-border p-3 shrink-0">
+            {replyTo ? (
+              <div className="mb-2 flex items-center justify-between rounded-md bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
+                <span>
+                  Replying to <span className="font-medium">@{replyTo.handle}</span>
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setReplyTo(null)}
+                  aria-label="Cancel reply"
+                  className="rounded p-0.5 hover:text-foreground"
+                >
+                  <X className="size-3.5" />
+                </button>
+              </div>
+            ) : null}
+            <div className="flex items-end gap-2">
+              <textarea
+                ref={inputRef}
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    submit();
+                  }
+                }}
+                rows={1}
+                maxLength={2000}
+                placeholder={replyTo ? "Write a reply…" : "Add a comment…"}
+                className="flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40 max-h-32"
+              />
+              <button
+                type="button"
+                onClick={submit}
+                disabled={posting || draft.trim() === ""}
+                aria-label="Post comment"
+                className="size-10 shrink-0 inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+              >
+                {posting ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Send className="size-4" />
+                )}
+              </button>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <ConfirmModal
+        open={toDelete !== null}
+        onClose={() => setToDelete(null)}
+        title="Delete this comment?"
+        message={
+          toDelete && !toDelete.parent_id && toDelete.reply_count > 0
+            ? "Its replies will be deleted too. This can't be undone."
+            : "This can't be undone."
+        }
+        confirmLabel="Delete"
+        onConfirm={confirmDelete}
+      />
+
+      <ReportCommentModal
+        comment={toReport}
+        onClose={() => setToReport(null)}
+      />
+    </>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// One comment (top-level or reply). Top-level rows own a lazily-loaded reply
+// thread; replies render the "Replying to @handle" prefix.
+// ───────────────────────────────────────────────────────────────────────────
+
+function CommentRow({
+  comment,
+  viewerId,
+  isPostAuthor,
+  onReply,
+  onLikeChange,
+  onPinToggle,
+  onRequestDelete,
+  onRequestReport,
+  requireAuth,
+  registerThread,
+  isReply = false,
+}: {
+  comment: Comment;
+  viewerId?: string;
+  isPostAuthor: boolean;
+  onReply: (c: Comment) => void;
+  onLikeChange: (likes: number, liked: boolean) => void;
+  onPinToggle: () => void;
+  onRequestDelete: (c: Comment) => void;
+  onRequestReport: (c: Comment) => void;
+  requireAuth: () => Promise<boolean>;
+  /** Top-level rows register a callback so a newly-posted reply can be spliced
+   *  into their open thread. Replies pass nothing. */
+  registerThread?: (fn: ((c: Comment) => void) | null) => void;
+  isReply?: boolean;
+}) {
+  const [replies, setReplies] = useState<Comment[]>([]);
+  const [showReplies, setShowReplies] = useState(false);
+  const [repliesLoaded, setRepliesLoaded] = useState(false);
+  const likeBusy = useRef(false);
+
+  const canDelete = viewerId === comment.user_id || isPostAuthor;
+  const canReport = !!viewerId && viewerId !== comment.user_id;
+  const pinnable = isPostAuthor && !isReply;
+
+  // Expose a splice hook so the drawer can append a reply created from the
+  // composer. Replies created while collapsed still get the count bump; they
+  // show once expanded (re-fetched) or appended if already open.
+  useEffect(() => {
+    if (isReply || !registerThread) return;
+    registerThread((c: Comment) => {
+      if (c.body === "__deleted__") {
+        setReplies((prev) => prev.filter((x) => x.id !== c.id));
+        return;
+      }
+      setRepliesLoaded(true);
+      setShowReplies(true);
+      setReplies((prev) =>
+        prev.some((x) => x.id === c.id) ? prev : [...prev, c],
+      );
+    });
+    return () => registerThread(null);
+  }, [isReply, registerThread]);
+
+  async function toggleReplies() {
+    if (!showReplies && !repliesLoaded) {
+      try {
+        const rows = await commentsApi.replies(comment.id, { limit: 50 });
+        setReplies(rows ?? []);
+        setRepliesLoaded(true);
+      } catch {
+        /* ignore */
+      }
+    }
+    setShowReplies((v) => !v);
+  }
+
+  async function likeToggle() {
+    if (likeBusy.current) return;
+    if (!(await requireAuth())) return;
+    likeBusy.current = true;
+    const next = !comment.viewer_has_liked;
+    // optimistic
+    onLikeChange(
+      Math.max(0, comment.likes_count + (next ? 1 : -1)),
+      next,
+    );
+    try {
+      const res = next
+        ? await commentsApi.like(comment.id)
+        : await commentsApi.unlike(comment.id);
+      onLikeChange(res.likes_count, next);
+    } catch (err) {
+      onLikeChange(comment.likes_count, comment.viewer_has_liked);
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not update like",
+        { duration: 3000 },
+      );
+    } finally {
+      likeBusy.current = false;
+    }
+  }
+
+  return (
+    <li className={cn(isReply && "mt-3")}>
+      <div className="flex gap-3">
+        <Avatar src={comment.author_avatar_url ?? null} name={comment.author_name} />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-foreground truncate">
+              {comment.author_name}
+            </span>
+            {!isReply && comment.pinned_at ? (
+              <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                <Pin className="size-3" /> Pinned
+              </span>
+            ) : null}
+            <span className="text-xs text-muted-foreground">
+              {timeAgo(comment.created_at)}
+            </span>
+          </div>
+          <p className="mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground">
+            {comment.reply_to_handle ? (
+              <span className="font-medium text-primary">
+                @{comment.reply_to_handle}{" "}
+              </span>
+            ) : null}
+            {comment.body}
+          </p>
+
+          {/* Inline action row */}
+          <div className="mt-1.5 flex items-center gap-4 text-xs text-muted-foreground">
+            <button
+              type="button"
+              onClick={likeToggle}
+              className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+              aria-label={comment.viewer_has_liked ? "Unlike" : "Like"}
+            >
+              {comment.viewer_has_liked ? (
+                <HiHeart className="size-4 text-red-500" />
+              ) : (
+                <HiOutlineHeart className="size-4" />
+              )}
+              {comment.likes_count > 0 ? (
+                <span className="tabular-nums">{comment.likes_count}</span>
+              ) : null}
+            </button>
+            <button
+              type="button"
+              onClick={() => onReply(comment)}
+              className="font-medium hover:text-foreground transition-colors"
+            >
+              Reply
+            </button>
+            {pinnable ? (
+              <button
+                type="button"
+                onClick={onPinToggle}
+                className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+              >
+                {comment.pinned_at ? (
+                  <>
+                    <PinOff className="size-3.5" /> Unpin
+                  </>
+                ) : (
+                  <>
+                    <Pin className="size-3.5" /> Pin
+                  </>
+                )}
+              </button>
+            ) : null}
+            {canDelete ? (
+              <button
+                type="button"
+                onClick={() => onRequestDelete(comment)}
+                className="inline-flex items-center gap-1 hover:text-destructive transition-colors"
+              >
+                <Trash2 className="size-3.5" /> Delete
+              </button>
+            ) : null}
+            {canReport ? (
+              <button
+                type="button"
+                onClick={() => onRequestReport(comment)}
+                className="hover:text-foreground transition-colors"
+              >
+                Report
+              </button>
+            ) : null}
+          </div>
+
+          {/* Replies */}
+          {!isReply && comment.reply_count > 0 ? (
+            <button
+              type="button"
+              onClick={toggleReplies}
+              className="mt-2 text-xs font-medium text-primary hover:underline"
+            >
+              {showReplies
+                ? "Hide replies"
+                : `View ${comment.reply_count} ${comment.reply_count === 1 ? "reply" : "replies"}`}
+            </button>
+          ) : null}
+
+          {!isReply && showReplies ? (
+            <ul className="mt-1 border-l border-border pl-3">
+              {replies.map((r) => (
+                <CommentRow
+                  key={r.id}
+                  comment={r}
+                  viewerId={viewerId}
+                  isPostAuthor={isPostAuthor}
+                  onReply={onReply}
+                  onLikeChange={(likes, liked) =>
+                    setReplies((prev) =>
+                      prev.map((x) =>
+                        x.id === r.id
+                          ? { ...x, likes_count: likes, viewer_has_liked: liked }
+                          : x,
+                      ),
+                    )
+                  }
+                  onPinToggle={() => {}}
+                  onRequestDelete={onRequestDelete}
+                  onRequestReport={onRequestReport}
+                  requireAuth={requireAuth}
+                  isReply
+                />
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+// Report modal (compact)
+// ───────────────────────────────────────────────────────────────────────────
+
+const REPORT_CATEGORIES: { value: PostReportCategory; label: string }[] = [
+  { value: "spam", label: "Spam or misleading" },
+  { value: "harassment", label: "Harassment or bullying" },
+  { value: "misinformation", label: "Misinformation" },
+  { value: "inappropriate", label: "Inappropriate content" },
+  { value: "other", label: "Something else" },
+];
+
+function ReportCommentModal({
+  comment,
+  onClose,
+}: {
+  comment: Comment | null;
+  onClose: () => void;
+}) {
+  const [category, setCategory] = useState<PostReportCategory>("spam");
+  const [reason, setReason] = useState("");
+  const [working, setWorking] = useState(false);
+
+  useEffect(() => {
+    if (comment) {
+      setCategory("spam");
+      setReason("");
+      setWorking(false);
+    }
+  }, [comment]);
+
+  if (!comment) return null;
+
+  async function submit() {
+    if (!comment) return;
+    setWorking(true);
+    try {
+      await commentsApi.report(comment.id, category, reason.trim());
+      toast("Thanks — your report was submitted", { duration: 2500 });
+      onClose();
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not submit report",
+        { duration: 3000 },
+      );
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center px-4">
+      <div
+        className="absolute inset-0 bg-foreground/40 backdrop-blur-sm"
+        onClick={() => !working && onClose()}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-xl p-5"
+      >
+        <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
+          Report comment
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Reports are private and reviewed by our team.
+        </p>
+        <div className="mt-4 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 cursor-pointer transition-colors",
+                category === c.value
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:bg-muted",
+              )}
+            >
+              <input
+                type="radio"
+                name="comment-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>
+        <textarea
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          rows={2}
+          maxLength={2000}
+          placeholder="Add details (optional)"
+          className="mt-3 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        />
+        <div className="mt-4 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={working}
+            className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={working}
+            className="h-10 px-4 rounded-md text-sm font-medium bg-destructive text-white hover:bg-destructive/90 transition-colors disabled:opacity-60"
+          >
+            {working ? "Submitting…" : "Submit report"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────────────────────────
+
+function Avatar({ src, name }: { src: string | null; name: string }) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={36}
+        height={36}
+        className="size-9 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
+        unoptimized
+      />
+    );
+  }
+  const initials =
+    name
+      .replace(/^@/, "")
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div className="size-9 shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center text-xs font-semibold ring-1 ring-foreground/10">
+      {initials}
+    </div>
+  );
+}
+
+/** Compact relative time ("just now", "5m ago", "3h ago", "2d ago"). */
+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();
+}

components/ui/drawer.tsx

@@ -46,10 +46,14 @@ const DrawerContent = React.forwardRef<
   React.ComponentRef<typeof DrawerPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
     direction?: "top" | "bottom" | "left" | "right";
+    /** Override the scrim styling — e.g. "bg-transparent" for a see-through
+     *  overlay that keeps the content behind the drawer visible while still
+     *  catching outside clicks to dismiss. */
+    overlayClassName?: string;
   }
->(({ className, children, direction = "bottom", ...props }, ref) => (
+>(({ className, children, direction = "bottom", overlayClassName, ...props }, ref) => (
   <DrawerPortal>
-    <DrawerOverlay />
+    <DrawerOverlay className={overlayClassName} />
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(