chore: code refactor

app/(app)/search/search-content.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useCallback, useRef, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import Image from "next/image";
 import Link from "next/link";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -858,7 +858,6 @@ function ResultMeta({ result }: { result: SearchResult }) {
 // ---------------------------------------------------------------------------
 
 function UserResultCard({ user }: { user: UserResult }) {
-  const initial = user.name?.charAt(0)?.toUpperCase() || "?";
   return (
     <Link
       href={`/u/${user.handle}`}
@@ -867,20 +866,12 @@ function UserResultCard({ user }: { user: UserResult }) {
         "hover:ring-foreground/25 hover:shadow-sm transition-all",
       )}
     >
-      {user.avatar_url ? (
-        <Image
-          src={user.avatar_url}
-          alt={user.name}
-          width={56}
-          height={56}
-          className="size-14 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-          unoptimized
-        />
-      ) : (
-        <div className="size-14 rounded-full bg-primary/15 text-primary flex items-center justify-center text-xl font-semibold ring-1 ring-foreground/10 shrink-0">
-          {initial}
-        </div>
-      )}
+      <UserAvatar
+        src={user.avatar_url}
+        name={user.name}
+        className="size-14"
+        textClassName="text-xl"
+      />
       <div className="min-w-0 flex-1">
         <p className="text-sm font-semibold text-foreground truncate">
           {user.name}