Allow bio edition in profile edition

web/components/bio/editable-bio.tsx

@@ -1,6 +1,6 @@
 import {Editor} from '@tiptap/core'
 import {MAX_DESCRIPTION_LENGTH} from 'common/envs/constants'
-import {Profile} from 'common/profiles/profile'
+import {Profile, ProfileWithoutUser} from 'common/profiles/profile'
 import {tryCatch} from 'common/util/try-catch'
 import {Button} from 'web/components/buttons/button'
 import {Col} from 'web/components/layout/col'
@@ -10,9 +10,9 @@ import {updateProfile} from 'web/lib/api'
 import {track} from 'web/lib/service/analytics'
 import {useEffect, useState} from "react";
 import ReactMarkdown from "react-markdown";
-import Link from "next/link"
 import {MIN_BIO_LENGTH} from "common/constants";
 import {ShowMore} from 'web/components/widgets/show-more'
+import {NewTabLink} from 'web/components/widgets/new-tab-link'
 import {useT} from 'web/lib/locale'
 
 export function BioTips() {
@@ -25,16 +25,17 @@ export function BioTips() {
 - Availability, how to contact you or start a conversation (email, social media, etc.)
 - Optional: romantic preferences, lifestyle habits, and conversation starters
 `);
-  
+
   return (
-    <ShowMore 
-      labelClosed={t('profile.bio.tips', 'Tips')} 
-      labelOpen={t('profile.bio.hide_info', 'Hide info')} 
+    <ShowMore
+      labelClosed={t('profile.bio.tips', 'Tips')}
+      labelOpen={t('profile.bio.hide_info', 'Hide info')}
       className={'custom-link text-sm'}
     >
       <p>{t('profile.bio.tips_intro', "Write a clear and engaging bio to help others understand who you are and the connections you seek. Include:")}</p>
       <ReactMarkdown>{tips}</ReactMarkdown>
-      <Link href="/tips-bio" target="_blank">{t('profile.bio.tips_link', 'Read full tips for writing a high-quality bio')}</Link>
+      <NewTabLink
+        href="/tips-bio">{t('profile.bio.tips_link', 'Read full tips for writing a high-quality bio')}</NewTabLink>
     </ShowMore>
   )
 }
@@ -99,11 +100,13 @@ export function EditableBio(props: {
 
 export function SignupBio(props: {
   onChange: (e: Editor) => void
+  profile?: ProfileWithoutUser | undefined
 }) {
-  const {onChange} = props
+  const {onChange, profile} = props
   return (
     <Col className="relative w-full">
       <BaseBio
+        defaultValue={profile?.bio}
         onBlur={(editor) => {
           if (!editor) return
           onChange(editor)
@@ -138,10 +141,10 @@ export function BaseBio({defaultValue, onBlur, onEditor}: BaseBioProps) {
     <div>
       {textLength < MIN_BIO_LENGTH &&
           <p>
-              {remainingChars === 1 
-                ? t('profile.bio.add_characters_one', 'Add {count} more character so you can appear in search results—or take your time and start by exploring others.', {count: remainingChars})
-                : t('profile.bio.add_characters_many', 'Add {count} more characters so you can appear in search results—or take your time and start by exploring others.', {count: remainingChars})
-              }
+            {remainingChars === 1
+              ? t('profile.bio.add_characters_one', 'Add {count} more character so you can appear in search results—or take your time and start by exploring others.', {count: remainingChars})
+              : t('profile.bio.add_characters_many', 'Add {count} more characters so you can appear in search results—or take your time and start by exploring others.', {count: remainingChars})
+            }
           </p>
       }
       <BioTips/>

web/components/optional-profile-form.tsx

@@ -45,6 +45,8 @@ import {db} from "web/lib/supabase/db";
 import {fetchChoices} from "web/hooks/use-choices";
 import {AddOptionEntry} from "web/components/add-option-entry";
 import {sleep} from "common/util/time"
+import {SignupBio} from "web/components/bio/editable-bio";
+import {Editor} from "@tiptap/core";
 
 
 export const OptionalProfileUserForm = (props: {
@@ -93,10 +95,10 @@ export const OptionalProfileUserForm = (props: {
   const handleSubmit = async () => {
     setIsSubmitting(true)
     const {
-      bio: _bio,
-      bio_text: _bio_text,
-      bio_tsv: _bio_tsv,
-      bio_length: _bio_length,
+      // bio: _bio,
+      // bio_text: _bio_text,
+      // bio_tsv: _bio_tsv,
+      // bio_length: _bio_length,
       interests,
       causes,
       work,
@@ -212,6 +214,20 @@ export const OptionalProfileUserForm = (props: {
 
       <Col className={'gap-8'}>
 
+        {!fromSignup &&
+            <>
+                <Category title={t('profile.basics.bio', 'Bio')} className={'mt-0'}/>
+                <SignupBio
+                    profile={profile}
+                    onChange={(e: Editor) => {
+                      console.debug('bio changed', e, profile.bio)
+                      setProfile('bio', e.getJSON())
+                      setProfile('bio_length', e.getText().length)
+                    }}
+                />
+            </>
+        }
+
         <Category title={t('profile.optional.category.personal_info', 'Personal Information')} className={'mt-0'}/>
 
         <Col className={clsx(colClassName)}>
@@ -818,7 +834,7 @@ export const OptionalProfileUserForm = (props: {
         <Row className={'justify-end'}>
           <Button
             className={clsx(
-              "fixed lg:bottom-6 right-4 sm:right-60 z-50 text-xl",
+              "fixed lg:bottom-6 right-4 lg:right-32 z-50 text-xl",
               bottomNavBarVisible ? "bottom-[calc(90px+var(--bnh))]" : "bottom-[calc(30px+var(--bnh))]"
             )}
             disabled={isSubmitting}

web/components/required-profile-form.tsx

@@ -86,7 +86,7 @@ export const RequiredProfileUserForm = (props: {
 
   return (
     <>
-      <Title>{t('profile.basics.title', 'The Basics')}</Title>
+      {!profileCreatedAlready && <Title>{t('profile.basics.title', 'The Basics')}</Title>}
       {step === 1 && !profileCreatedAlready &&
           <div className="text-ink-500 mb-6 text-lg">
             {t('profile.basics.subtitle', 'Write your own bio, your own way.')}

web/components/widgets/new-tab-link.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import {isNativeMobile} from "web/lib/util/webview";
+
+interface NewTabLinkProps {
+  href: string
+  children: React.ReactNode
+  className?: string
+}
+
+export function NewTabLink({href, children, className}: NewTabLinkProps) {
+  // New tabs don't work on native apps
+  const isNative = isNativeMobile()
+  return (
+    <Link href={href} target={isNative ? undefined : "_blank"} className={className}>
+      {children}
+    </Link>
+  )
+}

web/pages/signup.tsx

@@ -102,7 +102,7 @@ export default function SignupPage() {
       {!user ? (
         <CompassLoadingIndicator/>
       ) : (
-        <Col className={'w-full max-w-2xl px-6 py-4'}>
+        <Col className={'w-full max-w-4xl px-6 py-4'}>
           {step === 0 ? (
             <RequiredProfileUserForm
               user={user}