feat(users): Add comprehensive profile picture upload and cropping functionality

[codeunia-dev]

• Implement ImageCropper component for precise image cropping
• Create ProfilePictureUpload component with advanced file handling
• Add support for image validation, preview, and cropping
• Integrate with Supabase client for file upload
• Enhance user experience with intuitive UI controls
• Implement error handling and file type/size validation
• Support circular avatar cropping with zoom and positioning controls

Authored-by: @akshay0611

Summary by CodeRabbit

Release Notes

• New Features
  • Added profile picture upload and management with built-in circular image cropper
  • Users can zoom (1x-3x), adjust crop area, and preview before applying changes
  • Profile pictures display on user profiles with initials as fallback
  • Supports uploading, cropping, and removing profile pictures with file size validation (max 5MB)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 3, 2025 5:10am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces profile picture management by adding a client-side image cropper component, a profile picture upload handler with Supabase integration, profile service methods for avatar operations, and extends the Profile type and views to display avatars.

Changes

Cohort / File(s)	Summary
New UI Components for Image Cropping & Upload components/users/ImageCropper.tsx, components/users/ProfilePictureUpload.tsx	ImageCropper: New modal component with react-easy-crop for circular image cropping, zoom controls, and canvas-based blob generation. ProfilePictureUpload: New component managing avatar uploads, validation (max 5MB), Supabase storage integration, profile updates, and real-time preview.
Profile Management Integration components/users/ProfileSettings.tsx, components/users/ProfileView.tsx	ProfileSettings: Integrates ProfilePictureUpload into Basic Information section, updates avatar_url state on upload completion. ProfileView: Adds AvatarImage component to conditionally render uploaded avatars with fallback initials.
Service Layer & Type Extensions lib/services/profile.ts, types/profile.ts	profile.ts: Adds uploadAvatar and deleteAvatar methods to ProfileService for Supabase storage operations. types/profile.ts: Extends Profile and ProfileUpdateData interfaces with optional avatar_url field.
Dependency Management package.json	Adds react-easy-crop (^5.5.3) as runtime dependency.

Sequence Diagram

sequenceDiagram
    actor User
    participant PS as ProfileSettings
    participant PPU as ProfilePictureUpload
    participant IC as ImageCropper
    participant Supabase
    participant ProfileService

    User->>PPU: Click upload/change avatar
    PPU->>PPU: Validate file (type, size ≤ 5MB)
    PPU->>PPU: Read file as Data URL
    PPU->>IC: Show cropper (isOpen = true)
    User->>IC: Adjust crop & zoom
    User->>IC: Click Apply Crop
    IC->>IC: Generate cropped image blob via canvas
    IC->>PPU: Pass blob to onCropComplete
    PPU->>ProfileService: uploadAvatar(userId, blob)
    ProfileService->>Supabase: Upload to storage
    Supabase-->>ProfileService: Return public URL
    PPU->>PPU: Update profile avatar_url via createClient
    PPU->>PS: Call onUploadComplete(url)
    PS->>PS: Update avatar_url state, clear unsaved flag
    PPU->>PPU: Show preview with new avatar
    User->>ProfileView: View profile
    ProfileView->>ProfileView: Render AvatarImage with avatar_url

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Canvas operations & blob generation: Verify getCroppedImg logic handles edge cases and errors correctly (context checks, blob conversion failures).
• Supabase integration: Validate storage paths, public URL retrieval, and profile table updates for consistency.
• State synchronization: Ensure avatar_url updates cascade properly from ProfilePictureUpload → ProfileSettings → ProfileView.
• File validation: Confirm MIME type checking and 5MB size constraint are enforced before upload.
• Error handling: Review error catch/log patterns for upload, deletion, and Supabase operations.

Poem

🐰 A cropper so clever, a canvas so bright,
Avatars uploaded with zoom and delight!
From pixels to blobs, through Supabase's care,
Profile pictures bloom in the digital air! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/profilepicture

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5a0e01d and e2bc35a.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (7)

• components/users/ImageCropper.tsx (1 hunks)
• components/users/ProfilePictureUpload.tsx (1 hunks)
• components/users/ProfileSettings.tsx (3 hunks)
• components/users/ProfileView.tsx (2 hunks)
• lib/services/profile.ts (2 hunks)
• package.json (2 hunks)
• types/profile.ts (2 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}