Create a standard postcontainer and improve show/hide UI on posts

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

@@ -22,7 +22,7 @@ import {useStores} from 'state/index'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostHider} from '../util/PostHider'
+import {PostContainer} from '../util/PostContainer'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {usePalette} from 'lib/hooks/usePalette'
 
@@ -270,15 +270,13 @@ export const PostThreadItem = observer(function PostThreadItem({
     )
   } else {
     return (
-      <PostHider
+      <>
+        <PostContainer
+          testID={`postThreadItem-by-${item.post.author.handle}`}
+          href={itemHref}
+          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
           isMuted={item.post.author.viewer?.muted === true}
           labels={item.post.labels}>
-        <Link
-          testID={`postThreadItem-by-${item.post.author.handle}`}
-          style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}
-          href={itemHref}
-          title={itemTitle}
-          noFeedback>
           {item._showParentReplyLine && (
             <View
               style={[
@@ -347,7 +345,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               />
             </View>
           </View>
-        </Link>
+        </PostContainer>
         {item._hasMore ? (
           <Link
             style={[
@@ -366,7 +364,7 @@ export const PostThreadItem = observer(function PostThreadItem({
             />
           </Link>
         ) : undefined}
-      </PostHider>
+      </>
     )
   }
 })

src/view/com/post/Post.tsx

@@ -17,7 +17,7 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/PostCtrls'
-import {PostHider} from '../util/PostHider'
+import {PostContainer} from '../util/PostContainer'
 import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
@@ -150,14 +150,11 @@ export const Post = observer(function Post({
   }
 
   return (
-    <PostHider
+    <PostContainer
+      href={itemHref}
+      style={[styles.outer, pal.view, pal.border, style]}
       isMuted={item.post.author.viewer?.muted === true}
       labels={item.post.labels}>
-      <Link
-        style={[styles.outer, pal.view, pal.border, style]}
-        href={itemHref}
-        title={itemTitle}
-        noFeedback>
       {showReplyLine && <View style={styles.replyLine} />}
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
@@ -228,8 +225,7 @@ export const Post = observer(function Post({
           />
         </View>
       </View>
-      </Link>
+    </PostContainer>
-    </PostHider>
   )
 })
 

src/view/com/posts/FeedItem.tsx

@@ -14,7 +14,7 @@ import {UserInfoText} from '../util/UserInfoText'
 import {PostMeta} from '../util/PostMeta'
 import {PostCtrls} from '../util/PostCtrls'
 import {PostEmbeds} from '../util/post-embeds'
-import {PostHider} from '../util/PostHider'
+import {PostContainer} from '../util/PostContainer'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -132,13 +132,12 @@ export const FeedItem = observer(function ({
   ]
 
   return (
-    <PostHider isMuted={isMuted} labels={item.post.labels}>
+    <PostContainer
-      <Link
       testID={`feedItem-by-${item.post.author.handle}`}
       style={outerStyles}
       href={itemHref}
-        title={itemTitle}
+      isMuted={isMuted}
-        noFeedback>
+      labels={item.post.labels}>
       {isThreadChild && (
         <View
           style={[styles.topReplyLine, {borderColor: pal.colors.replyLine}]}
@@ -179,8 +178,7 @@ export const FeedItem = observer(function ({
               lineHeight={1.2}
               numberOfLines={1}
               text={sanitizeDisplayName(
-                  item.reasonRepost.by.displayName ||
+                item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
-                    item.reasonRepost.by.handle,
               )}
               href={`/profile/${item.reasonRepost.by.handle}`}
             />
@@ -261,8 +259,7 @@ export const FeedItem = observer(function ({
           />
         </View>
       </View>
-      </Link>
+    </PostContainer>
-    </PostHider>
   )
 })
 

src/view/com/util/PostContainer.tsx

@@ -1,25 +1,43 @@
 import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
+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 {Link} from './Link'
 import {Text} from './text/Text'
 import {getLabelValueGroup} from 'lib/labeling/helpers'
+import {addStyle} from 'lib/styles'
 
-export function PostHider({
+export function PostContainer({
+  testID,
+  href,
   isMuted,
   labels,
+  style,
   children,
 }: React.PropsWithChildren<{
+  testID?: string
+  href: string
   isMuted?: boolean
+  style: StyleProp<ViewStyle>
   labels: ComAtprotoLabelDefs.Label[] | undefined
 }>) {
   const pal = usePalette('default')
-  const palError = usePalette('error')
   const [override, setOverride] = React.useState(false)
+  const bg = override ? pal.viewLight : pal.view
 
   if (!isMuted && !labels?.length) {
-    return <>{children}</>
+    return (
+      <Link testID={testID} style={style} href={href} noFeedback>
+        {children}
+      </Link>
+    )
   }
 
   const label = labels?.[0] // TODO use config to settle on most relevant item
@@ -29,8 +47,8 @@ export function PostHider({
   }
 
   return (
-    <View style={[styles.container, pal.view]}>
+    <>
-      <View style={[styles.description, pal.view, pal.border]}>
+      <View style={[styles.description, bg, pal.border]}>
         <FontAwesomeIcon
           icon={['far', 'eye-slash']}
           style={[styles.icon, pal.text]}
@@ -53,12 +71,17 @@ export function PostHider({
         </TouchableOpacity>
       </View>
       {override && (
-        <View
+        <View style={[styles.childrenContainer, pal.border, bg]}>
-          style={[styles.childrenContainer, pal.border, palError.viewLight]}>
+          <Link
+            testID={testID}
+            style={addStyle(style, styles.child)}
+            href={href}
+            noFeedback>
             {children}
+          </Link>
         </View>
       )}
-    </View>
+    </>
   )
 }
 
@@ -78,6 +101,10 @@ const styles = StyleSheet.create({
   },
   childrenContainer: {
     paddingHorizontal: 6,
-    paddingVertical: 6,
+    paddingBottom: 6,
+  },
+  child: {
+    borderWidth: 1,
+    borderRadius: 12,
   },
 })