Reduce campaign profile step to avatar and name only

Add showBanner and a bioField "none" option to ProfileCard (threaded
through ProfileIdentityEditor), and drop the banner and bio from the
campaign creator's "Put a face to your campaign" step so it asks only
for an avatar and name.
This commit is contained in:
lemon
2026-06-12 23:49:58 -07:00
parent 814589e535
commit 9ef5d2cf6a
3 changed files with 20 additions and 9 deletions
+11 -5
View File
@@ -148,6 +148,8 @@ interface ProfileCardProps {
onRemoveAvatar?: () => void;
/** Called when user removes their banner image. */
onRemoveBanner?: () => void;
/** Show the banner area (default true). When false, only the avatar shows. */
showBanner?: boolean;
/** Show NIP-05 row (default true) */
showNip05?: boolean;
/** Show NIP-58 badge showcase row (default true). */
@@ -156,8 +158,9 @@ interface ProfileCardProps {
* Which kind-0 field the editable text slot below the name edits.
* - `'about'` (default): the bio textarea.
* - `'website'`: a single-line website input, replacing the bio entirely.
* - `'none'`: hide the slot entirely (just name).
*/
bioField?: 'about' | 'website';
bioField?: 'about' | 'website' | 'none';
/** Placeholder for the bio textarea when `bioField` is `'about'`. */
aboutPlaceholder?: string;
/** When provided, render an editable profile fields section below bio */
@@ -174,6 +177,7 @@ export function ProfileCard({
onPasteUrl,
onRemoveAvatar,
onRemoveBanner,
showBanner = true,
showNip05 = true,
showBadges = true,
bioField = 'about',
@@ -209,7 +213,7 @@ export function ProfileCard({
<div className={cn('bg-card border rounded-xl overflow-hidden', className)}>
{/* Banner */}
{editable && (onPasteUrl || onRemoveBanner) ? (
{showBanner && (editable && (onPasteUrl || onRemoveBanner) ? (
// When a paste or remove action exists, the banner opens the shared
// image menu instead of going straight to the file picker.
<ImageEditMenu
@@ -277,13 +281,13 @@ export function ProfileCard({
</>
)}
</div>
)}
))}
{/* Profile info */}
<div className="px-4 pb-4">
{/* Avatar */}
<div className="flex justify-between items-start -mt-12 mb-3">
<div className={cn('flex justify-between items-start mb-3', showBanner ? '-mt-12' : 'mt-3')}>
{editable ? (
<ImageEditMenu
hasImage={!!metadata.picture}
@@ -368,7 +372,8 @@ export function ProfileCard({
)}
{/* Bio — or, when `bioField` is `'website'`, a website input that
takes the bio's place entirely. */}
takes the bio's place entirely; `'none'` hides the slot. */}
{bioField !== 'none' && (
<div className="mt-2">
{bioField === 'website' ? (
editable ? (
@@ -395,6 +400,7 @@ export function ProfileCard({
</p>
) : null}
</div>
)}
{/* Extra profile fields — collapsible, only when prop provided */}
{extraFields !== undefined && (
@@ -40,11 +40,14 @@ interface ProfileIdentityEditorProps {
onChange: (patch: Partial<ProfileIdentityDraft>) => void;
/**
* Which kind-0 field the editable text slot below the name edits:
* `'website'` for organizations, `'about'` (bio) for campaigners.
* `'website'` for organizations, `'about'` (bio) for campaigners, or
* `'none'` to show just the name.
*/
bioField: 'website' | 'about';
bioField: 'website' | 'about' | 'none';
/** Placeholder for the bio textarea when `bioField` is `'about'`. */
aboutPlaceholder?: string;
/** Show the banner area (default true). */
showBanner?: boolean;
/** Notifies the host of upload progress so it can gate its primary button. */
onUploadingChange?: (uploading: boolean) => void;
className?: string;
@@ -65,6 +68,7 @@ export function ProfileIdentityEditor({
onChange,
bioField,
aboutPlaceholder,
showBanner = true,
onUploadingChange,
className,
}: ProfileIdentityEditorProps) {
@@ -245,6 +249,7 @@ export function ProfileIdentityEditor({
onRemoveBanner={() => onChange({ banner: '' })}
bioField={bioField}
aboutPlaceholder={aboutPlaceholder}
showBanner={showBanner}
showNip05={false}
showBadges={false}
/>
+2 -2
View File
@@ -761,8 +761,8 @@ export function CreateCampaignPage() {
)}
draft={profileData}
onChange={(patch) => setProfileData((prev) => ({ ...prev, ...patch }))}
bioField="about"
aboutPlaceholder={t('onboarding.profile.aboutPlaceholder')}
bioField="none"
showBanner={false}
onUploadingChange={setProfileImageUploading}
/>
);