feat(users): Enhance profile picture display and preview functionality

[codeunia-dev]

• Add dynamic avatar image rendering in PublicProfileView component
• Implement preview URL update effect in ProfilePictureUpload
• Import AvatarImage component to support external avatar URLs
• Add conditional avatar image rendering with fallback initials
• Improve user profile visual consistency across components

Summary by CodeRabbit

• Bug Fixes

  • Fixed profile picture upload preview synchronization to properly reflect changes to the current avatar URL.

• New Features

  • Enhanced avatar image rendering in public profile views with improved display logic for better visual presentation of user profiles.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

These changes enhance avatar synchronization and rendering across user profile components. A React effect in ProfilePictureUpload keeps preview state aligned with avatar URL prop changes, while PublicProfileView conditionally renders AvatarImage when profile avatar data exists.

Changes

Cohort / File(s)	Summary
Avatar State Synchronization components/users/ProfilePictureUpload.tsx	Adds useEffect hook to synchronize local previewUrl state with currentAvatarUrl prop changes
Avatar Rendering components/users/PublicProfileView.tsx	Imports AvatarImage component and conditionally renders it alongside AvatarFallback when profile.avatar_url exists

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Minor state synchronization pattern (useEffect for prop-to-state sync)
• Straightforward conditional rendering addition
• Well-scoped changes across two related files

Possibly related PRs

• feat(users): Add comprehensive profile picture upload and cropping functionality #261 — Directly addresses ProfilePictureUpload enhancements and introduces AvatarImage component usage in profile-related components

Poem

🐰 Avatar wishes bloom and sway,
State stays synced throughout the day,
When profiles change, we render true,
Fresh pictures dressed in morning dew! ✨

✨ 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 6c66c2f and d973fe5.

📒 Files selected for processing (2)

• components/users/ProfilePictureUpload.tsx (1 hunks)
• components/users/PublicProfileView.tsx (3 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.}

[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:27am