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/util/moderation/ProfileHeaderAlerts.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {ProfileModeration} from '@atproto/api'
+import {Text} from '../text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {InfoCircleIcon} from 'lib/icons'
+import {
+  describeModerationCause,
+  getProfileModerationCauses,
+} from 'lib/moderation'
+import {useStores} from 'state/index'
+
+export function ProfileHeaderAlerts({
+  moderation,
+  style,
+}: {
+  moderation: ProfileModeration
+  style?: StyleProp<ViewStyle>
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+
+  const causes = getProfileModerationCauses(moderation)
+  if (!causes.length) {
+    return null
+  }
+
+  return (
+    <View style={styles.grid}>
+      {causes.map(cause => {
+        const desc = describeModerationCause(cause, 'account')
+        return (
+          <Pressable
+            testID="profileHeaderAlert"
+            key={desc.name}
+            onPress={() => {
+              store.shell.openModal({
+                name: 'moderation-details',
+                context: 'content',
+                moderation: {cause},
+              })
+            }}
+            accessibilityRole="button"
+            accessibilityLabel="Learn more about this warning"
+            accessibilityHint=""
+            style={[styles.container, pal.viewLight, style]}>
+            <InfoCircleIcon style={pal.text} size={24} />
+            <Text type="lg" style={pal.text}>
+              {desc.name}
+            </Text>
+            <Text type="lg" style={[pal.link, styles.learnMoreBtn]}>
+              Learn More
+            </Text>
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    gap: 4,
+  },
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+  },
+  learnMoreBtn: {
+    marginLeft: 'auto',
+  },
+})