Labeling & moderation updates [DRAFT] (#1057)

* First pass moving to the new labeling sdk (it compiles)

* Correct behaviors around interpreting label moderation

* Improve moderation state rendering

* Improve hiders and alerts

* Improve handling of mutes

* Improve profile warnings

* Add profile blurring to profile header

* Add blocks to test cases

* Render labels on profile cards, do not filter

* Filter profiles from suggestions using moderation

* Apply profile blurring to ProfileCard

* Handle blocked and deleted quote posts

* Temporarily translate content filtering settings to new labels

* Fix types

* Tune ContentHider & PostHider click targets

* Put a warning on profilecard label pills

* Fix screenhider learnmore link on mobile

* Enforce no-override on user avatar

* Dont enumerate profile blur-media labels in alerts

* Fixes to muted posts (esp quotes of muted users)

* Fixes to account/profile warnings

* Bump @atproto/api@0.5.0

* Bump @atproto/api@0.5.1

* Fix tests

* 1.43

* Remove log

* Bump @atproto/api@0.5.2

src/view/com/modals/Modal.tsx

@@ -30,6 +30,7 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as PreferencesHomeFeed from './PreferencesHomeFeed'
 import * as OnboardingModal from './OnboardingModal'
+import * as ModerationDetailsModal from './ModerationDetails'
 
 const DEFAULT_SNAPPOINTS = ['90%']
 
@@ -136,6 +137,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'onboarding') {
     snapPoints = OnboardingModal.snapPoints
     element = <OnboardingModal.Component />
+  } else if (activeModal?.name === 'moderation-details') {
+    snapPoints = ModerationDetailsModal.snapPoints
+    element = <ModerationDetailsModal.Component {...activeModal} />
   } else {
     return null
   }

src/view/com/modals/Modal.web.tsx

@@ -27,6 +27,7 @@ import * as ContentFilteringSettingsModal from './ContentFilteringSettings'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings'
 import * as OnboardingModal from './OnboardingModal'
+import * as ModerationDetailsModal from './ModerationDetails'
 
 import * as PreferencesHomeFeed from './PreferencesHomeFeed'
 
@@ -110,6 +111,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <PreferencesHomeFeed.Component />
   } else if (modal.name === 'onboarding') {
     element = <OnboardingModal.Component />
+  } else if (modal.name === 'moderation-details') {
+    element = <ModerationDetailsModal.Component {...modal} />
   } else {
     return null
   }

src/view/com/modals/ModerationDetails.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {ModerationUI} from '@atproto/api'
+import {useStores} from 'state/index'
+import {s} from 'lib/styles'
+import {Text} from '../util/text/Text'
+import {TextLink} from '../util/Link'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+import {listUriToHref} from 'lib/strings/url-helpers'
+import {Button} from '../util/forms/Button'
+
+export const snapPoints = [300]
+
+export function Component({
+  context,
+  moderation,
+}: {
+  context: 'account' | 'content'
+  moderation: ModerationUI
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+
+  let name
+  let description
+  if (!moderation.cause) {
+    name = 'Content Warning'
+    description =
+      'Moderator has chosen to set a general warning on the content.'
+  } else if (moderation.cause.type === 'blocking') {
+    name = 'Account Blocked'
+    description = 'You have blocked this user. You cannot view their content.'
+  } else if (moderation.cause.type === 'blocked-by') {
+    name = 'Account Blocks You'
+    description = 'This user has blocked you. You cannot view their content.'
+  } else if (moderation.cause.type === 'muted') {
+    if (moderation.cause.source.type === 'user') {
+      name = 'Account Muted'
+      description = 'You have muted this user.'
+    } else {
+      const list = moderation.cause.source.list
+      name = <>Account Muted by List</>
+      description = (
+        <>
+          This user is included the{' '}
+          <TextLink
+            type="2xl"
+            href={listUriToHref(list.uri)}
+            text={list.name}
+            style={pal.link}
+          />{' '}
+          list which you have muted.
+        </>
+      )
+    }
+  } else {
+    name = moderation.cause.labelDef.strings[context].en.name
+    description = moderation.cause.labelDef.strings[context].en.description
+  }
+
+  return (
+    <View testID="moderationDetailsModal" style={[styles.container, pal.view]}>
+      <Text type="title-xl" style={[pal.text, styles.title]}>
+        {name}
+      </Text>
+      <Text type="2xl" style={[pal.text, styles.description]}>
+        {description}
+      </Text>
+      <View style={s.flex1} />
+      <Button
+        type="primary"
+        style={styles.btn}
+        onPress={() => store.shell.closeModal()}>
+        <Text type="button-lg" style={[pal.textLight, s.textCenter, s.white]}>
+          Okay
+        </Text>
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: isDesktopWeb ? 0 : 14,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+  },
+  btn: {
+    paddingVertical: 14,
+    marginTop: isDesktopWeb ? 40 : 0,
+    marginBottom: isDesktopWeb ? 0 : 40,
+  },
+})