feat: profile bio

components/profile/profile-header.tsx

@@ -35,6 +35,7 @@ import { cn } from "@/lib/utils";
 import type { RelationshipResult, RelationshipState } from "@/lib/social";
 import { ProfileActions } from "@/components/profile/profile-actions";
 import { DiscipleBadge } from "@/components/profile/disciple-badge";
+import { MentionText } from "@/components/social/mention-text";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import {
   FollowListDrawer,
@@ -55,6 +56,7 @@ export function ProfileHeader({
   country,
   interactiveCounts = true,
   isDirectDisciple = false,
+  bio,
 }: {
   avatarURL: string | null;
   name: string;
@@ -87,6 +89,10 @@ export function ProfileHeader({
    *  one of Śrīla Prabhupāda's own initiated disciples. Overlays his portrait
    *  on the avatar; tapping it explains the mark. */
   isDirectDisciple?: boolean;
+  /** The profile's bio. Plain text — `@handle` mentions are linkified on
+   *  render. Rendered left-aligned across the full column below the centred
+   *  identity block; omitted entirely when empty. */
+  bio?: string | null;
 }) {
   // Owner affordances ride on `editHref`; the follow-action row rides on
   // `enableActions`. Mutually exclusive by construction.
@@ -203,6 +209,17 @@ export function ProfileHeader({
             onResult={handleResult}
           />
         ) : null}
+
+        {/* Bio — left-aligned across the full column, unlike the centred
+            identity block above it. Prose reads badly centred once it wraps
+            past one line, and `self-stretch` overrides the header's
+            `items-center` so it spans edge to edge. */}
+        {bio?.trim() ? (
+          <MentionText
+            text={bio.trim()}
+            className="self-stretch text-left text-sm sm:text-[15px] leading-relaxed text-foreground"
+          />
+        ) : null}
       </header>
       {avatarURL ? (
         <AvatarZoomModal