Tune the treeview UI a bit more (#1494)

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

@@ -103,12 +103,6 @@ export const PostThread = observer(function PostThread({
     return []
   }, [view.isLoadingFromCache, view.thread, maxVisible])
   const highlightedPostIndex = posts.findIndex(post => post._isHighlightedPost)
-  const showBottomBorder =
-    !treeView ||
-    // in the treeview, only show the bottom border
-    // if there are replies under the highlighted posts
-    posts.findLast(v => v instanceof PostThreadItemModel) !==
-      posts[highlightedPostIndex]
   useSetTitle(
     view.thread?.postRecord &&
       `${sanitizeDisplayName(
@@ -194,10 +188,7 @@ export const PostThread = observer(function PostThread({
         )
       } else if (item === REPLY_PROMPT) {
         return (
-          <View
+          <View>
-            style={
-              treeView && [pal.border, {borderBottomWidth: 1, marginBottom: 6}]
-            }>
             {isDesktopWeb && <ComposePrompt onPressCompose={onPressReply} />}
           </View>
         )
@@ -242,14 +233,11 @@ export const PostThread = observer(function PostThread({
         // -prf
         return (
           <View
-            style={[
+            style={{
-              {height: 400},
+              height: 400,
-              showBottomBorder && {
+              borderTopWidth: 1,
-                borderTopWidth: 1,
+              borderColor: pal.colors.border,
-                borderColor: pal.colors.border,
+            }}
-              },
-              treeView && {marginTop: 10},
-            ]}
           />
         )
       } else if (item === CHILD_SPINNER) {
@@ -273,7 +261,7 @@ export const PostThread = observer(function PostThread({
       }
       return <></>
     },
-    [onRefresh, onPressReply, pal, posts, isTablet, treeView, showBottomBorder],
+    [onRefresh, onPressReply, pal, posts, isTablet, treeView],
   )
 
   // loading

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

@@ -166,7 +166,7 @@ export const PostThreadItem = observer(function PostThreadItem({
     return (
       <>
         {item.rootUri !== item.uri && (
-          <View style={{paddingLeft: 18, flexDirection: 'row', height: 16}}>
+          <View style={{paddingLeft: 16, flexDirection: 'row', height: 16}}>
             <View style={{width: 52}}>
               <View
                 style={[
@@ -432,33 +432,36 @@ export const PostThreadItem = observer(function PostThreadItem({
             style={[
               styles.layout,
               {
-                paddingBottom: item._showChildReplyLine ? 0 : 8,
+                paddingBottom:
+                  item._showChildReplyLine && !isThreadedChild ? 0 : 8,
               },
             ]}>
-            <View style={styles.layoutAvi}>
+            {!isThreadedChild && (
-              <PreviewableUserAvatar
+              <View style={styles.layoutAvi}>
-                size={isThreadedChild ? 24 : 52}
+                <PreviewableUserAvatar
-                did={item.post.author.did}
+                  size={isThreadedChild ? 36 : 52}
-                handle={item.post.author.handle}
+                  did={item.post.author.did}
-                avatar={item.post.author.avatar}
+                  handle={item.post.author.handle}
-                moderation={item.moderation.avatar}
+                  avatar={item.post.author.avatar}
-              />
+                  moderation={item.moderation.avatar}
-
-              {item._showChildReplyLine && (
-                <View
-                  style={[
-                    styles.replyLine,
-                    {
-                      flexGrow: 1,
-                      backgroundColor: isThreadedChild
-                        ? pal.colors.border
-                        : pal.colors.replyLine,
-                      marginTop: 4,
-                    },
-                  ]}
                 />
-              )}
+
-            </View>
+                {item._showChildReplyLine && (
+                  <View
+                    style={[
+                      styles.replyLine,
+                      {
+                        flexGrow: 1,
+                        backgroundColor: isThreadedChild
+                          ? pal.colors.border
+                          : pal.colors.replyLine,
+                        marginTop: 4,
+                      },
+                    ]}
+                  />
+                )}
+              </View>
+            )}
 
             <View style={styles.layoutContent}>
               <PostMeta
@@ -466,6 +469,11 @@ export const PostThreadItem = observer(function PostThreadItem({
                 authorHasWarning={!!item.post.author.labels?.length}
                 timestamp={item.post.indexedAt}
                 postHref={itemHref}
+                showAvatar={isThreadedChild}
+                avatarSize={26}
+                displayNameType="md-bold"
+                displayNameStyle={s.ml2}
+                style={isThreadedChild && s.mb5}
               />
               <PostAlerts
                 moderation={item.moderation.content}
@@ -475,7 +483,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                 <View
                   style={[
                     styles.postTextContainer,
-                    isThreadedChild && {paddingTop: 2},
+                    // isThreadedChild && {paddingTop: 2},
                   ]}>
                   <RichText
                     type="post-text"
@@ -525,7 +533,7 @@ export const PostThreadItem = observer(function PostThreadItem({
               style={[
                 styles.loadMore,
                 {
-                  paddingLeft: treeView ? 44 : 70,
+                  paddingLeft: treeView ? 8 : 70,
                   paddingTop: 0,
                   paddingBottom: treeView ? 4 : 12,
                 },
@@ -566,8 +574,14 @@ function PostOuterWrapper({
       <View
         style={[
           pal.view,
+          pal.border,
           styles.cursor,
-          {flexDirection: 'row', paddingLeft: 10},
+          {
+            flexDirection: 'row',
+            paddingLeft: 10,
+            borderTopWidth: item._depth === 1 ? 1 : 0,
+            paddingTop: item._depth === 1 ? 8 : 0,
+          },
         ]}>
         {Array.from(Array(item._depth - 1)).map((_, n: number) => (
           <View
@@ -575,8 +589,8 @@ function PostOuterWrapper({
             style={{
               borderLeftWidth: 2,
               borderLeftColor: pal.colors.border,
-              marginLeft: 19,
+              marginLeft: isMobile ? 6 : 14,
-              paddingLeft: isMobile ? 0 : 4,
+              paddingLeft: isMobile ? 6 : 12,
             }}
           />
         ))}
@@ -626,12 +640,12 @@ function ExpandedPostDetails({
 const styles = StyleSheet.create({
   outer: {
     borderTopWidth: 1,
-    paddingLeft: 10,
+    paddingLeft: 8,
   },
   outerHighlighted: {
     paddingTop: 16,
-    paddingLeft: 10,
+    paddingLeft: 8,
-    paddingRight: 10,
+    paddingRight: 8,
   },
   noTopBorder: {
     borderTopWidth: 0,

src/view/com/util/PostMeta.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 import {Text} from './text/Text'
 import {DesktopWebTextLink} from './Link'
 import {niceDate} from 'lib/strings/time'
 import {usePalette} from 'lib/hooks/usePalette'
+import {TypographyVariant} from 'lib/ThemeContext'
 import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
@@ -19,10 +20,14 @@ interface PostMetaOpts {
     handle: string
     displayName?: string | undefined
   }
-  showAvatar?: boolean
   authorHasWarning: boolean
   postHref: string
   timestamp: string
+  showAvatar?: boolean
+  avatarSize?: number
+  displayNameType?: TypographyVariant
+  displayNameStyle?: StyleProp<TextStyle>
+  style?: StyleProp<ViewStyle>
 }
 
 export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
@@ -31,20 +36,20 @@ export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
   const handle = opts.author.handle
 
   return (
-    <View style={styles.metaOneLine}>
+    <View style={[styles.container, opts.style]}>
-      {opts.showAvatar && typeof opts.author.avatar !== 'undefined' && (
+      {opts.showAvatar && (
         <View style={styles.avatar}>
           <UserAvatar
             avatar={opts.author.avatar}
-            size={16}
+            size={opts.avatarSize || 16}
             // TODO moderation
           />
         </View>
       )}
       <View style={styles.maxWidth}>
         <DesktopWebTextLink
-          type="lg-bold"
+          type={opts.displayNameType || 'lg-bold'}
-          style={pal.text}
+          style={[pal.text, opts.displayNameStyle]}
           numberOfLines={1}
           lineHeight={1.2}
           text={
@@ -90,12 +95,13 @@ export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) {
 })
 
 const styles = StyleSheet.create({
-  metaOneLine: {
+  container: {
     flexDirection: 'row',
-    alignItems: isAndroid ? 'center' : 'baseline',
+    alignItems: 'center',
     paddingBottom: 2,
     gap: 4,
     zIndex: 1,
+    flex: 1,
   },
   avatar: {
     alignSelf: 'center',