feat: post-signup feed activation bar (flagged)

.gitignore

@@ -59,4 +59,4 @@ plans/*.md
 
 # Claude Code runtime state (hooks/skills/settings remain tracked)
 .claude/scheduled_tasks.lock
-.claude/drafts/
+.claude/drafts/.claude/launch.json

packages/shared/src/components/MainLayout.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 import PromotionalBanner from './PromotionalBanner';
+import { PostOnboardingActivation } from './post/PostOnboardingActivation';
 import useSidebarRendered from '../hooks/useSidebarRendered';
 import { useLogContext } from '../contexts/LogContext';
 import SettingsContext from '../contexts/SettingsContext';
@@ -296,6 +297,7 @@ function MainLayoutComponent({
       )}
     >
       {canGoBack && <GoBackHeaderMobile />}
+      <PostOnboardingActivation />
       {customBanner}
       {isBannerAvailable && <PromotionalBanner />}
       <InAppNotificationElement />

packages/shared/src/components/post/PostOnboardingActivation.module.css

@@ -0,0 +1,60 @@
+/* The banner is always dark regardless of the app theme, so its light-on-dark
+ * colours are declared here with explicit rgba values. Tailwind's opacity
+ * modifier on `white` (e.g. text-white/60) does NOT compile in this config —
+ * it silently falls back to the inherited (dark) theme colour and disappears
+ * on the near-black panel — so we can't rely on it. */
+
+/* Soft brand glow anchored to the right of the strip. Uses radial gradients
+ * with color-mix on the theme accent vars (mirrors .top-hero-aurora) so it
+ * renders reliably instead of relying on opacity-modified accent utilities. */
+.glow {
+  background:
+    radial-gradient(
+      60% 170% at 50% 50%,
+      color-mix(in srgb, var(--theme-accent-cabbage-default), transparent 64%) 0%,
+      transparent 62%
+    ),
+    radial-gradient(
+      42% 150% at 15% 50%,
+      color-mix(in srgb, var(--theme-accent-onion-default), transparent 76%) 0%,
+      transparent 58%
+    ),
+    radial-gradient(
+      42% 150% at 85% 50%,
+      color-mix(in srgb, var(--theme-accent-onion-default), transparent 76%) 0%,
+      transparent 58%
+    );
+}
+
+.border {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.sheen {
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgba(255, 255, 255, 0.22),
+    transparent
+  );
+}
+
+.description {
+  color: rgba(255, 255, 255, 0.62);
+}
+
+.ringTrack {
+  stroke: rgba(255, 255, 255, 0.16);
+}
+
+/* CTA is pinned to the white (dark-theme) primary look on the dark panel. */
+.cta,
+.cta:hover {
+  background-color: #fff !important;
+  color: #0b0d12 !important;
+  border-color: transparent !important;
+}
+
+.cta:hover {
+  background-color: rgba(255, 255, 255, 0.88) !important;
+}

packages/shared/src/components/post/PostOnboardingActivation.spec.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { PostOnboardingActivation } from './PostOnboardingActivation';
+
+const mockPush = jest.fn();
+const mockLogEvent = jest.fn();
+const mockUseConditionalFeature = jest.fn();
+
+jest.mock('next/router', () => ({
+  useRouter: () => ({
+    asPath: '/posts/post-1?ref=share',
+    pathname: '/posts/[id]',
+    query: {},
+    push: mockPush,
+  }),
+}));
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: () => ({ user: { id: 'new-user' } }),
+}));
+
+jest.mock('../../hooks/auth/useOnboardingActions', () => ({
+  useOnboardingActions: () => ({
+    isOnboardingActionsReady: true,
+    isOnboardingComplete: false,
+  }),
+}));
+
+jest.mock('../../contexts/LogContext', () => ({
+  useLogContext: () => ({ logEvent: mockLogEvent }),
+}));
+
+jest.mock('../../hooks/useConditionalFeature', () => ({
+  useConditionalFeature: (args: unknown) => mockUseConditionalFeature(args),
+}));
+
+describe('PostOnboardingActivation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseConditionalFeature.mockReturnValue({
+      value: true,
+      isLoading: false,
+    });
+  });
+
+  it('shows the feed setup prompt and routes to onboarding on click', async () => {
+    render(<PostOnboardingActivation />);
+
+    expect(
+      await screen.findByText("Your feed isn't set up yet"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("You're one step away from discovering what's next."),
+    ).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Finish setup' }));
+
+    expect(mockPush).toHaveBeenCalledWith({
+      pathname: '/onboarding',
+      query: { after_auth: '/posts/post-1?ref=share' },
+    });
+  });
+
+  it('is a required step with no dismiss control', async () => {
+    render(<PostOnboardingActivation />);
+
+    await screen.findByRole('complementary', {
+      name: 'Personalize your feed',
+    });
+
+    expect(
+      screen.queryByRole('button', { name: 'Dismiss feed personalization' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('stays hidden while the feature flag is off', () => {
+    mockUseConditionalFeature.mockReturnValue({
+      value: false,
+      isLoading: false,
+    });
+
+    render(<PostOnboardingActivation />);
+
+    expect(
+      screen.queryByRole('complementary', { name: 'Personalize your feed' }),
+    ).not.toBeInTheDocument();
+  });
+});

packages/shared/src/components/post/PostOnboardingActivation.tsx

@@ -0,0 +1,119 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import { PostOnboardingActivationView } from './PostOnboardingActivationView';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useOnboardingActions } from '../../hooks/auth/useOnboardingActions';
+import { useLogContext } from '../../contexts/LogContext';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featurePostSignupActivation } from '../../lib/featureManagement';
+import { TargetType } from '../../lib/log';
+import { AFTER_AUTH_PARAM } from '../auth/common';
+
+// Force the bar on for local review without GrowthBook via `?<query>=1`.
+const PREVIEW_QUERY = 'postOnboardingPreview';
+const isPreviewEnabled = (value?: string | string[]): boolean =>
+  value === '1' ||
+  value === 'true' ||
+  (Array.isArray(value) && (value.includes('1') || value.includes('true')));
+
+export const PostOnboardingActivation = (): ReactElement | null => {
+  const router = useRouter();
+  const { user } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const { isOnboardingActionsReady, isOnboardingComplete } =
+    useOnboardingActions();
+  const hasLoggedImpression = useRef(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // Never show on the onboarding flow itself — that's where the CTA leads.
+  const isOnboardingRoute = router.pathname?.startsWith('/onboarding');
+  const isPreviewMode = isPreviewEnabled(router.query?.[PREVIEW_QUERY]);
+
+  // Signed-in user who registered but hasn't set up their feed (no tag/content
+  // customization). This is the audience for the required activation step.
+  const isEligible =
+    !isOnboardingRoute &&
+    !!user?.id &&
+    isOnboardingActionsReady &&
+    !isOnboardingComplete;
+
+  const { value: isFeatureEnabled } = useConditionalFeature({
+    feature: featurePostSignupActivation,
+    shouldEvaluate: isEligible,
+  });
+
+  const shouldShow =
+    !isOnboardingRoute && (isPreviewMode || (isEligible && isFeatureEnabled));
+
+  useEffect(() => {
+    if (!shouldShow || hasLoggedImpression.current) {
+      return;
+    }
+
+    hasLoggedImpression.current = true;
+    logEvent({
+      event_name: 'impression',
+      target_type: TargetType.PostSignupActivation,
+      target_id: 'post signup activation',
+    });
+  }, [logEvent, shouldShow]);
+
+  // 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(() => {
+    const el = wrapperRef.current;
+    if (!shouldShow || !el || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const root = document.documentElement;
+    const apply = (): void => {
+      const height = Math.round(el.getBoundingClientRect().height);
+      root.style.setProperty(
+        '--safe-area-top',
+        `calc(env(safe-area-inset-top, 0px) + ${height}px)`,
+      );
+    };
+
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(el);
+
+    return () => {
+      observer.disconnect();
+      root.style.removeProperty('--safe-area-top');
+    };
+  }, [shouldShow]);
+
+  if (!shouldShow) {
+    return null;
+  }
+
+  const onBuildFeed = (): void => {
+    logEvent({
+      event_name: 'click',
+      target_type: TargetType.PostSignupActivation,
+      target_id: 'build feed from post signup activation',
+    });
+
+    router.push({
+      pathname: '/onboarding',
+      query: { [AFTER_AUTH_PARAM]: router.asPath },
+    });
+  };
+
+  return (
+    // Pinned above everything. `top` is set inline (not the `top-0` class) so
+    // the global safe-area rule doesn't push the bar itself down; z sits above
+    // the notch-fill (`max`) so it stays visible.
+    <div
+      ref={wrapperRef}
+      className="fixed inset-x-0 z-[1001]"
+      style={{ top: 0 }}
+    >
+      <PostOnboardingActivationView onCtaClick={onBuildFeed} />
+    </div>
+  );
+};