Improve label rendering to give more context to users when appropriate

src/view/com/post-thread/PostThreadItem.tsx

@@ -22,8 +22,8 @@ import {useStores} from 'state/index'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostContainer} from '../util/PostContainer'
+import {PostHider} from '../util/moderation/PostHider'
-import {ContentContainer} from '../util/ContentContainer'
+import {ContentHider} from '../util/moderation/ContentHider'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 
@@ -194,7 +194,7 @@ export const PostThreadItem = observer(function PostThreadItem({
           </View>
         </View>
         <View style={[s.pl10, s.pr10, s.pb10]}>
-          <ContentContainer
+          <ContentHider
             isMuted={item.post.author.viewer?.muted === true}
             labels={item.post.labels}>
             {item.richText?.text ? (
@@ -211,7 +211,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               </View>
             ) : undefined}
             <PostEmbeds embed={item.post.embed} style={s.mb10} />
-          </ContentContainer>
+          </ContentHider>
           {item._isHighlightedPost && hasEngagement ? (
             <View style={[styles.expandedInfo, pal.border]}>
               {item.post.repostCount ? (
@@ -279,7 +279,7 @@ export const PostThreadItem = observer(function PostThreadItem({
   } else {
     return (
       <>
-        <PostContainer
+        <PostHider
           testID={`postThreadItem-by-${item.post.author.handle}`}
           href={itemHref}
           style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
@@ -315,6 +315,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                 postHref={itemHref}
                 did={item.post.author.did}
               />
+              <ContentHider
+                isMuted={item.post.author.viewer?.muted === true}
+                labels={item.post.labels}
+                containerStyle={styles.contentHider}>
                 {item.richText?.text ? (
                   <View style={styles.postTextContainer}>
                     <RichText
@@ -326,6 +330,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   </View>
                 ) : undefined}
                 <PostEmbeds embed={item.post.embed} style={s.mb10} />
+              </ContentHider>
               <PostCtrls
                 itemUri={itemUri}
                 itemCid={itemCid}
@@ -353,7 +358,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               />
             </View>
           </View>
-        </PostContainer>
+        </PostHider>
         {item._hasMore ? (
           <Link
             style={[
@@ -441,6 +446,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 0,
     paddingBottom: 10,
   },
+  contentHider: {
+    marginTop: 4,
+  },
   expandedInfo: {
     flexDirection: 'row',
     padding: 10,

src/view/com/post/Post.tsx

@@ -7,17 +7,22 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
+import {AppBskyFeedPost as FeedPost} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {AtUri} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {PostThreadModel} from 'state/models/content/post-thread'
+import {
+  PostThreadModel,
+  PostThreadItemModel,
+} from 'state/models/content/post-thread'
 import {Link} from '../util/Link'
 import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostContainer} from '../util/PostContainer'
+import {PostHider} from '../util/moderation/PostHider'
+import {ContentHider} from '../util/moderation/ContentHider'
 import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
@@ -88,8 +93,35 @@ export const Post = observer(function Post({
 
   // loaded
   // =
-  const item = view.thread
+
-  const record = view.thread.postRecord
+  return (
+    <PostLoaded
+      view={view}
+      item={view.thread}
+      record={view.thread.postRecord}
+      setDeleted={setDeleted}
+      showReplyLine={showReplyLine}
+      style={style}
+    />
+  )
+})
+
+const PostLoaded = observer(
+  ({
+    item,
+    record,
+    setDeleted,
+    showReplyLine,
+    style,
+  }: {
+    item: PostThreadItemModel
+    record: FeedPost.Record
+    setDeleted: (v: boolean) => void
+    showReplyLine?: boolean
+    style?: StyleProp<ViewStyle>
+  }) => {
+    const pal = usePalette('default')
+    const store = useStores()
 
     const itemUri = item.post.uri
     const itemCid = item.post.cid
@@ -103,7 +135,7 @@ export const Post = observer(function Post({
       const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
       replyAuthorDid = urip.hostname
     }
-  const onPressReply = () => {
+    const onPressReply = React.useCallback(() => {
       store.shell.openComposer({
         replyTo: {
           uri: item.post.uri,
@@ -116,27 +148,34 @@ export const Post = observer(function Post({
           },
         },
       })
-  }
+    }, [store, item, record])
-  const onPressToggleRepost = () => {
+
+    const onPressToggleRepost = React.useCallback(() => {
       return item
         .toggleRepost()
         .catch(e => store.log.error('Failed to toggle repost', e))
-  }
+    }, [item, store])
-  const onPressToggleLike = () => {
+
+    const onPressToggleLike = React.useCallback(() => {
       return item
         .toggleLike()
         .catch(e => store.log.error('Failed to toggle like', e))
-  }
+    }, [item, store])
-  const onCopyPostText = () => {
+
+    const onCopyPostText = React.useCallback(() => {
       Clipboard.setString(record.text)
       Toast.show('Copied to clipboard')
-  }
+    }, [record])
-  const onOpenTranslate = () => {
+
+    const onOpenTranslate = React.useCallback(() => {
       Linking.openURL(
-      encodeURI(`https://translate.google.com/#auto|en|${record?.text || ''}`),
+        encodeURI(
+          `https://translate.google.com/#auto|en|${record?.text || ''}`,
+        ),
       )
-  }
+    }, [record])
-  const onDeletePost = () => {
+
+    const onDeletePost = React.useCallback(() => {
       item.delete().then(
         () => {
           setDeleted(true)
@@ -147,10 +186,10 @@ export const Post = observer(function Post({
           Toast.show('Failed to delete post, please try again')
         },
       )
-  }
+    }, [item, setDeleted, store])
 
     return (
-    <PostContainer
+      <PostHider
         href={itemHref}
         style={[styles.outer, pal.view, pal.border, style]}
         isMuted={item.post.author.viewer?.muted === true}
@@ -188,6 +227,9 @@ export const Post = observer(function Post({
                 />
               </View>
             )}
+            <ContentHider
+              labels={item.post.labels}
+              containerStyle={styles.contentHider}>
               {item.richText?.text ? (
                 <View style={styles.postTextContainer}>
                   <RichText
@@ -198,6 +240,7 @@ export const Post = observer(function Post({
                 </View>
               ) : undefined}
               <PostEmbeds embed={item.post.embed} style={s.mb10} />
+            </ContentHider>
             <PostCtrls
               itemUri={itemUri}
               itemCid={itemCid}
@@ -225,9 +268,10 @@ export const Post = observer(function Post({
             />
           </View>
         </View>
-    </PostContainer>
+      </PostHider>
     )
-})
+  },
+)
 
 const styles = StyleSheet.create({
   outer: {
@@ -259,4 +303,7 @@ const styles = StyleSheet.create({
     borderLeftWidth: 2,
     borderLeftColor: colors.gray2,
   },
+  contentHider: {
+    marginTop: 4,
+  },
 })

src/view/com/posts/FeedItem.tsx

@@ -14,7 +14,8 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {PostEmbeds} from '../util/post-embeds'
-import {PostContainer} from '../util/PostContainer'
+import {PostHider} from '../util/moderation/PostHider'
+import {ContentHider} from '../util/moderation/ContentHider'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -132,7 +133,7 @@ export const FeedItem = observer(function ({
   ]
 
   return (
-    <PostContainer
+    <PostHider
       testID={`feedItem-by-${item.post.author.handle}`}
       style={outerStyles}
       href={itemHref}
@@ -221,6 +222,9 @@ export const FeedItem = observer(function ({
               />
             </View>
           )}
+          <ContentHider
+            labels={item.post.labels}
+            containerStyle={styles.contentHider}>
             {item.richText?.text ? (
               <View style={styles.postTextContainer}>
                 <RichText
@@ -231,6 +235,7 @@ export const FeedItem = observer(function ({
               </View>
             ) : undefined}
             <PostEmbeds embed={item.post.embed} style={styles.embed} />
+          </ContentHider>
           <PostCtrls
             style={styles.ctrls}
             itemUri={itemUri}
@@ -259,7 +264,7 @@ export const FeedItem = observer(function ({
           />
         </View>
       </View>
-    </PostContainer>
+    </PostHider>
   )
 })
 
@@ -322,6 +327,9 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     paddingBottom: 4,
   },
+  contentHider: {
+    marginTop: 4,
+  },
   embed: {
     marginBottom: 6,
   },

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

@@ -9,21 +9,23 @@ import {
 import {ComAtprotoLabelDefs} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
 import {getLabelValueGroup} from 'lib/labeling/helpers'
 import {addStyle} from 'lib/styles'
 
-export function ContentContainer({
+export function ContentHider({
   testID,
   isMuted,
   labels,
   style,
+  containerStyle,
   children,
 }: React.PropsWithChildren<{
   testID?: string
-  isMuted: boolean
+  isMuted?: boolean
   labels: ComAtprotoLabelDefs.Label[] | undefined
   style?: StyleProp<ViewStyle>
+  containerStyle?: StyleProp<ViewStyle>
 }>) {
   const pal = usePalette('default')
   const [override, setOverride] = React.useState(false)
@@ -43,17 +45,13 @@ export function ContentContainer({
   }
 
   return (
-    <View style={[styles.container, pal.view, pal.border]}>
+    <View style={[styles.container, pal.view, pal.border, containerStyle]}>
       <View
         style={[
           styles.description,
           pal.viewLight,
           override && styles.descriptionOpen,
         ]}>
-        <FontAwesomeIcon
-          icon={['far', 'eye-slash']}
-          style={[styles.icon, pal.text]}
-        />
         <Text type="md" style={pal.textLight}>
           {isMuted ? (
             <>Post from an account you muted.</>
@@ -92,7 +90,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 14,
-    paddingHorizontal: 18,
+    paddingLeft: 14,
+    paddingRight: 18,
     borderRadius: 12,
   },
   descriptionOpen: {
@@ -106,7 +105,7 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
   },
   childrenContainer: {
-    paddingHorizontal: 8,
+    paddingHorizontal: 12,
     paddingTop: 8,
   },
   child: {},

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

@@ -9,12 +9,12 @@ import {
 import {ComAtprotoLabelDefs} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
-import {Link} from './Link'
+import {Link} from '../Link'
-import {Text} from './text/Text'
+import {Text} from '../text/Text'
 import {getLabelValueGroup} from 'lib/labeling/helpers'
 import {addStyle} from 'lib/styles'
 
-export function PostContainer({
+export function PostHider({
   testID,
   href,
   isMuted,
@@ -24,7 +24,7 @@ export function PostContainer({
 }: React.PropsWithChildren<{
   testID?: string
   href: string
-  isMuted: boolean
+  isMuted: boolean | undefined
   labels: ComAtprotoLabelDefs.Label[] | undefined
   style: StyleProp<ViewStyle>
 }>) {
@@ -32,7 +32,14 @@ export function PostContainer({
   const [override, setOverride] = React.useState(false)
   const bg = override ? pal.viewLight : pal.view
 
-  if (!isMuted && !labels?.length) {
+  const label = labels?.[0] // TODO use config to settle on most relevant item
+  const labelGroup = getLabelValueGroup(label?.val || '')
+  if (labelGroup.id === 'illegal') {
+    return <></>
+  }
+
+  if (!isMuted) {
+    // NOTE: any further label enforcement should occur in ContentContainer
     return (
       <Link testID={testID} style={style} href={href} noFeedback>
         {children}
@@ -40,12 +47,6 @@ export function PostContainer({
     )
   }
 
-  const label = labels?.[0] // TODO use config to settle on most relevant item
-  const labelGroup = getLabelValueGroup(label?.val || '')
-  if (labelGroup.id === 'illegal') {
-    return <></>
-  }
-
   return (
     <>
       <View style={[styles.description, bg, pal.border]}>
@@ -54,13 +55,7 @@ export function PostContainer({
           style={[styles.icon, pal.text]}
         />
         <Text type="md" style={pal.textLight}>
-          {isMuted ? (
+          Post from an account you muted.
-            <>Post from an account you muted.</>
-          ) : label ? (
-            <>Warning: {labelGroup.title}</>
-          ) : (
-            ''
-          )}
         </Text>
         <TouchableOpacity
           style={styles.showBtn}