feat: post-signup feed activation bar (flagged)#6348
Conversation
Persistent, non-dismissible activation strip pinned above the header on every page, shown only to signed-in users who registered but haven't set up their feed yet (no tag/content customization). Legacy users (registered before the requirement date) and the /onboarding route are exempt. - Gated behind the `post_signup_activation` GrowthBook flag (default off); flag off restores current behavior exactly. - Mounted in the shared MainLayout top slot. The bar's measured height is fed into `--safe-area-top` so the rail, header and content shift down and it sits above all fixed chrome (device notch inset preserved). - Progress ring (step 1 of 2) + white primary CTA → routes to /onboarding with `after_auth` back to the current page. Impression/click logged via the shared log events. - Presentational `PostOnboardingActivationView` split out for Storybook (playground + progress/copy variations + mobile). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| // The bar is pinned above all fixed chrome. Reserve its height at the top of | ||
| // the app by feeding it into `--safe-area-top` (which shifts the rail, header | ||
| // and body content down) while preserving the real device notch inset. | ||
| useEffect(() => { |
There was a problem hiding this comment.
I dont understand why do we need this resize observer
There was a problem hiding this comment.
Good call — dropped it, the whole effect is gone.
The bar's height is now a constant per breakpoint (9.25rem mobile / 5rem tablet+) and the space reservation is plain CSS in the module:
:global(body):has(.pinned) {
--post-signup-activation-height: 9.25rem;
--safe-area-top: calc(env(safe-area-inset-top, 0px) + var(--post-signup-activation-height));
}Same var drives the bar's own height, so the two can't drift. No JS, no measuring, and it unsets itself when the bar unmounts. Verified in the dev server: with the bar mounted, body padding and every .fixed.top-0 element shift to exactly 148px (the bar's bottom edge); without it, back to 0.
There was a problem hiding this comment.
I dont see this change live. have you forgot to push it?
There was a problem hiding this comment.
Sorry — you're right, it was sitting locally. Pushed now in 6fb7f3e (rebased on the latest main merge).
…erver The copy is fixed, so the bar's height is knowable at author time. Replace the measuring effect with a constant per breakpoint and let `body:has()` fold it into `--safe-area-top`, mirroring how PromotionalBanner reserves its space. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Summary
A persistent, non-dismissible feed activation bar pinned above the header on every page, shown only to signed-in users who registered but haven't set up their feed yet. Ports the design mock-up (#6345) into an engineering-ready change.
post_signup_activationGrowthBook flag (default off). Flag off restores current behavior exactly.!isOnboardingComplete). Legacy users (registered before the requirement date) are exempt. Never shows on the/onboardingroute.MainLayouttop slot; the bar's measured height is reserved via--safe-area-topso the rail, header and content shift down and it sits above all fixed chrome (device notch inset preserved)./onboardingwithafter_authback to the current page. Content is centered with a capped width; copy wraps on mobile.useLogEventOnce+ click viaLogEvent, both on a dedicatedTargetType.PostSignupActivation.PostOnboardingActivationViewsplit out (props-driven, provider-light) for a Storybook playground.Changes vs the mock-up
?postOnboardingPreview=1URL backdoor (QA-only; would have force-shown the bar to any visitor regardless of flag/eligibility).LogEvent/useLogEventOnceconventions..gitignore/ locallaunch.jsonedits.Testing
node scripts/typecheck-strict-changed.jspnpm --filter shared linton changed filesPreview
Components/Post/PostOnboardingActivation🤖 Generated with Claude Code
Preview domain
https://feat-post-signup-activation-bar.preview.app.daily.dev