feat(onboarding): Spotify typeahead in verify-socials (item 3b of #1881)

[sweetmantech]

Item 3b of #1881 — Spotify typeahead in verify-socials

The verify-socials Add/Edit flow made users paste a Spotify link. This reuses the existing SpotifyArtistSearch typeahead (shipped in #1878) so users search Spotify and pick their artist instead.

What changed

• New components/Onboarding/SocialSearchOrPaste.tsx — leads with the SpotifyArtistSearch typeahead; selecting an artist submits their external_urls.spotify URL, which the existing buildSocialFixPayload path keys as SPOTIFY.
• A "Paste a link instead" fallback stays available for the non-Spotify platforms (Instagram, TikTok, YouTube, X, Facebook, Threads, Apple Music) the Spotify search can't reach — so nothing regresses.
• Wired into both ArtistSocialsCard (Add a profile) and SocialRow (Edit) in place of the raw SocialFixForm.

The onSubmit(url) => Promise<boolean> contract is unchanged, so useSocialFix and the existing PATCH profileUrls path are untouched (DRY).

Verification

• pnpm exec eslint on the changed files: clean.
• tsc: no new errors from these files (pre-existing test-file errors unrelated).
• pnpm build: compiles successfully (full page-data collection needs Supabase secrets, unavailable locally).
• buildSocialFixPayload tests: 6/6 pass (Spotify URL → SPOTIFY payload already covered).

Tracking: #1881

🤖 Generated with Claude Code

---

Summary by cubic

Use Spotify artist typeahead in verify-socials Add/Edit so users search and pick their artist instead of pasting links. Addresses item 3b in #1881 and keeps a paste-a-link fallback for non-Spotify platforms.

• New Features
  • Added components/Onboarding/SocialSearchOrPaste.tsx, leading with SpotifyArtistSearch and falling back to SocialFixForm.
  • Integrated into ArtistSocialsCard and SocialRow, replacing direct SocialFixForm usage.
  • Selecting an artist submits external_urls.spotify to the unchanged onSubmit(url) contract, which maps to SPOTIFY via the existing path.

^{Written for commit abf8738. Summary will update on new commits.}

[cursor]

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.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
chat	Ready	Preview	Jul 22, 2026 11:48am

[coderabbitai]

Warning

Review limit reached

@sweetmantech, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 54 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 83af9593-a1b4-4915-a3a2-61be018b5b86

📥 Commits

Reviewing files that changed from the base of the PR and between d258412 and abf8738.

📒 Files selected for processing (3)

• components/Onboarding/ArtistSocialsCard.tsx
• components/Onboarding/SocialRow.tsx
• components/Onboarding/SocialSearchOrPaste.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/verify-socials-spotify-typeahead

---

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.}

[cubic-dev-ai]

No issues found across 3 files

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

<sub>Auto-approved: Focused UX improvement adding Spotify typeahead search to verify-socials, reusing existing components and contracts; no operational or security tradeoffs requiring human judgment.

Re-trigger cubic</sub>

[sweetmantech]

✅ Preview verification — Spotify typeahead works in Add + Edit (with paste fallback)

Preview: https://chat-2xr4rf8cw-recoup.vercel.app. Signed in as a real account, went to /onboarding/roster → confirm roster → Verify socials step (where the changed ArtistSocialsCard / SocialRow render).

Verified in the UI

1. Add flow ("Add a profile") now shows a "Search Spotify for an artist" typeahead + a "Paste a link instead" fallback — replacing the old paste-only input.
2. Typeahead returns results: typing "Snail Mail" surfaced a Spotify results list (Snail Mail 418.1K · Beach Bunny · Soccer Mommy · Alvvays · …) with follower counts.
3. Selecting a result submits the profile: picking "Snail Mail" added a Spotify social to the Snail Mail card (it went from "No profiles were auto-matched" → a Spotify row), confirming the pick routes the artist's external_urls.spotify into the existing SPOTIFY-detection path.
4. Edit flow ("Edit Spotify link") shows the same typeahead (SocialRow uses the shared SocialSearchOrPaste).
5. Fallback works bidirectionally: "Paste a link instead" → a "Profile link" paste input + a "Search Spotify instead" toggle back — so the other platforms (IG/TikTok/YouTube) the Spotify search can't reach are still addable.

1. Typeahead with Spotify results (Add flow):

2. Paste-a-link fallback:

Verdict: 3b verified. Both Add and Edit flows use the typeahead; the paste fallback is intact. CI green, MERGEABLE. Tracking: chat#1881 3b. (Screenshots on assets/pr1882-preview-verification.)