Add all groups

src/screens/ProfileModerationService/PreferenceRow.tsx

@@ -3,23 +3,17 @@ import {View} from 'react-native'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 
-import {
+import {useLabelGroupStrings} from '#/lib/moderation'
-  CONFIGURABLE_LABEL_GROUPS,
-  ConfigurableLabelGroup,
-} from '#/state/queries/preferences'
 
 import {useTheme, atoms as a} from '#/alf'
 import {Text} from '#/components/Typography'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 
-export function PreferenceRow({
+export function PreferenceRow({labelGroup}: {labelGroup: string}) {
-  labelGroup,
-}: {
-  labelGroup: ConfigurableLabelGroup
-}) {
   const t = useTheme()
   const {_} = useLingui()
-  const groupInfo = CONFIGURABLE_LABEL_GROUPS[labelGroup]
+  const labelGroupStrings = useLabelGroupStrings()
+  const groupInfoStrings = labelGroupStrings[labelGroup]
 
   const labels = {
     hide: _(msg`Hide`),
@@ -38,15 +32,15 @@ export function PreferenceRow({
         a.align_center,
       ]}>
       <View style={[a.gap_xs, {width: '50%'}]}>
-        <Text style={[a.font_bold]}>{groupInfo.title}</Text>
+        <Text style={[a.font_bold]}>{groupInfoStrings.name}</Text>
         <Text style={[t.atoms.text_contrast_700, a.leading_snug]}>
-          {groupInfo.subtitle}
+          {groupInfoStrings.description}
         </Text>
       </View>
       <View style={[a.justify_center, {minHeight: 35}]}>
         <ToggleButton.Group
           label={_(
-            msg`Configure content filtering setting for category: ${groupInfo.title.toLowerCase()}`,
+            msg`Configure content filtering setting for category: ${groupInfoStrings.name.toLowerCase()}`,
           )}
           values={['warn']}
           onChange={() => {}}>

src/screens/ProfileModerationService/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import {Dimensions, View} from 'react-native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
-import {AppBskyModerationDefs} from '@atproto/api'
+import {AppBskyModerationDefs, LabelGroupDefinition} from '@atproto/api'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {LABEL_GROUPS} from '@atproto/api'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {CommonNavigatorParams} from '#/lib/routes/types'
@@ -136,6 +137,11 @@ export function ProfileModserviceScreenInner({
   const [likeUri, setLikeUri] = React.useState<string>(
     modInfo.viewer?.like || '',
   )
+  const groups = React.useMemo<
+    [keyof typeof LABEL_GROUPS, LabelGroupDefinition][]
+  >(() => {
+    return Object.entries(LABEL_GROUPS).filter(([, def]) => def.configurable)
+  }, [])
 
   const isLiked = !!likeUri
   // const isSaved = false // TODO
@@ -249,15 +255,17 @@ export function ProfileModserviceScreenInner({
       </View>
 
       <View style={[a.gap_md, a.mt_xl]}>
+        {groups.map(([name, def]) => {
+          return (
+            <React.Fragment key={def.id}>
               <Divider />
-        <PreferenceRow labelGroup="nsfw" />
+              <PreferenceRow labelGroup={name} />
-        <Divider />
+            </React.Fragment>
-        <PreferenceRow labelGroup="nudity" />
+          )
-        <Divider />
+        })}
-        <PreferenceRow labelGroup="suggestive" />
       </View>
 
-      <View style={{height: 20}} />
+      <View style={{height: 100}} />
     </ScrollView>
   )
 }