feat(onboarding): results screen, tag chips, lower milestones

packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx

@@ -1433,6 +1433,18 @@ const OnboardingPostCard = ({
             {card.title || 'Popular developer story'}
           </Typography>
         </div>
+        {card.tags && card.tags.length > 0 && (
+          <div className="flex shrink-0 flex-wrap gap-1.5">
+            {card.tags.slice(0, 5).map((tag) => (
+              <span
+                key={tag}
+                className="rounded-8 bg-surface-hover px-2 py-0.5 typo-footnote text-text-tertiary"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
         <div className="aspect-[4/3] w-full shrink-0 overflow-hidden rounded-12">
           {card.image ? (
             <img

packages/webapp/lib/swipeOnboardingGuidance.ts

@@ -1,11 +1,11 @@
 /** Minimum swipes before “Continue” unlocks (tier 0 ends at this minus 1). */
-export const SWIPE_ONBOARDING_MIN_TO_UNLOCK = 10;
+export const SWIPE_ONBOARDING_MIN_TO_UNLOCK = 5;
 
 /** Second staircase (refine tier starts at this count). */
-export const SWIPE_ONBOARDING_IMPROVE_MILESTONE = 20;
+export const SWIPE_ONBOARDING_IMPROVE_MILESTONE = 10;
 
 /** Swipe count at which the bar is full and “all set” copy starts. */
-export const SWIPE_ONBOARDING_REFINE_TARGET = 40;
+export const SWIPE_ONBOARDING_REFINE_TARGET = 20;
 
 /** Number of equal segments on the onboarding progress bar (25% each). */
 export const SWIPE_ONBOARDING_BAR_STAGE_COUNT = 4;
@@ -77,8 +77,8 @@ export function getSwipeOnboardingHeadline(
       line1: 'Tune your feed.',
       line2:
         variant === 'tags'
-          ? 'Pick at least 10 tags to get started.'
-          : 'Swipe on at least 10 posts to get started.',
+          ? 'Pick at least 5 tags to get started.'
+          : 'Swipe on at least 5 posts to get started.',
     };
   }
 
@@ -92,10 +92,10 @@ export function getSwipeOnboardingHeadline(
   }
 
   if (n < SWIPE_ONBOARDING_IMPROVE_MILESTONE) {
-    return { line1: 'Keep going, 10 more and it gets better.' };
+    return { line1: 'Keep going, 5 more and it gets better.' };
   }
 
-  return { line1: "You're getting there, 20 more to dial it in." };
+  return { line1: "You're getting there, 10 more to dial it in." };
 }
 
 /**
@@ -127,14 +127,14 @@ export function getSwipeOnboardingGuidanceMessage(
 
   if (variant === 'tags') {
     if (n === 0) {
-      return 'Pick 10 tags to get started.';
+      return 'Pick 5 tags to get started.';
     }
     const remaining = SWIPE_ONBOARDING_MIN_TO_UNLOCK - n;
     return `Pick ${remaining} more ${unitWord(remaining, 'tag', 'tags')} to get started.`;
   }
 
   if (n === 0) {
-    return 'Swipe 10 posts to get started.';
+    return 'Swipe 5 posts to get started.';
   }
   const remaining = SWIPE_ONBOARDING_MIN_TO_UNLOCK - n;
   return `Swipe ${remaining} more ${unitWord(remaining, 'post', 'posts')} to get started.`;

packages/webapp/pages/onboarding/swipe.tsx

@@ -88,7 +88,7 @@ function SwipeOnboardingPage(): ReactElement {
   const [swipesCount, setSwipesCount] = useState(0);
   const [milestoneBurstKey, setMilestoneBurstKey] = useState(0);
   const [onboardingUiMode, setOnboardingUiMode] = useState<
-    'prompt' | 'swipe' | 'tags'
+    'prompt' | 'swipe' | 'tags' | 'results'
   >('prompt');
   const [promptText, setPromptText] = useState('');
   const [promptLoading, setPromptLoading] = useState(false);
@@ -313,14 +313,69 @@ function SwipeOnboardingPage(): ReactElement {
         variant={ButtonVariant.Primary}
         type="button"
         onClick={() => {
-          onComplete().catch(() => null);
+          setOnboardingUiMode('results');
         }}
       >
-        Go to my feed
+        See my interests
       </Button>
     </div>
   ) : null;
 
+  if (onboardingUiMode === 'results') {
+    return (
+      <div className="flex min-h-dvh flex-col items-center justify-center bg-background-default px-4 pb-6 pt-2">
+        <div className="flex w-full max-w-md flex-col items-center gap-6">
+          <h1 className="text-center font-bold typo-title1 text-text-primary">
+            Your interests
+          </h1>
+          <p className="text-center typo-body text-text-tertiary">
+            Based on your swipes, we selected these tags for your feed.
+          </p>
+          {adaptiveSelectedTags.length > 0 ? (
+            <div className="flex w-full flex-wrap justify-center gap-2">
+              {adaptiveSelectedTags.map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-10 bg-accent-cabbage-default/16 px-3 py-1.5 font-bold typo-callout text-accent-cabbage-default"
+                >
+                  {tag}
+                </span>
+              ))}
+            </div>
+          ) : (
+            <p className="typo-body text-text-quaternary">
+              No tags selected yet. Swipe right on posts you find interesting!
+            </p>
+          )}
+          <div className="flex w-full flex-col gap-3">
+            <Button
+              className="w-full"
+              size={ButtonSize.Medium}
+              variant={ButtonVariant.Primary}
+              type="button"
+              onClick={() => {
+                onComplete().catch(() => null);
+              }}
+            >
+              Go to my feed
+            </Button>
+            <Button
+              className="w-full"
+              size={ButtonSize.Medium}
+              variant={ButtonVariant.Tertiary}
+              type="button"
+              onClick={() => {
+                setOnboardingUiMode('swipe');
+              }}
+            >
+              Keep swiping
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (onboardingUiMode === 'prompt') {
     return (
       <div className="flex min-h-dvh flex-col items-center justify-center bg-background-default px-4 pb-6 pt-2">