feat(onboarding): render social avatar on verify-socials SocialRow - #1886
Conversation
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough
ChangesSocial row avatar rendering
Estimated code review effort: 2 (Simple) | ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 1 file
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Auto-approved: Adds profile image display to social rows in onboarding for visual confirmation. Bounded render-only change using existing avatar components.
Re-trigger cubic
Preview verification — 2026-07-27Preview: https://chat-krmd757p9-recoup.vercel.app — built from
Results
Both branches of the change are visible in one frame — Charlie Zaa has photos on Twitter/Spotify/YouTube and initials on TikTok/Instagram:
Cold-start account, manually-added Spotify profile — fallback only:
|
Each auto-matched social now shows its profile image (the `avatar` field, now populated) so users can visually confirm the match. Falls back to the handle/platform initial when no avatar is present. Uses the shared shadcn Avatar (circular, achromatic fallback) per DESIGN.md. Refs chat#1885. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
c1e734c to
64c7474
Compare
![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 `@components/Onboarding/SocialRow.tsx`:
- Around line 37-40: Update the initial calculation in SocialRow to trim and
normalize the username before deriving its first character, so values like "@"
or whitespace are treated as missing. When no usable username remains, fall back
to the platform and then "?"; preserve the existing removal of a leading @ and
uppercase behavior.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: dd438481-7d36-4c9b-aa46-3f71903c04ab
📒 Files selected for processing (1)
components/Onboarding/SocialRow.tsx
| const initial = (social.username || platform || "?") | ||
| .replace(/^@/, "") | ||
| .charAt(0) | ||
| .toUpperCase(); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Guarantee a visible fallback for incomplete usernames.
A truthy username such as "@" or whitespace currently produces an empty or blank AvatarFallback. Trim and normalize the username before selecting its initial, then fall back to the platform or "?".
Proposed fix
- const initial = (social.username || platform || "?")
- .replace(/^`@/`, "")
- .charAt(0)
- .toUpperCase();
+ const initialSource =
+ social.username?.trim().replace(/^@+/, "") || platform.trim();
+ const initial = initialSource.charAt(0).toUpperCase() || "?";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const initial = (social.username || platform || "?") | |
| .replace(/^@/, "") | |
| .charAt(0) | |
| .toUpperCase(); | |
| const initialSource = | |
| social.username?.trim().replace(/^@+/, "") || platform.trim(); | |
| const initial = initialSource.charAt(0).toUpperCase() || "?"; |
🤖 Prompt for 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.
In `@components/Onboarding/SocialRow.tsx` around lines 37 - 40, Update the initial
calculation in SocialRow to trim and normalize the username before deriving its
first character, so values like "@" or whitespace are treated as missing. When
no usable username remains, fall back to the platform and then "?"; preserve the
existing removal of a leading @ and uppercase behavior.
Rebased onto
|
| Check | Result |
|---|---|
| Rebase | Clean — 1 commit replayed, no conflicts |
Diff vs main |
Still exactly one file: components/Onboarding/SocialRow.tsx +22/−7, unchanged by the rebase |
| Tests | 68 files / 257 tests pass |
tsc --noEmit |
8 errors, all pre-existing baseline (SpotifyDeepResearchResult.tsx, extractSendEmailResults.test.ts); none in SocialRow |
Routes on the new preview — https://chat-dhhg4zgwh-recoup.vercel.app
| Path | Before rebase | After rebase |
|---|---|---|
/setup/socials |
404 "Page not found" | HTTP 200 ✅ |
/setup/artists |
404 | HTTP 200 ✅ |
/onboarding/roster |
rendered the flow | 308 → /setup/artists (inherits #1887) ✅ |
Re-verification at /setup/socials
Signed in on the rebased preview and loaded the canonical route directly — it deep-links straight to the socials step, no roster walk needed.
| # | Check | Actual | Result |
|---|---|---|---|
| 1 | Avatars load | 76 images, 68 loaded, 0 broken | ✅ |
| 2 | AvatarImage path |
photos from i.scdn.co, yt3.googleusercontent.com, pbs.twimg.com, p19-common-sign.tiktokcdn-us.com, arweave.net |
✅ |
| 3 | AvatarFallback path |
Instagram/TikTok/Twitter → A, Apple Music → U; no broken-image icons | ✅ |
| 4 | Row layout | size-9 avatar → platform → @handle · N followers, pencil right-aligned, truncation intact |
✅ |
Five distinct CDN hosts resolve, which is the useful signal here — the avatar field is populated per-platform from different upstreams, not just Spotify.
Still open (unchanged by the rebase, not this PR's to fix)
Ana Bárbara → Apple Music reads @us · 0 followers with a U initial — the handle parsed from the URL path segment. Same class of bug as the @artist · 0 followers Spotify rows in my previous comment, reproduced independently on a fresh account via the in-flow Spotify search. The add/match path doesn't resolve handle, follower count, or avatar; chat#1897 owns it, and the note there should cover the handle too, not just pfp + count.
This PR renders exactly what it's given, and its fallback is what keeps those rows from showing a broken image.
1 participant
What
In the verify-socials onboarding step,
SocialRowrendered platform +@handle · N followersbut no profile image, even though theavatarfield is now populated. This renders each connected social's avatar so users can visually confirm the auto-match.Changes
components/Onboarding/SocialRow.tsx— add the shared shadcnAvatar(circular,radius-fullper DESIGN.md) before the platform/handle text.AvatarImagefromsocial.avatarwhen present.AvatarFallbackto the handle/platform initial whenavataris null — achromatic chrome, no color introduced.Render-side only; mirrors the sibling
RosterArtistRowavatar pattern.Verification
pnpm exec tsc --noEmit— clean forSocialRow.tsx.pnpm exec eslint components/Onboarding/SocialRow.tsx— clean.Targets
main. Part of chat#1885 (converge/polish onboarding backlog — verify-socials pfp row).🤖 Generated with Claude Code
Summary by cubic
Render profile images for connected socials in the verify-socials step so users can visually confirm the auto-match. Adds the shared shadcn
Avatartocomponents/Onboarding/SocialRow.tsx, showingsocial.avatarbefore the text and falling back to the uppercase first letter of the handle/platform when missing (refs chat#1885).Written for commit 64c7474. Summary will update on new commits.