Always show the header on post threads on native (#4254)

* always show header on native

* ALF ALF ALF

* rm offset for top border

* wrap in a `CenteredView`

* use `CenteredView`'s side borders

* account for loading state on web

* move `isTabletOrMobile`

* hide top border on first post in list

* show border if parents are loading

* don't show top border for deleted or blocked posts

* hide top border for hidden replies

* Rm root post top border

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 36 insertions, 7 deletions

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 0ff040b9c..99fbda6d2 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -65,6 +65,7 @@ export function PostThreadItem({
   hasPrecedingItem,
   overrideBlur,
   onPostReply,
+  hideTopBorder,
 }: {
   post: AppBskyFeedDefs.PostView
   record: AppBskyFeedPost.Record
@@ -80,6 +81,7 @@ export function PostThreadItem({
   hasPrecedingItem: boolean
   overrideBlur: boolean
   onPostReply: () => void
+  hideTopBorder?: boolean
 }) {
   const postShadowed = usePostShadow(post)
   const richText = useMemo(
@@ -91,7 +93,7 @@ export function PostThreadItem({
     [record],
   )
   if (postShadowed === POST_TOMBSTONE) {
-    return <PostThreadItemDeleted />
+    return <PostThreadItemDeleted hideTopBorder={hideTopBorder} />
   }
   if (richText && moderation) {
     return (
@@ -113,16 +115,25 @@ export function PostThreadItem({
         hasPrecedingItem={hasPrecedingItem}
         overrideBlur={overrideBlur}
         onPostReply={onPostReply}
+        hideTopBorder={hideTopBorder}
       />
     )
   }
   return null
 }
 
-function PostThreadItemDeleted() {
+function PostThreadItemDeleted({hideTopBorder}: {hideTopBorder?: boolean}) {
   const pal = usePalette('default')
   return (
-    <View style={[styles.outer, pal.border, pal.view, s.p20, s.flexRow]}>
+    <View
+      style={[
+        styles.outer,
+        pal.border,
+        pal.view,
+        s.p20,
+        s.flexRow,
+        hideTopBorder && styles.noTopBorder,
+      ]}>
       <FontAwesomeIcon icon={['far', 'trash-can']} color={pal.colors.icon} />
       <Text style={[pal.textLight, s.ml10]}>
         <Trans>This post has been deleted.</Trans>
@@ -147,6 +158,7 @@ let PostThreadItemLoaded = ({
   hasPrecedingItem,
   overrideBlur,
   onPostReply,
+  hideTopBorder,
 }: {
   post: Shadow<AppBskyFeedDefs.PostView>
   record: AppBskyFeedPost.Record
@@ -163,6 +175,7 @@ let PostThreadItemLoaded = ({
   hasPrecedingItem: boolean
   overrideBlur: boolean
   onPostReply: () => void
+  hideTopBorder?: boolean
 }): React.ReactNode => {
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -237,7 +250,7 @@ let PostThreadItemLoaded = ({
                   styles.replyLine,
                   {
                     flexGrow: 1,
-                    backgroundColor: pal.colors.border,
+                    backgroundColor: pal.colors.replyLine,
                   },
                 ]}
               />
@@ -247,7 +260,14 @@ let PostThreadItemLoaded = ({
 
         <View
           testID={`postThreadItem-by-${post.author.handle}`}
-          style={[styles.outer, styles.outerHighlighted, pal.border, pal.view]}
+          style={[
+            styles.outer,
+            styles.outerHighlighted,
+            pal.border,
+            pal.view,
+            rootUri === post.uri && styles.outerHighlightedRoot,
+            hideTopBorder && styles.noTopBorder,
+          ]}
           accessible={false}>
           <View style={[styles.layout]}>
             <View style={[styles.layoutAvi, {paddingBottom: 8}]}>
@@ -395,7 +415,8 @@ let PostThreadItemLoaded = ({
           depth={depth}
           showParentReplyLine={!!showParentReplyLine}
           treeView={treeView}
-          hasPrecedingItem={hasPrecedingItem}>
+          hasPrecedingItem={hasPrecedingItem}
+          hideTopBorder={hideTopBorder}>
           <PostHider
             testID={`postThreadItem-by-${post.author.handle}`}
             href={postHref}
@@ -574,6 +595,7 @@ function PostOuterWrapper({
   depth,
   showParentReplyLine,
   hasPrecedingItem,
+  hideTopBorder,
   children,
 }: React.PropsWithChildren<{
   post: AppBskyFeedDefs.PostView
@@ -581,6 +603,7 @@ function PostOuterWrapper({
   depth: number
   showParentReplyLine: boolean
   hasPrecedingItem: boolean
+  hideTopBorder?: boolean
 }>) {
   const {isMobile} = useWebMediaQueries()
   const pal = usePalette('default')
@@ -617,6 +640,7 @@ function PostOuterWrapper({
         styles.outer,
         pal.border,
         showParentReplyLine && hasPrecedingItem && styles.noTopBorder,
+        hideTopBorder && styles.noTopBorder,
         styles.cursor,
       ]}>
       {children}
@@ -677,10 +701,15 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
   },
   outerHighlighted: {
-    paddingTop: 16,
+    borderTopWidth: 0,
+    paddingTop: 4,
     paddingLeft: 8,
     paddingRight: 8,
   },
+  outerHighlightedRoot: {
+    borderTopWidth: 1,
+    paddingTop: 16,
+  },
   noTopBorder: {
     borderTopWidth: 0,
   },