feat(onboarding): platform picker when adding a social (chat#1889 row 12) - #1897
feat(onboarding): platform picker when adding a social (chat#1889 row 12)#1897sweetmantech wants to merge 1 commit into
Conversation
chat#1889 matrix row 12 (partial — see PR). SocialFixForm guided every add to a Spotify search, so an artist whose Instagram was the unmatched profile had no obvious way to supply it. - New getSocialPlatformOptions lists the platforms reports pull from, marking Spotify as the only one with a typeahead. - New SocialPlatformPicker leads the add path, branded via the existing getConnectorIcon helper. - SocialSearchOrPaste takes withPlatformPicker (add path only): Spotify keeps the typeahead, the rest get a platform-specific paste prompt. The edit path is unchanged, since it already knows which social it is replacing. Still open on this row: confirming a pasted handle with a pfp + follower count, which needs an api/Apify resolve path. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
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.
|
|
Warning Review limit reached
Next review available in: 24 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
✨ 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 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a0f0c12a4a
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| { | ||
| slug: "tiktok", | ||
| label: "TikTok", | ||
| placeholder: "Paste a TikTok profile link", | ||
| supportsSearch: false, |
There was a problem hiding this comment.
When the missing profile is an Apple Music page, this required picker provides no matching choice even though useSocialFix explicitly accepts Apple Music and buildSocialFixPayload normalizes those URLs to the supported APPLE key. The previous generic paste fallback exposed a natural path for these links; now users must misleadingly select another platform before pasting one, so Apple Music should be offered alongside the other supported report platforms.
Useful? React with 👍 / 👎.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
4 issues found across 5 files
Confidence score: 3/5
- In
lib/onboarding/getSocialPlatformOptions.ts, Apple Music is missing from the picker even thoughbuildSocialFixPayloadalready handles it, so users can lose a direct path for a supported platform and onboarding may feel like a regression — add Apple Music to the platform options (or restore a generic fallback path). - In
components/Onboarding/SocialSearchOrPaste.tsx, choosing the wrong platform can strand users in the wrong add flow (especially non-search platforms), which can block completion without restarting the step — keep a persistent “Change platform” action in each platform-specific UI. - In
components/Onboarding/SocialPlatformPicker.tsx, the heading and button group are not semantically linked, so screen reader users may not get clear context for the choices — wrap the controls in a<fieldset><legend>(or userole="group"witharia-labelledby). - In
components/Onboarding/SocialPlatformPicker.tsxwithlib/composio/getConnectorIcon.tsx, Spotify falls back to a genericLink2icon, which weakens recognition and can cause mild confusion in platform selection — map"spotify"in the icon registry sogetConnectorIcon("spotify", 16)resolves to the brand icon.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="components/Onboarding/SocialSearchOrPaste.tsx">
<violation number="1" location="components/Onboarding/SocialSearchOrPaste.tsx:54">
P2: A user who selects the wrong platform is trapped in that platform's add UI: non-search platforms have only the paste form, and Spotify's fallback only switches back to Spotify search. Keeping a “Change platform” action that resets `platform` would let users recover from an accidental selection before saving.</violation>
</file>
<file name="components/Onboarding/SocialPlatformPicker.tsx">
<violation number="1" location="components/Onboarding/SocialPlatformPicker.tsx:20">
P2: The button group and its heading lack semantic association. Wrapping in `<fieldset>` with `<legend>` (or adding `role="group"` + `aria-labelledby`) ties the prompt to the choices for screen readers and keeps the group semantically coherent.</violation>
<violation number="2" location="components/Onboarding/SocialPlatformPicker.tsx:33">
P3: Spotify renders a generic `Link2` icon instead of a brand logo. `getConnectorIcon("spotify", 16)` falls through to the fallback because `"spotify"` isn't in the `icons` map in `lib/composio/getConnectorIcon.tsx`. The PR says branded icons come from the connector-icon helper, so this mismatch between the claim and the rendered outcome may confuse users on the Spotify button.</violation>
</file>
<file name="lib/onboarding/getSocialPlatformOptions.ts">
<violation number="1" location="lib/onboarding/getSocialPlatformOptions.ts:46">
P2: The platform picker omits Apple Music even though the downstream social-fix pipeline (`buildSocialFixPayload`) already normalizes Apple Music URLs to the `APPLE` key. Previously the generic paste fallback accepted any URL; now `withPlatformPicker` forces platform selection first, so users with an Apple Music link have no matching choice and must misleadingly pick another platform. Consider adding an Apple Music entry here (e.g. `{ slug: "apple_music", label: "Apple Music", placeholder: "Paste an Apple Music artist link", supportsSearch: false }`) to maintain parity with the supported platforms.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
| const canSearch = platform ? platform.supportsSearch : true; | ||
| const placeholder = platform?.placeholder ?? pastePlaceholder; | ||
|
|
||
| if (!canSearch || pasting) { |
There was a problem hiding this comment.
P2: A user who selects the wrong platform is trapped in that platform's add UI: non-search platforms have only the paste form, and Spotify's fallback only switches back to Spotify search. Keeping a “Change platform” action that resets platform would let users recover from an accidental selection before saving.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At components/Onboarding/SocialSearchOrPaste.tsx, line 54:
<comment>A user who selects the wrong platform is trapped in that platform's add UI: non-search platforms have only the paste form, and Spotify's fallback only switches back to Spotify search. Keeping a “Change platform” action that resets `platform` would let users recover from an accidental selection before saving.</comment>
<file context>
@@ -4,50 +4,73 @@ import { useState } from "react";
+ const canSearch = platform ? platform.supportsSearch : true;
+ const placeholder = platform?.placeholder ?? pastePlaceholder;
+
+ if (!canSearch || pasting) {
return (
<div className="flex flex-col gap-2">
</file context>
| onSelect: (option: SocialPlatformOption) => void; | ||
| disabled?: boolean; | ||
| }) => ( | ||
| <div className="flex flex-col gap-2"> |
There was a problem hiding this comment.
P2: The button group and its heading lack semantic association. Wrapping in <fieldset> with <legend> (or adding role="group" + aria-labelledby) ties the prompt to the choices for screen readers and keeps the group semantically coherent.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At components/Onboarding/SocialPlatformPicker.tsx, line 20:
<comment>The button group and its heading lack semantic association. Wrapping in `<fieldset>` with `<legend>` (or adding `role="group"` + `aria-labelledby`) ties the prompt to the choices for screen readers and keeps the group semantically coherent.</comment>
<file context>
@@ -0,0 +1,41 @@
+ onSelect: (option: SocialPlatformOption) => void;
+ disabled?: boolean;
+}) => (
+ <div className="flex flex-col gap-2">
+ <p className="text-xs text-muted-foreground">Which platform?</p>
+ <div className="flex flex-wrap gap-2">
</file context>
| supportsSearch: false, | ||
| }, | ||
| { | ||
| slug: "tiktok", |
There was a problem hiding this comment.
P2: The platform picker omits Apple Music even though the downstream social-fix pipeline (buildSocialFixPayload) already normalizes Apple Music URLs to the APPLE key. Previously the generic paste fallback accepted any URL; now withPlatformPicker forces platform selection first, so users with an Apple Music link have no matching choice and must misleadingly pick another platform. Consider adding an Apple Music entry here (e.g. { slug: "apple_music", label: "Apple Music", placeholder: "Paste an Apple Music artist link", supportsSearch: false }) to maintain parity with the supported platforms.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At lib/onboarding/getSocialPlatformOptions.ts, line 46:
<comment>The platform picker omits Apple Music even though the downstream social-fix pipeline (`buildSocialFixPayload`) already normalizes Apple Music URLs to the `APPLE` key. Previously the generic paste fallback accepted any URL; now `withPlatformPicker` forces platform selection first, so users with an Apple Music link have no matching choice and must misleadingly pick another platform. Consider adding an Apple Music entry here (e.g. `{ slug: "apple_music", label: "Apple Music", placeholder: "Paste an Apple Music artist link", supportsSearch: false }`) to maintain parity with the supported platforms.</comment>
<file context>
@@ -0,0 +1,52 @@
+ supportsSearch: false,
+ },
+ {
+ slug: "tiktok",
+ label: "TikTok",
+ placeholder: "Paste a TikTok profile link",
</file context>
| className="gap-2" | ||
| onClick={() => onSelect(option)} | ||
| > | ||
| {getConnectorIcon(option.slug, 16)} |
There was a problem hiding this comment.
P3: Spotify renders a generic Link2 icon instead of a brand logo. getConnectorIcon("spotify", 16) falls through to the fallback because "spotify" isn't in the icons map in lib/composio/getConnectorIcon.tsx. The PR says branded icons come from the connector-icon helper, so this mismatch between the claim and the rendered outcome may confuse users on the Spotify button.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At components/Onboarding/SocialPlatformPicker.tsx, line 33:
<comment>Spotify renders a generic `Link2` icon instead of a brand logo. `getConnectorIcon("spotify", 16)` falls through to the fallback because `"spotify"` isn't in the `icons` map in `lib/composio/getConnectorIcon.tsx`. The PR says branded icons come from the connector-icon helper, so this mismatch between the claim and the rendered outcome may confuse users on the Spotify button.</comment>
<file context>
@@ -0,0 +1,41 @@
+ className="gap-2"
+ onClick={() => onSelect(option)}
+ >
+ {getConnectorIcon(option.slug, 16)}
+ {option.label}
+ </Button>
</file context>
1 participant
Matrix row 12 in chat#1889 — partial, see Scope below. Independent of the other row-12 PR (#1896, per-artist panels): different files.
Why
SocialFixFormguided every add to a Spotify search regardless of what was actually missing. An artist whose unmatched profile was their Instagram had no obvious way to supply it — the only visible affordance searched the wrong platform.What changed
getSocialPlatformOptions— the platforms reports pull from (Spotify, Instagram, X, YouTube, TikTok), each with its own paste placeholder, and asupportsSearchflag marking Spotify as the only one with a typeahead endpoint.SocialPlatformPicker— leads the add path, branded with the existinggetConnectorIconhelper.SocialSearchOrPastetakeswithPlatformPicker, set only on the add path. Spotify keeps its typeahead; the others get a platform-specific paste prompt ("Paste an Instagram profile link"). The edit path is untouched — it already knows which social it is replacing, so asking again would be friction.Scope: what is still open on this row
The issue's row 12 also asks to confirm a pasted handle with a pfp + follower count (e.g. via Apify) so the match is verifiable. That needs an api resolve path that does not exist yet, so it is not in this PR. Row 12 stays open in the matrix for that part rather than being marked done.
Verification
TDD, red → green:
```
RED — module not found
Test Files 1 failed (1)
Tests no tests
GREEN
pnpm exec vitest run lib/onboarding components/Onboarding
Test Files 18 passed (18)
Tests 71 passed (71)
```
The unit tests assert the platform set, that only Spotify is marked searchable, and that every placeholder names its own platform (so a copy edit can't leave a generic prompt behind).
pnpm exec tsc --noEmitclean for the touched files. Preview click-through pending.Tracked in chat#1889 (matrix row 12).
Summary by cubic
Adds a platform picker to the “add social” flow so users can choose Spotify, Instagram, X, YouTube, or TikTok; only Spotify keeps search, others show a platform-specific paste prompt. Partial for chat#1889 row 12; the handle confirmation step (pfp + followers) is not included.
supportsSearchand platform-specific placeholders.withPlatformPicker(add path only); edit flow unchanged.Written for commit a0f0c12. Summary will update on new commits.