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>
2026-02-02 13:19:28 +01:00
parent f9f88d68ab
commit 8fda8deded
14 changed files with 346 additions and 140 deletions
--- a/src/components/layouts/admin-sidebar.tsx
+++ b/src/components/layouts/admin-sidebar.tsx
@@ -37,6 +37,8 @@ import {
 import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 import { EditionSelector } from '@/components/shared/edition-selector'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'

 interface AdminSidebarProps {
  user: {
@@ -125,6 +127,7 @@ const roleLabels: Record<string, string> = {
 export function AdminSidebar({ user }: AdminSidebarProps) {
  const pathname = usePathname()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()

  const isSuperAdmin = user.role === 'SUPER_ADMIN'
  const roleLabel = roleLabels[user.role || ''] || 'User'
@@ -242,10 +245,8 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
            <DropdownMenuTrigger asChild>
              <button className="group flex w-full items-center gap-3 rounded-xl p-2.5 text-left transition-all duration-200 hover:bg-slate-100 dark:hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                {/* Avatar */}
-                <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-blue text-white shadow-xs transition-transform duration-200 group-hover:scale-[1.02]">
-                  <span className="text-sm font-semibold">
-                    {getInitials(user.name || user.email || 'U')}
-                  </span>
+                <div className="relative shrink-0">
+                  <UserAvatar user={user} avatarUrl={avatarUrl} size="md" />
                  {/* Online indicator */}
                  <div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-white bg-emerald-500" />
                </div>
--- a/src/components/layouts/jury-nav.tsx
+++ b/src/components/layouts/jury-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 { BookOpen, ClipboardList, Home, LogOut, Menu, Settings, User, X } from 'lucide-react'
-import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'

 interface JuryNavProps {
@@ -47,6 +47,7 @@ const navigation = [
 export function JuryNav({ user }: JuryNavProps) {
  const pathname = usePathname()
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()

  return (
    <>
@@ -90,11 +91,7 @@ export function JuryNav({ user }: JuryNavProps) {
                    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>
--- a/src/components/layouts/mentor-nav.tsx
+++ b/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>
--- a/src/components/layouts/observer-nav.tsx
+++ b/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>
--- a/src/components/shared/avatar-upload.tsx
+++ b/src/components/shared/avatar-upload.tsx
@@ -1,6 +1,8 @@
 'use client'

 import { useState, useRef, useCallback } from 'react'
+import Cropper from 'react-easy-crop'
+import type { Area } from 'react-easy-crop'
 import {
  Dialog,
  DialogContent,
@@ -13,8 +15,9 @@ import {
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { Slider } from '@/components/ui/slider'
 import { UserAvatar } from './user-avatar'
-import { Upload, Loader2, Trash2 } from 'lucide-react'
+import { Upload, Loader2, Trash2, ZoomIn } from 'lucide-react'
 import { trpc } from '@/lib/trpc/client'
 import { toast } from 'sonner'

@@ -32,6 +35,48 @@ type AvatarUploadProps = {
 const MAX_SIZE_MB = 5
 const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']

+/**
+ * Crop an image client-side using canvas and return a Blob.
+ */
+async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<Blob> {
+  const image = new Image()
+  image.crossOrigin = 'anonymous'
+
+  await new Promise<void>((resolve, reject) => {
+    image.onload = () => resolve()
+    image.onerror = reject
+    image.src = imageSrc
+  })
+
+  const canvas = document.createElement('canvas')
+  canvas.width = pixelCrop.width
+  canvas.height = pixelCrop.height
+  const ctx = canvas.getContext('2d')!
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  )
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob)
+        else reject(new Error('Canvas toBlob failed'))
+      },
+      'image/jpeg',
+      0.9
+    )
+  })
+}
+
 export function AvatarUpload({
  user,
  currentAvatarUrl,
@@ -39,8 +84,10 @@ export function AvatarUpload({
  children,
 }: AvatarUploadProps) {
  const [open, setOpen] = useState(false)
-  const [preview, setPreview] = useState<string | null>(null)
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [imageSrc, setImageSrc] = useState<string | null>(null)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
  const [isUploading, setIsUploading] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
@@ -50,49 +97,53 @@ export function AvatarUpload({
  const confirmUpload = trpc.avatar.confirmUpload.useMutation()
  const deleteAvatar = trpc.avatar.delete.useMutation()

+  const onCropComplete = useCallback((_croppedArea: Area, croppedPixels: Area) => {
+    setCroppedAreaPixels(croppedPixels)
+  }, [])
+
  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

-    // Validate type
    if (!ALLOWED_TYPES.includes(file.type)) {
      toast.error('Invalid file type. Please upload a JPEG, PNG, GIF, or WebP image.')
      return
    }

-    // Validate size
    if (file.size > MAX_SIZE_MB * 1024 * 1024) {
      toast.error(`File too large. Maximum size is ${MAX_SIZE_MB}MB.`)
      return
    }

-    setSelectedFile(file)
-
-    // Create preview
    const reader = new FileReader()
-    reader.onload = (e) => {
-      setPreview(e.target?.result as string)
+    reader.onload = (ev) => {
+      setImageSrc(ev.target?.result as string)
+      setCrop({ x: 0, y: 0 })
+      setZoom(1)
    }
    reader.readAsDataURL(file)
  }, [])

  const handleUpload = async () => {
-    if (!selectedFile) return
+    if (!imageSrc || !croppedAreaPixels) return

    setIsUploading(true)
    try {
-      // Get pre-signed upload URL (includes provider type for tracking)
+      // Crop the image client-side
+      const croppedBlob = await getCroppedImg(imageSrc, croppedAreaPixels)
+
+      // Get pre-signed upload URL
      const { uploadUrl, key, providerType } = await getUploadUrl.mutateAsync({
-        fileName: selectedFile.name,
-        contentType: selectedFile.type,
+        fileName: 'avatar.jpg',
+        contentType: 'image/jpeg',
      })

-      // Upload file directly to storage
+      // Upload cropped blob directly to storage
      const uploadResponse = await fetch(uploadUrl, {
        method: 'PUT',
-        body: selectedFile,
+        body: croppedBlob,
        headers: {
-          'Content-Type': selectedFile.type,
+          'Content-Type': 'image/jpeg',
        },
      })

@@ -100,7 +151,7 @@ export function AvatarUpload({
        throw new Error('Failed to upload file')
      }

-      // Confirm upload with the provider type that was used
+      // Confirm upload
      await confirmUpload.mutateAsync({ key, providerType })

      // Invalidate avatar query
@@ -108,8 +159,7 @@ export function AvatarUpload({

      toast.success('Avatar updated successfully')
      setOpen(false)
-      setPreview(null)
-      setSelectedFile(null)
+      resetState()
      onUploadComplete?.()
    } catch (error) {
      console.error('Upload error:', error)
@@ -135,9 +185,16 @@ export function AvatarUpload({
    }
  }

+  const resetState = () => {
+    setImageSrc(null)
+    setCrop({ x: 0, y: 0 })
+    setZoom(1)
+    setCroppedAreaPixels(null)
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }
+
  const handleCancel = () => {
-    setPreview(null)
-    setSelectedFile(null)
+    resetState()
    setOpen(false)
  }

@@ -154,37 +211,85 @@ export function AvatarUpload({
        <DialogHeader>
          <DialogTitle>Update Profile Picture</DialogTitle>
          <DialogDescription>
-            Upload a new profile picture. Allowed formats: JPEG, PNG, GIF, WebP.
-            Max size: {MAX_SIZE_MB}MB.
+            {imageSrc
+              ? 'Drag to reposition and use the slider to zoom.'
+              : 'Upload a new profile picture. Allowed formats: JPEG, PNG, GIF, WebP.'}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
-          {/* Preview */}
-          <div className="flex justify-center">
-            <UserAvatar
-              user={user}
-              avatarUrl={preview || currentAvatarUrl}
-              size="xl"
-            />
-          </div>
+          {imageSrc ? (
+            <>
+              {/* Cropper */}
+              <div className="relative w-full h-64 bg-muted rounded-lg overflow-hidden">
+                <Cropper
+                  image={imageSrc}
+                  crop={crop}
+                  zoom={zoom}
+                  aspect={1}
+                  cropShape="round"
+                  showGrid={false}
+                  onCropChange={setCrop}
+                  onCropComplete={onCropComplete}
+                  onZoomChange={setZoom}
+                />
+              </div>

-          {/* File input */}
-          <div className="space-y-2">
-            <Label htmlFor="avatar">Select image</Label>
-            <Input
-              ref={fileInputRef}
-              id="avatar"
-              type="file"
-              accept={ALLOWED_TYPES.join(',')}
-              onChange={handleFileSelect}
-              className="cursor-pointer"
-            />
-          </div>
+              {/* Zoom slider */}
+              <div className="flex items-center gap-3 px-1">
+                <ZoomIn className="h-4 w-4 text-muted-foreground shrink-0" />
+                <Slider
+                  value={[zoom]}
+                  min={1}
+                  max={3}
+                  step={0.1}
+                  onValueChange={([val]) => setZoom(val)}
+                  className="flex-1"
+                />
+              </div>
+
+              {/* Change image button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  resetState()
+                  fileInputRef.current?.click()
+                }}
+                className="w-full"
+              >
+                Choose a different image
+              </Button>
+            </>
+          ) : (
+            <>
+              {/* Current avatar preview */}
+              <div className="flex justify-center">
+                <UserAvatar
+                  user={user}
+                  avatarUrl={currentAvatarUrl}
+                  size="xl"
+                />
+              </div>
+
+              {/* File input */}
+              <div className="space-y-2">
+                <Label htmlFor="avatar">Select image</Label>
+                <Input
+                  ref={fileInputRef}
+                  id="avatar"
+                  type="file"
+                  accept={ALLOWED_TYPES.join(',')}
+                  onChange={handleFileSelect}
+                  className="cursor-pointer"
+                />
+              </div>
+            </>
+          )}
        </div>

        <DialogFooter className="flex-col gap-2 sm:flex-row">
-          {currentAvatarUrl && !preview && (
+          {currentAvatarUrl && !imageSrc && (
            <Button
              variant="destructive"
              onClick={handleDelete}
@@ -204,18 +309,20 @@ export function AvatarUpload({
            <Button variant="outline" onClick={handleCancel} className="flex-1">
              Cancel
            </Button>
-            <Button
-              onClick={handleUpload}
-              disabled={!selectedFile || isUploading}
-              className="flex-1"
-            >
-              {isUploading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Upload className="mr-2 h-4 w-4" />
-              )}
-              Upload
-            </Button>
+            {imageSrc && (
+              <Button
+                onClick={handleUpload}
+                disabled={!croppedAreaPixels || isUploading}
+                className="flex-1"
+              >
+                {isUploading ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Upload className="mr-2 h-4 w-4" />
+                )}
+                Upload
+              </Button>
+            )}
          </div>
        </DialogFooter>
      </DialogContent>