Clean up and reorganize localized moderation strings

src/view/com/modals/ModerationDetails.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {ModerationUI, LABELS} from '@atproto/api'
+import {ModerationUI} from '@atproto/api'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {s} from 'lib/styles'
 import {Text} from '../util/text/Text'
@@ -12,7 +12,7 @@ import {Button} from '../util/forms/Button'
 import {useModalControls} from '#/state/modals'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
-import {useLabelStrings} from '#/lib/moderation'
+import {useLabelStrings} from '#/lib/moderation/useLabelStrings'
 
 export const snapPoints = [300]
 
@@ -88,16 +88,19 @@ export function Component({
       name = _(msg`Account Muted`)
       description = _(msg`You have muted this user.`)
     }
-  } else if (moderation.cause.labelDef.id in labelStrings) {
-    name =
-      labelStrings[moderation.cause.labelDef.id as keyof typeof LABELS][context]
-        .name
-    description =
-      labelStrings[moderation.cause.labelDef.id as keyof typeof LABELS][context]
-        .description
+  } else if (moderation.cause.type === 'label') {
+    if (moderation.cause.labelDef.id in labelStrings) {
+      name = labelStrings[moderation.cause.labelDef.id][context].name
+      description =
+        labelStrings[moderation.cause.labelDef.id][context].description
+    } else {
+      name = moderation.cause.labelDef.id
+      description = _(msg`Labeled ${moderation.cause.labelDef.id}`)
+    }
   } else {
-    name = 'TODO'
-    description = 'TODO'
+    // should never happen
+    name = ''
+    description = ''
   }
 
   return (

src/view/com/profile/ProfileCard.tsx

@@ -3,6 +3,7 @@ import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {
   AppBskyActorDefs,
   moderateProfile,
+  ModerationCause,
   ProfileModeration,
 } from '@atproto/api'
 import {Link} from '../util/Link'
@@ -14,17 +15,13 @@ import {FollowButton} from './FollowButton'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {makeProfileLink} from 'lib/routes/links'
-import {
-  describeModerationCause,
-  getProfileModerationCauses,
-  getModerationCauseKey,
-  useLabelStrings,
-} from 'lib/moderation'
+import {getProfileModerationCauses, getModerationCauseKey} from 'lib/moderation'
 import {Shadow} from '#/state/cache/types'
 import {useModerationOpts} from '#/state/queries/preferences'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useSession} from '#/state/session'
 import {Trans} from '@lingui/macro'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
 export function ProfileCard({
   testID,
@@ -128,7 +125,6 @@ export function ProfileCardPills({
   moderation: ProfileModeration
 }) {
   const pal = usePalette('default')
-  const labelStrings = useLabelStrings()
 
   const causes = getProfileModerationCauses(moderation)
   if (!followedBy && !causes.length) {
@@ -144,19 +140,27 @@ export function ProfileCardPills({
           </Text>
         </View>
       )}
-      {causes.map(cause => {
-        const desc = describeModerationCause(cause, 'account', labelStrings)
-        return (
-          <View
-            style={[s.mt5, pal.btn, styles.pill]}
-            key={getModerationCauseKey(cause)}>
-            <Text type="xs" style={pal.text}>
-              {cause?.type === 'label' ? '⚠' : ''}
-              {desc.name}
-            </Text>
-          </View>
-        )
-      })}
+      {causes.map(cause => (
+        <ProfileCardPillModerationCause
+          key={getModerationCauseKey(cause)}
+          cause={cause}
+        />
+      ))}
+    </View>
+  )
+}
+
+function ProfileCardPillModerationCause({cause}: {cause: ModerationCause}) {
+  const pal = usePalette('default')
+  const {name} = useModerationCauseDescription(cause, 'account')
+  return (
+    <View
+      style={[s.mt5, pal.btn, styles.pill]}
+      key={getModerationCauseKey(cause)}>
+      <Text type="xs" style={pal.text}>
+        {cause?.type === 'label' ? '⚠' : ''}
+        {name}
+      </Text>
     </View>
   )
 }

src/view/com/util/moderation/ContentHider.tsx

@@ -5,10 +5,10 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {ModerationUI, PostModeration} from '@atproto/api'
 import {Text} from '../text/Text'
 import {ShieldExclamation} from 'lib/icons'
-import {describeModerationCause, useLabelStrings} from 'lib/moderation'
 import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
 import {useModalControls} from '#/state/modals'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {isPostMediaBlurred} from 'lib/moderation'
 
 export function ContentHider({
@@ -33,7 +33,7 @@ export function ContentHider({
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
   const {openModal} = useModalControls()
-  const labelStrings = useLabelStrings()
+  const desc = useModerationCauseDescription(moderation.cause, 'content')
 
   if (
     !moderation.blur ||
@@ -48,11 +48,6 @@ export function ContentHider({
   }
 
   const isMute = moderation.cause?.type === 'muted'
-  const desc = describeModerationCause(
-    moderation.cause,
-    'content',
-    labelStrings,
-  )
   return (
     <View testID={testID} style={[styles.outer, style]}>
       <Pressable

src/view/com/util/moderation/PostAlerts.tsx

@@ -4,10 +4,10 @@ import {ModerationUI} from '@atproto/api'
 import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ShieldExclamation} from 'lib/icons'
-import {describeModerationCause, useLabelStrings} from 'lib/moderation'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
 export function PostAlerts({
   moderation,
@@ -20,18 +20,13 @@ export function PostAlerts({
   const pal = usePalette('default')
   const {_} = useLingui()
   const {openModal} = useModalControls()
-  const labelStrings = useLabelStrings()
+  const desc = useModerationCauseDescription(moderation.cause, 'content')
 
   const shouldAlert = !!moderation.cause && moderation.alert
   if (!shouldAlert) {
     return null
   }
 
-  const desc = describeModerationCause(
-    moderation.cause,
-    'content',
-    labelStrings,
-  )
   return (
     <Pressable
       onPress={() => {

src/view/com/util/moderation/PostHider.tsx

@@ -6,11 +6,11 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {Link} from '../Link'
 import {Text} from '../text/Text'
 import {addStyle} from 'lib/styles'
-import {describeModerationCause, useLabelStrings} from 'lib/moderation'
 import {ShieldExclamation} from 'lib/icons'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
 import {useModalControls} from '#/state/modals'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
 interface Props extends ComponentProps<typeof Link> {
   iconSize: number
@@ -32,7 +32,7 @@ export function PostHider({
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
   const {openModal} = useModalControls()
-  const labelStrings = useLabelStrings()
+  const desc = useModerationCauseDescription(moderation.cause, 'content')
 
   if (!moderation.blur) {
     return (
@@ -49,11 +49,6 @@ export function PostHider({
   }
 
   const isMute = moderation.cause?.type === 'muted'
-  const desc = describeModerationCause(
-    moderation.cause,
-    'content',
-    labelStrings,
-  )
   return !override ? (
     <Pressable
       onPress={() => {

src/view/com/util/moderation/ProfileHeaderAlerts.tsx

@@ -1,18 +1,15 @@
 import React from 'react'
 import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {ProfileModeration} from '@atproto/api'
+import {ModerationCause, ProfileModeration} from '@atproto/api'
 import {Text} from '../text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {ShieldExclamation} from 'lib/icons'
-import {
-  describeModerationCause,
-  getProfileModerationCauses,
-  useLabelStrings,
-} from 'lib/moderation'
+import {getModerationCauseKey, getProfileModerationCauses} from 'lib/moderation'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useModalControls} from '#/state/modals'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 
 export function ProfileHeaderAlerts({
   moderation,
@@ -21,11 +18,6 @@ export function ProfileHeaderAlerts({
   moderation: ProfileModeration
   style?: StyleProp<ViewStyle>
 }) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {openModal} = useModalControls()
-  const labelStrings = useLabelStrings()
-
   const causes = getProfileModerationCauses(moderation)
   if (!causes.length) {
     return null
@@ -33,46 +25,64 @@ export function ProfileHeaderAlerts({
 
   return (
     <View style={styles.grid}>
-      {causes.map(cause => {
-        const isMute = cause.type === 'muted'
-        const desc = describeModerationCause(cause, 'account', labelStrings)
-        return (
-          <Pressable
-            testID="profileHeaderAlert"
-            key={desc.name}
-            onPress={() => {
-              openModal({
-                name: 'moderation-details',
-                context: 'content',
-                moderation: {cause},
-              })
-            }}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Learn more about this warning`)}
-            accessibilityHint=""
-            style={[styles.container, pal.viewLight, style]}>
-            {isMute ? (
-              <FontAwesomeIcon
-                icon={['far', 'eye-slash']}
-                size={14}
-                color={pal.colors.textLight}
-              />
-            ) : (
-              <ShieldExclamation style={pal.text} size={18} />
-            )}
-            <Text type="sm" style={[{flex: 1}, pal.text]}>
-              {desc.name}
-            </Text>
-            <Text type="sm" style={[pal.link, styles.learnMoreBtn]}>
-              <Trans>Learn More</Trans>
-            </Text>
-          </Pressable>
-        )
-      })}
+      {causes.map(cause => (
+        <ProfileHeaderAlert
+          key={getModerationCauseKey(cause)}
+          cause={cause}
+          style={style}
+        />
+      ))}
     </View>
   )
 }
 
+function ProfileHeaderAlert({
+  cause,
+  style,
+}: {
+  cause: ModerationCause
+  style?: StyleProp<ViewStyle>
+}) {
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const {openModal} = useModalControls()
+  const desc = useModerationCauseDescription(cause, 'account')
+
+  const isMute = cause.type === 'muted'
+  return (
+    <Pressable
+      testID="profileHeaderAlert"
+      key={desc.name}
+      onPress={() => {
+        openModal({
+          name: 'moderation-details',
+          context: 'content',
+          moderation: {cause},
+        })
+      }}
+      accessibilityRole="button"
+      accessibilityLabel={_(msg`Learn more about this warning`)}
+      accessibilityHint=""
+      style={[styles.container, pal.viewLight, style]}>
+      {isMute ? (
+        <FontAwesomeIcon
+          icon={['far', 'eye-slash']}
+          size={14}
+          color={pal.colors.textLight}
+        />
+      ) : (
+        <ShieldExclamation style={pal.text} size={18} />
+      )}
+      <Text type="sm" style={[{flex: 1}, pal.text]}>
+        {desc.name}
+      </Text>
+      <Text type="sm" style={[pal.link, styles.learnMoreBtn]}>
+        <Trans>Learn More</Trans>
+      </Text>
+    </Pressable>
+  )
+}
+
 const styles = StyleSheet.create({
   grid: {
     gap: 4,

src/view/com/util/moderation/ScreenHider.tsx

@@ -17,10 +17,10 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {NavigationProp} from 'lib/routes/types'
 import {Text} from '../text/Text'
 import {Button} from '../forms/Button'
-import {describeModerationCause, useLabelStrings} from 'lib/moderation'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useModalControls} from '#/state/modals'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {s} from '#/lib/styles'
 import {CenteredView} from '../Views'
 
@@ -45,7 +45,7 @@ export function ScreenHider({
   const navigation = useNavigation<NavigationProp>()
   const {isMobile} = useWebMediaQueries()
   const {openModal} = useModalControls()
-  const labelStrings = useLabelStrings()
+  const desc = useModerationCauseDescription(moderation.cause, 'account')
 
   if (!moderation.blur || override) {
     return (
@@ -58,11 +58,6 @@ export function ScreenHider({
   const isNoPwi =
     moderation.cause?.type === 'label' &&
     moderation.cause?.labelDef.id === '!no-unauthenticated'
-  const desc = describeModerationCause(
-    moderation.cause,
-    'account',
-    labelStrings,
-  )
   return (
     <CenteredView
       style={[styles.container, pal.view, containerStyle]}

src/view/screens/DebugMod.tsx

@@ -18,7 +18,7 @@ import {
 import {atoms as a, useTheme} from '#/alf'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {H1, H3, P} from '#/components/Typography'
-import {useLabelStrings} from '#/lib/moderation'
+import {useLabelStrings} from '#/lib/moderation/useLabelStrings'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {UserAvatar} from '../com/util/UserAvatar'