Barazo default frontend barazo.forum
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat(web): display author avatar and name in reply cards

Shows avatar (or initial fallback), display name, and links to
user profile. Keeps h3 heading for a11y. Part of P2.8.

+24 -3
+24 -3
src/components/reply-card.tsx
··· 5 5 * @see specs/prd-web.md Section 4 (Topic Components) 6 6 */ 7 7 8 + import Link from 'next/link' 8 9 import { Heart, Clock, Link as LinkIcon } from '@phosphor-icons/react/dist/ssr' 9 10 import type { Reply } from '@/lib/api/types' 10 11 import { cn } from '@/lib/utils' ··· 61 62 {/* Header */} 62 63 <div className="flex items-center justify-between border-b border-border px-4 py-2"> 63 64 <div className="flex items-center gap-2 text-sm"> 64 - <h3 id={headingId} className="font-medium text-foreground"> 65 - {reply.authorDid} 66 - </h3> 65 + <Link 66 + href={`/u/${reply.author?.handle ?? reply.authorDid}`} 67 + className="flex items-center gap-2 hover:text-foreground" 68 + > 69 + {reply.author?.avatarUrl ? ( 70 + <img 71 + src={reply.author.avatarUrl} 72 + alt="" 73 + className="h-6 w-6 rounded-full object-cover" 74 + loading="lazy" 75 + /> 76 + ) : ( 77 + <span 78 + className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium" 79 + aria-hidden="true" 80 + > 81 + {(reply.author?.displayName ?? reply.author?.handle ?? '?')[0]?.toUpperCase()} 82 + </span> 83 + )} 84 + <h3 id={headingId} className="font-medium text-foreground"> 85 + {reply.author?.displayName ?? reply.author?.handle ?? reply.authorDid} 86 + </h3> 87 + </Link> 67 88 <span className="text-muted-foreground" aria-hidden="true"> 68 89 · 69 90 </span>