05rgfly6g: Add HexAvatar and use it for every existing avatar

src/components/ExpertSearch.tsx

@@ -1,11 +1,11 @@
 "use client";
 
+import { HexAvatar } from "@/components/HexAvatar";
 import { useEffect, useRef, useState } from "react";
 import type { DiscoverCategory } from "@/lib/discover";
 import { fetchDiscover } from "@/lib/discover-client";
 import type { ExpertResult } from "@/lib/experts-search";
 import { fetchExperts } from "@/lib/experts-search-client";
-import { initials } from "@/lib/feed-model";
 
 export type SearchStatus = "idle" | "loading" | "ready" | "error";
 
@@ -61,12 +61,7 @@ export function ExpertSearchView(p: ExpertSearchViewProps) {
           <ul className="rail-list">
             {p.results.map((e) => (
               <li key={String(e.id)} className="rail-card expert-card" data-testid="search-result">
-                {e.pictureUrl ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img className="avatar" src={e.pictureUrl} alt="" width={40} height={40} />
-                ) : (
-                  <span className="avatar avatar-initials" aria-hidden="true">{initials(e.displayName)}</span>
-                )}
+                <HexAvatar name={e.displayName} pictureUrl={e.pictureUrl} size="md" />
                 <div className="rail-text">
                   <strong className="rail-name">{e.displayName || "Expert"}</strong>
                   {e.byline ? <span className="rail-byline">{e.byline}</span> : null}