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

Author: APiligrim

src/lib/strings/pronouns.ts

@@ -8,6 +8,6 @@ export function sanitizePronouns(
     return ''
   }
 
-  const trimmed = pronouns.trim()
+  const trimmed = pronouns.trim().toLowerCase()
   return forceLeftToRight ? forceLTR(trimmed) : trimmed
 }

src/lib/strings/time.ts

@@ -40,3 +40,11 @@ export function simpleAreDatesEqual(a: Date, b: Date): boolean {
     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

@@ -0,0 +1,44 @@
+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

@@ -1,12 +1,13 @@
-import {useCallback, useEffect, useState} from 'react'
-import {Dimensions, View} from 'react-native'
+import {useCallback, useEffect, useRef, useState} from 'react'
+import {Dimensions, Pressable, 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'
@@ -15,19 +16,22 @@ import * as Toast from '#/view/com/util/Toast'
 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 {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 
 const DISPLAY_NAME_MAX_GRAPHEMES = 64
-const PRONOUNS_MAX_GRAPHEMES = 50
-const WEBSITE_MAX_GRAPHEMES = 300
+const PRONOUNS_MAX_GRAPHEMES = 20
+const WEBSITE_MAX_GRAPHEMES = 28
 const DESCRIPTION_MAX_GRAPHEMES = 256
 
 const SCREEN_HEIGHT = Dimensions.get('window').height
@@ -117,10 +121,11 @@ function DialogInner({
   const [displayName, setDisplayName] = useState(initialDisplayName)
   const initialDescription = profile.description || ''
   const [description, setDescription] = useState(initialDescription)
-  const initialPronouns = ''
+  const initialPronouns = profile.pronouns || ''
   const [pronouns, setPronouns] = useState(initialPronouns)
-  const initialWebsite = ''
+  const initialWebsite = profile.website || ''
   const [website, setWebsite] = useState(initialWebsite)
+  const websiteInputRef = useRef<any>(null)
   const [userBanner, setUserBanner] = useState<string | undefined | null>(
     profile.banner,
   )
@@ -182,15 +187,26 @@ function DialogInner({
     [setNewUserBanner, setUserBanner, setImageError],
   )
 
+  const onClearWebsite = useCallback(() => {
+    setWebsite('')
+    if (websiteInputRef.current) {
+      websiteInputRef.current.clear()
+    }
+  }, [setWebsite])
+
   const onPressSave = useCallback(async () => {
     setImageError('')
     try {
+      const trimmedWebsite = website.trimEnd().toLowerCase()
+      const websiteToSave = trimmedWebsite || undefined
+
       await updateProfileMutation({
         profile,
         updates: {
           displayName: displayName.trimEnd(),
           description: description.trimEnd(),
-          pronouns: pronouns.trimEnd(),
+          pronouns: pronouns.trimEnd().toLowerCase(),
+          website: websiteToSave,
         },
         newUserAvatar,
         newUserBanner,
@@ -209,6 +225,7 @@ function DialogInner({
     displayName,
     description,
     pronouns,
+    website,
     newUserAvatar,
     newUserBanner,
     setImageError,
@@ -227,7 +244,7 @@ function DialogInner({
     text: website,
     maxCount: WEBSITE_MAX_GRAPHEMES,
   })
-  const websiteInvalidFormat = !!(website && !website.match(/^https?:\/\/.+/))
+  const websiteInvalidFormat = !isValidWebsiteFormat(website)
   const descriptionTooLong = useWarnMaxGraphemeCount({
     text: description,
     maxCount: DESCRIPTION_MAX_GRAPHEMES,
@@ -448,15 +465,63 @@ function DialogInner({
           <TextField.LabelText>
             <Trans>Website</Trans>
           </TextField.LabelText>
-          <TextField.Root isInvalid={websiteTooLong || websiteInvalidFormat}>
-            <Dialog.Input
-              defaultValue={website}
-              onChangeText={setWebsite}
-              label={_(msg`Website`)}
-              placeholder={_(msg`URL`)}
-              testID="editProfileWebsiteInput"
-            />
-          </TextField.Root>
+          <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={[
@@ -479,7 +544,9 @@ function DialogInner({
                 a.font_bold,
                 {color: t.palette.negative_400},
               ]}>
-              <Trans>Website must start with http:// or https://</Trans>
+              <Trans>
+                Website must be a valid URL (e.g., https://bsky.app)
+              </Trans>
             </Text>
           )}
         </View>

src/screens/Profile/Header/Handle.tsx

@@ -21,7 +21,7 @@ export function ProfileHeaderHandle({
   const t = useTheme()
   const {_} = useLingui()
   const invalidHandle = isInvalidHandle(profile.handle)
-
+  const pronouns = profile.pronouns
   const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
 
   return (
@@ -37,7 +37,7 @@ export function ProfileHeaderHandle({
         </View>
       ) : undefined}
 
-      <View style={[a.flex_col, a.gap_xs]}>
+      <View style={[a.flex_row, a.flex_wrap, {gap: 6}]}>
         <Text
           emoji
           numberOfLines={1}
@@ -68,12 +68,14 @@ export function ProfileHeaderHandle({
               )}
         </Text>
         {pronouns && (
-          <Text style={[t.atoms.text_contrast_low, a.pb_md]}>
-            {sanitizePronouns(
-              pronouns,
-              // forceLTR handled by the sanitization function
-              isNative,
-            )}
+          <Text
+            style={[
+              t.atoms.text_contrast_low,
+              a.text_md,
+              a.leading_snug,
+              a.pb_sm,
+            ]}>
+            {sanitizePronouns(pronouns, isNative)}
           </Text>
         )}
       </View>

src/screens/Profile/Header/ProfileHeaderStandard.tsx

@@ -12,6 +12,11 @@ import {useLingui} from '@lingui/react'
 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'
@@ -22,16 +27,19 @@ import {
 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'
@@ -80,6 +88,14 @@ let ProfileHeaderStandard = ({
     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()
 
   const onPressFollow = () => {
@@ -315,6 +331,32 @@ let ProfileHeaderStandard = ({
                 )}
             </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

@@ -180,6 +180,9 @@ export function useProfileUpdateMutation() {
           if ('pronouns' in updates) {
             next.pronouns = updates.pronouns
           }
+          if ('website' in updates) {
+            next.website = updates.website
+          }
         }
         if (newUserAvatarPromise) {
           const res = await newUserAvatarPromise
@@ -224,7 +227,8 @@ export function useProfileUpdateMutation() {
             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
             )
           }),
       )