feat: add inline mentions in comments

components/social/comment/comment-row.tsx

@@ -11,6 +11,7 @@
  */
 
 import { useEffect, useRef, useState } from "react";
+import Link from "next/link";
 import { HiHeart, HiOutlineHeart } from "react-icons/hi2";
 import { Pin } from "lucide-react";
 import { toast } from "sonner";
@@ -20,6 +21,26 @@ import { UserAvatar } from "@/components/ui/user-avatar";
 import { timeAgo } from "@/lib/time";
 import { CommentMenu } from "./comment-menu";
 
+// Split a comment body into text + clickable @handle links. The capturing
+// group keeps the delimiters so they can be turned into profile links.
+const MENTION_TOKEN = /(@[A-Za-z0-9_]+)/g;
+function renderBody(text: string) {
+  return text.split(MENTION_TOKEN).map((part, i) => {
+    if (part.length > 1 && part[0] === "@") {
+      return (
+        <Link
+          key={i}
+          href={`/u/${part.slice(1)}`}
+          className="font-medium text-primary hover:underline"
+        >
+          {part}
+        </Link>
+      );
+    }
+    return part;
+  });
+}
+
 export function CommentRow({
   comment,
   viewerId,
@@ -151,7 +172,7 @@ export function CommentRow({
                 @{comment.reply_to_handle}{" "}
               </span>
             ) : null}
-            {comment.body}
+            {renderBody(comment.body)}
           </p>
 
           {/* Inline action row */}