Verification (#8226)

* WIP * Alignment with icon * Add create/remove prompts * Fill out check dialog a bit * Reorg * Handle was verified state * Add warning to edit profile * Add warning to handle dialog * Decent alignment in posts on all platforms * Refactor alignment for posts, chatlist, hover card * Disable on profile * Convo header * Compute simple verification state * Add other icon, rename, integrate * Swap in simple state for profile edits * Clean up utility hooks * Add verifications UI to dialog * Add edu nux * Revert change * Fix wrapping of check on profile * Rename * Fix gap under PostMeta * Update check dialogs * Handle takendown verifiers in check dialog * alf composer reply to * Refactor verification state * Add create/remove mutations, non-functional for now * Fix up post-rebase * Add check to first author noty * Do cache updates after mutations * DRY up hook, add to profile updates too * Add to drawer * Update account list * Adapt to new types * Hook up mutations * Use profile shadow in feeds * Add to settings * Shadow currentAccountProfile * Add invalid state to verifications * Fix alignment and overflow in Settings and Drawer * Re-integrate post rebase * Remove debug code * Update copy * Add unverified notification support * Remove link * Make sure dialog closes * Update URL * Add settings screen * Integrate new setting into verification states * Add metrics, bump package, fix bad import * NUX fixes * Update copy * Fixes * Update types * fix search autocomplete * fix lint * add display name warning to new dialog * update default prefs * Add parsing support for notifications * Bump pkg * Tweak noty styles * Adjust check alignment * Tweak check alignment * Fix badge for verifier * Modify copy --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com> Co-authored-by: Paul Frazee <pfrazee@gmail.com>
2025-04-18 21:15:32 -05:00
parent f1e44ee12e
commit 0ac15920a4
63 changed files with 2332 additions and 395 deletions
@@ -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>
+  )
+}