From 9ee2e813cee6421211e6e0ba0fcea5722637615d Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 8 May 2026 16:34:50 +0200
Subject: [PATCH 1/3] feat: add lucky button to feed header

Adds a Sparkle-icon button in the main feed control header that fetches a
random trending post via the existing randomTrendingPosts resolver and
navigates to it. Reuses the same backend random-post logic that powers the
"I'm feeling lucky" CTA in BestDiscussions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/filters/LuckyButton.tsx    | 60 +++++++++++++++++++
 .../shared/src/components/layout/common.tsx   |  2 +
 packages/shared/src/graphql/luckyPost.ts      | 14 +++++
 3 files changed, 76 insertions(+)
 create mode 100644 packages/shared/src/components/filters/LuckyButton.tsx
 create mode 100644 packages/shared/src/graphql/luckyPost.ts

diff --git a/packages/shared/src/components/filters/LuckyButton.tsx b/packages/shared/src/components/filters/LuckyButton.tsx
new file mode 100644
index 0000000000..101121d0ba
--- /dev/null
+++ b/packages/shared/src/components/filters/LuckyButton.tsx
@@ -0,0 +1,60 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import { useRouter } from 'next/router';
+import { Button } from '../buttons/Button';
+import { ButtonSize, ButtonVariant } from '../buttons/common';
+import { SparkleIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { gqlClient } from '../../graphql/common';
+import { LUCKY_POST_QUERY } from '../../graphql/luckyPost';
+import type { LuckyPostData } from '../../graphql/luckyPost';
+import { useLogContext } from '../../contexts/LogContext';
+import { LogEvent } from '../../lib/log';
+import { useViewSize, ViewSize } from '../../hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+
+export const LuckyButton = (): ReactElement => {
+  const router = useRouter();
+  const { logEvent } = useLogContext();
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClick = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+    try {
+      const data = await gqlClient.request<LuckyPostData>(LUCKY_POST_QUERY);
+      const post = data.randomTrendingPosts?.[0];
+      if (!post?.commentsPermalink) {
+        return;
+      }
+      logEvent({
+        event_name: LogEvent.Click,
+        target_id: post.id,
+        extra: JSON.stringify({ origin: 'lucky button' }),
+      });
+      router.push(post.commentsPermalink);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Tooltip content="Feeling lucky?">
+      <Button
+        type="button"
+        variant={isLaptop ? ButtonVariant.Float : ButtonVariant.Tertiary}
+        size={ButtonSize.Medium}
+        icon={
+          <SparkleIcon
+            size={IconSize.Medium}
+            className={isLoading ? 'animate-spin' : undefined}
+          />
+        }
+        onClick={onClick}
+        disabled={isLoading}
+        aria-label="Feeling lucky"
+      />
+    </Tooltip>
+  );
+};
diff --git a/packages/shared/src/components/layout/common.tsx b/packages/shared/src/components/layout/common.tsx
index 0d692773f2..af1bbe643a 100644
--- a/packages/shared/src/components/layout/common.tsx
+++ b/packages/shared/src/components/layout/common.tsx
@@ -36,6 +36,7 @@ import { ToggleClickbaitShield } from '../buttons/ToggleClickbaitShield';
 import { LogEvent, Origin } from '../../lib/log';
 import { AchievementTrackerButton } from '../filters/AchievementTrackerButton';
 import { IntroQuestButton } from '../filters/IntroQuestButton';
+import { LuckyButton } from '../filters/LuckyButton';
 import { ActionType } from '../../graphql/actions';
 import {
   BrowserName,
@@ -197,6 +198,7 @@ export const SearchControlHeader = ({
     ),
     hasFeedActions && <IntroQuestButton key="intro-quests" />,
     hasFeedActions && <AchievementTrackerButton key="achievement-tracker" />,
+    hasFeedActions && <LuckyButton key="lucky" />,
   ];
   const secondaryActions = [isLaptop && installExtensionButton];
   const actions = primaryActions.filter(Boolean);
diff --git a/packages/shared/src/graphql/luckyPost.ts b/packages/shared/src/graphql/luckyPost.ts
new file mode 100644
index 0000000000..424c5e08a4
--- /dev/null
+++ b/packages/shared/src/graphql/luckyPost.ts
@@ -0,0 +1,14 @@
+import { gql } from 'graphql-request';
+
+export const LUCKY_POST_QUERY = gql`
+  query LuckyPost {
+    randomTrendingPosts(first: 1) {
+      id
+      commentsPermalink
+    }
+  }
+`;
+
+export type LuckyPostData = {
+  randomTrendingPosts: { id: string; commentsPermalink: string }[];
+};

From 09dce405c56c8fbe5bf5e2a00ac3cd2c56265a8e Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 8 May 2026 16:43:28 +0200
Subject: [PATCH 2/3] feat: gate lucky button behind experiment flag

- Add featureLuckyButton GrowthBook flag (off by default)
- Fix click navigation: commentsPermalink is a full URL, so router.push
  was failing silently; switch to window.location.assign
- Move click tracking to fire immediately on click (event_name: Click,
  target_type: 'lucky button'), not after fetch
- Use TanStack useMutation with toast on error so failures are visible
- Add hover animation: sparkle rotates and scales on hover, spins while
  fetching

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/filters/LuckyButton.tsx    | 67 +++++++++++++------
 packages/shared/src/lib/featureManagement.ts  |  2 +
 2 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/components/filters/LuckyButton.tsx b/packages/shared/src/components/filters/LuckyButton.tsx
index 101121d0ba..dd9333ca48 100644
--- a/packages/shared/src/components/filters/LuckyButton.tsx
+++ b/packages/shared/src/components/filters/LuckyButton.tsx
@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
-import React, { useState } from 'react';
-import { useRouter } from 'next/router';
+import React from 'react';
+import classNames from 'classnames';
+import { useMutation } from '@tanstack/react-query';
 import { Button } from '../buttons/Button';
 import { ButtonSize, ButtonVariant } from '../buttons/common';
 import { SparkleIcon } from '../icons';
@@ -9,34 +10,54 @@ import { gqlClient } from '../../graphql/common';
 import { LUCKY_POST_QUERY } from '../../graphql/luckyPost';
 import type { LuckyPostData } from '../../graphql/luckyPost';
 import { useLogContext } from '../../contexts/LogContext';
+import { useAuthContext } from '../../contexts/AuthContext';
 import { LogEvent } from '../../lib/log';
 import { useViewSize, ViewSize } from '../../hooks';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featureLuckyButton } from '../../lib/featureManagement';
+import { useToastNotification } from '../../hooks/useToastNotification';
 import { Tooltip } from '../tooltip/Tooltip';
 
-export const LuckyButton = (): ReactElement => {
-  const router = useRouter();
+export const LuckyButton = (): ReactElement | null => {
+  const { isAuthReady } = useAuthContext();
   const { logEvent } = useLogContext();
+  const { displayToast } = useToastNotification();
   const isLaptop = useViewSize(ViewSize.Laptop);
-  const [isLoading, setIsLoading] = useState(false);
+  const { value: isEnabled } = useConditionalFeature({
+    feature: featureLuckyButton,
+    shouldEvaluate: isAuthReady,
+  });
 
-  const onClick = async () => {
-    if (isLoading) return;
-    setIsLoading(true);
-    try {
+  const { mutate: pickLuckyPost, isPending } = useMutation({
+    mutationFn: async () => {
       const data = await gqlClient.request<LuckyPostData>(LUCKY_POST_QUERY);
       const post = data.randomTrendingPosts?.[0];
       if (!post?.commentsPermalink) {
-        return;
+        throw new Error('No lucky post available');
       }
-      logEvent({
-        event_name: LogEvent.Click,
-        target_id: post.id,
-        extra: JSON.stringify({ origin: 'lucky button' }),
-      });
-      router.push(post.commentsPermalink);
-    } finally {
-      setIsLoading(false);
+      return post;
+    },
+    onSuccess: (post) => {
+      window.location.assign(post.commentsPermalink);
+    },
+    onError: () => {
+      displayToast('Bad luck — try again in a moment.');
+    },
+  });
+
+  if (!isEnabled) {
+    return null;
+  }
+
+  const onClick = () => {
+    if (isPending) {
+      return;
     }
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: 'lucky button',
+    });
+    pickLuckyPost();
   };
 
   return (
@@ -48,11 +69,17 @@ export const LuckyButton = (): ReactElement => {
         icon={
           <SparkleIcon
             size={IconSize.Medium}
-            className={isLoading ? 'animate-spin' : undefined}
+            className={classNames(
+              'transition-transform duration-300 ease-out motion-reduce:transition-none',
+              isPending
+                ? 'animate-spin'
+                : 'group-hover:rotate-[20deg] group-hover:scale-110',
+            )}
           />
         }
+        className="group"
         onClick={onClick}
-        disabled={isLoading}
+        disabled={isPending}
         aria-label="Feeling lucky"
       />
     </Tooltip>
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index db0e9593c0..dad36f71c1 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -59,6 +59,8 @@ export const featurePlusCtaCopy = new Feature('plus_cta_copy', {
 
 export const featurePlusApiLanding = new Feature('plus_api_landing_v2', false);
 
+export const featureLuckyButton = new Feature('lucky_button', true);
+
 export const featureAutorotateAds = new Feature('autorotate_ads', 0);
 
 export const featureFeedAdTemplate = new Feature('feed_ad_template', {

From 8161d336aa912098511809098a6aa79e950583ed Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 8 May 2026 16:45:35 +0200
Subject: [PATCH 3/3] fix: default off

---
 packages/shared/src/lib/featureManagement.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index dad36f71c1..88eed2c4c5 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -59,7 +59,7 @@ export const featurePlusCtaCopy = new Feature('plus_cta_copy', {
 
 export const featurePlusApiLanding = new Feature('plus_api_landing_v2', false);
 
-export const featureLuckyButton = new Feature('lucky_button', true);
+export const featureLuckyButton = new Feature('lucky_button', false);
 
 export const featureAutorotateAds = new Feature('autorotate_ads', 0);