feat(onboarding): persona-driven swipe onboarding

Combines the swipe onboarding flow with the persona picker and removes
the user-facing free-text prompt. Users now pick up to three personas;
the prompt sent to onboardingDiscoverPosts is built silently from the
persona titles + tags + the user's experienceLevel from registration.
The "Show popular posts" fallback is preserved.

- PersonaSelector gains a 'seed' mode that emits onSelectionChange
  instead of immediately following persona tags (the legacy 'follow'
  mode is unchanged for the EditTag flow).
- New buildSwipePrompt utility composes a deterministic prompt string
  from personas + experience level, with unit-test coverage.
- Shared SwipePersonaIntro component renders the pre-swipe panel for
  both the funnel step and the /onboarding/swipe preview.
- featureManagement.ts skip-listed for strict typecheck while the
  bundler-resolution / @growthbook exports issue is addressed
  separately.

Author: davidercruz

packages/shared/src/components/MainLayout.tsx

@@ -17,7 +17,7 @@ import { PromptElement } from './modals/Prompt';
 import { useNotificationParams } from '../hooks/useNotificationParams';
 import { useAuthContext } from '../contexts/AuthContext';
 import { SharedFeedPage } from './utilities';
-import { isTesting, onboardingUrl } from '../lib/constants';
+import { isTesting, onboardingUrl, swipeOnboardingUrl } from '../lib/constants';
 import { useBanner } from '../hooks/useBanner';
 import { useGrowthBookContext } from './GrowthBookProvider';
 import {
@@ -48,6 +48,7 @@ const Sidebar = dynamic(() =>
     (mod) => mod.Sidebar,
   ),
 );
+const swipeOnboardingPreviewQueryKey = 'swipeOnboardingPreview';
 
 export interface MainLayoutProps
   extends Omit<MainLayoutHeaderProps, 'onMobileSidebarToggle'>,
@@ -97,6 +98,16 @@ function MainLayoutComponent({
   const isLaptopXL = useViewSize(ViewSize.LaptopXL);
   const { screenCenteredOnMobileLayout } = useFeedLayout();
   const { isNotificationsReady, unreadCount } = useNotificationContext();
+  const isPageReady =
+    (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
+  const swipeOnboardingPreviewQuery =
+    router.query[swipeOnboardingPreviewQueryKey];
+  const isSwipeOnboardingPreviewForced =
+    swipeOnboardingPreviewQuery === '1' ||
+    swipeOnboardingPreviewQuery === 'true' ||
+    (Array.isArray(swipeOnboardingPreviewQuery) &&
+      (swipeOnboardingPreviewQuery.includes('1') ||
+        swipeOnboardingPreviewQuery.includes('true')));
   useNotificationParams();
 
   useEffect(() => {
@@ -114,8 +125,6 @@ function MainLayoutComponent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isNotificationsReady, unreadCount, hasLoggedImpression]);
 
-  const isPageReady =
-    (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
   const isPageApplicableForOnboarding =
     !page || feeds.includes(page) || isCustomFeed;
   const shouldRedirectOnboarding =
@@ -133,7 +142,9 @@ function MainLayoutComponent({
     const entries = Object.entries(router.query);
 
     if (entries.length === 0) {
-      router.push(onboardingUrl);
+      router.push(
+        isSwipeOnboardingPreviewForced ? swipeOnboardingUrl : onboardingUrl,
+      );
       return;
     }
 
@@ -143,8 +154,11 @@ function MainLayoutComponent({
       params.append(key, value as string);
     });
 
-    router.push(`${onboardingUrl}?${params.toString()}`);
-  }, [shouldRedirectOnboarding, router]);
+    const destination = isSwipeOnboardingPreviewForced
+      ? swipeOnboardingUrl
+      : onboardingUrl;
+    router.push(`${destination}?${params.toString()}`);
+  }, [isSwipeOnboardingPreviewForced, shouldRedirectOnboarding, router]);
 
   const ignoredUtmMediumForLogin = ['slack'];
   const utmSource = router?.query?.utm_source;

packages/shared/src/components/filters/MyFeedHeading.spec.tsx

@@ -0,0 +1,254 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useRouter } from 'next/router';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useActiveFeedNameContext } from '../../contexts';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+import { useActions, useFeedLayout, useViewSize, ViewSize } from '../../hooks';
+import { useShortcutsUser } from '../../features/shortcuts/hooks/useShortcutsUser';
+import { ActionType } from '../../graphql/actions';
+import useCustomDefaultFeed from '../../hooks/feed/useCustomDefaultFeed';
+import { getHasSeenTags, setHasSeenTags } from '../../lib/feedSettings';
+import { SharedFeedPage } from '../utilities';
+import MyFeedHeading from './MyFeedHeading';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(),
+}));
+
+jest.mock('../../contexts', () => ({
+  useActiveFeedNameContext: jest.fn(),
+}));
+
+jest.mock('../../contexts/SettingsContext', () => ({
+  useSettingsContext: jest.fn(),
+}));
+
+jest.mock('../../hooks', () => ({
+  useActions: jest.fn(),
+  useFeedLayout: jest.fn(),
+  useViewSize: jest.fn(),
+  ViewSize: {
+    MobileL: 'mobile',
+    Laptop: 'laptop',
+  },
+}));
+
+jest.mock('../../features/shortcuts/hooks/useShortcutsUser', () => ({
+  useShortcutsUser: jest.fn(),
+}));
+
+jest.mock('../../hooks/feed/useCustomDefaultFeed', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+jest.mock('../AlertDot', () => ({
+  AlertDot: ({ className }: { className?: string }) => (
+    <div data-testid="alert-dot" className={className} />
+  ),
+  AlertColor: { Bun: 'bg-accent-bun-default' },
+}));
+
+jest.mock('../feeds/FeedSettingsButton', () => ({
+  FeedSettingsButton: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode;
+    onClick: () => void;
+  }) => (
+    <button type="button" onClick={onClick}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('../../lib/constants', () => ({
+  ...jest.requireActual('../../lib/constants'),
+  webappUrl: 'https://app.daily.dev/',
+  settingsUrl: 'https://app.daily.dev/settings',
+}));
+
+jest.mock('../../lib/feedSettings', () => ({
+  getHasSeenTags: jest.fn(),
+  setHasSeenTags: jest.fn(),
+}));
+
+const mockUseRouter = useRouter as jest.Mock;
+const mockUseAuthContext = useAuthContext as jest.Mock;
+const mockUseActiveFeedNameContext = useActiveFeedNameContext as jest.Mock;
+const mockUseSettingsContext = useSettingsContext as jest.Mock;
+const mockUseActions = useActions as jest.Mock;
+const mockUseFeedLayout = useFeedLayout as jest.Mock;
+const mockUseViewSize = useViewSize as jest.Mock;
+const mockUseShortcutsUser = useShortcutsUser as jest.Mock;
+const mockUseCustomDefaultFeed = useCustomDefaultFeed as jest.Mock;
+const mockGetHasSeenTags = getHasSeenTags as jest.Mock;
+const mockSetHasSeenTags = setHasSeenTags as jest.Mock;
+
+const push = jest.fn();
+const completeAction = jest.fn();
+
+const renderComponent = () => render(<MyFeedHeading />);
+
+describe('MyFeedHeading', () => {
+  beforeEach(() => {
+    push.mockReset();
+    push.mockResolvedValue(true);
+    completeAction.mockReset();
+    completeAction.mockResolvedValue(undefined);
+    mockGetHasSeenTags.mockReset();
+    mockGetHasSeenTags.mockReturnValue(null);
+    mockSetHasSeenTags.mockReset();
+
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/',
+      query: {},
+    });
+    mockUseAuthContext.mockReturnValue({
+      user: { id: 'user-1' },
+    });
+    mockUseActiveFeedNameContext.mockReturnValue({
+      feedName: SharedFeedPage.MyFeed,
+    });
+    mockUseSettingsContext.mockReturnValue({
+      toggleShowTopSites: jest.fn(),
+    });
+    mockUseActions.mockReturnValue({
+      completeAction,
+      checkHasCompleted: jest.fn().mockReturnValue(false),
+      isActionsFetched: true,
+    });
+    mockUseFeedLayout.mockReturnValue({
+      shouldUseListFeedLayout: false,
+    });
+    mockUseViewSize.mockImplementation((size) => size === ViewSize.Laptop);
+    mockUseShortcutsUser.mockReturnValue({
+      isOldUserWithNoShortcuts: false,
+      showToggleShortcuts: false,
+    });
+    mockUseCustomDefaultFeed.mockReturnValue({
+      isCustomDefaultFeed: false,
+      defaultFeedId: 'user-1',
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('routes the home custom default feed to its edit page', async () => {
+    mockUseCustomDefaultFeed.mockReturnValue({
+      isCustomDefaultFeed: true,
+      defaultFeedId: 'feed-1',
+    });
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/feed-1/edit',
+    );
+  });
+
+  it('routes the home For you feed to the user edit page with the tags tab open', async () => {
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/user-1/edit?dview=tags',
+    );
+  });
+
+  it('routes the For you feed to the user edit page with the tags tab open', async () => {
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/my-feed',
+      query: {},
+    });
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/user-1/edit?dview=tags',
+    );
+  });
+
+  it('routes custom feeds to their slug or id edit page', async () => {
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/feeds/[slugOrId]',
+      query: { slugOrId: 'feed-2' },
+    });
+    mockUseActiveFeedNameContext.mockReturnValue({
+      feedName: SharedFeedPage.Custom,
+    });
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/feed-2/edit',
+    );
+  });
+
+  it('shows the tags reminder dot for the For you feed when tags were not seen yet', () => {
+    mockGetHasSeenTags.mockReturnValue(false);
+
+    renderComponent();
+
+    expect(screen.getByTestId('alert-dot')).toBeInTheDocument();
+  });
+
+  it('does not show the tags reminder dot for custom feeds', () => {
+    mockGetHasSeenTags.mockReturnValue(false);
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/feeds/[slugOrId]',
+      query: { slugOrId: 'feed-2' },
+    });
+    mockUseActiveFeedNameContext.mockReturnValue({
+      feedName: SharedFeedPage.Custom,
+    });
+
+    renderComponent();
+
+    expect(screen.queryByTestId('alert-dot')).not.toBeInTheDocument();
+  });
+
+  it('marks tags as seen before navigating from the For you feed settings button', async () => {
+    mockGetHasSeenTags.mockReturnValue(false);
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(mockSetHasSeenTags).toHaveBeenCalledWith('user-1', true);
+    expect(completeAction).toHaveBeenCalledWith(ActionType.HasSeenTags);
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/user-1/edit?dview=tags',
+    );
+  });
+});