APP-2774: Add algorithmic visibility setting (#11417)

src/screens/Settings/PrivacyAndSecuritySettings.tsx

@@ -13,10 +13,13 @@ import * as Admonition from '#/components/Admonition'
 import {BellRinging_Stroke2_Corner0_Rounded as BellRingingIcon} from '#/components/icons/BellRinging'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlashIcon} from '#/components/icons/EyeSlash'
 import {Key_Stroke2_Corner2_Rounded as KeyIcon} from '#/components/icons/Key'
+import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass'
 import {ShieldCheck_Stroke2_Corner0_Rounded as ShieldIcon} from '#/components/icons/Shield'
 import * as Layout from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
+import {useAnalytics} from '#/analytics'
 import {type app} from '#/lexicons'
+import {AlgoVisibilityOptOut} from './components/AlgoVisibilityOptOut'
 import {Email2FAToggle} from './components/Email2FAToggle'
 import {PwiOptOut} from './components/PwiOptOut'
 import {ItemTextWithSubtitle} from './NotificationSettings/components/ItemTextWithSubtitle'
@@ -28,6 +31,10 @@ type Props = NativeStackScreenProps<
 export function PrivacyAndSecuritySettingsScreen({}: Props) {
   const {_} = useLingui()
   const t = useTheme()
+  const ax = useAnalytics()
+  const isContentVisibilityEnabled = ax.features.enabled(
+    ax.features.ContentVisibilitySettingsEnable,
+  )
   const {data: appPasswords} = useAppPasswordsQuery()
   const {currentAccount} = useSession()
   const {
@@ -101,13 +108,16 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
             />
           </SettingsList.LinkItem>
           <SettingsList.Divider />
-          <SettingsList.Group>
+          {isContentVisibilityEnabled && (
+            <SettingsList.Item style={[a.align_start]}>
+              <SettingsList.ItemIcon icon={MagnifyingGlassIcon} />
+              <AlgoVisibilityOptOut />
+            </SettingsList.Item>
+          )}
+          <SettingsList.Item style={[a.align_start]}>
             <SettingsList.ItemIcon icon={EyeSlashIcon} />
-            <SettingsList.ItemText>
-              <Trans>Logged-out visibility</Trans>
-            </SettingsList.ItemText>
             <PwiOptOut />
-          </SettingsList.Group>
+          </SettingsList.Item>
           <SettingsList.Item>
             <Admonition.Outer type="tip" style={[a.flex_1]}>
               <Admonition.Row>
@@ -115,11 +125,10 @@ export function PrivacyAndSecuritySettingsScreen({}: Props) {
                 <Admonition.Content>
                   <Admonition.Text>
                     <Trans>
-                      Note: Bluesky is an open and public network. This setting
-                      only limits the visibility of your content on the Bluesky
-                      app and website, and other apps may not respect this
-                      setting. Your content may still be shown to logged-out
-                      users by other apps and websites.
+                      Note: Bluesky is part of the Atmosphere, an open public
+                      network. These settings ask other apps and websites to
+                      limit your visibility, but they can choose not to. Your
+                      public content may still appear elsewhere.
                     </Trans>
                   </Admonition.Text>
                   <Admonition.Text>

src/screens/Settings/components/AlgoVisibilityOptOut.tsx

@@ -0,0 +1,51 @@
+import {View} from 'react-native'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {
+  useContentVisibilityMutation,
+  useContentVisibilityQuery,
+} from '#/state/queries/content-visibility'
+import {atoms as a, useTheme} from '#/alf'
+import * as Toggle from '#/components/forms/Toggle'
+import {Text} from '#/components/Typography'
+
+export function AlgoVisibilityOptOut() {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const {data, isPending: isQueryPending} = useContentVisibilityQuery()
+  const updateContentVisibility = useContentVisibilityMutation()
+
+  const isOptedOut = data?.hideFromAlgorithmicRecommendations ?? false
+  const canToggle = !isQueryPending && !updateContentVisibility.isPending
+
+  const onToggleOptOut = (hide: boolean) => {
+    updateContentVisibility.mutate(hide)
+  }
+
+  return (
+    <View style={[a.flex_1, a.gap_sm]}>
+      <Toggle.Item
+        name="algorithmic_visibility"
+        disabled={!canToggle}
+        value={isOptedOut}
+        onChange={onToggleOptOut}
+        label={l`Ask apps to hide my posts from algorithmic recommendations`}
+        style={[a.w_full]}>
+        <Toggle.LabelText style={[a.flex_1]}>
+          <Trans>
+            Ask apps to hide my posts from algorithmic recommendations
+          </Trans>
+        </Toggle.LabelText>
+        <Toggle.Platform />
+      </Toggle.Item>
+
+      <Text style={[a.leading_snug, t.atoms.text_contrast_high]}>
+        <Trans>
+          Bluesky will not show your posts in the Discover feed (except to your
+          followers) and will ask other apps not to show your posts in their own
+          algorithmic recommendations.
+        </Trans>
+      </Text>
+    </View>
+  )
+}

src/screens/Settings/components/PwiOptOut.tsx

@@ -86,12 +86,12 @@ export function PwiOptOut() {
         value={isOptedOut}
         onChange={onToggleOptOut}
         label={_(
-          msg`Discourage apps from showing my account to logged-out users`,
+          msg`Ask apps and sites not to show my account to logged-out users`,
         )}
         style={[a.w_full]}>
         <Toggle.LabelText style={[a.flex_1]}>
           <Trans>
-            Discourage apps from showing my account to logged-out users
+            Ask apps and sites not to show my account to logged-out users
           </Trans>
         </Toggle.LabelText>
         <Toggle.Platform />
@@ -99,9 +99,9 @@ export function PwiOptOut() {
 
       <Text style={[a.leading_snug, t.atoms.text_contrast_high]}>
         <Trans>
-          Bluesky will not show your profile and posts to logged-out users.
-          Other apps may not honor this request. This does not make your account
-          private.
+          Bluesky will not show your account to logged-out users and will ask
+          other apps to do the same. Other apps may not honor this request. It
+          doesn't make your account private.
         </Trans>
       </Text>
     </View>