Move menu controls into post footers and improve meta info rendering

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

@@ -222,11 +222,16 @@ export const PostThreadItem = observer(function PostThreadItem({
             <View style={[s.pl10, s.pb5]}>
               <PostCtrls
                 big
+                itemHref={itemHref}
+                itemTitle={itemTitle}
+                isAuthor={item.post.author.did === store.me.did}
                 isReposted={!!item.post.viewer.repost}
                 isUpvoted={!!item.post.viewer.upvote}
                 onPressReply={onPressReply}
                 onPressToggleRepost={onPressToggleRepost}
                 onPressToggleUpvote={onPressToggleUpvote}
+                onCopyPostText={onCopyPostText}
+                onDeletePost={onDeletePost}
               />
             </View>
           </View>
@@ -276,15 +281,10 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
             <View style={styles.layoutContent}>
               <PostMeta
-                itemHref={itemHref}
-                itemTitle={itemTitle}
                 authorHref={authorHref}
                 authorHandle={item.post.author.handle}
                 authorDisplayName={item.post.author.displayName}
                 timestamp={item.post.indexedAt}
-                isAuthor={item.post.author.did === store.me.did}
-                onCopyPostText={onCopyPostText}
-                onDeletePost={onDeletePost}
               />
               {item.post.author.viewer?.muted ? (
                 <View style={[styles.mutedWarning, pal.btn]}>
@@ -304,14 +304,16 @@ export const PostThreadItem = observer(function PostThreadItem({
               )}
               <PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} />
               <PostCtrls
-                replyCount={item.post.replyCount}
+                itemHref={itemHref}
-                repostCount={item.post.repostCount}
+                itemTitle={itemTitle}
-                upvoteCount={item.post.upvoteCount}
+                isAuthor={item.post.author.did === store.me.did}
                 isReposted={!!item.post.viewer.repost}
                 isUpvoted={!!item.post.viewer.upvote}
                 onPressReply={onPressReply}
                 onPressToggleRepost={onPressToggleRepost}
                 onPressToggleUpvote={onPressToggleUpvote}
+                onCopyPostText={onCopyPostText}
+                onDeletePost={onDeletePost}
               />
             </View>
           </View>

src/view/com/post/Post.tsx

@@ -154,15 +154,10 @@ export const Post = observer(function Post({
         </View>
         <View style={styles.layoutContent}>
           <PostMeta
-            itemHref={itemHref}
-            itemTitle={itemTitle}
             authorHref={authorHref}
             authorHandle={item.post.author.handle}
             authorDisplayName={item.post.author.displayName}
             timestamp={item.post.indexedAt}
-            isAuthor={item.post.author.did === store.me.did}
-            onCopyPostText={onCopyPostText}
-            onDeletePost={onDeletePost}
           />
           {replyHref !== '' && (
             <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
@@ -198,6 +193,9 @@ export const Post = observer(function Post({
           )}
           <PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} />
           <PostCtrls
+            itemHref={itemHref}
+            itemTitle={itemTitle}
+            isAuthor={item.post.author.did === store.me.did}
             replyCount={item.post.replyCount}
             repostCount={item.post.repostCount}
             upvoteCount={item.post.upvoteCount}
@@ -206,6 +204,8 @@ export const Post = observer(function Post({
             onPressReply={onPressReply}
             onPressToggleRepost={onPressToggleRepost}
             onPressToggleUpvote={onPressToggleUpvote}
+            onCopyPostText={onCopyPostText}
+            onDeletePost={onDeletePost}
           />
         </View>
       </View>

src/view/com/posts/FeedItem.tsx

@@ -177,15 +177,10 @@ export const FeedItem = observer(function ({
           </View>
           <View style={styles.layoutContent}>
             <PostMeta
-              itemHref={itemHref}
-              itemTitle={itemTitle}
               authorHref={authorHref}
               authorHandle={item.post.author.handle}
               authorDisplayName={item.post.author.displayName}
               timestamp={item.post.indexedAt}
-              isAuthor={item.post.author.did === store.me.did}
-              onCopyPostText={onCopyPostText}
-              onDeletePost={onDeletePost}
             />
             {!isChild && replyHref !== '' && (
               <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
@@ -226,6 +221,9 @@ export const FeedItem = observer(function ({
             )}
             <PostEmbeds embed={item.post.embed} style={styles.postEmbeds} />
             <PostCtrls
+              itemHref={itemHref}
+              itemTitle={itemTitle}
+              isAuthor={item.post.author.did === store.me.did}
               replyCount={item.post.replyCount}
               repostCount={item.post.repostCount}
               upvoteCount={item.post.upvoteCount}
@@ -234,6 +232,8 @@ export const FeedItem = observer(function ({
               onPressReply={onPressReply}
               onPressToggleRepost={onPressToggleRepost}
               onPressToggleUpvote={onPressToggleUpvote}
+              onCopyPostText={onCopyPostText}
+              onDeletePost={onDeletePost}
             />
           </View>
         </View>

src/view/com/util/PostCtrls.tsx

@@ -3,11 +3,15 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
 import {Text} from './text/Text'
+import {PostDropdownBtn} from './forms/DropdownButton'
 import {UpIcon, UpIconSolid, CommentBottomArrow} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue'
 
 interface PostCtrlsOpts {
+  itemHref: string
+  itemTitle: string
+  isAuthor: boolean
   big?: boolean
   replyCount?: number
   repostCount?: number
@@ -17,6 +21,8 @@ interface PostCtrlsOpts {
   onPressReply: () => void
   onPressToggleRepost: () => void
   onPressToggleUpvote: () => void
+  onCopyPostText: () => void
+  onDeletePost: () => void
 }
 
 const redgray = '#7A6161'
@@ -169,7 +175,23 @@ export function PostCtrls(opts: PostCtrlsOpts) {
           ) : undefined}
         </TouchableOpacity>
       </View>
-      <View style={s.flex1}></View>
+      <View style={s.flex1}>
+        {opts.big ? undefined : (
+          <PostDropdownBtn
+            style={styles.ctrl}
+            itemHref={opts.itemHref}
+            itemTitle={opts.itemTitle}
+            isAuthor={opts.isAuthor}
+            onCopyPostText={opts.onCopyPostText}
+            onDeletePost={opts.onDeletePost}>
+            <FontAwesomeIcon
+              icon="ellipsis-h"
+              size={16}
+              style={[s.mt2, s.mr5, sRedgray]}
+            />
+          </PostDropdownBtn>
+        )}
+      </View>
     </View>
   )
 }

src/view/com/util/PostMeta.tsx

@@ -1,28 +1,18 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {Platform, StyleSheet, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Link} from '../util/Link'
 import {Text} from './text/Text'
-import {PostDropdownBtn} from './forms/DropdownButton'
-import {s} from '../../lib/styles'
 import {ago} from '../../../lib/strings'
-import {useTheme} from '../../lib/ThemeContext'
 import {usePalette} from '../../lib/hooks/usePalette'
 
 interface PostMetaOpts {
-  itemHref: string
-  itemTitle: string
   authorHref: string
   authorHandle: string
   authorDisplayName: string | undefined
   timestamp: string
-  isAuthor: boolean
-  onCopyPostText: () => void
-  onDeletePost: () => void
 }
 
 export function PostMeta(opts: PostMetaOpts) {
-  const theme = useTheme()
   const pal = usePalette('default')
   let displayName = opts.authorDisplayName || opts.authorHandle
   let handle = opts.authorHandle
@@ -31,13 +21,15 @@ export function PostMeta(opts: PostMetaOpts) {
   // Android simply cannot handle the truncation case we need
   // so we have to do it manually here
   // -prf
-  if (displayName.length + handle.length > 26) {
+  if (Platform.OS === 'android') {
-    if (displayName.length > 26) {
+    if (displayName.length + handle.length > 26) {
-      displayName = displayName.slice(0, 23) + '...'
+      if (displayName.length > 26) {
-    } else {
+        displayName = displayName.slice(0, 23) + '...'
-      handle = handle.slice(0, 23 - displayName.length) + '...'
+      } else {
-      if (handle.endsWith('....')) {
+        handle = handle.slice(0, 23 - displayName.length) + '...'
-        handle = handle.slice(0, -4) + '...'
+        if (handle.endsWith('....')) {
+          handle = handle.slice(0, -4) + '...'
+        }
       }
     }
   }
@@ -45,7 +37,7 @@ export function PostMeta(opts: PostMetaOpts) {
   return (
     <View style={styles.meta}>
       <Link
-        style={styles.metaItem}
+        style={[styles.metaItem, styles.maxWidth]}
         href={opts.authorHref}
         title={opts.authorHandle}>
         <Text type="h5" style={[pal.text]} numberOfLines={1}>
@@ -60,20 +52,6 @@ export function PostMeta(opts: PostMetaOpts) {
       <Text type="h6" style={[styles.metaItem, pal.textLight]}>
         &middot; {ago(opts.timestamp)}
       </Text>
-      <View style={s.flex1} />
-      <PostDropdownBtn
-        style={[styles.metaItem, s.pl5]}
-        itemHref={opts.itemHref}
-        itemTitle={opts.itemTitle}
-        isAuthor={opts.isAuthor}
-        onCopyPostText={opts.onCopyPostText}
-        onDeletePost={opts.onDeletePost}>
-        <FontAwesomeIcon
-          icon="ellipsis-h"
-          size={14}
-          style={[s.mt2, s.mr5, pal.text]}
-        />
-      </PostDropdownBtn>
     </View>
   )
 }
@@ -81,11 +59,14 @@ export function PostMeta(opts: PostMetaOpts) {
 const styles = StyleSheet.create({
   meta: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'baseline',
     paddingTop: 0,
     paddingBottom: 2,
   },
   metaItem: {
     paddingRight: 5,
   },
+  maxWidth: {
+    maxWidth: '70%',
+  },
 })