From c845f7286bacc0d794ccb8bf7da02a7d219f4bae Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Sat, 30 May 2026 20:14:56 -0500
Subject: [PATCH] onboarding: hide bio behind Advanced toggle; show profile
 step first for new campaign creators

---
 src/components/OnboardingGate.tsx    | 69 +++++++++++++++++++---------
 src/contexts/OnboardingProvider.tsx  |  4 +-
 src/contexts/onboardingContextDef.ts | 12 +++++
 src/locales/ar.json                  |  1 +
 src/locales/en.json                  |  1 +
 src/locales/es.json                  |  1 +
 src/locales/fa.json                  |  1 +
 src/locales/fr.json                  |  1 +
 src/locales/hi.json                  |  1 +
 src/locales/id.json                  |  1 +
 src/locales/km.json                  |  1 +
 src/locales/ps.json                  |  1 +
 src/locales/pt.json                  |  1 +
 src/locales/ru.json                  |  1 +
 src/locales/sn.json                  |  1 +
 src/locales/sw.json                  |  1 +
 src/locales/tr.json                  |  1 +
 src/locales/zh-Hant.json             |  1 +
 src/locales/zh.json                  |  1 +
 src/pages/CreateCampaignPage.tsx     | 32 +++++++++++--
 20 files changed, 108 insertions(+), 25 deletions(-)

diff --git a/src/components/OnboardingGate.tsx b/src/components/OnboardingGate.tsx
index c0693a32..efb3a061 100644
--- a/src/components/OnboardingGate.tsx
+++ b/src/components/OnboardingGate.tsx
@@ -12,6 +12,7 @@ import {
   ArrowLeft,
   ArrowRight,
   Bitcoin,
+  ChevronDown,
   Download,
   Eye,
   EyeOff,
@@ -92,7 +93,7 @@ export function OnboardingGate({ children }: { children: ReactNode }) {
  *  per-flow state resets cleanly between sessions. */
 function CaptiveOverlay() {
   const { t } = useTranslation();
-  const { cancel, role: contextRole, setRole: setContextRole } = useOnboarding();
+  const { cancel, role: contextRole, setRole: setContextRole, skipToProfile } = useOnboarding();
   const navigate = useNavigate();
   const { toast } = useToast();
   const login = useLoginActions();
@@ -100,13 +101,16 @@ function CaptiveOverlay() {
   const { mutateAsync: publishEvent, isPending: isPublishingProfile } = useNostrPublish();
   const { mutateAsync: uploadFile, isPending: isUploadingAvatar } = useUploadFile();
 
-  // Decide the entry step. Already-authenticated users (e.g. a CTA called
-  // startSignup() on a logged-in surface to walk them to the role picker)
-  // skip keygen / secure / profile and land on `role` directly.
+  // Decide the entry step.
+  // - Already-authenticated users normally land on `role` directly.
+  // - If `skipToProfile` is set (e.g. campaign creation for a user with no
+  //   profile), they land on `profile` first; after finishing we navigate
+  //   straight to the role destination without showing the role picker.
   const initialStep: Step = useMemo(() => {
+    if (user && skipToProfile) return 'profile';
     if (user) return 'role';
     return 'keygen';
-  }, [user]);
+  }, [user, skipToProfile]);
 
   const [step, setStep] = useState<Step>(initialStep);
 
@@ -227,10 +231,19 @@ function CaptiveOverlay() {
           variant: 'destructive',
         });
       } finally {
-        goTo('role');
+        // When the overlay was opened with skipToProfile (e.g. from
+        // /campaigns/new for a user without a profile), skip the role
+        // picker and navigate directly to the pre-seeded role destination.
+        if (skipToProfile && contextRole) {
+          cancel();
+          if (contextRole === 'creator') navigate('/campaigns/new');
+          else navigate('/campaigns');
+        } else {
+          goTo('role');
+        }
       }
     },
-    [profileData, publishEvent, toast, t, goTo],
+    [profileData, publishEvent, toast, t, goTo, skipToProfile, contextRole, cancel, navigate],
   );
 
   // Step renderer -----------------------------------------------------------
@@ -577,6 +590,7 @@ function ProfileStep({
   onSkip,
 }: ProfileStepProps) {
   const { t } = useTranslation();
+  const [showAdvanced, setShowAdvanced] = useState(false);
   return (
     <div className="space-y-6">
       <div className="space-y-2 text-center">
@@ -597,20 +611,6 @@ function ProfileStep({
           />
         </div>
 
-        <div className="space-y-1.5">
-          <label htmlFor="onb-profile-about" className="text-sm font-medium">
-            {t('onboarding.profile.aboutLabel')}
-          </label>
-          <Textarea
-            id="onb-profile-about"
-            value={data.about}
-            onChange={(e) => onChange({ about: e.target.value })}
-            placeholder={t('onboarding.profile.aboutPlaceholder')}
-            className="resize-none"
-            rows={3}
-          />
-        </div>
-
         <div className="space-y-1.5">
           <label htmlFor="onb-profile-picture" className="text-sm font-medium">
             {t('onboarding.profile.avatarLabel')}
@@ -646,6 +646,33 @@ function ProfileStep({
             </Button>
           </div>
         </div>
+
+        <button
+          type="button"
+          onClick={() => setShowAdvanced((v) => !v)}
+          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ChevronDown
+            className={cn('h-4 w-4 transition-transform duration-200', showAdvanced && 'rotate-180')}
+          />
+          {t('onboarding.profile.advanced')}
+        </button>
+
+        {showAdvanced && (
+          <div className="space-y-1.5">
+            <label htmlFor="onb-profile-about" className="text-sm font-medium">
+              {t('onboarding.profile.aboutLabel')}
+            </label>
+            <Textarea
+              id="onb-profile-about"
+              value={data.about}
+              onChange={(e) => onChange({ about: e.target.value })}
+              placeholder={t('onboarding.profile.aboutPlaceholder')}
+              className="resize-none"
+              rows={3}
+            />
+          </div>
+        )}
       </div>
 
       <div className="space-y-2">
diff --git a/src/contexts/OnboardingProvider.tsx b/src/contexts/OnboardingProvider.tsx
index c6060aa1..301d07c0 100644
--- a/src/contexts/OnboardingProvider.tsx
+++ b/src/contexts/OnboardingProvider.tsx
@@ -20,9 +20,11 @@ import {
 export function OnboardingProvider({ children }: { children: ReactNode }) {
   const [active, setActive] = useState(false);
   const [role, setRoleState] = useState<OnboardingRole>(null);
+  const [skipToProfile, setSkipToProfile] = useState(false);
 
   const startSignup = useCallback((options?: StartSignupOptions) => {
     setRoleState(options?.role ?? null);
+    setSkipToProfile(options?.skipToProfile ?? false);
     setActive(true);
   }, []);
 
@@ -37,7 +39,7 @@ export function OnboardingProvider({ children }: { children: ReactNode }) {
   }, []);
 
   return (
-    <OnboardingContext.Provider value={{ active, role, startSignup, cancel, setRole }}>
+    <OnboardingContext.Provider value={{ active, role, skipToProfile, startSignup, cancel, setRole }}>
       {children}
     </OnboardingContext.Provider>
   );
diff --git a/src/contexts/onboardingContextDef.ts b/src/contexts/onboardingContextDef.ts
index 23d7c942..73d6e1d4 100644
--- a/src/contexts/onboardingContextDef.ts
+++ b/src/contexts/onboardingContextDef.ts
@@ -16,6 +16,13 @@ export interface StartSignupOptions {
    * (e.g. "Start a campaign") can skip the role step by passing this.
    */
   role?: 'creator' | 'donor';
+  /**
+   * When `true` and the user is already logged in, jump directly to the
+   * profile step instead of the role picker. Used by surfaces like
+   * `/campaigns/new` that want the user to set up a profile first.
+   * After the profile step completes the flow navigates based on `role`.
+   */
+  skipToProfile?: boolean;
 }
 
 export interface OnboardingContextValue {
@@ -23,6 +30,11 @@ export interface OnboardingContextValue {
   active: boolean;
   /** Selected role, or `null` if the picker hasn't run / been skipped. */
   role: OnboardingRole;
+  /**
+   * When `true`, the overlay was opened with `skipToProfile` so an
+   * already-logged-in user sees the profile step first.
+   */
+  skipToProfile: boolean;
   /** Begin the captive signup flow. Optionally pre-seed the role. */
   startSignup: (options?: StartSignupOptions) => void;
   /** Cancel and dismiss the overlay. Called from the gate when the user
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 43c45ae6..fa754a8a 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -113,6 +113,7 @@
       "aboutPlaceholder": "نبذة قصيرة عنك…",
       "avatarLabel": "الصورة الرمزية",
       "uploadAvatar": "رفع صورة رمزية",
+      "advanced": "متقدّم",
       "finish": "إنهاء",
       "saving": "جارٍ الحفظ…",
       "skip": "تخطٍّ في الوقت الحالي",
diff --git a/src/locales/en.json b/src/locales/en.json
index 897c9efb..a00374af 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "A little about you…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Upload avatar",
+      "advanced": "Advanced",
       "finish": "Finish",
       "saving": "Saving…",
       "skip": "Skip for now",
diff --git a/src/locales/es.json b/src/locales/es.json
index 5ace8538..5e4dbe55 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "Un poco sobre ti…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Subir avatar",
+      "advanced": "Avanzado",
       "finish": "Finalizar",
       "saving": "Guardando…",
       "skip": "Omitir por ahora",
diff --git a/src/locales/fa.json b/src/locales/fa.json
index d60b9c4f..ae75826c 100644
--- a/src/locales/fa.json
+++ b/src/locales/fa.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "کمی دربارهٔ شما…",
       "avatarLabel": "آواتار",
       "uploadAvatar": "بارگذاری آواتار",
+      "advanced": "پیشرفته",
       "finish": "پایان",
       "saving": "در حال ذخیره…",
       "skip": "فعلاً رد شو",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 629a64c7..bfa750d1 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -116,6 +116,7 @@
       "aboutPlaceholder": "Un mot sur vous…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Téléverser un avatar",
+      "advanced": "Avancé",
       "finish": "Terminer",
       "saving": "Enregistrement…",
       "skip": "Passer pour l'instant",
diff --git a/src/locales/hi.json b/src/locales/hi.json
index 0f7388a3..98b9c719 100644
--- a/src/locales/hi.json
+++ b/src/locales/hi.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "अपने बारे में थोड़ा सा…",
       "avatarLabel": "अवतार",
       "uploadAvatar": "अवतार अपलोड करें",
+      "advanced": "उन्नत",
       "finish": "पूरा करें",
       "saving": "सेव हो रहा है…",
       "skip": "अभी छोड़ दें",
diff --git a/src/locales/id.json b/src/locales/id.json
index e131a98b..b07579f5 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "Sedikit tentang Anda…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Unggah avatar",
+      "advanced": "Lanjutan",
       "finish": "Selesai",
       "saving": "Menyimpan…",
       "skip": "Lewati dulu",
diff --git a/src/locales/km.json b/src/locales/km.json
index fe6a81a7..00a76f62 100644
--- a/src/locales/km.json
+++ b/src/locales/km.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "បន្តិចបន្តួចអំពីអ្នក…",
       "avatarLabel": "រូបតំណាង",
       "uploadAvatar": "ផ្ទុករូបតំណាង",
+      "advanced": "កម្រិតខ្ពស់",
       "finish": "បញ្ចប់",
       "saving": "កំពុងរក្សាទុក…",
       "skip": "រំលងជាមុនសិន",
diff --git a/src/locales/ps.json b/src/locales/ps.json
index d4afee73..68ebf56e 100644
--- a/src/locales/ps.json
+++ b/src/locales/ps.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "د ځان په اړه یو څه…",
       "avatarLabel": "اواتار",
       "uploadAvatar": "اواتار پورته کول",
+      "advanced": "پرمختللي",
       "finish": "پای",
       "saving": "خوندي کېږي…",
       "skip": "اوس یې پرېږدئ",
diff --git a/src/locales/pt.json b/src/locales/pt.json
index d8c44f9c..2e08b6ff 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "Um pouco sobre você…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Enviar avatar",
+      "advanced": "Avançado",
       "finish": "Concluir",
       "saving": "Salvando…",
       "skip": "Pular por enquanto",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index b4fcae2d..a0c387d2 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "Немного о вас…",
       "avatarLabel": "Аватар",
       "uploadAvatar": "Загрузить аватар",
+      "advanced": "Дополнительно",
       "finish": "Готово",
       "saving": "Сохранение…",
       "skip": "Пропустить",
diff --git a/src/locales/sn.json b/src/locales/sn.json
index a00d5b7e..53970f1b 100644
--- a/src/locales/sn.json
+++ b/src/locales/sn.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "Zvishoma pamusoro pako…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Isa avatar",
+      "advanced": "Yakadzama",
       "finish": "Pedzisa",
       "saving": "Kuchengeta…",
       "skip": "Pfuura zvinosvika",
diff --git a/src/locales/sw.json b/src/locales/sw.json
index aa79a327..30e9a622 100644
--- a/src/locales/sw.json
+++ b/src/locales/sw.json
@@ -116,6 +116,7 @@
       "aboutPlaceholder": "Kidogo kukuhusu…",
       "avatarLabel": "Avatari",
       "uploadAvatar": "Pakia avatari",
+      "advanced": "Zaidi",
       "finish": "Maliza",
       "saving": "Inahifadhi…",
       "skip": "Ruka kwa sasa",
diff --git a/src/locales/tr.json b/src/locales/tr.json
index 5ccc3555..39c47c06 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -116,6 +116,7 @@
       "aboutPlaceholder": "Kendiniz hakkında birkaç söz…",
       "avatarLabel": "Avatar",
       "uploadAvatar": "Avatar yükle",
+      "advanced": "Gelişmiş",
       "finish": "Bitir",
       "saving": "Kaydediliyor…",
       "skip": "Şimdilik atla",
diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
index c6356496..093ca169 100644
--- a/src/locales/zh-Hant.json
+++ b/src/locales/zh-Hant.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "簡單介紹一下你自己…",
       "avatarLabel": "頭像",
       "uploadAvatar": "上傳頭像",
+      "advanced": "進階",
       "finish": "完成",
       "saving": "儲存中…",
       "skip": "暫時略過",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index a6dc240c..6b82bdbf 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -117,6 +117,7 @@
       "aboutPlaceholder": "介绍一下你自己……",
       "avatarLabel": "头像",
       "uploadAvatar": "上传头像",
+      "advanced": "高级",
       "finish": "完成",
       "saving": "正在保存……",
       "skip": "暂时跳过",
diff --git a/src/pages/CreateCampaignPage.tsx b/src/pages/CreateCampaignPage.tsx
index c2da827f..248d4d04 100644
--- a/src/pages/CreateCampaignPage.tsx
+++ b/src/pages/CreateCampaignPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type FormEvent } from 'react';
+import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useSeoMeta } from '@unhead/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -39,6 +39,7 @@ import { useCurrentUser } from '@/hooks/useCurrentUser';
 import { useHdWallet } from '@/hooks/useHdWallet';
 import { useManageableOrganizations } from '@/hooks/useManageableOrganizations';
 import { useNostrPublish } from '@/hooks/useNostrPublish';
+import { useOnboarding } from '@/contexts/onboardingContextDef';
 import { useToast } from '@/hooks/useToast';
 import { formatBTC, satsToUSD } from '@/lib/bitcoin';
 import {
@@ -131,6 +132,33 @@ export function CreateCampaignPage() {
     ? (userMetadata?.name ?? userMetadata?.display_name ?? genUserName(user.pubkey))
     : '';
 
+  const { startSignup, active: onboardingActive } = useOnboarding();
+
+  // Track whether we've already triggered the profile gate so the effect
+  // doesn't re-fire on subsequent renders (e.g. when the overlay dismisses
+  // and userAuthor re-renders with data).
+  const profileGateFiredRef = useRef(false);
+
+  // If a logged-in user navigates to /campaigns/new without a kind-0 profile,
+  // open the onboarding profile step so they set a name before the campaign
+  // wizard loads. Only runs once per page mount and only in create mode.
+  const editNaddr = searchParams.get('edit');
+  const isEditMode = !!editNaddr;
+
+  useEffect(() => {
+    if (isEditMode) return;
+    if (!user) return;
+    if (userAuthor.isLoading) return;
+    if (profileGateFiredRef.current) return;
+    if (onboardingActive) return;
+
+    const hasProfile = !!(userMetadata?.name || userMetadata?.display_name);
+    if (!hasProfile) {
+      profileGateFiredRef.current = true;
+      startSignup({ role: 'creator', skipToProfile: true });
+    }
+  }, [isEditMode, user, userAuthor.isLoading, userMetadata, onboardingActive, startSignup]);
+
   const [title, setTitle] = useState('');
   const [story, setStory] = useState('');
   const [bannerUrl, setBannerUrl] = useState('');
@@ -189,9 +217,7 @@ export function CreateCampaignPage() {
   const [formError, setFormError] = useState('');
   const [prepopulatedEventId, setPrepopulatedEventId] = useState<string | null>(null);
 
-  const editNaddr = searchParams.get('edit');
   const editTarget = useMemo(() => getEditTarget(editNaddr), [editNaddr]);
-  const isEditMode = !!editNaddr;
 
   // ── Organization context (implicit) ────────────────────────────────────
   const orgParam = searchParams.get('org');