Some linear mode cleanup

src/screens/PostThread/components/ReadMore.tsx

@@ -4,7 +4,12 @@ import {useLingui} from '@lingui/react'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {type PostThreadParams, type Slice} from '#/state/queries/usePostThread'
-import {TREE_AVI_WIDTH, TREE_INDENT} from '#/screens/PostThread/const'
+import {
+  LINEAR_AVI_WIDTH,
+  REPLY_LINE_WIDTH,
+  TREE_AVI_WIDTH,
+  TREE_INDENT,
+} from '#/screens/PostThread/const'
 import {atoms as a, useTheme} from '#/alf'
 import {CirclePlus_Stroke2_Corner0_Rounded as CirclePlus} from '#/components/icons/CirclePlus'
 import {Link} from '#/components/Link'
@@ -20,46 +25,39 @@ export function ReadMore({
   const t = useTheme()
   const {_} = useLingui()
   const isTreeView = view === 'tree'
-  const indentCount = Math.max(0, item.indent - 1)
+  const indent = Math.max(0, item.indent - 1)
 
-  const treeIndents = isTreeView ? (
-    Array.from(Array(indentCount)).map((_, n: number) => (
-      <View
-        key={`${item.key}-padding-${n}`}
-        style={[
-          t.atoms.border_contrast_low,
-          {
-            borderRightWidth: 2,
-            width: TREE_INDENT + TREE_AVI_WIDTH / 2,
-            left: 1,
-          },
-        ]}
-      />
-    ))
-  ) : indentCount > 0 ? (
-    <View
-      style={[
-        // avi width minus border, divided by 2
-        {width: (42 - 2) / 2},
-      ]}
-    />
-  ) : null
+  const spacers = isTreeView
+    ? Array.from(Array(indent)).map((_, n: number) => (
+        <View
+          key={`${item.key}-padding-${n}`}
+          style={[
+            t.atoms.border_contrast_low,
+            {
+              borderRightWidth: REPLY_LINE_WIDTH,
+              width: TREE_INDENT + TREE_AVI_WIDTH / 2,
+              left: 1,
+            },
+          ]}
+        />
+      ))
+    : null
 
   return (
     <View style={[a.flex_row]}>
-      {treeIndents}
+      {spacers}
       <View
         style={[
           t.atoms.border_contrast_low,
           {
             marginLeft: isTreeView
               ? TREE_INDENT + TREE_AVI_WIDTH / 2 - 1
-              : TREE_INDENT,
+              : (LINEAR_AVI_WIDTH - REPLY_LINE_WIDTH) / 2 + 16,
             borderLeftWidth: 2,
             borderBottomWidth: 2,
             borderBottomLeftRadius: a.rounded_sm.borderRadius,
             height: '50%',
-            width: isTreeView ? TREE_INDENT : 42 / 2 + 10,
+            width: isTreeView ? TREE_INDENT : LINEAR_AVI_WIDTH / 2 + 10,
           },
         ]}
       />

src/screens/PostThread/components/ThreadPost.tsx

@@ -29,6 +29,11 @@ import {PostCtrls} from '#/view/com/util/post-ctrls/PostCtrls'
 import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
+import {
+  LINEAR_AVI_WIDTH,
+  OUTER_SPACE,
+  REPLY_LINE_WIDTH,
+} from '#/screens/PostThread/const'
 import {atoms as a, useTheme} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
@@ -180,37 +185,37 @@ let PostThreadItemLoaded = ({
     <SubtleHover>
       <View
         style={[
-          a.px_sm,
           a.pointer,
           showTopBorder && [a.border_t, t.atoms.border_contrast_low],
+          {
+            paddingHorizontal: OUTER_SPACE,
+          },
+          // If there's no next child, add a little padding to bottom
+          !item.ui.showChildReplyLine && {
+            paddingBottom: OUTER_SPACE / 2,
+          },
         ]}>
         <PostHider
           testID={`postThreadItem-by-${post.author.handle}`}
           href={postHref}
           disabled={overrides?.moderation === true}
           modui={moderation.ui('contentList')}
-          iconSize={42}
+          iconSize={LINEAR_AVI_WIDTH}
           iconStyles={{marginLeft: 2, marginRight: 2}}
           profile={post.author}
           interpretFilterAsBlur>
-          <View
-            style={{
-              flexDirection: 'row',
-              gap: 10,
-              paddingLeft: 8,
-              height: 16,
-            }}>
-            <View style={{width: 42}}>
+          {/* Provides some space between posts as well as contains the reply line */}
+          <View style={[a.flex_row, {height: a.pt_md.paddingTop}]}>
+            <View style={{width: LINEAR_AVI_WIDTH}}>
               {item.ui.showParentReplyLine && (
                 <View
                   style={[
+                    a.mx_auto,
+                    a.flex_1,
+                    a.mb_xs,
                     {
-                      width: 2,
-                      marginLeft: 'auto',
-                      marginRight: 'auto',
-                      flexGrow: 1,
-                      backgroundColor: pal.colors.replyLine,
-                      marginBottom: 4,
+                      width: REPLY_LINE_WIDTH,
+                      backgroundColor: t.atoms.border_contrast_low.borderColor,
                     },
                   ]}
                 />
@@ -218,19 +223,10 @@ let PostThreadItemLoaded = ({
             </View>
           </View>
 
-          <View
-            style={[
-              a.flex_row,
-              a.px_sm,
-              a.gap_md,
-              {
-                paddingBottom: item.ui.showChildReplyLine ? 0 : 8,
-              },
-            ]}>
-            {/* If we are in threaded mode, the avatar is rendered in PostMeta */}
+          <View style={[a.flex_row, a.gap_md]}>
             <View>
               <PreviewableUserAvatar
-                size={42}
+                size={LINEAR_AVI_WIDTH}
                 profile={post.author}
                 moderation={moderation.ui('avatar')}
                 type={post.author.associated?.labeler ? 'labeler' : 'user'}
@@ -240,13 +236,12 @@ let PostThreadItemLoaded = ({
               {item.ui.showChildReplyLine && (
                 <View
                   style={[
+                    a.mx_auto,
+                    a.mt_xs,
+                    a.flex_1,
                     {
-                      width: 2,
-                      marginLeft: 'auto',
-                      marginRight: 'auto',
-                      flexGrow: 1,
-                      backgroundColor: pal.colors.replyLine,
-                      marginTop: 4,
+                      width: REPLY_LINE_WIDTH,
+                      backgroundColor: t.atoms.border_contrast_low.borderColor,
                     },
                   ]}
                 />
@@ -259,7 +254,6 @@ let PostThreadItemLoaded = ({
                 moderation={moderation}
                 timestamp={post.indexedAt}
                 postHref={postHref}
-                avatarSize={24}
                 style={[a.pb_xs]}
               />
               <LabelsOnMyPost post={post} style={[a.pb_xs]} />
@@ -269,16 +263,14 @@ let PostThreadItemLoaded = ({
                 additionalCauses={additionalPostAlerts}
               />
               {richText?.text ? (
-                <View style={[a.pb_2xs, a.pr_sm]}>
-                  <RichText
-                    enableTags
-                    value={richText}
-                    style={[a.flex_1, a.text_md]}
-                    numberOfLines={limitLines ? MAX_POST_LINES : undefined}
-                    authorHandle={post.author.handle}
-                    shouldProxyLinks={true}
-                  />
-                </View>
+                <RichText
+                  enableTags
+                  value={richText}
+                  style={[a.flex_1, a.text_md]}
+                  numberOfLines={limitLines ? MAX_POST_LINES : undefined}
+                  authorHandle={post.author.handle}
+                  shouldProxyLinks={true}
+                />
               ) : undefined}
               {limitLines ? (
                 <TextLink

src/screens/PostThread/const.ts

@@ -1,2 +1,5 @@
 export const TREE_INDENT = 16
 export const TREE_AVI_WIDTH = 24
+export const LINEAR_AVI_WIDTH = 42
+export const REPLY_LINE_WIDTH = 2
+export const OUTER_SPACE = 16