update: date joined, edge cases, and mobile and web support

src/lib/strings/pronouns.ts

···
     return ''
   }
 
-  const trimmed = pronouns.trim()
+  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 {isOverMaxGraphemeCount} from '#/lib/strings/helpers'
+import {isValidWebsiteFormat} from '#/lib/strings/website'
 import {logger} from '#/logger'
 import {type ImageMeta} from '#/state/gallery'
 import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars'
···
 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,
   )
···
     [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 = isOverMaxGraphemeCount({
+    text: pronouns,
+    maxCount: PRONOUNS_MAX_GRAPHEMES,
+  })
+  const websiteTooLong = isOverMaxGraphemeCount({
+    text: website,
+    maxCount: WEBSITE_MAX_GRAPHEMES,
+  })
+  const websiteInvalidFormat = !isValidWebsiteFormat(website)
   const descriptionTooLong = isOverMaxGraphemeCount({
     text: description,
     maxCount: DESCRIPTION_MAX_GRAPHEMES,
···
                 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

···
   const t = useTheme()
   const {_} = useLingui()
   const invalidHandle = isInvalidHandle(profile.handle)
+  const pronouns = profile.pronouns
   const isBskySocialHandle = profile.handle.endsWith('.bsky.social')
   const showProfileInHandle = useShowLinkInHandle()
   const sanitized = sanitizeHandle(
···
       style={[a.flex_row, a.gap_sm, a.align_center, {maxWidth: '100%'}]}
       pointerEvents={disableTaps ? 'none' : IS_IOS ? 'auto' : 'box-none'}>
       <NewskieDialog profile={profile} disabled={disableTaps} />
-
-      <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, IS_NATIVE)}
+          </Text>
         )}
-      </Text>
+      </View>
     </View>
   )
 }

src/screens/Profile/Header/ProfileHeaderStandard.tsx

···
 import {useHaptics} from '#/lib/haptics'
 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 {type Shadow, useProfileShadow} from '#/state/cache/profile-shadow'
 import {useDisableFollowedByMetrics} from '#/state/preferences/disable-followed-by-metrics'
···
 } from '#/state/queries/profile'
 import {useRequireAuth, useSession} from '#/state/session'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
-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 {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 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 * as Toast from '#/components/Toast'
···
     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 unblockAccount = async () => {
     try {
···
                 )}
             </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>
 
           <DebugFieldDisplay subject={profile} />
         </View>

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.pronouns === updates.pronouns
+              res.data.pronouns === updates.pronouns &&
+              res.data.website === updates.website
             )
           }),
       )