add more toggleable metrics #14

merged
opened by daniela.lol targeting main

adds hiding the followers, following and posts/skeets count, also adds option to hide "followed by" text

renames a very small amount of experiments to be nicer to read n to be consistent

also removes unused code from deer settings

Changed files
+209 -82
src
components
ProfileHoverCard
screens
state
persisted
preferences
+37 -22
src/components/ProfileHoverCard/index.web.tsx
···
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {useProfileShadow} from '#/state/cache/profile-shadow'
+
import {useDisableFollowedByMetrics} from '#/state/preferences/disable-followed-by-metrics'
+
import {useDisableFollowersMetrics} from '#/state/preferences/disable-followers-metrics'
+
import {useDisableFollowingMetrics} from '#/state/preferences/disable-following-metrics'
import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
···
const enableSquareButtons = useEnableSquareButtons()
+
// disable metrics
+
const disableFollowersMetrics = useDisableFollowersMetrics()
+
const disableFollowingMetrics = useDisableFollowingMetrics()
+
const disableFollowedByMetrics = useDisableFollowedByMetrics()
+
return (
<View>
<View style={[a.flex_row, a.justify_between, a.align_start]}>
···
{!isBlockedUser && (
<>
-
<View style={[a.flex_row, a.flex_wrap, a.gap_md, a.pt_xs]}>
-
<InlineLinkText
-
to={makeProfileLink(profile, 'followers')}
-
label={`${followers} ${pluralizedFollowers}`}
-
style={[t.atoms.text]}
-
onPress={hide}>
-
<Text style={[a.text_md, a.font_semi_bold]}>{followers} </Text>
-
<Text style={[t.atoms.text_contrast_medium]}>
-
{pluralizedFollowers}
-
</Text>
-
</InlineLinkText>
-
<InlineLinkText
-
to={makeProfileLink(profile, 'follows')}
-
label={_(msg`${following} following`)}
-
style={[t.atoms.text]}
-
onPress={hide}>
-
<Text style={[a.text_md, a.font_semi_bold]}>{following} </Text>
-
<Text style={[t.atoms.text_contrast_medium]}>
-
{pluralizedFollowings}
-
</Text>
-
</InlineLinkText>
-
</View>
+
{disableFollowersMetrics && disableFollowingMetrics ? ( null ) :
+
<View style={[a.flex_row, a.flex_wrap, a.gap_md, a.pt_xs]}>
+
{!disableFollowersMetrics ? (
+
<InlineLinkText
+
to={makeProfileLink(profile, 'followers')}
+
label={`${followers} ${pluralizedFollowers}`}
+
style={[t.atoms.text]}
+
onPress={hide}>
+
<Text style={[a.text_md, a.font_semi_bold]}>{followers} </Text>
+
<Text style={[t.atoms.text_contrast_medium]}>
+
{pluralizedFollowers}
+
</Text>
+
</InlineLinkText>
+
) : null}
+
{!disableFollowingMetrics ? (
+
<InlineLinkText
+
to={makeProfileLink(profile, 'follows')}
+
label={_(msg`${following} following`)}
+
style={[t.atoms.text]}
+
onPress={hide}>
+
<Text style={[a.text_md, a.font_semi_bold]}>{following} </Text>
+
<Text style={[t.atoms.text_contrast_medium]}>
+
{pluralizedFollowings}
+
</Text>
+
</InlineLinkText>
+
) : null}
+
</View>
+
}
{profile.description?.trim() && !moderation.ui('profileView').blur ? (
<View style={[a.pt_md]}>
···
) : undefined}
{!isMe &&
+
!disableFollowedByMetrics &&
shouldShowKnownFollowers(profile.viewer?.knownFollowers) && (
<View style={[a.flex_row, a.align_center, a.gap_sm, a.pt_md]}>
<KnownFollowers
+48 -30
src/screens/Profile/Header/Metrics.tsx
···
import {makeProfileLink} from '#/lib/routes/links'
import {type Shadow} from '#/state/cache/types'
+
import {useDisableFollowersMetrics} from '#/state/preferences/disable-followers-metrics'
+
import {useDisableFollowingMetrics} from '#/state/preferences/disable-following-metrics'
+
import {useDisablePostsMetrics} from '#/state/preferences/disable-posts-metrics'
import {formatCount} from '#/view/com/util/numeric/format'
import {atoms as a, useTheme} from '#/alf'
import {InlineLinkText} from '#/components/Link'
···
other: 'following',
})
+
// disable metrics
+
const disableFollowersMetrics = useDisableFollowersMetrics()
+
const disableFollowingMetrics = useDisableFollowingMetrics()
+
const disablePostsMetrics = useDisablePostsMetrics()
+
return (
-
<View
-
style={[a.flex_row, a.gap_sm, a.align_center]}
-
pointerEvents="box-none">
-
<InlineLinkText
-
testID="profileHeaderFollowersButton"
-
style={[a.flex_row, t.atoms.text]}
-
to={makeProfileLink(profile, 'followers')}
-
label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
-
<Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
-
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
-
{pluralizedFollowers}
-
</Text>
-
</InlineLinkText>
-
<InlineLinkText
-
testID="profileHeaderFollowsButton"
-
style={[a.flex_row, t.atoms.text]}
-
to={makeProfileLink(profile, 'follows')}
-
label={_(msg`${profile.followsCount || 0} following`)}>
-
<Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
-
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
-
{pluralizedFollowings}
-
</Text>
-
</InlineLinkText>
-
<Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
-
{formatCount(i18n, profile.postsCount || 0)}{' '}
-
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
-
{plural(profile.postsCount || 0, {one: 'skeet', other: 'skeets'})}
-
</Text>
-
</Text>
-
</View>
+
<>
+
{disableFollowersMetrics && disableFollowingMetrics && disablePostsMetrics ? ( null ) :
+
<View
+
style={[a.flex_row, a.gap_sm, a.align_center]}
+
pointerEvents="box-none">
+
{!disableFollowersMetrics ? (
+
<InlineLinkText
+
testID="profileHeaderFollowersButton"
+
style={[a.flex_row, t.atoms.text]}
+
to={makeProfileLink(profile, 'followers')}
+
label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
+
<Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
+
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
+
{pluralizedFollowers}
+
</Text>
+
</InlineLinkText>
+
) : null}
+
{!disableFollowingMetrics ? (
+
<InlineLinkText
+
testID="profileHeaderFollowsButton"
+
style={[a.flex_row, t.atoms.text]}
+
to={makeProfileLink(profile, 'follows')}
+
label={_(msg`${profile.followsCount || 0} following`)}>
+
<Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
+
<Text style={[t.atoms.text_contrast_medium, a.text_md]}>
+
{pluralizedFollowings}
+
</Text>
+
</InlineLinkText>
+
) : null}
+
{!disablePostsMetrics ? (
+
<Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
+
{formatCount(i18n, profile.postsCount || 0)}{' '}
+
<Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
+
{plural(profile.postsCount || 0, {one: 'skeet', other: 'skeets'})}
+
</Text>
+
</Text>
+
) : null}
+
</View>
+
}
+
</>
)
}
+5
src/screens/Profile/Header/ProfileHeaderStandard.tsx
···
import {logger} from '#/logger'
import {isIOS} from '#/platform/detection'
import {type Shadow, useProfileShadow} from '#/state/cache/profile-shadow'
+
import {useDisableFollowedByMetrics} from '#/state/preferences/disable-followed-by-metrics'
import {
useProfileBlockMutationQueue,
useProfileFollowMutationQueue,
···
const {isActive: live} = useActorStatus(profile)
+
// disable metrics
+
const disableFollowedByMetrics = useDisableFollowedByMetrics()
+
return (
<>
<ProfileHeaderShell
···
) : undefined}
{!isMe &&
+
!disableFollowedByMetrics &&
!isBlockedUser &&
shouldShowKnownFollowers(profile.viewer?.knownFollowers) && (
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
+92 -23
src/screens/Settings/DeerSettings.tsx
···
import {isWeb} from '#/platform/detection'
import * as persisted from '#/state/persisted'
import {useGoLinksEnabled, useSetGoLinksEnabled} from '#/state/preferences'
-
import {
-
useConstellationEnabled,
-
useSetConstellationEnabled,
-
} from '#/state/preferences/constellation-enabled'
import {
useConstellationInstance,
useSetConstellationInstance,
···
useDirectFetchRecords,
useSetDirectFetchRecords,
} from '#/state/preferences/direct-fetch-records'
+
import {
+
useDisableFollowersMetrics,
+
useSetDisableFollowersMetrics
+
} from '#/state/preferences/disable-followers-metrics'
+
import {
+
useDisableFollowingMetrics,
+
useSetDisableFollowingMetrics
+
} from '#/state/preferences/disable-following-metrics'
+
import {
+
useDisableFollowedByMetrics,
+
useSetDisableFollowedByMetrics
+
} from '#/state/preferences/disable-followed-by-metrics'
import {
useDisableLikesMetrics,
useSetDisableLikesMetrics,
···
useDisableReplyMetrics,
useSetDisableReplyMetrics,
} from '#/state/preferences/disable-reply-metrics'
+
import {
+
useDisablePostsMetrics,
+
useSetDisablePostsMetrics,
+
} from '#/state/preferences/disable-posts-metrics'
import {
useDisableRepostsMetrics,
useSetDisableRepostsMetrics,
···
useEnableSquareButtons,
useSetEnableSquareButtons,
} from '#/state/preferences/enable-square-buttons'
+
import {
+
useSetShowExternalShareButtons,
+
useShowExternalShareButtons,
+
} from '#/state/preferences/external-share-buttons'
import {
useHideFeedsPromoTab,
useSetHideFeedsPromoTab,
···
useShowLinkInHandle,
} from '#/state/preferences/show-link-in-handle.tsx'
import {useProfilesQuery} from '#/state/queries/profile'
-
import {
-
useSetShowExternalShareButtons,
-
useShowExternalShareButtons,
-
} from '#/state/preferences/external-share-buttons'
import * as SettingsList from '#/screens/Settings/components/SettingsList'
import {atoms as a, useBreakpoints} from '#/alf'
import {Admonition} from '#/components/Admonition'
···
const goLinksEnabled = useGoLinksEnabled()
const setGoLinksEnabled = useSetGoLinksEnabled()
-
const constellationEnabled = useConstellationEnabled()
-
const setConstellationEnabled = useSetConstellationEnabled()
-
const directFetchRecords = useDirectFetchRecords()
const setDirectFetchRecords = useSetDirectFetchRecords()
···
const disableReplyMetrics = useDisableReplyMetrics()
const setDisableReplyMetrics = useSetDisableReplyMetrics()
+
const disableFollowersMetrics = useDisableFollowersMetrics()
+
const setDisableFollowersMetrics = useSetDisableFollowersMetrics()
+
+
const disableFollowingMetrics = useDisableFollowingMetrics()
+
const setDisableFollowingMetrics = useSetDisableFollowingMetrics()
+
+
const disableFollowedByMetrics = useDisableFollowedByMetrics()
+
const setDisableFollowedByMetrics = useSetDisableFollowedByMetrics()
+
+
const disablePostsMetrics = useDisablePostsMetrics()
+
const setDisablePostsMetrics = useSetDisablePostsMetrics()
+
const hideSimilarAccountsRecomm = useHideSimilarAccountsRecomm()
const setHideSimilarAccountsRecomm = useSetHideSimilarAccountsRecomm()
···
<Toggle.Item
name="disable_via_repost_notification"
-
label={_(msg`Disable via reskeet notifications`)}
+
label={_(msg`Disable "via reskeet" notifications`)}
value={disableViaRepostNotification}
onChange={value => setDisableViaRepostNotification(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
-
<Trans>Disable via reskeet notifications</Trans>
+
<Trans>Disable "via reskeet" notifications</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
···
<Toggle.Item
name="disable_likes_metrics"
-
label={_(msg`Disable Likes Metrics`)}
+
label={_(msg`Disable likes metrics`)}
value={disableLikesMetrics}
onChange={value => setDisableLikesMetrics(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
-
<Trans>Disable Likes Metrics</Trans>
+
<Trans>Disable likes metrics</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
<Toggle.Item
name="disable_reposts_metrics"
-
label={_(msg`Disable Reskeets Metrics`)}
+
label={_(msg`Disable reskeets metrics`)}
value={disableRepostsMetrics}
onChange={value => setDisableRepostsMetrics(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
-
<Trans>Disable Reskeets Metrics</Trans>
+
<Trans>Disable reskeets metrics</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
<Toggle.Item
name="disable_quotes_metrics"
-
label={_(msg`Disable Quotes Metrics`)}
+
label={_(msg`Disable quotes metrics`)}
value={disableQuotesMetrics}
onChange={value => setDisableQuotesMetrics(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
-
<Trans>Disable Quotes Metrics</Trans>
+
<Trans>Disable quotes metrics</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
<Toggle.Item
name="disable_saves_metrics"
-
label={_(msg`Disable Saves Metrics`)}
+
label={_(msg`Disable saves metrics`)}
value={disableSavesMetrics}
onChange={value => setDisableSavesMetrics(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
-
<Trans>Disable Saves Metrics</Trans>
+
<Trans>Disable saves metrics</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
<Toggle.Item
name="disable_reply_metrics"
-
label={_(msg`Disable Reply Metrics`)}
+
label={_(msg`Disable reply metrics`)}
value={disableReplyMetrics}
onChange={value => setDisableReplyMetrics(value)}
style={[a.w_full]}>
<Toggle.LabelText style={[a.flex_1]}>
-
<Trans>Disable Reply Metrics</Trans>
+
<Trans>Disable reply metrics</Trans>
+
</Toggle.LabelText>
+
<Toggle.Platform />
+
</Toggle.Item>
+
+
<Toggle.Item
+
name="disable_followers_metrics"
+
label={_(msg`Disable followers metrics`)}
+
value={disableFollowersMetrics}
+
onChange={value => setDisableFollowersMetrics(value)}
+
style={[a.w_full]}>
+
<Toggle.LabelText style={[a.flex_1]}>
+
<Trans>Disable followers metrics</Trans>
+
</Toggle.LabelText>
+
<Toggle.Platform />
+
</Toggle.Item>
+
+
<Toggle.Item
+
name="disable_following_metrics"
+
label={_(msg`Disable following metrics`)}
+
value={disableFollowingMetrics}
+
onChange={value => setDisableFollowingMetrics(value)}
+
style={[a.w_full]}>
+
<Toggle.LabelText style={[a.flex_1]}>
+
<Trans>Disable following metrics</Trans>
+
</Toggle.LabelText>
+
<Toggle.Platform />
+
</Toggle.Item>
+
+
<Toggle.Item
+
name="disable_followed_by_metrics"
+
label={_(msg`Disable "followed by" metrics`)}
+
value={disableFollowedByMetrics}
+
onChange={value => setDisableFollowedByMetrics(value)}
+
style={[a.w_full]}>
+
<Toggle.LabelText style={[a.flex_1]}>
+
<Trans>Disable "followed by" metrics</Trans>
+
</Toggle.LabelText>
+
<Toggle.Platform />
+
</Toggle.Item>
+
+
<Toggle.Item
+
name="disable_posts_metrics"
+
label={_(msg`Disable skeets metrics`)}
+
value={disablePostsMetrics}
+
onChange={value => setDisablePostsMetrics(value)}
+
style={[a.w_full]}>
+
<Toggle.LabelText style={[a.flex_1]}>
+
<Trans>Disable skeets metrics</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
+8
src/state/persisted/schema.ts
···
disableQuotesMetrics: z.boolean().optional(),
disableSavesMetrics: z.boolean().optional(),
disableReplyMetrics: z.boolean().optional(),
+
disableFollowersMetrics: z.boolean().optional(),
+
disableFollowingMetrics: z.boolean().optional(),
+
disableFollowedByMetrics: z.boolean().optional(),
+
disablePostsMetrics: z.boolean().optional(),
hideSimilarAccountsRecomm: z.boolean().optional(),
enableSquareAvatars: z.boolean().optional(),
enableSquareButtons: z.boolean().optional(),
···
disableQuotesMetrics: false,
disableSavesMetrics: false,
disableReplyMetrics: false,
+
disableFollowersMetrics: false,
+
disableFollowingMetrics: false,
+
disableFollowedByMetrics: false,
+
disablePostsMetrics: false,
hideSimilarAccountsRecomm: true,
enableSquareAvatars: false,
enableSquareButtons: false,
+19 -7
src/state/preferences/index.tsx
···
import {Provider as ConstellationInstanceProvider} from './constellation-instance'
import {Provider as DeerVerificationProvider} from './deer-verification'
import {Provider as DirectFetchRecordsProvider} from './direct-fetch-records'
+
import {Provider as DisableFollowedByMetricsProvider} from './disable-followed-by-metrics'
+
import {Provider as DisableFollowersMetricsProvider} from './disable-followers-metrics'
+
import {Provider as DisableFollowingMetricsProvider} from './disable-following-metrics'
import {Provider as DisableHapticsProvider} from './disable-haptics'
import {Provider as DisableLikesMetricsProvider} from './disable-likes-metrics'
+
import {Provider as DisablePostsMetricsProvider} from './disable-posts-metrics'
import {Provider as DisableQuotesMetricsProvider} from './disable-quotes-metrics'
import {Provider as DisableReplyMetricsProvider} from './disable-reply-metrics'
import {Provider as DisableRepostsMetricsProvider} from './disable-reposts-metrics'
···
<DisableQuotesMetricsProvider>
<DisableSavesMetricsProvider>
<DisableReplyMetricsProvider>
-
<HideSimilarAccountsRecommProvider>
-
<EnableSquareAvatarsProvider>
-
<EnableSquareButtonsProvider>
-
{children}
-
</EnableSquareButtonsProvider>
-
</EnableSquareAvatarsProvider>
-
</HideSimilarAccountsRecommProvider>
+
<DisableFollowersMetricsProvider>
+
<DisableFollowingMetricsProvider>
+
<DisableFollowedByMetricsProvider>
+
<DisablePostsMetricsProvider>
+
<HideSimilarAccountsRecommProvider>
+
<EnableSquareAvatarsProvider>
+
<EnableSquareButtonsProvider>
+
{children}
+
</EnableSquareButtonsProvider>
+
</EnableSquareAvatarsProvider>
+
</HideSimilarAccountsRecommProvider>
+
</DisablePostsMetricsProvider>
+
</DisableFollowedByMetricsProvider>
+
</DisableFollowingMetricsProvider>
+
</DisableFollowersMetricsProvider>
</DisableReplyMetricsProvider>
</DisableSavesMetricsProvider>
</DisableQuotesMetricsProvider>