From d5d8a2465365dc798ce68c83894c03d1ce845fe9 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 16 Apr 2026 14:59:05 +0300
Subject: [PATCH] feat: add signup widget to post page sidebar

Add an alternative signup banner placement in the post page right column,
behind the `post_signup_widget` feature flag. When enabled, the bottom
PostAuthBanner is hidden on laptop and replaced by a compact widget with
gradient-animated heading, auth buttons (Google/GitHub/email), and legal
disclaimer. Reuses AuthOptions for full auth flow and analytics parity.

Adds `compact`, `hideLoginLink`, and `onboardingSignupButton` size support
to OnboardingRegistrationForm for reusability.
---
 .../src/components/auth/AuthOptionsInner.tsx  |  6 +-
 .../auth/OnboardingRegistrationForm.tsx       | 33 ++++----
 .../shared/src/components/auth/common.tsx     |  2 +
 .../src/components/post/PostSignupWidget.tsx  | 76 +++++++++++++++++++
 .../src/components/post/PostWidgets.tsx       |  2 +
 .../src/components/post/SquadPostWidgets.tsx  |  2 +
 .../post/collection/CollectionPostWidgets.tsx |  2 +
 packages/shared/src/lib/auth.ts               |  1 +
 packages/shared/src/lib/featureManagement.ts  |  2 +
 packages/webapp/pages/posts/[id]/index.tsx    | 10 ++-
 10 files changed, 121 insertions(+), 15 deletions(-)
 create mode 100644 packages/shared/src/components/post/PostSignupWidget.tsx

diff --git a/packages/shared/src/components/auth/AuthOptionsInner.tsx b/packages/shared/src/components/auth/AuthOptionsInner.tsx
index 43c9ead930..76e8ffd945 100644
--- a/packages/shared/src/components/auth/AuthOptionsInner.tsx
+++ b/packages/shared/src/components/auth/AuthOptionsInner.tsx
@@ -159,6 +159,8 @@ function AuthOptionsInner({
   simplified = false,
   ignoreMessages = false,
   onboardingSignupButton,
+  hideLoginLink,
+  compact,
   autoTriggerProvider,
   socialProviderScopes,
 }: AuthOptionsProps): ReactElement {
@@ -681,7 +683,7 @@ function AuthOptionsInner({
       className={classNames(
         'z-1 flex w-full max-w-[26.25rem] flex-col overflow-y-auto rounded-16',
         !simplified && 'bg-accent-pepper-subtlest',
-        defaultDisplay === AuthDisplay.OnboardingSignup
+        defaultDisplay === AuthDisplay.OnboardingSignup && !compact
           ? 'min-h-[21.25rem]'
           : undefined,
         className?.container,
@@ -786,6 +788,8 @@ function AuthOptionsInner({
             targetId={targetId}
             className={className}
             onboardingSignupButton={onboardingSignupButton}
+            hideLoginLink={hideLoginLink}
+            compact={compact}
           />
         </Tab>
         <Tab label={AuthDisplay.SignBack}>
diff --git a/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx b/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx
index f2e434da1b..44cf1a3266 100644
--- a/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx
+++ b/packages/shared/src/components/auth/OnboardingRegistrationForm.tsx
@@ -36,6 +36,8 @@ interface OnboardingRegistrationFormProps extends AuthFormProps {
   isSocialAuthLoading?: boolean;
   className?: ClassName;
   onboardingSignupButton?: ButtonProps<'button'>;
+  hideLoginLink?: boolean;
+  compact?: boolean;
 }
 
 export const isWebView = (): boolean => {
@@ -105,6 +107,9 @@ export const OnboardingRegistrationForm = ({
   onProviderClick,
   targetId,
   trigger,
+  onboardingSignupButton,
+  hideLoginLink,
+  compact,
 }: OnboardingRegistrationFormProps): ReactElement => {
   const { logEvent } = useLogContext();
   const { value: isOnboardingV2 } = useConditionalFeature({
@@ -144,9 +149,9 @@ export const OnboardingRegistrationForm = ({
               icon={provider.icon}
               loading={!isReady || isSocialAuthLoading}
               onClick={() => onProviderClick?.(provider.value, false)}
-              size={ButtonSize.Large}
+              size={onboardingSignupButton?.size ?? ButtonSize.Large}
               type="button"
-              variant={ButtonVariant.Primary}
+              variant={onboardingSignupButton?.variant ?? ButtonVariant.Primary}
             >
               Continue with {provider.label}
             </Button>
@@ -160,26 +165,28 @@ export const OnboardingRegistrationForm = ({
         label="OR"
       />
       <div className="flex flex-col-reverse text-center">
-        <MemberAlready
-          onLogin={() => onExistingEmail?.('')}
-          className={{
-            container: isOnboardingV2
-              ? 'mx-auto mt-6 w-full justify-center border-t border-border-subtlest-tertiary pt-6 text-center text-text-secondary typo-callout'
-              : 'mx-auto mt-6 text-center text-text-secondary typo-callout',
-            login: '!text-inherit',
-          }}
-        />
+        {!hideLoginLink && (
+          <MemberAlready
+            onLogin={() => onExistingEmail?.('')}
+            className={{
+              container: isOnboardingV2
+                ? 'mx-auto mt-6 w-full justify-center border-t border-border-subtlest-tertiary pt-6 text-center text-text-secondary typo-callout'
+                : 'mx-auto mt-6 text-center text-text-secondary typo-callout',
+              login: '!text-inherit',
+            }}
+          />
+        )}
         <SignupDisclaimer className="!text-text-tertiary tablet:!typo-footnote" />
         <Button
           aria-label="Signup using email"
-          className="mb-8"
+          className={compact ? 'mb-4' : 'mb-8'}
           data-funnel-track={FunnelTargetId.SignupProvider}
           disabled={isSocialAuthLoading}
           onClick={() => {
             trackOpenSignup();
             onContinueWithEmail?.();
           }}
-          size={ButtonSize.Large}
+          size={onboardingSignupButton?.size ?? ButtonSize.Large}
           type="button"
           variant={ButtonVariant.Float}
         >
diff --git a/packages/shared/src/components/auth/common.tsx b/packages/shared/src/components/auth/common.tsx
index f784a698b1..113693f115 100644
--- a/packages/shared/src/components/auth/common.tsx
+++ b/packages/shared/src/components/auth/common.tsx
@@ -130,6 +130,8 @@ export interface AuthOptionsProps {
   targetId?: string;
   ignoreMessages?: boolean;
   onboardingSignupButton?: ButtonProps<'button'>;
+  hideLoginLink?: boolean;
+  compact?: boolean;
   autoTriggerProvider?: string;
   socialProviderScopes?: string[];
 }
diff --git a/packages/shared/src/components/post/PostSignupWidget.tsx b/packages/shared/src/components/post/PostSignupWidget.tsx
new file mode 100644
index 0000000000..c90e56d0a1
--- /dev/null
+++ b/packages/shared/src/components/post/PostSignupWidget.tsx
@@ -0,0 +1,76 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { featurePostSignupWidget } from '../../lib/featureManagement';
+import { AuthTriggers } from '../../lib/auth';
+import { ButtonSize, ButtonVariant } from '../buttons/Button';
+import AuthOptions from '../auth/AuthOptions';
+import { AuthDisplay } from '../auth/common';
+
+const gradientStyle: React.CSSProperties = {
+  backgroundImage:
+    'linear-gradient(90deg, var(--theme-accent-cabbage-default) 0%, var(--theme-accent-onion-default) 30%, var(--theme-accent-water-default) 60%, var(--theme-accent-cabbage-default) 100%)',
+  backgroundSize: '200% auto',
+  animation: 'post-signup-gradient-shift 10s ease-in-out infinite',
+  WebkitBackgroundClip: 'text',
+  backgroundClip: 'text',
+  color: 'transparent',
+};
+
+export function PostSignupWidget(): ReactElement | null {
+  const { user, isAuthReady, showLogin } = useAuthContext();
+  const shouldEvaluate = isAuthReady && !user;
+  const { value: isEnabled } = useConditionalFeature({
+    feature: featurePostSignupWidget,
+    shouldEvaluate,
+  });
+
+  if (!shouldEvaluate || !isEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col rounded-16 border border-border-subtlest-tertiary p-4">
+      <style>
+        {`@keyframes post-signup-gradient-shift {
+          0% { background-position: 0% 50%; }
+          50% { background-position: 100% 50%; }
+          100% { background-position: 0% 50%; }
+        }`}
+      </style>
+      <h3 className="font-bold typo-title3" style={gradientStyle}>
+        Want your personalized dev feed?
+      </h3>
+      <p className="mt-2 text-text-tertiary typo-footnote">
+        Millions of developers rely on daily.dev for tech news, tools, and
+        discussions that actually matter.
+      </p>
+      <div className="mt-4">
+        <AuthOptions
+          ignoreMessages
+          formRef={null as unknown as React.MutableRefObject<HTMLFormElement>}
+          trigger={AuthTriggers.PostPage}
+          simplified
+          defaultDisplay={AuthDisplay.OnboardingSignup}
+          forceDefaultDisplay
+          className={{
+            onboardingSignup: '!gap-3',
+          }}
+          onAuthStateUpdate={(props) => {
+            showLogin({
+              trigger: AuthTriggers.Onboarding,
+              options: { isLogin: true, formValues: props },
+            });
+          }}
+          onboardingSignupButton={{
+            variant: ButtonVariant.Primary,
+            size: ButtonSize.Medium,
+          }}
+          hideLoginLink
+          compact
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/post/PostWidgets.tsx b/packages/shared/src/components/post/PostWidgets.tsx
index b1a00b19f8..5189451b88 100644
--- a/packages/shared/src/components/post/PostWidgets.tsx
+++ b/packages/shared/src/components/post/PostWidgets.tsx
@@ -15,6 +15,7 @@ import { SourceType } from '../../graphql/sources';
 import EntityCardSkeleton from '../cards/entity/EntityCardSkeleton';
 import { PostSidebarAdWidget } from './PostSidebarAdWidget';
 import { FeaturedArchives } from '../widgets/FeaturedArchives';
+import { PostSignupWidget } from './PostSignupWidget';
 
 const UserEntityCard = dynamic(
   /* webpackChunkName: "userEntityCard" */ () =>
@@ -81,6 +82,7 @@ export function PostWidgets({
 
   return (
     <PageWidgets className={className}>
+      <PostSignupWidget />
       {sourceCard}
       {creator && (
         <UserEntityCard
diff --git a/packages/shared/src/components/post/SquadPostWidgets.tsx b/packages/shared/src/components/post/SquadPostWidgets.tsx
index 095e197ea2..92139a0105 100644
--- a/packages/shared/src/components/post/SquadPostWidgets.tsx
+++ b/packages/shared/src/components/post/SquadPostWidgets.tsx
@@ -16,6 +16,7 @@ import UserEntityCard from '../cards/entity/UserEntityCard';
 import type { UserShortProfile } from '../../lib/user';
 import { PostSidebarAdWidget } from './PostSidebarAdWidget';
 import { FeaturedArchives } from '../widgets/FeaturedArchives';
+import { PostSignupWidget } from './PostSignupWidget';
 
 export function SquadPostWidgets({
   onCopyPostLink,
@@ -34,6 +35,7 @@ export function SquadPostWidgets({
 
   return (
     <PageWidgets className={className}>
+      <PostSignupWidget />
       {!isUserSource &&
         (isSquadSource ? (
           <SquadEntityCard
diff --git a/packages/shared/src/components/post/collection/CollectionPostWidgets.tsx b/packages/shared/src/components/post/collection/CollectionPostWidgets.tsx
index ac3c60dd88..9b42cca302 100644
--- a/packages/shared/src/components/post/collection/CollectionPostWidgets.tsx
+++ b/packages/shared/src/components/post/collection/CollectionPostWidgets.tsx
@@ -10,6 +10,7 @@ import type { PostWidgetsProps } from '../PostWidgets';
 import { FooterLinks } from '../../footer';
 import { PostSidebarAdWidget } from '../PostSidebarAdWidget';
 import { FeaturedArchives } from '../../widgets/FeaturedArchives';
+import { PostSignupWidget } from '../PostSignupWidget';
 
 export const CollectionPostWidgets = ({
   onCopyPostLink,
@@ -19,6 +20,7 @@ export const CollectionPostWidgets = ({
 }: PostWidgetsProps): ReactElement => {
   return (
     <PageWidgets className={className}>
+      <PostSignupWidget />
       <CollectionsIntro className="hidden laptop:flex" />
       <RelatedPostsWidget
         post={post}
diff --git a/packages/shared/src/lib/auth.ts b/packages/shared/src/lib/auth.ts
index 6c7d16322a..ebb318ba22 100644
--- a/packages/shared/src/lib/auth.ts
+++ b/packages/shared/src/lib/auth.ts
@@ -75,6 +75,7 @@ export enum AuthTriggers {
   RecruiterSelfServe = 'recruiter self serve',
   AiFluencyQuiz = 'ai fluency quiz',
   Gear = 'gear',
+  PostPage = 'post page',
 }
 
 export type AuthTriggersType =
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 66b31bb24b..cf0127f33e 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -153,3 +153,5 @@ export const sharedPostPreviewFeature = new Feature(
 );
 
 export const featureOnboardingV2 = new Feature('onboarding_v2', false);
+
+export const featurePostSignupWidget = new Feature('post_signup_widget', false);
diff --git a/packages/webapp/pages/posts/[id]/index.tsx b/packages/webapp/pages/posts/[id]/index.tsx
index bbf016c543..340a03e080 100644
--- a/packages/webapp/pages/posts/[id]/index.tsx
+++ b/packages/webapp/pages/posts/[id]/index.tsx
@@ -39,6 +39,8 @@ import classNames from 'classnames';
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth/useOnboardingActions';
 import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
 import { useFeatureTheme } from '@dailydotdev/shared/src/hooks/utils/useFeatureTheme';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
+import { featurePostSignupWidget } from '@dailydotdev/shared/src/lib/featureManagement';
 import CustomAuthBanner from '@dailydotdev/shared/src/components/auth/CustomAuthBanner';
 import { isSourceUserSource } from '@dailydotdev/shared/src/graphql/sources';
 import { usePostReferrerContext } from '@dailydotdev/shared/src/contexts/PostReferrerContext';
@@ -183,6 +185,10 @@ export const PostPage = ({
   const isFallback = false;
   const { shouldShowAuthBanner } = useOnboardingActions();
   const isLaptop = useViewSize(ViewSize.Laptop);
+  const { value: isPostSignupWidget } = useConditionalFeature({
+    feature: featurePostSignupWidget,
+    shouldEvaluate: shouldShowAuthBanner,
+  });
   const { post, isError, isLoading } = usePostById({
     id,
     options: {
@@ -282,7 +288,9 @@ export const PostPage = ({
               },
             }}
           />
-          {shouldShowAuthBanner && isLaptop && <PostAuthBanner />}
+          {shouldShowAuthBanner && isLaptop && !isPostSignupWidget && (
+            <PostAuthBanner />
+          )}
         </FooterNavBarLayout>
       </LogExtraContextProvider>
     </ActivePostContextProvider>