[APP 513] Label tuning (#496)

* Label updates: break out sexual into 3 categories; tune defaults; improve descriptions

* Fix misapplication of warning in notifications

src/lib/labeling/const.ts

@@ -3,6 +3,8 @@ import {LabelPreferencesModel} from 'state/models/ui/preferences'
 export interface LabelValGroup {
   id: keyof LabelPreferencesModel | 'illegal' | 'unknown'
   title: string
+  subtitle?: string
+  warning?: string
   values: string[]
 }
 
@@ -24,27 +26,50 @@ export const CONFIGURABLE_LABEL_GROUPS: Record<
 > = {
   nsfw: {
     id: 'nsfw',
-    title: 'Sexual Content',
-    values: ['porn', 'nudity', 'sexual'],
+    title: 'Explicit Sexual Images',
+    subtitle: 'i.e. Pornography',
+    warning: 'Sexually Explicit',
+    values: ['porn'],
+  },
+  nudity: {
+    id: 'nudity',
+    title: 'Other Nudity',
+    subtitle: 'Including non-sexual and artistic',
+    warning: 'Nudity',
+    values: ['nudity'],
+  },
+  suggestive: {
+    id: 'suggestive',
+    title: 'Sexually Suggestive',
+    subtitle: 'Does not include nudity',
+    warning: 'Sexually Suggestive',
+    values: ['sexual'],
   },
   gore: {
     id: 'gore',
     title: 'Violent / Bloody',
+    subtitle: 'Gore, self-harm, torture',
+    warning: 'Violence',
     values: ['gore', 'self-harm', 'torture'],
   },
   hate: {
     id: 'hate',
     title: 'Political Hate-Groups',
-    values: ['icon-kkk', 'icon-nazi', 'icon-confederate'],
+    warning: 'Hate',
+    values: ['icon-kkk', 'icon-nazi'],
   },
   spam: {
     id: 'spam',
     title: 'Spam',
+    subtitle: 'Excessive low-quality posts',
+    warning: 'Spam',
     values: ['spam'],
   },
   impersonation: {
     id: 'impersonation',
     title: 'Impersonation',
+    subtitle: 'Accounts falsely claiming to be people or orgs',
+    warning: 'Impersonation',
     values: ['impersonation'],
   },
 }

src/state/models/ui/preferences.ts

@@ -15,7 +15,9 @@ export type LabelPreference = 'show' | 'warn' | 'hide'
 
 export class LabelPreferencesModel {
   nsfw: LabelPreference = 'warn'
-  gore: LabelPreference = 'hide'
+  nudity: LabelPreference = 'show'
+  suggestive: LabelPreference = 'show'
+  gore: LabelPreference = 'warn'
   hate: LabelPreference = 'hide'
   spam: LabelPreference = 'hide'
   impersonation: LabelPreference = 'warn'

src/view/com/modals/ContentFilteringSettings.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+import {StyleSheet, Pressable, View} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {observer} from 'mobx-react-lite'
+import {ScrollView} from './util'
 import {useStores} from 'state/index'
 import {LabelPreference} from 'state/models/ui/preferences'
 import {s, colors, gradients} from 'lib/styles'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {CONFIGURABLE_LABEL_GROUPS} from 'lib/labeling/const'
+import {isDesktopWeb} from 'platform/detection'
 
-export const snapPoints = [500]
+export const snapPoints = ['90%']
 
 export function Component({}: {}) {
   const store = useStores()
@@ -20,14 +22,19 @@ export function Component({}: {}) {
 
   return (
     <View testID="reportPostModal" style={[pal.view, styles.container]}>
-      <Text style={[pal.text, styles.title]}>Content Filtering</Text>
+      <Text style={[pal.text, styles.title]}>Content Moderation</Text>
+      <ScrollView style={styles.scrollContainer}>
         <ContentLabelPref group="nsfw" />
+        <ContentLabelPref group="nudity" />
+        <ContentLabelPref group="suggestive" />
         <ContentLabelPref group="gore" />
         <ContentLabelPref group="hate" />
         <ContentLabelPref group="spam" />
         <ContentLabelPref group="impersonation" />
-      <View style={s.flex1} />
-      <TouchableOpacity testID="sendReportBtn" onPress={onPressDone}>
+        <View style={styles.bottomSpacer} />
+      </ScrollView>
+      <View style={[styles.btnContainer, pal.borderDark]}>
+        <Pressable testID="sendReportBtn" onPress={onPressDone}>
           <LinearGradient
             colors={[gradients.blueLight.start, gradients.blueLight.end]}
             start={{x: 0, y: 0}}
@@ -35,7 +42,8 @@ export function Component({}: {}) {
             style={[styles.btn]}>
             <Text style={[s.white, s.bold, s.f18]}>Done</Text>
           </LinearGradient>
-      </TouchableOpacity>
+        </Pressable>
+      </View>
     </View>
   )
 }
@@ -46,9 +54,16 @@ const ContentLabelPref = observer(
     const pal = usePalette('default')
     return (
       <View style={[styles.contentLabelPref, pal.border]}>
+        <View style={s.flex1}>
           <Text type="md-medium" style={[pal.text]}>
             {CONFIGURABLE_LABEL_GROUPS[group].title}
           </Text>
+          {typeof CONFIGURABLE_LABEL_GROUPS[group].subtitle === 'string' && (
+            <Text type="sm" style={[pal.textLight]}>
+              {CONFIGURABLE_LABEL_GROUPS[group].subtitle}
+            </Text>
+          )}
+        </View>
         <SelectGroup
           current={store.preferences.contentLabels[group]}
           onChange={v => store.preferences.setContentLabelPref(group, v)}
@@ -109,7 +124,7 @@ function SelectableBtn({
   const pal = usePalette('default')
   const palPrimary = usePalette('inverted')
   return (
-    <TouchableOpacity
+    <Pressable
       style={[
         styles.selectableBtn,
         left && styles.selectableBtnLeft,
@@ -121,15 +136,13 @@ function SelectableBtn({
       <Text style={current === value ? palPrimary.text : pal.text}>
         {label}
       </Text>
-    </TouchableOpacity>
+    </Pressable>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 10,
-    paddingBottom: 40,
   },
   title: {
     textAlign: 'center',
@@ -141,19 +154,33 @@ const styles = StyleSheet.create({
     paddingHorizontal: 2,
     marginBottom: 10,
   },
+  scrollContainer: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  bottomSpacer: {
+    height: isDesktopWeb ? 0 : 60,
+  },
+  btnContainer: {
+    paddingTop: 10,
+    paddingHorizontal: 10,
+    paddingBottom: isDesktopWeb ? 0 : 40,
+    borderTopWidth: isDesktopWeb ? 0 : 1,
+  },
 
   contentLabelPref: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: 10,
+    paddingTop: 14,
     paddingLeft: 4,
-    marginBottom: 10,
+    marginBottom: 14,
     borderTopWidth: 1,
   },
 
   selectableBtns: {
     flexDirection: 'row',
+    marginLeft: 10,
   },
   selectableBtn: {
     flexDirection: 'row',

src/view/com/notifications/FeedItem.tsx

@@ -140,7 +140,7 @@ export const FeedItem = observer(function FeedItem({
         handle: item2.author.handle,
         displayName: item2.author.displayName,
         avatar: item2.author.avatar,
-        labels: item.author.labels,
+        labels: item2.author.labels,
       })),
     )
   }

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

@@ -55,7 +55,7 @@ export function ContentHider({
           {isMuted ? (
             <>Post from an account you muted.</>
           ) : (
-            <>Warning: {labelPref.desc.title}</>
+            <>Warning: {labelPref.desc.warning || labelPref.desc.title}</>
           )}
         </Text>
         <TouchableOpacity

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

@@ -33,7 +33,7 @@ export function ProfileHeaderLabels({
             />
             <Text style={palErr.text}>
               This account has been flagged for{' '}
-              {labelGroup.title.toLocaleLowerCase()}.
+              {(labelGroup.warning || labelGroup.title).toLocaleLowerCase()}.
             </Text>
           </View>
         )