Spot check each placement

This commit is contained in:
Eric Bailey
2026-03-10 12:06:44 -05:00
parent 179d64b95a
commit bdb251e5c6
15 changed files with 82 additions and 91 deletions
+20 -26
View File
@@ -51,26 +51,18 @@ export function AccountList({
a.border,
t.atoms.border_contrast_low,
]}>
{accounts
.map(account => ({
account,
profile: profiles?.profiles.find(p => p.did === account.did),
}))
.filter(item => {
return !!item.profile
})
.map(({account, profile}) => (
<React.Fragment key={account.did}>
<AccountItem
profile={profile!}
account={account}
onSelect={onSelectAccount}
isCurrentAccount={account.did === currentAccount?.did}
isPendingAccount={account.did === pendingDid}
/>
<View style={[a.border_b, t.atoms.border_contrast_low]} />
</React.Fragment>
))}
{accounts.map(account => (
<React.Fragment key={account.did}>
<AccountItem
profile={profiles?.profiles.find(p => p.did === account.did)}
account={account}
onSelect={onSelectAccount}
isCurrentAccount={account.did === currentAccount?.did}
isPendingAccount={account.did === pendingDid}
/>
<View style={[a.border_b, t.atoms.border_contrast_low]} />
</React.Fragment>
))}
<Button
testID="chooseAddAccountBtn"
style={[a.flex_1]}
@@ -115,7 +107,7 @@ function AccountItem({
isCurrentAccount,
isPendingAccount,
}: {
profile: AppBskyActorDefs.ProfileViewDetailed
profile?: AppBskyActorDefs.ProfileViewDetailed
account: SessionAccount
onSelect: (account: SessionAccount) => void
isCurrentAccount: boolean
@@ -170,11 +162,13 @@ function AccountItem({
profile?.displayName || profile?.handle || account.handle,
)}
</Text>
<ProfileBadges
profile={profile}
size="sm"
style={[{marginTop: -2}]}
/>
{profile && (
<ProfileBadges
profile={profile}
size="sm"
style={[{marginTop: -2}]}
/>
)}
</View>
<Text
style={[
+5 -20
View File
@@ -11,24 +11,14 @@ import {Robot_Filled_Corner2_Rounded as RobotIcon} from '#/components/icons/Robo
import {useAnalytics} from '#/analytics'
import type * as bsky from '#/types/bsky'
const sizes = {
xs: 10,
sm: 12,
md: 14,
lg: 18,
xl: 22,
} as const
export type Size = keyof typeof sizes
export function BotBadge({
profile,
alwaysShow = false,
size = 'sm',
size,
}: {
profile: bsky.profile.AnyProfileView
alwaysShow?: boolean
size: Size
size: number
}) {
const t = useTheme()
@@ -38,20 +28,17 @@ export function BotBadge({
return (
<View>
<RobotIcon
width={sizes[size]}
fill={t.atoms.text_contrast_medium.color}
/>
<RobotIcon width={size} fill={t.atoms.text_contrast_medium.color} />
</View>
)
}
export function BotBadgeButton({
profile,
size: _size,
size,
}: {
profile: bsky.profile.AnyProfileView
size: Size
size: number
}) {
const t = useTheme()
const ax = useAnalytics()
@@ -62,8 +49,6 @@ export function BotBadgeButton({
return null
}
const size = sizes[_size]
return (
<>
<Button
@@ -139,7 +139,7 @@ function RecentChatItem({
numberOfLines={1}>
{name}
</Text>
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
<ProfileBadges profile={profile} size="xs" style={[a.pl_2xs]} />
</View>
</Button>
)
+35 -6
View File
@@ -3,12 +3,30 @@ import {View} from 'react-native'
import {isBotAccount} from '#/lib/bots'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {atoms as a, type ViewStyleProp} from '#/alf'
import {BotBadge, BotBadgeButton, type Size} from '#/components/BotBadge'
import {BotBadge, BotBadgeButton} from '#/components/BotBadge'
import {useSimpleVerificationState} from '#/components/verification'
import {VerificationCheck} from '#/components/verification/VerificationCheck'
import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton'
import type * as bsky from '#/types/bsky'
export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
const verificationIconSizes: Record<Size, number> = {
xs: 10,
sm: 12,
md: 14,
lg: 18,
xl: 22,
} as const
const botIconSizes: Record<Size, number> = {
xs: 11,
sm: 13,
md: 15,
lg: 19,
xl: 23,
} as const
export function ProfileBadges({
profile,
interactive = false,
@@ -25,22 +43,33 @@ export function ProfileBadges({
// if nothing to show, don't render the container at all
if (!verification.showBadge && !isBotAccount(shadowed)) return null
const isOnTheSmallSide = size === 'xs' || size === 'sm'
return (
<View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
<View
style={[
a.flex_row,
a.align_center,
isOnTheSmallSide ? a.gap_2xs : a.gap_xs,
style,
]}>
{interactive ? (
<>
<VerificationCheckButton profile={shadowed} size={size} />
<BotBadgeButton profile={shadowed} size={size} />
<VerificationCheckButton
profile={shadowed}
size={verificationIconSizes[size]}
/>
<BotBadgeButton profile={shadowed} size={botIconSizes[size]} />
</>
) : (
<>
{verification.showBadge && (
<VerificationCheck
verifier={verification.role === 'verifier'}
size={size}
width={verificationIconSizes[size]}
/>
)}
<BotBadge profile={shadowed} size={size} />
<BotBadge profile={shadowed} size={botIconSizes[size]} />
</>
)}
</View>
+2 -2
View File
@@ -262,7 +262,7 @@ function InlineNameAndHandle({
</Text>
<ProfileBadges
profile={profile}
size="sm"
size="md"
style={[
a.pl_2xs,
a.self_center,
@@ -314,7 +314,7 @@ export function Name({
numberOfLines={1}>
{name}
</Text>
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
<ProfileBadges profile={profile} size="md" style={[a.pl_xs]} />
</View>
)
}
@@ -531,7 +531,7 @@ function Inner({
style={[
a.pl_xs,
{
marginTop: -2,
marginTop: -1,
},
]}
/>
+1 -1
View File
@@ -157,7 +157,7 @@ function HeaderReady({
numberOfLines={1}>
{displayName}
</Text>
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
<ProfileBadges profile={profile} size="md" style={[a.pl_xs]} />
</View>
{!isDeletedAccount && (
<Text
@@ -14,16 +14,6 @@ import {VerifierDialog} from '#/components/verification/VerifierDialog'
import {useAnalytics} from '#/analytics'
import type * as bsky from '#/types/bsky'
const sizes = {
xs: 10,
sm: 12,
md: 14,
lg: 18,
xl: 22,
} as const
export type Size = keyof typeof sizes
export function shouldShowVerificationCheckButton(
state: FullVerificationState,
) {
@@ -64,7 +54,7 @@ export function VerificationCheckButton({
size,
}: {
profile: Shadow<bsky.profile.AnyProfileView>
size: Size
size: number
}) {
const state = useFullVerificationState({
profile,
@@ -80,18 +70,17 @@ export function VerificationCheckButton({
function Badge({
profile,
verificationState: state,
size: _size,
size,
}: {
profile: Shadow<bsky.profile.AnyProfileView>
verificationState: FullVerificationState
size: Size
size: number
}) {
const t = useTheme()
const ax = useAnalytics()
const {_} = useLingui()
const verificationsDialogControl = useDialogControl()
const verifierDialogControl = useDialogControl()
const size = sizes[_size]
const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
@@ -412,7 +412,7 @@ function ChatListItemReady({
</View>
<ProfileBadges
profile={profile}
size="sm"
size="md"
style={[a.pl_xs, a.self_center]}
/>
{lastMessageSentAt && (
@@ -163,7 +163,7 @@ function RecentProfileItem({
<Text emoji style={[a.text_xs, a.leading_snug]} numberOfLines={1}>
{name}
</Text>
<ProfileBadges profile={profile} size="sm" style={[a.pl_xs]} />
<ProfileBadges profile={profile} size="xs" style={[a.pl_xs]} />
</View>
</Link>
<Button
@@ -1,4 +1,3 @@
import React from 'react'
import {View} from 'react-native'
import {type $Typed, ComAtprotoLabelDefs} from '@atproto/api'
import {msg} from '@lingui/core/macro'
@@ -139,7 +138,7 @@ export function AutomationLabelSettingsScreen({}: Props) {
size="xs"
/>
)}
<BotBadge profile={profile} alwaysShow size="md" />
<BotBadge profile={profile} alwaysShow size={16} />
</View>
</View>
<Text
+1 -1
View File
@@ -359,7 +359,7 @@ function ProfilePreview({
</Text>
<ProfileBadges
profile={shadow}
size="lg"
size="xl"
interactive
style={[
{
@@ -244,13 +244,14 @@ let NotificationFeedItem = ({
{forceLTR(firstAuthorName)}
<ProfileBadges
profile={firstAuthor.profile}
size="sm"
size="md"
style={[
a.relative,
{
// weird stuff here
paddingTop: platform({android: 2}),
marginBottom: platform({ios: -7}),
top: platform({web: 1}),
marginBottom: platform({ios: -6}),
top: platform({web: 2}),
paddingLeft: 3,
paddingRight: 2,
},
@@ -1046,8 +1047,8 @@ function ExpandedAuthorCard({author}: {author: Author}) {
</Text>
<ProfileBadges
profile={author.profile}
size="sm"
style={[a.pl_xs, a.self_center]}
size="md"
style={[a.pl_2xs, a.self_center]}
/>
<Text
numberOfLines={1}
+3 -9
View File
@@ -13,7 +13,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
import {niceDate} from '#/lib/strings/time'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {unstableCacheProfileView} from '#/state/queries/profile'
import {atoms as a, platform, useTheme, web} from '#/alf'
import {atoms as a, useTheme, web} from '#/alf'
import {WebOnlyInlineLinkText} from '#/components/Link'
import {ProfileBadges} from '#/components/ProfileBadges'
import {ProfileHoverCard} from '#/components/ProfileHoverCard'
@@ -109,14 +109,8 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
</MaybeLinkText>
<ProfileBadges
profile={author}
size="xs"
style={[
a.pl_2xs,
a.self_center,
{
marginTop: platform({web: 0, ios: 0, android: -1}),
},
]}
size="sm"
style={[a.pl_2xs, a.self_center]}
/>
<MaybeLinkText
emoji
+1 -1
View File
@@ -95,7 +95,7 @@ let DrawerProfileCard = ({
numberOfLines={1}>
{profile?.displayName || account.handle}
</Text>
{profile && <ProfileBadges profile={profile} size="md" />}
{profile && <ProfileBadges profile={profile} size="lg" />}
</View>
<Text
emoji