Brand onboarding flow + redirect gating (Vibe Kanban) by peelar · Pull Request #120 · peelar/dopeshot

peelar · 2026-01-12T12:58:44Z

What

Added a brand-only onboarding route at /onboarding to capture 4 essentials: logo upload, accent color, light/dark mode, and product personality.
Persisted onboarding inputs to BrandProfile and marked onboarding completion in UserMetadata.onboardingProgress.
Enforced redirect-to-onboarding for brand users until onboarding is complete; free users cannot access /onboarding.
Added an onboarding status API and a client hook to read onboarding completion state.
Updated brand palette types to include a mode field.

Why

Brand-tier users need a fast (~30s) “post-upgrade” setup to ensure exports immediately reflect their brand (logo + accent + preferred light/dark styling + personality-driven defaults). Redirect gating ensures brand users complete setup before spending time in the editor and prevents “missing brand settings” surprises.

Implementation Details

Route protection:
- apps/app/src/app/onboarding/page.tsx checks auth and brand tier; non-brand requests get notFound().
Form UX:
- apps/app/src/components/onboarding/onboarding-form.tsx reuses the existing logo upload endpoint (/api/brand/upload-logo), collects the remaining inputs, and submits to /api/brand/update-profile.
- On success it fires track("brand_onboarding_completed") and redirects back to the editor.
Data writes:
- apps/app/src/app/api/brand/update-profile/route.ts is now brand-only and supports accent, mode, and onboarding_completed.
- Accent + mode are stored on BrandProfile.colorPalette (derived palette with mode, accent, and default background/text).
- Completion is stored as UserMetadata.onboardingProgress.completedSteps = ["brand_profile"].
Redirect gating:
- apps/app/src/app/page.tsx and apps/app/src/app/m/[itemId]/page.tsx redirect brand users to /onboarding until complete.
- Includes a “looks complete from profile” fallback to avoid trapping users if progress is missing but the profile is already filled.
Status hook:
- apps/app/src/app/api/brand/onboarding-status/route.ts returns { tier, onboardingComplete }.
- apps/app/src/hooks/use-onboarding-status.ts wraps this for client usage.
DB change:
- Adds user_metadata.onboarding_progress (JSONB) via apps/app/prisma/schema.prisma + migration apps/app/prisma/migrations/20260112123000_add_onboarding_progress/migration.sql.

This PR was written using Vibe Kanban

Summary by CodeRabbit

New Features
- Brand onboarding modal/form (logo upload, accent color, light/dark mode, personality) with live preview and gated editor access until complete; auto-open and dismissible flows.
- Brand settings panel (color, mode, personality) and improved logo UX (apply saved brand logo, upload new, auto-apply to canvas).
- New status CLI app for aggregated traffic, feedback, and signup reports.
Chores
- Database extended to persist onboarding progress.
Tests
- UI tests for onboarding form and modal; tests for status helpers and clients.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2026-01-12T12:58:46Z

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

Project	Deployment	Review	Updated (UTC)
dopeshot	Ready	Preview, Comment	Jan 13, 2026 2:23pm
dopeshot-landing	Ready	Preview, Comment	Jan 13, 2026 2:23pm

changeset-bot · 2026-01-12T12:58:47Z

🦋 Changeset detected

Latest commit: 83af07f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
dopeshot-app	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

chatgpt-codex-connector · 2026-01-12T12:58:49Z

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

coderabbitai · 2026-01-12T12:58:51Z

Walkthrough

Adds a brand onboarding flow: a JSONB onboarding_progress column on user_metadata, new API routes to read onboarding status and update brand profile, a logo upload endpoint, a client hook useOnboardingStatus, OnboardingModal and OnboardingForm UI components, integration into pages/playground to open the modal for brand users on first login, logic to derive completeness from profile fields or onboarding_progress, and persistence/upsert of onboarding progress to gate editor access until onboarding is complete.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant Page
    participant UI
    participant API
    participant DB

    User->>Page: Visit site
    Page->>API: GET /api/brand/onboarding-status
    API->>DB: Read user_metadata + brand_profile
    DB-->>API: Return onboarding_progress & profile
    API-->>Page: Return { tier, onboardingComplete }

    alt onboardingComplete = false and tier = brand
        Page->>UI: Open OnboardingModal
        UI->>API: GET /api/brand/profile
        API->>DB: Fetch brand profile
        DB-->>API: Return profile
        API-->>UI: Return profile data

        User->>UI: Upload logo
        UI->>API: POST /api/brand/upload-logo
        API->>DB: Persist logo reference
        DB-->>API: Confirm

        User->>UI: Submit accent/mode/personality
        UI->>API: PATCH /api/brand/update-profile (onboarding_completed=true)
        API->>DB: Update profile & upsert onboarding_progress
        DB-->>API: Confirm
        API-->>UI: Return success

        UI->>Page: Close modal / refresh state
    else
        Page->>UI: Render editor/playground normally
    end

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 409ac8c and 83af07f.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (24)

.changeset/config.json
.changeset/daily-status-cli.md
.changeset/sparkly-ghosts-wave.md
README.md
apps/app/next-env.d.ts
apps/app/src/hooks/atoms.ts
apps/app/tests/ui/brand-logo-auto-apply.test.tsx
apps/app/tests/ui/brand-panel.test.tsx
apps/status/.env.example
apps/status/.gitignore
apps/status/package.json
apps/status/src/index.ts
apps/status/src/lib/database.types.ts
apps/status/src/lib/display.ts
apps/status/src/lib/enhanced-data.ts
apps/status/src/lib/status-dashboard.ts
apps/status/src/lib/supabase-client.ts
apps/status/src/lib/umami-client.ts
apps/status/tests/status-dashboard.test.ts
apps/status/tests/umami-client.test.ts
apps/status/tsconfig.json
apps/status/vitest.config.ts
package.json
turbo.json

✅ Files skipped from review due to trivial changes (5)

apps/status/tsconfig.json
.changeset/sparkly-ghosts-wave.md
.changeset/daily-status-cli.md
apps/status/.gitignore
apps/status/package.json

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…o an in-editor modal that opens the first time a **brand** user logs in (until they finish setup), with a subtle celebratory header. - Removed the `/onboarding` page and the redirect gating from `apps/app/src/app/page.tsx:32` and `apps/app/src/app/m/[itemId]/page.tsx:38`. - Added a gated modal `apps/app/src/components/onboarding/onboarding-modal.tsx:1` that loads existing brand profile (if any) and embeds the onboarding UI. - Wired the modal into the editor at `apps/app/src/app/(playground)/_components/playground-page.tsx:128` using `useOnboardingStatus` (still fires `brand_onboarding_completed` on submit). - Updated `apps/app/src/components/onboarding/onboarding-form.tsx:47` to support embedded/modal usage and call `onCompleted`. - Updated the changeset wording in `.changeset/bright-apes-cheer.md:1` to reflect “modal”, not a route. - Verified `pnpm -C apps/app typecheck` passes. Uncommitted changes are in your working tree (plus a new untracked file). If you want, I can commit + push these updates so PR #120 reflects the modal approach.

- Added brand-only onboarding screen at `apps/app/src/app/onboarding/page.tsx:26` + form UI at `apps/app/src/components/onboarding/onboarding-form.tsx:47` (logo upload, accent color, light/dark, personality). - Saving now updates `BrandProfile` and marks onboarding complete in `UserMetadata.onboardingProgress` via `apps/app/src/app/api/brand/update-profile/route.ts:46` and fires `track("brand_onboarding_completed")` in `apps/app/src/components/onboarding/onboarding-form.tsx:127`. - Brand users are redirected to `/onboarding` until complete from editor routes `apps/app/src/app/page.tsx:33` and `apps/app/src/app/m/[itemId]/page.tsx:1`; free users get blocked from `/onboarding` (`notFound()` in `apps/app/src/app/onboarding/page.tsx:26`). - Added `BrandColorPalette.mode` to types in `apps/app/src/lib/types/brand.ts:23` and created `useOnboardingStatus` at `apps/app/src/hooks/use-onboarding-status.ts:12` backed by `apps/app/src/app/api/brand/onboarding-status/route.ts:24`. - Added DB field + migration for onboarding progress: `apps/app/prisma/schema.prisma:112` and `apps/app/prisma/migrations/20260112123000_add_onboarding_progress/migration.sql:1` (run `pnpm -C apps/app db:dev` or `pnpm -C apps/app db:deploy` to apply). - Verified `pnpm -C apps/app typecheck` passes; `pnpm -C apps/app lint` fails due to existing repo lint errors unrelated to this change.

…opeshot-app`) describing the new brand onboarding flow + onboarding gating/completion tracking.

…o an in-editor modal that opens the first time a **brand** user logs in (until they finish setup), with a subtle celebratory header. - Removed the `/onboarding` page and the redirect gating from `apps/app/src/app/page.tsx:32` and `apps/app/src/app/m/[itemId]/page.tsx:38`. - Added a gated modal `apps/app/src/components/onboarding/onboarding-modal.tsx:1` that loads existing brand profile (if any) and embeds the onboarding UI. - Wired the modal into the editor at `apps/app/src/app/(playground)/_components/playground-page.tsx:128` using `useOnboardingStatus` (still fires `brand_onboarding_completed` on submit). - Updated `apps/app/src/components/onboarding/onboarding-form.tsx:47` to support embedded/modal usage and call `onCompleted`. - Updated the changeset wording in `.changeset/bright-apes-cheer.md:1` to reflect “modal”, not a route. - Verified `pnpm -C apps/app typecheck` passes. Uncommitted changes are in your working tree (plus a new untracked file). If you want, I can commit + push these updates so PR #120 reflects the modal approach.

- Delete /brand and /m/[itemId]/brand route pages - Update SidebarTabs to use local state instead of URL routing - Remove showBrandExperience prop from PlaygroundPage - Move Save button to sticky footer in brand panel - Change Save button to secondary variant and right-align

- Add dropdown menu when brand logo exists but not applied - Show 'Apply brand logo' and 'Upload new' options - Fix logo upload to automatically apply to canvas - Show remove button on hover for all logo types - Update label from 'Choose file' to 'Add logo' - Track brand_logo_reapplied analytics event

vercel Bot deployed to Preview – dopeshot-landing January 12, 2026 12:59 View deployment

vercel Bot deployed to Preview – dopeshot January 12, 2026 12:59 View deployment

peelar changed the title ~~Task 2.1: Build Brand Onboarding Screen (vibe-kanban)~~ Brand onboarding flow + redirect gating (Vibe Kanban) Jan 12, 2026

vercel Bot deployed to Preview – dopeshot-landing January 12, 2026 13:46 View deployment

vercel Bot deployed to Preview – dopeshot January 12, 2026 13:47 View deployment

vercel Bot deployed to Preview – dopeshot-landing January 13, 2026 10:28 View deployment

vercel Bot deployed to Preview – dopeshot January 13, 2026 10:29 View deployment

peelar added 4 commits January 13, 2026 12:11

Added changeset: .changeset/bright-apes-cheer.md (patch bump for `d…

6743bae

…opeshot-app`) describing the new brand onboarding flow + onboarding gating/completion tracking.

fixes

935ae93

peelar force-pushed the vk/7396-task-2-1-build-b branch from 3023b58 to 935ae93 Compare January 13, 2026 11:15

vercel Bot deployed to Preview – dopeshot-landing January 13, 2026 11:15 View deployment

vercel Bot had a problem deploying to Preview – dopeshot January 13, 2026 11:15 Failure

brand fixes

f88a6fb

vercel Bot deployed to Preview – dopeshot-landing January 13, 2026 12:46 View deployment

vercel Bot deployed to Preview – dopeshot January 13, 2026 12:46 View deployment

vercel Bot deployed to Preview – dopeshot-landing January 13, 2026 13:48 View deployment

vercel Bot had a problem deploying to Preview – dopeshot January 13, 2026 13:48 Failure

vercel Bot deployed to Preview – dopeshot-landing January 13, 2026 14:19 View deployment

vercel Bot had a problem deploying to Preview – dopeshot January 13, 2026 14:20 Failure

fix

83af07f

vercel Bot deployed to Preview – dopeshot-landing January 13, 2026 14:22 View deployment

vercel Bot deployed to Preview – dopeshot January 13, 2026 14:23 View deployment

peelar merged commit b2b15c9 into main Jan 13, 2026
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Brand onboarding flow + redirect gating (Vibe Kanban)#120

Brand onboarding flow + redirect gating (Vibe Kanban)#120
peelar merged 8 commits into
mainfrom
vk/7396-task-2-1-build-b

peelar commented Jan 12, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Jan 12, 2026

Uh oh!

coderabbitai Bot commented Jan 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

peelar commented Jan 12, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

Implementation Details

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

chatgpt-codex-connector Bot commented Jan 12, 2026

Uh oh!

coderabbitai Bot commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Sequence Diagram(s)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

peelar commented Jan 12, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jan 12, 2026 •

edited

Loading

changeset-bot Bot commented Jan 12, 2026 •

edited

Loading

coderabbitai Bot commented Jan 12, 2026 •

edited

Loading