feat(ST-351): add UserAvatar component and /api/users/[id]/avatar route

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/shared/user-avatar.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg'
+
+const SIZE_CLASSES: Record<AvatarSize, string> = {
+  xs: 'size-6 text-[10px]',
+  sm: 'size-8 text-xs',
+  md: 'size-10 text-sm',
+  lg: 'size-12 text-base',
+}
+
+interface UserAvatarProps {
+  userId: string
+  username: string
+  size?: AvatarSize
+  className?: string
+}
+
+export function UserAvatar({ userId, username, size = 'md', className }: UserAvatarProps) {
+  const initials = username.slice(0, 2).toUpperCase()
+
+  return (
+    <Avatar className={cn(SIZE_CLASSES[size], className)}>
+      <AvatarImage src={`/api/users/${userId}/avatar`} alt={username} />
+      <AvatarFallback className="bg-primary-container text-primary-container-foreground font-medium">
+        {initials}
+      </AvatarFallback>
+    </Avatar>
+  )
+}