Implement label handling

src/lib/moderation/useGlobalLabelStrings.ts

@@ -0,0 +1,70 @@
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMemo} from 'react'
+
+export type GlobalLabelStrings = Record<
+  string,
+  {
+    name: string
+    description: string
+  }
+>
+
+export function useGlobalLabelStrings(): GlobalLabelStrings {
+  const {_} = useLingui()
+  return useMemo(
+    () => ({
+      '!hide': {
+        name: _(msg`Content Blocked`),
+        description: _(msg`This content has been hidden by the moderators.`),
+      },
+      '!no-promote': {
+        name: _(msg`Moderator Filter`),
+        description: _(
+          msg`Moderator has chosen to filter the content from feeds.`,
+        ),
+      },
+      '!warn': {
+        name: _(msg`Content Warning`),
+        description: _(
+          msg`This content has received a general warning from moderators.`,
+        ),
+      },
+      '!no-unauthenticated': {
+        name: _(msg`Sign-in Required`),
+        description: _(
+          msg`This user has requested that their content only be shown to signed-in users.`,
+        ),
+      },
+      'dmca-violation': {
+        name: _(msg`Copyright Violation`),
+        description: _(
+          msg`This content has received a DMCA takedown request. It will be restored if the concerns can be resolved.`,
+        ),
+      },
+      doxxing: {
+        name: _(msg`Doxxing`),
+        description: _(
+          msg`This content has been reported to include private information about someone without their consent.`,
+        ),
+      },
+      porn: {
+        name: _(msg`Pornography`),
+        description: _(msg`Explicit sexual images.`),
+      },
+      sexual: {
+        name: _(msg`Sexually Suggestive`),
+        description: _(msg`Does not include nudity.`),
+      },
+      nudity: {
+        name: _(msg`Nudity`),
+        description: _(msg`Including non-sexual and artistic.`),
+      },
+      gore: {
+        name: _(msg`Violent / Bloody`),
+        description: _(msg`Gore, self-harm, torture`),
+      },
+    }),
+    [_],
+  )
+}

src/lib/moderation/useLabelInfo.ts

@@ -0,0 +1,99 @@
+import {
+  ComAtprotoLabelDefs,
+  AppBskyLabelerDefs,
+  LABELS,
+  interpretLabelValueDefinition,
+  InterprettedLabelValueDefinition,
+} from '@atproto/api'
+import {useLingui} from '@lingui/react'
+import * as bcp47Match from 'bcp-47-match'
+
+import {
+  useGlobalLabelStrings,
+  GlobalLabelStrings,
+} from '#/lib/moderation/useGlobalLabelStrings'
+import {useLabelDefinitions} from '#/state/queries/preferences'
+
+export interface LabelInfo {
+  label: ComAtprotoLabelDefs.Label
+  def: InterprettedLabelValueDefinition
+  strings: ComAtprotoLabelDefs.LabelValueDefinitionStrings
+  labeler: AppBskyLabelerDefs.LabelerViewDetailed | undefined
+}
+
+export function useLabelInfo(label: ComAtprotoLabelDefs.Label): LabelInfo {
+  const {i18n} = useLingui()
+  const globalLabelStrings = useGlobalLabelStrings()
+  const {labelDefs, labelers} = useLabelDefinitions()
+  const def = getDefinition(labelDefs, label)
+  return {
+    label,
+    def,
+    strings: getLabelStrings(i18n.locale, globalLabelStrings, def),
+    labeler: labelers.find(labeler => label.src === labeler.creator.did),
+  }
+}
+
+export function getDefinition(
+  labelDefs: Record<string, InterprettedLabelValueDefinition[]>,
+  label: ComAtprotoLabelDefs.Label,
+): InterprettedLabelValueDefinition {
+  // check local definitions
+  const customDef =
+    !label.val.startsWith('!') &&
+    labelDefs[label.src].find(
+      def => def.identifier === label.val && def.definedBy === label.src,
+    )
+  if (customDef) {
+    return customDef
+  }
+
+  // check global definitions
+  const globalDef = LABELS[label.val as keyof typeof LABELS]
+  if (globalDef) {
+    return globalDef
+  }
+
+  // fallback to a noop definition
+  return interpretLabelValueDefinition(
+    {
+      identifier: label.val,
+      severity: 'none',
+      blurs: 'none',
+      locales: [],
+    },
+    label.src,
+  )
+}
+
+export function getLabelStrings(
+  locale: string,
+  globalLabelStrings: GlobalLabelStrings,
+  def: InterprettedLabelValueDefinition,
+): ComAtprotoLabelDefs.LabelValueDefinitionStrings {
+  if (!def.definedBy) {
+    // global definition, look up strings
+    if (def.identifier in globalLabelStrings) {
+      return globalLabelStrings[
+        def.identifier
+      ] as ComAtprotoLabelDefs.LabelValueDefinitionStrings
+    }
+  } else {
+    // try to find locale match in the definition's strings
+    const localeMatch = def.locales.find(
+      strings => bcp47Match.basicFilter(locale, strings.lang).length > 0,
+    )
+    if (localeMatch) {
+      return localeMatch
+    }
+    // fall back to the zero item if no match
+    if (def.locales[0]) {
+      return def.locales[0]
+    }
+  }
+  return {
+    lang: locale,
+    name: def.identifier,
+    description: `Labeled "${def.identifier}"`,
+  }
+}

src/lib/moderation/useLabelStrings.ts

@@ -1,203 +0,0 @@
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useMemo} from 'react'
-
-export type LabelStrings = Record<
-  string,
-  {
-    general: {name: string; description: string}
-    account: {name: string; description: string}
-    content: {name: string; description: string}
-  }
->
-
-export function useLabelStrings(): LabelStrings {
-  const {_} = useLingui()
-  return useMemo(
-    () => ({
-      '!hide': {
-        general: {
-          name: _(msg`Moderator Hide`),
-          description: _(msg`Moderator has chosen to hide the content.`),
-        },
-        account: {
-          name: _(msg`Content Blocked`),
-          description: _(msg`This account has been hidden by the moderators.`),
-        },
-        content: {
-          name: _(msg`Content Blocked`),
-          description: _(msg`This content has been hidden by the moderators.`),
-        },
-      },
-      '!no-promote': {
-        general: {
-          name: _(msg`Moderator Filter`),
-          description: _(
-            msg`Moderator has chosen to filter the content from feeds.`,
-          ),
-        },
-        account: {
-          name: _(msg`N/A`),
-          description: _(msg`N/A`),
-        },
-        content: {
-          name: _(msg`N/A`),
-          description: _(msg`N/A`),
-        },
-      },
-      '!warn': {
-        general: {
-          name: _(msg`Moderator Warn`),
-          description: _(
-            msg`Moderator has chosen to set a general warning on the content.`,
-          ),
-        },
-        account: {
-          name: _(msg`Content Warning`),
-          description: _(
-            msg`This account has received a general warning from moderators.`,
-          ),
-        },
-        content: {
-          name: _(msg`Content Warning`),
-          description: _(
-            msg`This content has received a general warning from moderators.`,
-          ),
-        },
-      },
-      '!no-unauthenticated': {
-        general: {
-          name: _(msg`Sign-in Required`),
-          description: _(
-            msg`This user has requested that their account only be shown to signed-in users.`,
-          ),
-        },
-        account: {
-          name: _(msg`Sign-in Required`),
-          description: _(
-            msg`This user has requested that their account only be shown to signed-in users.`,
-          ),
-        },
-        content: {
-          name: _(msg`Sign-in Required`),
-          description: _(
-            msg`This user has requested that their content only be shown to signed-in users.`,
-          ),
-        },
-      },
-      'dmca-violation': {
-        general: {
-          name: _(msg`Copyright Violation`),
-          description: _(
-            msg`The content has received a DMCA takedown request.`,
-          ),
-        },
-        account: {
-          name: _(msg`Copyright Violation`),
-          description: _(
-            msg`This account has received a DMCA takedown request. It will be restored if the concerns can be resolved.`,
-          ),
-        },
-        content: {
-          name: _(msg`Copyright Violation`),
-          description: _(
-            msg`This content has received a DMCA takedown request. It will be restored if the concerns can be resolved.`,
-          ),
-        },
-      },
-      doxxing: {
-        general: {
-          name: _(msg`Doxxing`),
-          description: _(
-            msg`Information that reveals private information about someone which has been shared without the consent of the subject.`,
-          ),
-        },
-        account: {
-          name: _(msg`Doxxing`),
-          description: _(
-            msg`This account has been reported to publish private information about someone without their consent. This report is currently under review.`,
-          ),
-        },
-        content: {
-          name: _(msg`Doxxing`),
-          description: _(
-            msg`This content has been reported to include private information about someone without their consent.`,
-          ),
-        },
-      },
-      porn: {
-        general: {
-          name: _(msg`Pornography`),
-          description: _(msg`Explicit sexual images.`),
-        },
-        account: {
-          name: _(msg`Adult Content`),
-          description: _(
-            msg`This account contains imagery of full-frontal nudity or explicit sexual activity.`,
-          ),
-        },
-        content: {
-          name: _(msg`Adult Content`),
-          description: _(
-            msg`This content contains imagery of full-frontal nudity or explicit sexual activity.`,
-          ),
-        },
-      },
-      sexual: {
-        general: {
-          name: _(msg`Sexually Suggestive`),
-          description: _(msg`Does not include nudity.`),
-        },
-        account: {
-          name: _(msg`Suggestive Content`),
-          description: _(
-            msg`This account contains imagery which is sexually suggestive. Common examples include selfies in underwear or in partial undress.`,
-          ),
-        },
-        content: {
-          name: _(msg`Suggestive Content`),
-          description: _(
-            msg`This content contains imagery which is sexually suggestive. Common examples include selfies in underwear or in partial undress.`,
-          ),
-        },
-      },
-      nudity: {
-        general: {
-          name: _(msg`Nudity`),
-          description: _(msg`Including non-sexual and artistic.`),
-        },
-        account: {
-          name: _(msg`Adult Content`),
-          description: _(
-            msg`This account contains imagery which portrays nudity in a non-sexual or artistic setting.`,
-          ),
-        },
-        content: {
-          name: _(msg`Adult Content`),
-          description: _(
-            msg`This content contains imagery which portrays nudity in a non-sexual or artistic setting.`,
-          ),
-        },
-      },
-      gore: {
-        general: {
-          name: _(msg`Violent / Bloody`),
-          description: _(msg`Gore, self-harm, torture`),
-        },
-        account: {
-          name: _(msg`Graphic Imagery (Gore)`),
-          description: _(
-            msg`This account contains shocking images involving blood or visible wounds.`,
-          ),
-        },
-        content: {
-          name: _(msg`Graphic Imagery (Gore)`),
-          description: _(
-            msg`This content contains shocking images involving blood or visible wounds.`,
-          ),
-        },
-      },
-    }),
-    [_],
-  )
-}

src/lib/moderation/useModerationCauseDescription.ts

@@ -1,21 +1,31 @@
-import {ModerationCause, LABELS} from '@atproto/api'
+import {ModerationCause} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useLabelStrings} from './useLabelStrings'
+import {useGlobalLabelStrings} from './useGlobalLabelStrings'
+import {useLabelDefinitions} from '#/state/queries/preferences'
+import {getDefinition, getLabelStrings} from './useLabelInfo'
+
+import {TriangleExclamation_Stroke2_Corner2_Rounded as TriangleExclamation} from '#/components/icons/TriangleExclamation'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
+import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 
 export interface ModerationCauseDescription {
+  icon: any
   name: string
   description: string
+  source?: string
 }
 
 export function useModerationCauseDescription(
   cause: ModerationCause | undefined,
-  context: 'account' | 'content',
 ): ModerationCauseDescription {
-  const {_} = useLingui()
-  const labelStrings = useLabelStrings()
+  const {_, i18n} = useLingui()
+  const globalLabelStrings = useGlobalLabelStrings()
+  const {labelDefs, labelers} = useLabelDefinitions()
   if (!cause) {
     return {
+      icon: TriangleExclamation,
       name: _(msg`Content Warning`),
       description: _(
         msg`Moderator has chosen to set a general warning on the content.`,
@@ -25,6 +35,7 @@ export function useModerationCauseDescription(
   if (cause.type === 'blocking') {
     if (cause.source.type === 'list') {
       return {
+        icon: CircleBanSign,
         name: _(msg`User Blocked by "${cause.source.list.name}"`),
         description: _(
           msg`You have blocked this user. You cannot view their content.`,
@@ -32,6 +43,7 @@ export function useModerationCauseDescription(
       }
     } else {
       return {
+        icon: CircleBanSign,
         name: _(msg`User Blocked`),
         description: _(
           msg`You have blocked this user. You cannot view their content.`,
@@ -41,6 +53,7 @@ export function useModerationCauseDescription(
   }
   if (cause.type === 'blocked-by') {
     return {
+      icon: CircleBanSign,
       name: _(msg`User Blocking You`),
       description: _(
         msg`This user has blocked you. You cannot view their content.`,
@@ -49,6 +62,7 @@ export function useModerationCauseDescription(
   }
   if (cause.type === 'block-other') {
     return {
+      icon: CircleBanSign,
       name: _(msg`Content Not Available`),
       description: _(
         msg`This content is not available because one of the users involved has blocked the other.`,
@@ -58,11 +72,13 @@ export function useModerationCauseDescription(
   if (cause.type === 'muted') {
     if (cause.source.type === 'list') {
       return {
+        icon: EyeSlash,
         name: _(msg`Muted by "${cause.source.list.name}"`),
         description: _(msg`You have muted this user`),
       }
     } else {
       return {
+        icon: EyeSlash,
         name: _(msg`Muted User`),
         description: _(msg`You have muted this user`),
       }
@@ -71,30 +87,30 @@ export function useModerationCauseDescription(
   // @ts-ignore Temporary extension to the moderation system -prf
   if (cause.type === 'hidden') {
     return {
+      icon: EyeSlash,
       name: _(msg`Post Hidden by You`),
       description: _(msg`You have hidden this post`),
     }
   }
   if (cause.type === 'label') {
-    if (cause.labelDef.identifier in labelStrings) {
-      const strings =
-        labelStrings[cause.labelDef.identifier as keyof typeof LABELS]
-      return {
-        name:
-          context === 'account' ? strings.account.name : strings.content.name,
-        description:
-          context === 'account'
-            ? strings.account.description
-            : strings.content.description,
-      }
-    }
+    const def = getDefinition(labelDefs, cause.label)
+    const strings = getLabelStrings(i18n.locale, globalLabelStrings, def)
+    const labeler = labelers.find(l => l.creator.did === cause.label.src)
     return {
-      name: cause.labelDef.identifier,
-      description: _(msg`Labeled ${cause.labelDef.identifier}`),
+      icon:
+        def.identifier === '!no-unauthenticated'
+          ? EyeSlash
+          : def.severity === 'alert'
+          ? TriangleExclamation
+          : CircleInfo,
+      name: strings.name,
+      description: strings.description,
+      source: labeler?.creator.displayName || labeler?.creator.handle,
     }
   }
   // should never happen
   return {
+    icon: CircleInfo,
     name: '',
     description: ``,
   }