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 {ContentContainer} from '../util/ContentContainer'
+import {PostHider} from '../util/moderation/PostHider'
+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,17 +315,22 @@ export const PostThreadItem = observer(function PostThreadItem({
                 postHref={itemHref}
                 did={item.post.author.did}
               />
-              {item.richText?.text ? (
-                <View style={styles.postTextContainer}>
-                  <RichText
-                    type="post-text"
-                    richText={item.richText}
-                    style={pal.text}
-                    lineHeight={1.3}
-                  />
-                </View>
-              ) : undefined}
-              <PostEmbeds embed={item.post.embed} style={s.mb10} />
+              <ContentHider
+                isMuted={item.post.author.viewer?.muted === true}
+                labels={item.post.labels}
+                containerStyle={styles.contentHider}>
+                {item.richText?.text ? (
+                  <View style={styles.postTextContainer}>
+                    <RichText
+                      type="post-text"
+                      richText={item.richText}
+                      style={pal.text}
+                      lineHeight={1.3}
+                    />
+                  </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,