diff options
Diffstat (limited to 'src/screens/Moderation')
| -rw-r--r-- | src/screens/Moderation/VerificationSettings.tsx | 96 | ||||
| -rw-r--r-- | src/screens/Moderation/index.tsx | 27 |
2 files changed, 119 insertions, 4 deletions
diff --git a/src/screens/Moderation/VerificationSettings.tsx b/src/screens/Moderation/VerificationSettings.tsx new file mode 100644 index 000000000..f9665d6d9 --- /dev/null +++ b/src/screens/Moderation/VerificationSettings.tsx @@ -0,0 +1,96 @@ +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {urls} from '#/lib/constants' +import {logger} from '#/logger' +import { + usePreferencesQuery, + type UsePreferencesQueryResponse, +} from '#/state/queries/preferences' +import {useSetVerificationPrefsMutation} from '#/state/queries/preferences' +import * as SettingsList from '#/screens/Settings/components/SettingsList' +import {atoms as a, useGutters} from '#/alf' +import {Admonition} from '#/components/Admonition' +import * as Toggle from '#/components/forms/Toggle' +import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck' +import * as Layout from '#/components/Layout' +import {InlineLinkText} from '#/components/Link' +import {Loader} from '#/components/Loader' + +export function Screen() { + const {_} = useLingui() + const gutters = useGutters(['base']) + const {data: preferences} = usePreferencesQuery() + + return ( + <Layout.Screen testID="ModerationVerificationSettingsScreen"> + <Layout.Header.Outer> + <Layout.Header.BackButton /> + <Layout.Header.Content> + <Layout.Header.TitleText> + <Trans>Verification Settings</Trans> + </Layout.Header.TitleText> + </Layout.Header.Content> + <Layout.Header.Slot /> + </Layout.Header.Outer> + <Layout.Content> + <SettingsList.Container> + <SettingsList.Item> + <Admonition type="tip" style={[a.flex_1]}> + <Trans> + Verifications on Bluesky work differently than on other + platforms.{' '} + <InlineLinkText + overridePresentation + to={urls.website.blog.initialVerificationAnnouncement} + label={_(msg`Learn more`)} + onPress={() => { + logger.metric('verification:learn-more', { + location: 'verificationSettings', + }) + }}> + Learn more here. + </InlineLinkText> + </Trans> + </Admonition> + </SettingsList.Item> + {preferences ? ( + <Inner preferences={preferences} /> + ) : ( + <View style={[gutters, a.justify_center, a.align_center]}> + <Loader size="xl" /> + </View> + )} + </SettingsList.Container> + </Layout.Content> + </Layout.Screen> + ) +} + +function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) { + const {_} = useLingui() + const {hideBadges} = preferences.verificationPrefs + const {mutate: setVerificationPrefs, isPending} = + useSetVerificationPrefsMutation() + + return ( + <Toggle.Item + type="checkbox" + name="hideBadges" + label={_(msg`Hide verification badges`)} + value={hideBadges} + disabled={isPending} + onChange={value => { + setVerificationPrefs({hideBadges: value}) + }}> + <SettingsList.Item> + <SettingsList.ItemIcon icon={CircleCheck} /> + <SettingsList.ItemText> + <Trans>Hide verification badges</Trans> + </SettingsList.ItemText> + <Toggle.Platform /> + </SettingsList.Item> + </Toggle.Item> + ) +} diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 55cc67f8c..78b0a6ae9 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -6,19 +6,22 @@ import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' import {getLabelingServiceTitle} from '#/lib/moderation' -import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import { + type CommonNavigatorParams, + type NativeStackScreenProps, +} from '#/lib/routes/types' import {logger} from '#/logger' import {isIOS} from '#/platform/detection' import { useMyLabelersQuery, usePreferencesQuery, - UsePreferencesQueryResponse, + type UsePreferencesQueryResponse, usePreferencesSetAdultContentMutation, } from '#/state/queries/preferences' import {isNonConfigurableModerationAuthority} from '#/state/session/additional-moderation-authorities' import {useSetMinimalShellMode} from '#/state/shell' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf' +import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' @@ -27,7 +30,8 @@ import {Divider} from '#/components/Divider' import * as Toggle from '#/components/forms/Toggle' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' -import {Props as SVGIconProps} from '#/components/icons/common' +import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck' +import {type Props as SVGIconProps} from '#/components/icons/common' import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig' import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' @@ -274,6 +278,21 @@ export function ModerationScreenInner({ /> )} </Link> + <Divider /> + <Link + label={_(msg`Manage verification settings`)} + testID="verificationSettingsBtn" + to="/moderation/verification-settings"> + {state => ( + <SubItem + title={_(msg`Verification settings`)} + icon={CircleCheck} + style={[ + (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], + ]} + /> + )} + </Link> </View> <Text |