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/observer-nav.tsx

@@ -6,7 +6,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 {
 } from '@/components/ui/dropdown-menu'
 import type { Route } from 'next'
 import { Home, BarChart3, Menu, X, LogOut, Eye, Settings } from 'lucide-react'
-import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 
 interface ObserverNavProps {
@@ -42,6 +42,7 @@ const navigation = [
 export function ObserverNav({ user }: ObserverNavProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
 
   return (
     <header className="sticky top-0 z-40 border-b bg-card">
@@ -78,11 +79,7 @@ export function ObserverNav({ user }: ObserverNavProps) {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" className="gap-2">
-                <Avatar className="h-8 w-8">
-                  <AvatarFallback className="text-xs">
-                    {getInitials(user.name || user.email || 'O')}
-                  </AvatarFallback>
-                </Avatar>
+                <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
                 <span className="hidden sm:inline text-sm truncate max-w-[120px]">
                   {user.name || user.email}
                 </span>