diff --git a/src/screens/Profile/Header/DropdownBtn.tsx b/src/screens/Profile/Header/DropdownBtn.tsx index cc4680137c..a3f3ca8c17 100644 --- a/src/screens/Profile/Header/DropdownBtn.tsx +++ b/src/screens/Profile/Header/DropdownBtn.tsx @@ -152,75 +152,87 @@ export function ProfileHeaderDropdownBtn({ [currentAccount, profile], ) const dropdownItems: DropdownItem[] = React.useMemo(() => { - let items: DropdownItem[] = [ - { - testID: 'profileHeaderDropdownShareBtn', - label: isWeb ? _(msg`Copy link to profile`) : _(msg`Share`), - onPress: onPressShare, + let items: DropdownItem[] = [] + + if (hasSession && profile.associated?.modservice) { + items.push({ + testID: 'profileHeaderDropdownFollowBtn', + label: _(msg`Follow Account`), + onPress: () => {}, // TODO icon: { ios: { - name: 'square.and.arrow.up', + name: 'plus', }, - android: 'ic_menu_share', - web: 'share', + android: '', + web: 'plus', }, + }) + } + items.push({ + testID: 'profileHeaderDropdownShareBtn', + label: isWeb ? _(msg`Copy Link to Profile`) : _(msg`Share`), + onPress: onPressShare, + icon: { + ios: { + name: 'square.and.arrow.up', + }, + android: 'ic_menu_share', + web: 'share', }, - ] + }) if (hasSession) { - if (!profile.associated?.modservice) { - items.push({label: 'separator'}) - items.push({ - testID: 'profileHeaderDropdownListAddRemoveBtn', - label: _(msg`Add to Lists`), - onPress: onPressAddRemoveLists, - icon: { - ios: { - name: 'list.bullet', - }, - android: 'ic_menu_add', - web: 'list', + items.push({label: 'separator'}) + items.push({ + testID: 'profileHeaderDropdownListAddRemoveBtn', + label: _(msg`Add to Lists`), + onPress: onPressAddRemoveLists, + icon: { + ios: { + name: 'list.bullet', }, - }) - if (!isMe) { - if (!profile.viewer?.blocking) { - if (!profile.viewer?.mutedByList) { - items.push({ - testID: 'profileHeaderDropdownMuteBtn', - label: profile.viewer?.muted - ? _(msg`Unmute Account`) - : _(msg`Mute Account`), - onPress: profile.viewer?.muted - ? onPressUnmuteAccount - : onPressMuteAccount, - icon: { - ios: { - name: 'speaker.slash', - }, - android: 'ic_lock_silent_mode', - web: 'comment-slash', - }, - }) - } - } - if (!profile.viewer?.blockingByList) { + android: 'ic_menu_add', + web: 'list', + }, + }) + if (!isMe) { + if (!profile.viewer?.blocking) { + if (!profile.viewer?.mutedByList) { items.push({ - testID: 'profileHeaderDropdownBlockBtn', - label: profile.viewer?.blocking - ? _(msg`Unblock Account`) - : _(msg`Block Account`), - onPress: profile.viewer?.blocking - ? onPressUnblockAccount - : onPressBlockAccount, + testID: 'profileHeaderDropdownMuteBtn', + label: profile.viewer?.muted + ? _(msg`Unmute Account`) + : _(msg`Mute Account`), + onPress: profile.viewer?.muted + ? onPressUnmuteAccount + : onPressMuteAccount, icon: { ios: { - name: 'person.fill.xmark', + name: 'speaker.slash', }, - android: 'ic_menu_close_clear_cancel', - web: 'user-slash', + android: 'ic_lock_silent_mode', + web: 'comment-slash', }, }) } } + if (!profile.viewer?.blockingByList) { + items.push({ + testID: 'profileHeaderDropdownBlockBtn', + label: profile.viewer?.blocking + ? _(msg`Unblock Account`) + : _(msg`Block Account`), + onPress: profile.viewer?.blocking + ? onPressUnblockAccount + : onPressBlockAccount, + icon: { + ios: { + name: 'person.fill.xmark', + }, + android: 'ic_menu_close_clear_cancel', + web: 'user-slash', + }, + }) + } } items.push({ testID: 'profileHeaderDropdownReportBtn', diff --git a/src/screens/Profile/Header/Metrics.tsx b/src/screens/Profile/Header/Metrics.tsx new file mode 100644 index 0000000000..9c6f86a72c --- /dev/null +++ b/src/screens/Profile/Header/Metrics.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import {View} from 'react-native' +import {AppBskyActorDefs} from '@atproto/api' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {Shadow} from '#/state/cache/types' +import {pluralize} from '#/lib/strings/helpers' +import {makeProfileLink} from 'lib/routes/links' +import {formatCount} from 'view/com/util/numeric/format' + +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import {InlineLink} from '#/components/Link' + +export function ProfileHeaderMetrics({ + profile, +}: { + profile: Shadow +}) { + const t = useTheme() + const {_} = useLingui() + const following = formatCount(profile.followsCount || 0) + const followers = formatCount(profile.followersCount || 0) + const pluralizedFollowers = pluralize(profile.followersCount || 0, 'follower') + + return ( + + + {followers} + + {pluralizedFollowers} + + + + + + {following}{' '} + + + following + + + + + {formatCount(profile.postsCount || 0)}{' '} + + {pluralize(profile.postsCount || 0, 'post')} + + + + ) +} diff --git a/src/screens/Profile/Header/ProfileHeaderModerator.tsx b/src/screens/Profile/Header/ProfileHeaderModerator.tsx index 6a054f0be3..eb2499a082 100644 --- a/src/screens/Profile/Header/ProfileHeaderModerator.tsx +++ b/src/screens/Profile/Header/ProfileHeaderModerator.tsx @@ -30,6 +30,7 @@ import {ProfileHeaderShell} from './Shell' import {ProfileHeaderDropdownBtn} from './DropdownBtn' import {ProfileHeaderDisplayName} from './DisplayName' import {ProfileHeaderHandle} from './Handle' +import {ProfileHeaderMetrics} from './Metrics' import { Heart2_Stroke2_Corner0_Rounded as Heart, Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, @@ -170,7 +171,7 @@ let ProfileHeaderModerator = ({ {isSubscribed ? ( Unsubscribe ) : ( - Subscribe + Subscribe to labeler )} @@ -184,7 +185,18 @@ let ProfileHeaderModerator = ({ {!isPlaceholderProfile && ( <> - + + {descriptionRT && !moderation.ui('profileView').blur ? ( + + + + ) : undefined} + - + )} ) } + if (type === 'labeler') { + // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. + return ( + + + + + + ) + } return ( { - if (type === 'algo' || type === 'list') { + if (type === 'algo' || type === 'list' || type === 'labeler') { return { width: size, height: size, diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 4065a4e7f4..64202ac4d4 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -119,7 +119,8 @@ export function ProfileScreen({route}: Props) { } if (profile && moderationOpts) { if (profile.handle === 'alice.test') { - profile.associated = {modservice: true} + // TODO removeme + profile.associated = {modservice: true, lists: 1} } return ( 0) @@ -489,13 +490,13 @@ function ProfileScreenLoadedV2({ const sectionTitles = useMemo(() => { return [ + showFiltersTab ? _(msg`Labels`) : undefined, + showListsTab ? _(msg`Lists`) : undefined, showPostsTab ? _(msg`Posts`) : undefined, showRepliesTab ? _(msg`Replies`) : undefined, showMediaTab ? _(msg`Media`) : undefined, showLikesTab ? _(msg`Likes`) : undefined, showFeedsTab ? _(msg`Feeds`) : undefined, - showFiltersTab ? _(msg`Labels`) : undefined, - showListsTab ? _(msg`Lists`) : undefined, ].filter(Boolean) as string[] }, [ showPostsTab, @@ -511,30 +512,33 @@ function ProfileScreenLoadedV2({ let nextIndex = 0 let filtersIndex: number | null = null let postsIndex: number | null = null - if (showPostsTab) { - postsIndex = nextIndex++ - } let repliesIndex: number | null = null - if (showRepliesTab) { - repliesIndex = nextIndex++ - } let mediaIndex: number | null = null - if (showMediaTab) { - mediaIndex = nextIndex++ - } let likesIndex: number | null = null - if (showLikesTab) { - likesIndex = nextIndex++ - } let feedsIndex: number | null = null - if (showFeedsTab) { - feedsIndex = nextIndex++ - } + let listsIndex: number | null = null if (showFiltersTab) { filtersIndex = nextIndex++ } - let listsIndex: number | null = null - if (showListsTab) { + if (showListsTab && profile.associated?.modservice) { + listsIndex = nextIndex++ + } + if (showPostsTab) { + postsIndex = nextIndex++ + } + if (showRepliesTab) { + repliesIndex = nextIndex++ + } + if (showMediaTab) { + mediaIndex = nextIndex++ + } + if (showLikesTab) { + likesIndex = nextIndex++ + } + if (showFeedsTab) { + feedsIndex = nextIndex++ + } + if (showListsTab && !profile.associated?.modservice) { listsIndex = nextIndex++ } @@ -650,6 +654,29 @@ function ProfileScreenLoadedV2({ onPageSelected={onPageSelected} onCurrentPageSelected={onCurrentPageSelected} renderHeader={renderHeader}> + {showFiltersTab + ? ({headerHeight, isFocused, scrollElRef}) => ( + + ) + : null} + {showListsTab && !!profile.associated?.modservice + ? ({headerHeight, isFocused, scrollElRef}) => ( + + ) + : null} {showPostsTab ? ({headerHeight, isFocused, scrollElRef}) => ( ) : null} - {showFiltersTab - ? ({headerHeight, isFocused, scrollElRef}) => ( - - ) - : null} - {showListsTab + {showListsTab && !profile.associated?.modservice ? ({headerHeight, isFocused, scrollElRef}) => (