Add content hiding to expanded post form

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

@@ -23,6 +23,7 @@ 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 {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 
@@ -193,17 +194,24 @@ export const PostThreadItem = observer(function PostThreadItem({
           </View>
         </View>
         <View style={[s.pl10, s.pr10, s.pb10]}>
-          {item.richText?.text ? (
+          <ContentContainer
-            <View
+            isMuted={item.post.author.viewer?.muted === true}
-              style={[styles.postTextContainer, styles.postTextLargeContainer]}>
+            labels={item.post.labels}>
-              <RichText
+            {item.richText?.text ? (
-                type="post-text-lg"
+              <View
-                richText={item.richText}
+                style={[
-                lineHeight={1.3}
+                  styles.postTextContainer,
-              />
+                  styles.postTextLargeContainer,
-            </View>
+                ]}>
-          ) : undefined}
+                <RichText
-          <PostEmbeds embed={item.post.embed} style={s.mb10} />
+                  type="post-text-lg"
+                  richText={item.richText}
+                  lineHeight={1.3}
+                />
+              </View>
+            ) : undefined}
+            <PostEmbeds embed={item.post.embed} style={s.mb10} />
+          </ContentContainer>
           {item._isHighlightedPost && hasEngagement ? (
             <View style={[styles.expandedInfo, pal.border]}>
               {item.post.repostCount ? (

src/view/com/util/ContentContainer.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {ComAtprotoLabelDefs} from '@atproto/api'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from './text/Text'
+import {getLabelValueGroup} from 'lib/labeling/helpers'
+import {addStyle} from 'lib/styles'
+
+export function ContentContainer({
+  testID,
+  isMuted,
+  labels,
+  style,
+  children,
+}: React.PropsWithChildren<{
+  testID?: string
+  isMuted: boolean
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+  style?: StyleProp<ViewStyle>
+}>) {
+  const pal = usePalette('default')
+  const [override, setOverride] = React.useState(false)
+
+  if (!isMuted && !labels?.length) {
+    return (
+      <View testID={testID} style={style}>
+        {children}
+      </View>
+    )
+  }
+
+  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.container, pal.view, pal.border]}>
+      <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.</>
+          ) : label ? (
+            <>Warning: {labelGroup.title}</>
+          ) : (
+            ''
+          )}
+        </Text>
+        <TouchableOpacity
+          style={styles.showBtn}
+          onPress={() => setOverride(v => !v)}>
+          <Text type="md" style={pal.link}>
+            {override ? 'Hide' : 'Show'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      {override && (
+        <View style={[styles.childrenContainer, pal.border]}>
+          <View testID={testID} style={addStyle(style, styles.child)}>
+            {children}
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 10,
+    borderWidth: 1,
+    borderRadius: 12,
+  },
+  description: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    borderRadius: 12,
+  },
+  descriptionOpen: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+  icon: {
+    marginRight: 10,
+  },
+  showBtn: {
+    marginLeft: 'auto',
+  },
+  childrenContainer: {
+    paddingHorizontal: 8,
+    paddingTop: 8,
+  },
+  child: {},
+})

src/view/com/util/PostContainer.tsx

@@ -24,9 +24,9 @@ export function PostContainer({
 }: React.PropsWithChildren<{
   testID?: string
   href: string
-  isMuted?: boolean
+  isMuted: boolean
-  style: StyleProp<ViewStyle>
   labels: ComAtprotoLabelDefs.Label[] | undefined
+  style: StyleProp<ViewStyle>
 }>) {
   const pal = usePalette('default')
   const [override, setOverride] = React.useState(false)