feat(profile): add preset avatar picker #246#290
Conversation
|
@Diyapareta is attempting to deploy a commit to the vishnukothakapu's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a preset SVG avatar library, a backend PATCH endpoint that validates and persists chosen preset avatars to the user's image field, and a frontend AvatarPickerModal integrated into ProfileHeaderCard to select, save, or remove preset avatars with session sync. ChangesPreset Avatar Picker
sequenceDiagram
participant User
participant ProfileHeaderCard
participant AvatarPickerModal
participant AvatarAPI as PATCH /api/profile/avatar
participant Database
participant NextAuthSession
User->>ProfileHeaderCard: Click edit avatar
ProfileHeaderCard->>AvatarPickerModal: Open modal
User->>AvatarPickerModal: Select preset & Click Save
AvatarPickerModal->>ProfileHeaderCard: onPresetSelect(selectedSrc)
ProfileHeaderCard->>AvatarAPI: PATCH { avatar: selectedSrc } + CSRF
AvatarAPI->>Database: Update user.image = selectedSrc
Database-->>AvatarAPI: OK
AvatarAPI-->>ProfileHeaderCard: { success: true }
ProfileHeaderCard->>NextAuthSession: update({ image: selectedSrc })
ProfileHeaderCard->>User: Close modal, show toast
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/profile/ProfileHeaderCard.tsx`:
- Around line 290-291: The local selectedAvatar state in ProfileHeaderCard is
initialized from currentAvatar but never re-syncs, causing stale highlights in
AvatarPickerModal; add a useEffect that listens to the boolean that controls
AvatarPickerModal's open prop (the modal's "open" state) and resets
setSelectedAvatar(currentAvatar) whenever the modal opens (open transitions to
true) or whenever currentAvatar changes while the modal is open so the picker
selection always reflects the real current avatar.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8e71c117-bbad-4299-a4d4-831991b5a98e
📒 Files selected for processing (3)
app/api/profile/avatar/route.tsapp/profile/ProfileHeaderCard.tsxlib/presetAvatars.ts
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Hi @Diyapareta, Thanks for the PR, Could you please address the CodeRabbit review comment above regarding the "selectedAvatar" state not re-syncing with "currentAvatar"? Since the modal remains mounted, the current implementation may lead to stale selection states when reopening the picker or after avatar updates. Please make the necessary changes, resolve the review comment, and mark it as resolved once completed. Thanks! |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/profile/ProfileHeaderCard.tsx`:
- Around line 292-296: The effect in ProfileHeaderCard that calls
setSelectedAvatar(currentAvatar) inside useEffect causes the
react-hooks/set-state-in-effect lint error; remove that state update and instead
either (A) force a remount of the picker/modal subtree by giving the inner
picker/dialog content a key derived from currentAvatar (keep the outer Dialog
component mounted so close animation still runs) or (B) stop syncing state and
derive the shown avatar value directly during render from currentAvatar when
open is true; locate the useEffect, setSelectedAvatar, currentAvatar, open and
Dialog/picker components and implement one of these fixes so no state is set
inside the effect.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cff82789-c856-4fb7-81e0-40c7eb34ce7f
📒 Files selected for processing (2)
app/api/profile/avatar/route.tsapp/profile/ProfileHeaderCard.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- app/api/profile/avatar/route.ts
Anushreebasics
left a comment
Anushreebasics
left a comment
There was a problem hiding this comment.
Thanks for PR!
Pls resolve this issues:
-
[route.ts]: Accept a preset id (e.g. "fox") instead of the full [src](; lookup the canonical [src] server-side and update DB. Adds robustness and avoids comparing long data-URIs.
-
[ProfileHeaderCard.tsx]: Send the preset id on save (not the [src]), and use the project absolute import ([@/lib/presetAvatars]) for consistency.
-
[presetAvatars.ts]: Export a PresetAvatar type and keep the array typed as PresetAvatar[]; consider serving presets as static assets for caching instead of large data-URIs.
-
Add unit tests for the new [PATCH /api/profile/avatar] endpoint (happy path, invalid id, unauthenticated).
3 participants
Related Issue
Closes #246
Description
This PR introduces a preset avatar picker for user profiles. Users can now choose from a collection of built-in avatars instead of only uploading a custom image.
Changes Made
Added a preset avatar picker modal
Added categorized built-in avatars:
Added visual feedback for the currently selected avatar
Added backend validation to ensure only valid preset avatars can be selected
Added support for updating profile avatars using preset selections
Preserved existing avatar upload and crop functionality
Updated session avatar immediately after selection
Testing
Screenshots
Checklist
Summary by CodeRabbit