Improve the UX around Post replies when on a post page

Author: markharding

apps/polycentric/src/features/composer/ComposerInput.tsx

@@ -6,11 +6,16 @@ import { Atoms, useTheme, withHexOpacity } from '@/src/common/theme';
 import { Ionicons } from '@expo/vector-icons';
 import { Pressable, StyleSheet, View } from 'react-native';
 
+interface ComposerInputProps {
+  /** When set, opens the composer pre-filled to reply to this post. */
+  replyTo?: { identityId: string; sequence: string };
+}
+
 /**
  * A non-interactive placeholder that looks like a composer input. Tapping
  * anywhere on it opens the full compose modal.
  */
-export function ComposerInput() {
+export function ComposerInput({ replyTo }: ComposerInputProps = {}) {
   const { identity: currentIdentity } = useCurrentIdentity();
   const { theme } = useTheme();
   const { hovered, onHoverIn, onHoverOut } = useWebHover();
@@ -30,7 +35,7 @@ export function ComposerInput() {
   return (
     <Pressable
       accessibilityLabel="New post"
-      onPress={() => openCompose()}
+      onPress={() => openCompose({ replyTo })}
       onHoverIn={onHoverIn}
       onHoverOut={onHoverOut}
       style={[
@@ -49,14 +54,14 @@ export function ComposerInput() {
     >
       <ProfileAvatar identityKey={currentIdentity.identityKey} size="md" />
       <Text variant="body" color="neutral_500" style={Atoms.flex_1}>
-        What&apos;s on your mind?
+        {replyTo ? 'Post your reply' : "What's on your mind?"}
       </Text>
       <Pressable
         accessibilityRole="button"
         accessibilityLabel="Attach image"
         onPress={(e) => {
           e.stopPropagation?.();
-          openCompose({ attachImage: true });
+          openCompose({ attachImage: true, replyTo });
         }}
         onHoverIn={onAttachHoverIn}
         onHoverOut={onAttachHoverOut}

apps/polycentric/src/features/post/ConversationView.tsx

@@ -1,9 +1,19 @@
 import { useCallback, useMemo, useState } from 'react';
-import { RefreshControl, StyleSheet, View } from 'react-native';
+import {
+  RefreshControl,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { FlashList } from '@shopify/flash-list';
-import { type PostData } from '@/src/common/lib/polycentric-hooks';
+import {
+  postIdToSequence,
+  type PostData,
+} from '@/src/common/lib/polycentric-hooks';
 import { Post } from './Post';
 import { usePostById } from './hooks/usePostById';
+import { Atoms } from '@/src/common/theme';
+import { ComposerInput } from '../composer';
 
 interface ConversationViewProps {
   post: PostData;
@@ -14,6 +24,7 @@ interface ConversationViewProps {
 // supported.
 export function ConversationView({ post }: ConversationViewProps) {
   const [refreshing, setRefreshing] = useState(false);
+  const { height: windowHeight } = useWindowDimensions();
 
   const { post: rootPost } = usePostById(
     post.reply?.root?.identity,
@@ -38,28 +49,34 @@ export function ConversationView({ post }: ConversationViewProps) {
     setTimeout(() => setRefreshing(false), 0);
   }, []);
 
+  const replyTo = useMemo(() => {
+    if (!post.identity) return undefined;
+    const sequence = postIdToSequence(post.id);
+    if (!sequence) return undefined;
+    return { identityId: post.identity, sequence };
+  }, [post.id, post.identity]);
+
   return (
     <FlashList
       data={items}
       keyExtractor={(p) => p.id}
-      renderItem={({ item }) => (
-        <View style={styles.row}>
+      renderItem={({ item, index }) => (
+        <View style={[Atoms.w_full]}>
           <Post
             post={item}
             hideReplyingTo={false}
             disablePress={item.id === post.id}
+            showThreadLineAbove={!!item.reply?.parent}
+            showThreadLineBelow={index < items.length - 1}
+            hideBottomBorder={item.id !== post.id}
           />
+          {item.id === post.id ? <ComposerInput replyTo={replyTo} /> : null}
         </View>
       )}
+      ListFooterComponent={<View style={{ height: windowHeight }} />}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
       }
     />
   );
 }
-
-const styles = StyleSheet.create({
-  row: {
-    width: '100%',
-  },
-});

apps/polycentric/src/features/post/Post.tsx

@@ -27,12 +27,21 @@ interface PostProps {
   hideReplyingTo?: boolean;
   /** When true, tapping the card root is a no-op (e.g. the focused post in a conversation). */
   disablePress?: boolean;
+  /** Draw a vertical line above the avatar — connects up to the previous post. */
+  showThreadLineAbove?: boolean;
+  /** Draw a vertical line below the avatar — connects down to the next post. */
+  showThreadLineBelow?: boolean;
+  /** Hide the bottom hairline (used inside conversation views where the thread line is the visual seam instead). */
+  hideBottomBorder?: boolean;
 }
 
 export const Post = memo(function Post({
   post,
   hideReplyingTo: _hideReplyingTo = false,
   disablePress = false,
+  showThreadLineAbove = false,
+  showThreadLineBelow = false,
+  hideBottomBorder = false,
 }: PostProps) {
   const { theme } = useTheme();
   const postId = post.id;
@@ -108,12 +117,11 @@ export const Post = memo(function Post({
 
   return (
     <Pressable
+      role="article"
       style={({ pressed }) => [
         Atoms.w_full,
         Atoms.px_lg,
-        Atoms.pt_md,
-        { paddingBottom: 6 },
-        {
+        !hideBottomBorder && {
           borderBottomWidth: 1,
           borderBottomColor: withHexOpacity(theme.palette.neutral_500, '20'),
         },
@@ -124,16 +132,68 @@ export const Post = memo(function Post({
       onPress={handlePress}
       disabled={disablePress}
     >
+      {/* Top padding bar */}
       <View style={[Atoms.flex_row, Atoms.gap_lg]}>
-        {authorIdentity ? (
-          <ProfileAvatar
-            identityKey={authorIdentity}
-            size="md"
-            onPress={handleAuthorPress}
-          />
-        ) : null}
+        <View
+          style={[
+            Atoms.align_center,
+            !showThreadLineAbove && Atoms.pt_md,
+            showThreadLineAbove && Atoms.mb_xs,
+            {
+              flexBasis: 40,
+            },
+          ]}
+        >
+          {showThreadLineAbove ? (
+            <View
+              style={[
+                Atoms.flex_1,
+                {
+                  width: 2,
+                  backgroundColor: withHexOpacity(
+                    theme.palette.neutral_500,
+                    '30',
+                  ),
+                },
+              ]}
+            />
+          ) : null}
+        </View>
+        {/* Empty */}
+        <View style={[Atoms.flex_1, showThreadLineAbove && Atoms.pt_md]}></View>
+      </View>
+
+      {/* Main post body */}
+      <View style={[Atoms.flex_row, Atoms.gap_lg]}>
+        {/* Left side (avatar and thread line) */}
+        <View style={[Atoms.align_center]}>
+          {authorIdentity ? (
+            <ProfileAvatar
+              identityKey={authorIdentity}
+              size="md"
+              onPress={handleAuthorPress}
+            />
+          ) : null}
+          {showThreadLineBelow ? (
+            <View
+              style={[
+                Atoms.flex_1,
+                Atoms.mt_xs,
+                {
+                  width: 2,
+                  backgroundColor: withHexOpacity(
+                    theme.palette.neutral_500,
+                    '30',
+                  ),
+                },
+              ]}
+            />
+          ) : null}
+        </View>
 
-        <View style={Atoms.flex_1}>
+        {/* Main post content */}
+        <View style={[Atoms.flex_1, Atoms.pb_md]}>
+          {/* Author name and other topbar items */}
           <View
             style={[
               Atoms.flex_row,
@@ -172,10 +232,12 @@ export const Post = memo(function Post({
             ) : null}
           </View>
 
-          <Text variant="secondary" style={{ marginTop: 4, lineHeight: 20 }}>
-            {displayContent}
-            {isTruncatedPreview ? '...' : ''}
-          </Text>
+          {displayContent ? (
+            <Text variant="secondary" style={[Atoms.mt_xs]}>
+              {displayContent}
+              {isTruncatedPreview ? '...' : ''}
+            </Text>
+          ) : null}
           {post.images?.length > 0 && <PostImages images={post.images} />}
           {showContentExpandToggle && (
             <Pressable
@@ -197,17 +259,16 @@ export const Post = memo(function Post({
               </Text>
             </Pressable>
           )}
+          <PostToolbar
+            onReply={handleReply}
+            onLike={handleLike}
+            onDislike={handleDislike}
+            liked={liked}
+            disliked={disliked}
+            style={{ marginTop: 8 }}
+          />
         </View>
       </View>
-
-      <PostToolbar
-        onReply={handleReply}
-        onLike={handleLike}
-        onDislike={handleDislike}
-        liked={liked}
-        disliked={disliked}
-        style={{ marginTop: 8, paddingLeft: 50 }}
-      />
     </Pressable>
   );
 });

apps/polycentric/src/features/post/PostToolbar.tsx

@@ -85,7 +85,7 @@ function ActionButton({
     : color;
 
   const iconSurface: StyleProp<ViewStyle> = [
-    Atoms.p_xs,
+    // Atoms.p_xs,
     Atoms.rounded_md,
     {
       backgroundColor: hovered