Add graphic media self label (#5758)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/components/moderation/ContentHider.tsx

@@ -4,9 +4,12 @@ import {ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {isJustAMute} from '#/lib/moderation'
+import {ADULT_CONTENT_LABELS, isJustAMute} from '#/lib/moderation'
+import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
+import {getDefinition, getLabelStrings} from '#/lib/moderation/useLabelInfo'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {useLabelDefinitions} from '#/state/preferences'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import {
@@ -34,10 +37,68 @@ export function ContentHider({
   const {gtMobile} = useBreakpoints()
   const [override, setOverride] = React.useState(false)
   const control = useModerationDetailsDialogControl()
+  const {labelDefs} = useLabelDefinitions()
+  const globalLabelStrings = useGlobalLabelStrings()
+  const {i18n} = useLingui()
 
   const blur = modui?.blurs[0]
   const desc = useModerationCauseDescription(blur)
 
+  const labelName = React.useMemo(() => {
+    if (!modui?.blurs || !blur) {
+      return undefined
+    }
+    if (
+      blur.type !== 'label' ||
+      (blur.type === 'label' && blur.source.type !== 'user')
+    ) {
+      return desc.name
+    }
+
+    let hasAdultContentLabel = false
+    const selfBlurNames = modui.blurs
+      .filter(cause => {
+        if (cause.type !== 'label') {
+          return false
+        }
+        if (cause.source.type !== 'user') {
+          return false
+        }
+        if (ADULT_CONTENT_LABELS.includes(cause.label.val)) {
+          if (hasAdultContentLabel) {
+            return false
+          }
+          hasAdultContentLabel = true
+        }
+        return true
+      })
+      .slice(0, 2)
+      .map(cause => {
+        if (cause.type !== 'label') {
+          return
+        }
+
+        const def = cause.labelDef || getDefinition(labelDefs, cause.label)
+        if (def.identifier === 'porn' || def.identifier === 'sexual') {
+          return _(msg`Adult Content`)
+        }
+        return getLabelStrings(i18n.locale, globalLabelStrings, def).name
+      })
+
+    if (selfBlurNames.length === 0) {
+      return desc.name
+    }
+    return [...new Set(selfBlurNames)].join(', ')
+  }, [
+    _,
+    modui?.blurs,
+    blur,
+    desc.name,
+    labelDefs,
+    i18n.locale,
+    globalLabelStrings,
+  ])
+
   if (!blur || (ignoreMute && isJustAMute(modui))) {
     return (
       <View testID={testID} style={style}>
@@ -99,8 +160,9 @@ export function ContentHider({
                 web({
                   marginBottom: 1,
                 }),
-              ]}>
-              {desc.name}
+              ]}
+              numberOfLines={2}>
+              {labelName}
             </Text>
             {!modui.noOverride && (
               <Text