Add repost-only mutes (#11223)

Co-authored-by: DS Boyce <260543580+ds-boyce@users.noreply.github.com>

src/components/Pills.tsx

@@ -1,12 +1,13 @@
 import {useMemo} from 'react'
 import {View} from 'react-native'
 import {BSKY_LABELER_DID, type ModerationCause} from '@atproto/api'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Button} from '#/components/Button'
+import {RepostStrike_Stroke2_Corner0_Rounded as RepostStrikeIcon} from '#/components/icons/Repost'
 import {
   ModerationDetailsDialog,
   useModerationDetailsDialogControl,
@@ -215,3 +216,25 @@ export function FollowsYou({size = 'sm'}: CommonProps) {
     </View>
   )
 }
+
+export function MutedOnlyReposts(props: CommonProps) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+
+  const size = props.size === 'lg' ? 16 : 12
+
+  return (
+    <LabelBase
+      {...props}
+      label={l`Reposts Hidden`}
+      icon={
+        <RepostStrikeIcon
+          width={size}
+          fill={t.atoms.text_contrast_medium.color}
+        />
+      }
+      disabled={true}
+      onPress={() => {}}
+    />
+  )
+}

src/components/ProfileCard.tsx

@@ -623,8 +623,9 @@ export function Labels({
   const moderation = moderateProfile(profile, moderationOpts)
   const modui = moderation.ui('profileList')
   const followedBy = profile.viewer?.followedBy
+  const mutedOnlyReposts = profile.viewer?.mutedOnlyReposts
 
-  if (!followedBy && !modui.inform && !modui.alert) {
+  if (!followedBy && !mutedOnlyReposts && !modui.inform && !modui.alert) {
     return null
   }
 
@@ -637,6 +638,7 @@ export function Labels({
       {modui.informs.map(inform => (
         <Pills.Label key={getModerationCauseKey(inform)} cause={inform} />
       ))}
+      {mutedOnlyReposts && <Pills.MutedOnlyReposts />}
     </Pills.Row>
   )
 }

src/components/icons/Repost.tsx

@@ -15,3 +15,7 @@ export const Repost_Stroke2_Corner3_Rounded = createSinglePathSVG({
 export const RepostRepost_Stroke2_Corner2_Rounded = createSinglePathSVG({
   path: 'M6.043 14.293a1 1 0 1 1 1.414 1.414L5.164 18l2.293 2.293.068.076a1 1 0 0 1-1.406 1.406l-.076-.068-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47Zm6.22 0a1 1 0 0 1 1.414 1.414L12.384 17H18a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3h-5.616l1.293 1.293.068.076a1 1 0 0 1-1.406 1.406l-.076-.068-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47ZM3 11V8a3 3 0 0 1 3-3h5.586l-1.293-1.293-.068-.076a1 1 0 0 1 1.406-1.406l.076.068 2.47 2.47.12.133a1.75 1.75 0 0 1 0 2.209l-.12.132-2.47 2.47a1 1 0 1 1-1.414-1.414L11.586 7H6a1 1 0 0 0-1 1v3a1 1 0 1 1-2 0Zm13.543-8.707a1 1 0 0 1 1.338-.068l.076.068 2.47 2.47.12.133a1.75 1.75 0 0 1 0 2.209l-.12.132-2.47 2.47a1 1 0 1 1-1.414-1.414L18.836 6l-2.293-2.293-.068-.076a1 1 0 0 1 .068-1.338Z',
 })
+
+export const RepostStrike_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M2.293 2.293a1 1 0 0 1 1.414 0l18 18a1 1 0 0 1-1.414 1.414L17.586 19H6.414l1.293 1.293a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 1 1 1.414 1.414L6.414 17h9.172L5.909 7.323A2 2 0 0 0 5 9v2a1 1 0 0 1-2 0V9c0-1.255.579-2.372 1.482-3.104L2.293 3.707a1 1 0 0 1 0-1.414M20 12a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H11a1 1 0 0 1 0-2h6.586l-1.293-1.293a1 1 0 0 1 0-1.414',
+})

src/components/moderation/ProfileHeaderAlerts.tsx

@@ -3,16 +3,21 @@ import {type ModerationDecision} from '@atproto/api'
 
 import {getModerationCauseKey, unique} from '#/lib/moderation'
 import * as Pills from '#/components/Pills'
+import type * as bsky from '#/types/bsky'
 
 export function ProfileHeaderAlerts({
   moderation,
+  profile,
   style,
 }: {
   moderation: ModerationDecision
+  profile: bsky.profile.AnyProfileView
   style?: StyleProp<ViewStyle>
 }) {
   const modui = moderation.ui('profileView')
-  if (!modui.alert && !modui.inform) {
+  const mutedOnlyReposts = profile.viewer?.mutedOnlyReposts
+
+  if (!mutedOnlyReposts && !modui.alert && !modui.inform) {
     return null
   }
 
@@ -32,6 +37,7 @@ export function ProfileHeaderAlerts({
           cause={cause}
         />
       ))}
+      {mutedOnlyReposts && <Pills.MutedOnlyReposts size="lg" />}
     </Pills.Row>
   )
 }