feat: profile bio

components/social/comment/comment-row.tsx

@@ -18,29 +18,10 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { comments as commentsApi, SocialError, type Comment } from "@/lib/social";
 import { UserAvatar } from "@/components/ui/user-avatar";
+import { renderMentions } from "@/components/social/mention-text";
 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,
@@ -172,7 +153,7 @@ export function CommentRow({
                 @{comment.reply_to_handle}{" "}
               </span>
             ) : null}
-            {renderBody(comment.body)}
+            {renderMentions(comment.body)}
           </p>
 
           {/* Inline action row */}