chore: code refactor

components/profile/profile-header.tsx

@@ -34,6 +34,7 @@ import { Settings, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { RelationshipResult, RelationshipState } from "@/lib/social";
 import { ProfileActions } from "@/components/profile/profile-actions";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import {
   FollowListDrawer,
   type FollowMode,
@@ -110,10 +111,14 @@ export function ProfileHeader({
   return (
     <>
       <header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
-        <Avatar
+        <UserAvatar
           src={avatarURL}
           name={name}
-          onZoom={avatarURL ? () => setZoomOpen(true) : undefined}
+          className="size-24 sm:size-28"
+          textClassName="text-3xl"
+          interactive
+          onClick={avatarURL ? () => setZoomOpen(true) : undefined}
+          ariaLabel={`View ${name}'s profile picture`}
         />
         <div className="space-y-2">
           <div className="space-y-1">
@@ -242,51 +247,6 @@ function Stat({
   );
 }
 
-function Avatar({
-  src,
-  name,
-  onZoom,
-}: {
-  src: string | null;
-  name: string;
-  /** Provided when the avatar should be interactive — the parent shows
-   *  the zoom modal on click. Omit (or pass undefined) to render the
-   *  initials placeholder as a plain non-clickable element. */
-  onZoom?: () => void;
-}) {
-  if (src) {
-    return (
-      <button
-        type="button"
-        onClick={onZoom}
-        aria-label={`View ${name}'s profile picture`}
-        className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-      >
-        <Image
-          src={src}
-          alt={name}
-          width={112}
-          height={112}
-          className="size-24 sm:size-28 rounded-full object-cover ring-1 ring-foreground/10 hover:ring-foreground/30 transition"
-          unoptimized
-        />
-      </button>
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-24 sm:size-28 rounded-full bg-primary/15 text-primary flex items-center justify-center text-3xl font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
 /**
  * AvatarZoomModal — portaled full-screen overlay with the avatar shown
  * inside a large circular crop. Click the backdrop or press Escape to