diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 1ccefc412d..1ab5a9b99c 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -2,8 +2,10 @@ import React from 'react'
import {View} from 'react-native'
import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {createSanitizedDisplayName} from 'lib/moderation/create-sanitized-display-name'
import {sanitizeHandle} from 'lib/strings/handles'
+import {useProfileShadow} from 'state/cache/profile-shadow'
+import {FollowButton} from 'view/com/profile/FollowButton'
import {ProfileCardPills} from 'view/com/profile/ProfileCard'
import {UserAvatar} from 'view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
@@ -11,20 +13,19 @@ import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
export function Default({
- profile,
+ profile: profileUnshadowed,
moderationOpts,
+ logContext,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed
moderationOpts: ModerationOpts
+ logContext: 'ProfileCard' | 'StarterPackProfilesList'
}) {
const t = useTheme()
+ const profile = useProfileShadow(profileUnshadowed)
+ const name = createSanitizedDisplayName(profile)
const handle = `@${sanitizeHandle(profile.handle)}`
- const name =
- profile.displayName != null && profile.displayName !== ''
- ? sanitizeDisplayName(profile.displayName)
- : handle
-
const moderation = moderateProfile(profile, moderationOpts)
return (
@@ -48,6 +49,11 @@ export function Default({
{handle}
+
+
+
+
+
- {children}
+ {children}
)
}
diff --git a/src/components/StarterPack/Main/ProfilesList.tsx b/src/components/StarterPack/Main/ProfilesList.tsx
index 057ba88595..e3b90e9741 100644
--- a/src/components/StarterPack/Main/ProfilesList.tsx
+++ b/src/components/StarterPack/Main/ProfilesList.tsx
@@ -3,11 +3,12 @@ import {ListRenderItemInfo, View} from 'react-native'
import {AppBskyActorDefs, AtUri, ModerationOpts} from '@atproto/api'
import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
-import {isNative} from 'platform/detection'
+import {isNative, isWeb} from 'platform/detection'
import {useListMembersQuery} from 'state/queries/list-members'
import {useSession} from 'state/session'
import {List, ListRef} from 'view/com/util/List'
import {SectionRef} from '#/screens/Profile/Sections/types'
+import {atoms as a, useTheme} from '#/alf'
import {Default as ProfileCard} from '#/components/ProfileCard'
function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
@@ -26,6 +27,7 @@ export const ProfilesList = React.forwardRef(
{listUri, headerHeight, scrollElRef, moderationOpts},
ref,
) {
+ const t = useTheme()
const [initialHeaderHeight] = React.useState(headerHeight)
const bottomBarOffset = useBottomBarOffset(20)
const {currentAccount} = useSession()
@@ -65,8 +67,22 @@ export const ProfilesList = React.forwardRef(
const renderItem = ({
item,
+ index,
}: ListRenderItemInfo) => {
- return
+ return (
+
+
+
+ )
}
return (