Refactor moderation to apply to accounts, profiles, and posts correctly (#548)

* Add ScreenHider component

* Add blur attribute to UserAvatar and UserBanner

* Remove dead suggested posts component and model

* Bump @atproto/api@0.2.10

* Rework moderation tooling to give a more precise DSL

* Add label mocks

* Apply finer grained moderation controls

* Refactor ProfileCard to just take the profile object

* Apply moderation to user listings and banner

* Apply moderation to notifications

* Fix lint

* Tune avatar & banner blur settings per platform

* 1.24

1 files changed, 11 insertions, 6 deletions

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 9c0fe9297..7f55bf773 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -13,8 +13,11 @@ import {useStores} from 'state/index'
 import {colors} from 'lib/styles'
 import {DropdownButton} from './forms/DropdownButton'
 import {usePalette} from 'lib/hooks/usePalette'
-import {isWeb} from 'platform/detection'
+import {isWeb, isAndroid} from 'platform/detection'
 import {Image as RNImage} from 'react-native-image-crop-picker'
+import {AvatarModeration} from 'lib/labeling/types'
+
+const BLUR_AMOUNT = isWeb ? 5 : 100
 
 function DefaultAvatar({size}: {size: number}) {
   return (
@@ -40,12 +43,12 @@ function DefaultAvatar({size}: {size: number}) {
 export function UserAvatar({
   size,
   avatar,
-  hasWarning,
+  moderation,
   onSelectNewAvatar,
 }: {
   size: number
   avatar?: string | null
-  hasWarning?: boolean
+  moderation?: AvatarModeration
   onSelectNewAvatar?: (img: RNImage | null) => void
 }) {
   const store = useStores()
@@ -114,7 +117,7 @@ export function UserAvatar({
   )
 
   const warning = useMemo(() => {
-    if (!hasWarning) {
+    if (!moderation?.warn) {
       return null
     }
     return (
@@ -126,7 +129,7 @@ export function UserAvatar({
         />
       </View>
     )
-  }, [hasWarning, size, pal])
+  }, [moderation?.warn, size, pal])
 
   // onSelectNewAvatar is only passed as prop on the EditProfile component
   return onSelectNewAvatar ? (
@@ -159,13 +162,15 @@ export function UserAvatar({
         />
       </View>
     </DropdownButton>
-  ) : avatar ? (
+  ) : avatar &&
+    !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
     <View style={{width: size, height: size}}>
       <HighPriorityImage
         testID="userAvatarImage"
         style={{width: size, height: size, borderRadius: Math.floor(size / 2)}}
         contentFit="cover"
         source={{uri: avatar}}
+        blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
       />
       {warning}
     </View>