Break things up a bit more

src/components/ProfileCard.tsx

@@ -1,16 +1,28 @@
 import React from 'react'
-import {View} from 'react-native'
-import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
+import {GestureResponderEvent, View} from 'react-native'
+import {
+  AppBskyActorDefs,
+  moderateProfile,
+  ModerationOpts,
+  RichText as RichTextApi,
+} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {createSanitizedDisplayName} from 'lib/moderation/create-sanitized-display-name'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {useProfileShadow} from 'state/cache/profile-shadow'
 import {useSession} from 'state/session'
-import {FollowButton} from 'view/com/profile/FollowButton'
+import * as Toast from '#/view/com/util/Toast'
 import {ProfileCardPills} from 'view/com/profile/ProfileCard'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
+import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
 export function Default({
@@ -34,7 +46,7 @@ export function Default({
 }
 
 export function Card({
-  profile: profileUnshadowed,
+  profile,
   moderationOpts,
   logContext = 'ProfileCard',
 }: {
@@ -42,62 +54,36 @@ export function Card({
   moderationOpts: ModerationOpts
   logContext?: 'ProfileCard' | 'StarterPackProfilesList'
 }) {
-  const t = useTheme()
-  const {currentAccount, hasSession} = useSession()
-
-  const profile = useProfileShadow(profileUnshadowed)
-  const name = createSanitizedDisplayName(profile)
-  const handle = `@${sanitizeHandle(profile.handle)}`
   const moderation = moderateProfile(profile, moderationOpts)
 
   return (
     <View style={[a.flex_1, a.gap_xs]}>
-      <View style={[a.flex_row, a.gap_sm]}>
-        <UserAvatar
-          size={42}
-          avatar={profile.avatar}
-          type={
-            profile.associated?.labeler
-              ? 'labeler'
-              : profile.associated?.feedgens
-              ? 'algo'
-              : 'user'
-          }
-          moderation={moderation.ui('avatar')}
-        />
-        <View style={[a.flex_1]}>
-          <Text
-            style={[a.text_md, a.font_bold, a.leading_snug]}
-            numberOfLines={1}>
-            {name}
-          </Text>
-          <Text
-            style={[a.leading_snug, t.atoms.text_contrast_medium]}
-            numberOfLines={1}>
-            {handle}
-          </Text>
-        </View>
-        {hasSession && profile.did !== currentAccount?.did && (
-          <View style={[a.justify_center, {marginLeft: 'auto'}]}>
-            <FollowButton profile={profile} logContext={logContext} />
-          </View>
-        )}
-      </View>
+      <Header>
+        <Avatar profile={profile} moderationOpts={moderationOpts} />
+        <NameAndHandle profile={profile} moderationOpts={moderationOpts} />
+        <FollowButton profile={profile} logContext={logContext} />
+      </Header>
+
       <View style={[a.mb_xs]}>
         <ProfileCardPills
           followedBy={Boolean(profile.viewer?.followedBy)}
           moderation={moderation}
         />
       </View>
-      {profile.description && (
-        <Text numberOfLines={3} style={[a.leading_snug]}>
-          {profile.description}
-        </Text>
-      )}
+
+      {profile.description && <Description description={profile.description} />}
     </View>
   )
 }
 
+export function Header({
+  children,
+}: {
+  children: React.ReactElement | React.ReactElement[]
+}) {
+  return <View style={[a.flex_row, a.gap_sm]}>{children}</View>
+}
+
 export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
   return (
     <InternalLink
@@ -109,3 +95,163 @@ export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
     </InternalLink>
   )
 }
+
+export function Avatar({
+  profile,
+  moderationOpts,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
+}) {
+  const moderation = moderateProfile(profile, moderationOpts)
+
+  return (
+    <UserAvatar
+      size={42}
+      avatar={profile.avatar}
+      type={profile.associated?.labeler ? 'labeler' : 'user'}
+      moderation={moderation.ui('avatar')}
+    />
+  )
+}
+
+export function NameAndHandle({
+  profile,
+  moderationOpts,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
+}) {
+  const t = useTheme()
+  const moderation = moderateProfile(profile, moderationOpts)
+  const name = sanitizeDisplayName(
+    profile.displayName || sanitizeHandle(profile.handle),
+    moderation.ui('displayName'),
+  )
+  const handle = sanitizeHandle(profile.handle, '@')
+
+  return (
+    <View style={[a.flex_1]}>
+      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+        {name}
+      </Text>
+      <Text
+        style={[a.leading_snug, t.atoms.text_contrast_medium]}
+        numberOfLines={1}>
+        {handle}
+      </Text>
+    </View>
+  )
+}
+
+export function Description({description}: {description?: string}) {
+  const rt = React.useMemo(() => {
+    if (!description) return
+    const rt = new RichTextApi({text: description || ''})
+    rt.detectFacetsWithoutResolution()
+    return rt
+  }, [description])
+  if (!rt) return null
+  return (
+    <RichText
+      value={rt}
+      style={[a.leading_snug]}
+      numberOfLines={3}
+      disableLinks
+    />
+  )
+}
+
+export function FollowButton({
+  profile,
+  logContext,
+}: {
+  profile: AppBskyActorDefs.ProfileViewBasic
+  logContext: 'ProfileCard' | 'StarterPackProfilesList'
+}) {
+  const {currentAccount, hasSession} = useSession()
+  const isMe = profile.did === currentAccount?.did
+  return hasSession && !isMe ? (
+    <FollowButtonInner profile={profile} logContext={logContext} />
+  ) : null
+}
+
+export function FollowButtonInner({
+  profile: profileUnshadowed,
+  logContext,
+}: {
+  profile: AppBskyActorDefs.ProfileViewBasic
+  logContext: 'ProfileCard' | 'StarterPackProfilesList'
+}) {
+  const {_} = useLingui()
+  const profile = useProfileShadow(profileUnshadowed)
+  const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
+    profile,
+    logContext,
+  )
+
+  const onPressFollow = async (e: GestureResponderEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await queueFollow()
+    } catch (e: any) {
+      if (e?.name !== 'AbortError') {
+        Toast.show(_(msg`An issue occurred, please try again.`))
+      }
+    }
+  }
+
+  const onPressUnfollow = async (e: GestureResponderEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await queueUnfollow()
+    } catch (e: any) {
+      if (e?.name !== 'AbortError') {
+        Toast.show(_(msg`An issue occurred, please try again.`))
+      }
+    }
+  }
+
+  const unfollowLabel = _(
+    msg({
+      message: 'Following',
+      comment: 'User is following this account, click to unfollow',
+    }),
+  )
+  const followLabel = _(
+    msg({
+      message: 'Follow',
+      comment: 'User is not following this account, click to follow',
+    }),
+  )
+
+  if (!profile.viewer) return null
+
+  return (
+    <View>
+      {profile.viewer.following ? (
+        <Button
+          label={unfollowLabel}
+          size="small"
+          variant="solid"
+          color="secondary"
+          onPress={onPressUnfollow}>
+          <ButtonIcon icon={Check} position="left" />
+          <ButtonText>{unfollowLabel}</ButtonText>
+        </Button>
+      ) : (
+        <Button
+          label={followLabel}
+          size="small"
+          variant="solid"
+          color="primary"
+          onPress={onPressFollow}>
+          <ButtonIcon icon={Plus} position="left" />
+          <ButtonText>{followLabel}</ButtonText>
+        </Button>
+      )}
+    </View>
+  )
+}