Merge branch 'profilemetadata'

src/lib/strings/pronouns.ts

···
+import {forceLTR} from './bidi'
+
+export function sanitizePronouns(
+  pronouns: string,
+  forceLeftToRight = true,
+): string {
+  if (!pronouns || pronouns.trim() === '') {
+    return ''
+  }
+
+  const trimmed = pronouns.trim().toLowerCase()
+  return forceLeftToRight ? forceLTR(trimmed) : trimmed
+}

src/lib/strings/time.ts

···
     a.getDate() === b.getDate()
   )
 }
+
+export function formatJoinDate(date: number | string | Date): string {
+  const d = new Date(date)
+  return d.toLocaleDateString('en-US', {
+    month: 'short',
+    year: 'numeric',
+  })
+}

src/lib/strings/website.ts

···
+export function sanitizeWebsiteForDisplay(website: string): string {
+  return website.replace(/^https?:\/\//i, '').replace(/\/$/, '')
+}
+
+export function sanitizeWebsiteForLink(website: string): string {
+  const normalized = website.toLowerCase()
+  return normalized.startsWith('https')
+    ? normalized
+    : `https://${website.toLowerCase()}`
+}
+
+export function isValidWebsiteFormat(website: string): boolean {
+  const trimmedWebsite = website?.trim() || ''
+
+  if (!trimmedWebsite || trimmedWebsite.length === 0) {
+    return true
+  }
+
+  const normalizedWebsite = trimmedWebsite.toLowerCase()
+
+  if ('https://'.startsWith(normalizedWebsite)) {
+    return true
+  }
+
+  if (!normalizedWebsite.match(/^https:\/\/.+/)) {
+    return false
+  }
+
+  const domainMatch = normalizedWebsite.match(/^https:\/\/([^/\s]+)/)
+  if (!domainMatch) {
+    return false
+  }
+
+  const domain = domainMatch[1]
+
+  // Check for valid domain structure:
+  // - Must contain at least one dot
+  // - Must have a valid TLD (at least 2 characters after the last dot)
+  // - Cannot be just a single word without extension
+  const domainPattern =
+    /^[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]*[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/
+
+  return domainPattern.test(domain)
+}

src/screens/Profile/Header/EditProfileDialog.tsx

···
-import {useCallback, useEffect, useState} from 'react'
-import {useWindowDimensions, View} from 'react-native'
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {Pressable, useWindowDimensions, View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {urls} from '#/lib/constants'
+import {HITSLOP_10, urls} from '#/lib/constants'
 import {cleanError} from '#/lib/strings/errors'
 import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers'
+import {isValidWebsiteFormat} from '#/lib/strings/website'
 import {logger} from '#/logger'
 import {type ImageMeta} from '#/state/gallery'
 import {useProfileUpdateMutation} from '#/state/queries/profile'
···
 import {EditableUserAvatar} from '#/view/com/util/UserAvatar'
 import {UserBanner} from '#/view/com/util/UserBanner'
 import {atoms as a, useTheme} from '#/alf'
+import * as tokens from '#/alf/tokens'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
+import {CircleX_Stroke2_Corner0_Rounded as CircleX} from '#/components/icons/CircleX'
+import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
···
 import {useSimpleVerificationState} from '#/components/verification'
 
 const DISPLAY_NAME_MAX_GRAPHEMES = 64
+const PRONOUNS_MAX_GRAPHEMES = 20
+const WEBSITE_MAX_GRAPHEMES = 28
 const DESCRIPTION_MAX_GRAPHEMES = 256
 
 export function EditProfileDialog({
···
   const [displayName, setDisplayName] = useState(initialDisplayName)
   const initialDescription = profile.description || ''
   const [description, setDescription] = useState(initialDescription)
+  const initialPronouns = profile.pronouns || ''
+  const [pronouns, setPronouns] = useState(initialPronouns)
+  const initialWebsite = profile.website || ''
+  const [website, setWebsite] = useState(initialWebsite)
+  const websiteInputRef = useRef<any>(null)
   const [userBanner, setUserBanner] = useState<string | undefined | null>(
     profile.banner,
   )
···
   const dirty =
     displayName !== initialDisplayName ||
     description !== initialDescription ||
+    pronouns !== initialPronouns ||
+    website !== initialWebsite ||
     userAvatar !== profile.avatar ||
     userBanner !== profile.banner
 
···
     [setNewUserBanner, setUserBanner, setImageError],
   )
 
+  const onClearWebsite = useCallback(() => {
+    setWebsite('')
+    if (websiteInputRef.current) {
+      websiteInputRef.current.clear()
+    }
+  }, [setWebsite])
+
   const onPressSave = useCallback(async () => {
     setImageError('')
     try {
···
         updates: {
           displayName: displayName.trimEnd(),
           description: description.trimEnd(),
+          pronouns: pronouns.trimEnd().toLowerCase(),
+          website: website.trimEnd().toLowerCase(),
         },
         newUserAvatar,
         newUserBanner,
···
     control,
     displayName,
     description,
+    pronouns,
+    website,
     newUserAvatar,
     newUserBanner,
     setImageError,
···
     text: displayName,
     maxCount: DISPLAY_NAME_MAX_GRAPHEMES,
   })
+  const pronounsTooLong = useWarnMaxGraphemeCount({
+    text: pronouns,
+    maxCount: PRONOUNS_MAX_GRAPHEMES,
+  })
+  const websiteTooLong = useWarnMaxGraphemeCount({
+    text: website,
+    maxCount: WEBSITE_MAX_GRAPHEMES,
+  })
+  const websiteInvalidFormat = !isValidWebsiteFormat(website)
   const descriptionTooLong = useWarnMaxGraphemeCount({
     text: description,
     maxCount: DESCRIPTION_MAX_GRAPHEMES,
···
           !dirty ||
           isUpdatingProfile ||
           displayNameTooLong ||
-          descriptionTooLong
+          descriptionTooLong ||
+          pronounsTooLong ||
+          websiteTooLong ||
+          websiteInvalidFormat
         }
         size="small"
         color="primary"
···
       isUpdatingProfile,
       displayNameTooLong,
       descriptionTooLong,
+      pronounsTooLong,
+      websiteTooLong,
+      websiteInvalidFormat,
     ],
   )
 
···
                 value={DESCRIPTION_MAX_GRAPHEMES}
                 other="Description is too long. The maximum number of characters is #."
               />
+            </Text>
+          )}
+        </View>
+
+        <View>
+          <TextField.LabelText>
+            <Trans>Pronouns</Trans>
+          </TextField.LabelText>
+          <TextField.Root isInvalid={pronounsTooLong}>
+            <Dialog.Input
+              defaultValue={pronouns}
+              onChangeText={setPronouns}
+              label={_(msg`Pronouns`)}
+              placeholder={_(msg`Pronouns`)}
+              testID="editProfilePronounsInput"
+            />
+          </TextField.Root>
+          {pronounsTooLong && (
+            <Text
+              style={[
+                a.text_sm,
+                a.mt_xs,
+                a.font_bold,
+                {color: t.palette.negative_400},
+              ]}>
+              <Plural
+                value={PRONOUNS_MAX_GRAPHEMES}
+                other="The maximum number of characters is #."
+              />
+            </Text>
+          )}
+        </View>
+
+        <View>
+          <TextField.LabelText>
+            <Trans>Website</Trans>
+          </TextField.LabelText>
+          <View style={[a.w_full, a.relative]}>
+            <TextField.Root isInvalid={websiteTooLong || websiteInvalidFormat}>
+              {website && <TextField.Icon icon={Globe} />}
+              <Dialog.Input
+                inputRef={websiteInputRef}
+                defaultValue={website}
+                onChangeText={setWebsite}
+                label={_(msg`EditWebsite`)}
+                placeholder={_(msg`URL`)}
+                testID="editProfileWebsiteInput"
+                autoCapitalize="none"
+                keyboardType="url"
+                style={[
+                  website
+                    ? {
+                        paddingRight: tokens.space._5xl,
+                      }
+                    : {},
+                ]}
+              />
+            </TextField.Root>
+
+            {website && (
+              <View
+                style={[
+                  a.absolute,
+                  a.z_10,
+                  a.my_auto,
+                  a.inset_0,
+                  a.justify_center,
+                  a.pr_sm,
+                  {left: 'auto'},
+                ]}>
+                <Pressable
+                  testID="clearWebsiteBtn"
+                  onPress={onClearWebsite}
+                  accessibilityLabel={_(msg`Clear website`)}
+                  accessibilityHint={_(msg`Removes the website URL`)}
+                  hitSlop={HITSLOP_10}
+                  style={[
+                    a.flex_row,
+                    a.align_center,
+                    a.justify_center,
+                    {
+                      width: tokens.space._2xl,
+                      height: tokens.space._2xl,
+                    },
+                    a.rounded_full,
+                  ]}>
+                  <CircleX
+                    width={tokens.space.lg}
+                    style={{color: t.palette.contrast_600}}
+                  />
+                </Pressable>
+              </View>
+            )}
+          </View>
+          {websiteTooLong && (
+            <Text
+              style={[
+                a.text_sm,
+                a.mt_xs,
+                a.font_bold,
+                {color: t.palette.negative_400},
+              ]}>
+              <Plural
+                value={WEBSITE_MAX_GRAPHEMES}
+                other="Website is too long. The maximum number of characters is #."
+              />
+            </Text>
+          )}
+          {websiteInvalidFormat && (
+            <Text
+              style={[
+                a.text_sm,
+                a.mt_xs,
+                a.font_bold,
+                {color: t.palette.negative_400},
+              ]}>
+              <Trans>
+                Website must be a valid URL (e.g., https://bsky.app)
+              </Trans>
             </Text>
           )}
         </View>

src/screens/Profile/Header/Handle.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {isInvalidHandle, sanitizeHandle} from '#/lib/strings/handles'
+import {sanitizePronouns} from '#/lib/strings/pronouns'
 import {isIOS, isNative} from '#/platform/detection'
 import {type Shadow} from '#/state/cache/types'
 import {useShowLinkInHandle} from '#/state/preferences/show-link-in-handle.tsx'
···
   const t = useTheme()
   const {_} = useLingui()
   const invalidHandle = isInvalidHandle(profile.handle)
+  const pronouns = profile.pronouns
   const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
   const isBskySocialHandle = profile.handle.endsWith('.bsky.social')
   const showProfileInHandle = useShowLinkInHandle()
···
   )
   return (
     <View
-      style={[a.flex_row, a.gap_sm, a.align_center, {maxWidth: '100%'}]}
+      style={[a.flex_col, a.gap_sm, a.align_start, {maxWidth: '100%'}]}
       pointerEvents={disableTaps ? 'none' : isIOS ? 'auto' : 'box-none'}>
       <NewskieDialog profile={profile} disabled={disableTaps} />
       {profile.viewer?.followedBy && !blockHide ? (
···
           </Text>
         </View>
       ) : undefined}
-      <Text
-        emoji
-        numberOfLines={1}
-        style={[
-          invalidHandle
-            ? [
-                a.border,
-                a.text_xs,
-                a.px_sm,
-                a.py_xs,
-                a.rounded_xs,
-                {borderColor: t.palette.contrast_200},
-              ]
-            : [a.text_md, a.leading_snug, t.atoms.text_contrast_medium],
-          web({
-            wordBreak: 'break-all',
-            direction: 'ltr',
-            unicodeBidi: 'isolate',
-          }),
-        ]}>
-        {invalidHandle ? (
-          _(msg`⚠Invalid Handle`)
-        ) : showProfileInHandle && !isBskySocialHandle ? (
-          <InlineLinkText
-            to={`https://${profile.handle}`}
-            label={profile.handle}>
-            <Text style={[a.text_md, {color: t.palette.primary_500}]}>
-              {sanitized}
-            </Text>
-          </InlineLinkText>
-        ) : (
-          sanitized
+
+      <View style={[a.flex_row, a.flex_wrap, {gap: 6}]}>
+        <Text
+          emoji
+          numberOfLines={1}
+          style={[
+            invalidHandle
+              ? [
+                  a.border,
+                  a.text_xs,
+                  a.px_sm,
+                  a.py_xs,
+                  a.rounded_xs,
+                  {borderColor: t.palette.contrast_200},
+                ]
+              : [a.text_md, a.leading_snug, t.atoms.text_contrast_medium],
+            web({
+              wordBreak: 'break-all',
+              direction: 'ltr',
+              unicodeBidi: 'isolate',
+            }),
+          ]}>
+          {invalidHandle ? (
+            _(msg`⚠Invalid Handle`)
+          ) : showProfileInHandle && !isBskySocialHandle ? (
+            <InlineLinkText
+              to={`https://${profile.handle}`}
+              label={profile.handle}>
+              <Text style={[a.text_md, {color: t.palette.primary_500}]}>
+                {sanitized}
+              </Text>
+            </InlineLinkText>
+          ) : (
+            sanitized
+          )}
+        </Text>
+        {pronouns && (
+          <Text
+            style={[
+              t.atoms.text_contrast_low,
+              a.text_md,
+              a.leading_snug,
+              a.pb_sm,
+            ]}>
+            {sanitizePronouns(pronouns, isNative)}
+          </Text>
         )}
-      </Text>
+      </View>
     </View>
   )
 }

src/screens/Profile/Header/ProfileHeaderStandard.tsx

···
 import {useActorStatus} from '#/lib/actor-status'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {formatJoinDate} from '#/lib/strings/time'
+import {
+  sanitizeWebsiteForDisplay,
+  sanitizeWebsiteForLink,
+} from '#/lib/strings/website'
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
···
 import {useRequireAuth, useSession} from '#/state/session'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, platform, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, platform, tokens, useBreakpoints, useTheme} from '#/alf'
 import {SubscribeProfileButton} from '#/components/activity-notifications/SubscribeProfileButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {MessageProfileButton} from '#/components/dms/MessageProfileButton'
+import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'
+import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {
   KnownFollowers,
   shouldShowKnownFollowers,
 } from '#/components/KnownFollowers'
+import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
···
     profile.viewer?.blocking ||
     profile.viewer?.blockedBy ||
     profile.viewer?.blockingByList
+
+  const website = profile.website
+  const websiteFormatted = sanitizeWebsiteForDisplay(website ?? '')
+
+  const dateJoined = useMemo(() => {
+    if (!profile.createdAt) return ''
+    return formatJoinDate(profile.createdAt)
+  }, [profile.createdAt])
 
   const editProfileControl = useDialogControl()
 
···
                 )}
             </View>
           )}
+
+          <View style={[a.flex_row, a.flex_wrap, {gap: 10}, a.pt_md]}>
+            {websiteFormatted && (
+              <Link
+                to={sanitizeWebsiteForLink(websiteFormatted)}
+                label={_(msg({message: `Visit ${websiteFormatted}`}))}
+                style={[a.flex_row, a.align_center, a.gap_xs]}>
+                <Globe
+                  width={tokens.space.lg}
+                  style={{color: t.palette.primary_500}}
+                />
+                <Text style={[{color: t.palette.primary_500}]}>
+                  {websiteFormatted}
+                </Text>
+              </Link>
+            )}
+            <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+              <CalendarDays
+                width={tokens.space.lg}
+                style={{color: t.atoms.text_contrast_medium.color}}
+              />
+              <Text style={[t.atoms.text_contrast_medium]}>
+                <Trans>Joined {dateJoined}</Trans>
+              </Text>
+            </View>
+          </View>
         </View>
 
         <Prompt.Basic

src/state/queries/profile.ts

···
           if ('pinnedPost' in updates) {
             next.pinnedPost = updates.pinnedPost
           }
+          if ('pronouns' in updates) {
+            next.pronouns = updates.pronouns
+          }
+          if ('website' in updates) {
+            next.website = updates.website
+          }
         }
         if (newUserAvatarPromise) {
           const res = await newUserAvatarPromise
···
             }
             return (
               res.data.displayName === updates.displayName &&
-              res.data.description === updates.description
+              res.data.description === updates.description &&
+              res.data.pronouns === updates.pronouns &&
+              res.data.website === updates.website
             )
           }),
       )

yarn.lock

···
     "@atproto/xrpc-server" "^0.9.4"
 
 "@atproto/api@^0.16.7":
-  version "0.16.7"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.16.7.tgz#eb0c520dbdaf74ba6f5ad7f9c6afe2d1389b8a0a"
-  integrity sha512-EdVWkEgaEQm1LEiiP1fW/XXXpMNmtvT5c9+cZVRiwYc4rTB66WIJJWqmaMT/tB7nccMkFjr6FtwObq5LewWfgw==
+  version "0.16.10"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.16.10.tgz#79c383272f9aba0cda787d0c352454579f0664f0"
+  integrity sha512-PPWCk73+9IcbadUFBMI86RIV4UQSozRZ1K2XNB+0+CIhUtOjt8jfGDwU/VxGA+HZrDbjOCpvhy5KbOrtoLgGVQ==
   dependencies:
-    "@atproto/common-web" "^0.4.2"
-    "@atproto/lexicon" "^0.5.0"
+    "@atproto/common-web" "^0.4.3"
+    "@atproto/lexicon" "^0.5.1"
     "@atproto/syntax" "^0.4.1"
-    "@atproto/xrpc" "^0.7.4"
+    "@atproto/xrpc" "^0.7.5"
     await-lock "^2.2.2"
     multiformats "^9.9.0"
     tlds "^1.234.0"
···
     pino-http "^8.2.1"
     typed-emitter "^2.1.0"
 
-"@atproto/common-web@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@atproto/common-web/-/common-web-0.4.2.tgz#6e3add6939da93d3dfbc8f87e26dc4f57fad7259"
-  integrity sha512-vrXwGNoFGogodjQvJDxAeP3QbGtawgZute2ed1XdRO0wMixLk3qewtikZm06H259QDJVu6voKC5mubml+WgQUw==
+"@atproto/common-web@^0.4.2", "@atproto/common-web@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@atproto/common-web/-/common-web-0.4.3.tgz#b4480220b5682db09da45f4ef906eb7619c838b5"
+  integrity sha512-nRDINmSe4VycJzPo6fP/hEltBcULFxt9Kw7fQk6405FyAWZiTluYHlXOnU7GkQfeUK44OENG1qFTBcmCJ7e8pg==
   dependencies:
     graphemer "^1.4.0"
     multiformats "^9.9.0"
···
     "@atproto/xrpc" "^0.7.4"
     multiformats "^9.9.0"
 
-"@atproto/lexicon@0.5.0", "@atproto/lexicon@^0.5.0":
+"@atproto/lexicon@0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.5.0.tgz#4d2be425361f9ac7f9754b8a1ccba29ddf0b9460"
   integrity sha512-3aAzEAy9EAPs3CxznzMhEcqDd7m3vz1eze/ya9/ThbB7yleqJIhz5GY2q76tCCwHPhn5qDDMhlA9kKV6fG23gA==
···
     multiformats "^9.9.0"
     zod "^3.23.8"
 
+"@atproto/lexicon@^0.5.0", "@atproto/lexicon@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.5.1.tgz#e9b7d5c70dc5a38518a8069cd80fea77ab526947"
+  integrity sha512-y8AEtYmfgVl4fqFxqXAeGvhesiGkxiy3CWoJIfsFDDdTlZUC8DFnZrYhcqkIop3OlCkkljvpSJi1hbeC1tbi8A==
+  dependencies:
+    "@atproto/common-web" "^0.4.3"
+    "@atproto/syntax" "^0.4.1"
+    iso-datestring-validator "^2.2.2"
+    multiformats "^9.9.0"
+    zod "^3.23.8"
+
 "@atproto/oauth-provider-api@0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@atproto/oauth-provider-api/-/oauth-provider-api-0.3.0.tgz#c53a6f2584e6e53746b6cdf233be591fdf7d4355"
···
     ws "^8.12.0"
     zod "^3.23.8"
 
-"@atproto/xrpc@^0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.7.4.tgz#030342548797c1f344968c457a8659dbb60a2d60"
-  integrity sha512-sDi68+QE1XHegTaNAndlX41Gp827pouSzSs8CyAwhrqZdsJUxE3P7TMtrA0z+zAjvxVyvzscRc0TsN/fGUGrhw==
+"@atproto/xrpc@^0.7.4", "@atproto/xrpc@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.7.5.tgz#40cef1a657b5f28af8ebec9e3dac5872e58e88ea"
+  integrity sha512-MUYNn5d2hv8yVegRL0ccHvTHAVj5JSnW07bkbiaz96UH45lvYNRVwt44z+yYVnb0/mvBzyD3/ZQ55TRGt7fHkA==
   dependencies:
-    "@atproto/lexicon" "^0.5.0"
+    "@atproto/lexicon" "^0.5.1"
     zod "^3.23.8"
 
 "@aws-crypto/crc32@3.0.0":