Add image cropping to avatar upload and show avatars platform-wide

- Add react-easy-crop for circular crop + zoom UI on avatar upload
- Create server-side getUserAvatarUrl utility for generating pre-signed URLs
- Update all nav components (admin, jury, mentor, observer) to show user avatars
- Add avatar URLs to user list, mentor list, and project detail API responses
- Replace initials-only avatars with UserAvatar component across admin pages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/layouts/mentor-nav.tsx

@@ -7,7 +7,8 @@ import { usePathname } from 'next/navigation'
 import { signOut } from 'next-auth/react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +17,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { BookOpen, Home, LogOut, Menu, Settings, User, Users, X } from 'lucide-react'
-import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 
 interface MentorNavProps {
@@ -47,6 +47,7 @@ const navigation: { name: string; href: Route; icon: typeof Home }[] = [
 export function MentorNav({ user }: MentorNavProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
 
   return (
     <>
@@ -90,11 +91,7 @@ export function MentorNav({ user }: MentorNavProps) {
                     className="gap-2 hidden sm:flex"
                     size="sm"
                   >
-                    <Avatar className="h-7 w-7">
-                      <AvatarFallback className="text-xs">
-                        {getInitials(user.name || user.email || 'U')}
-                      </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
                     <span className="max-w-[120px] truncate">
                       {user.name || user.email}
                     </span>