Post UI updates (Profile Preview on mobile) (#990)

* Update postmeta to put the timestamp on the right side on mobile

* Drop the two-line PostMeta mode

* Add ProfilePreview modal

* Tune PostMeta to give the best behavior possible for a given platform

* Remove old showFollowBtn attributes

* Fix style issue

* Switch the follow button in the profile header to use the inverted color for consistency with the rest of the app

* Fix lint

* Fix darkmode

* Tune the profile preview footer

* Better analytics choice

src/view/com/posts/Feed.tsx

@@ -28,7 +28,6 @@ const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'}
 export const Feed = observer(function Feed({
   feed,
   style,
-  showPostFollowBtn,
   scrollElRef,
   onPressTryAgain,
   onScroll,
@@ -41,7 +40,6 @@ export const Feed = observer(function Feed({
 }: {
   feed: PostsFeedModel
   style?: StyleProp<ViewStyle>
-  showPostFollowBtn?: boolean
   scrollElRef?: MutableRefObject<FlatList<any> | null>
   onPressTryAgain?: () => void
   onScroll?: OnScrollCb
@@ -138,15 +136,9 @@ export const Feed = observer(function Feed({
       } else if (item === LOADING_ITEM) {
         return <PostFeedLoadingPlaceholder />
       }
-      return <FeedSlice slice={item} showFollowBtn={showPostFollowBtn} />
+      return <FeedSlice slice={item} />
     },
-    [
-      feed,
-      onPressTryAgain,
-      onPressRetryLoadMore,
-      showPostFollowBtn,
-      renderEmptyState,
-    ],
+    [feed, onPressTryAgain, onPressRetryLoadMore, renderEmptyState],
   )
 
   const FeedFooter = React.useCallback(

src/view/com/posts/FeedItem.tsx

@@ -21,7 +21,7 @@ import {ImageHider} from '../util/moderation/ImageHider'
 import {RichText} from '../util/text/RichText'
 import {PostSandboxWarning} from '../util/PostSandboxWarning'
 import * as Toast from '../util/Toast'
-import {UserAvatar} from '../util/UserAvatar'
+import {PreviewableUserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -33,14 +33,12 @@ export const FeedItem = observer(function ({
   item,
   isThreadChild,
   isThreadParent,
-  showFollowBtn,
   ignoreMuteFor,
 }: {
   item: PostsFeedItemModel
   isThreadChild?: boolean
   isThreadParent?: boolean
   showReplyLine?: boolean
-  showFollowBtn?: boolean
   ignoreMuteFor?: string
 }) {
   const store = useStores()
@@ -55,7 +53,6 @@ export const FeedItem = observer(function ({
     return `/profile/${item.post.author.handle}/post/${urip.rkey}`
   }, [item.post.uri, item.post.author.handle])
   const itemTitle = `Post by ${item.post.author.handle}`
-  const authorHref = `/profile/${item.post.author.handle}`
   const replyAuthorDid = useMemo(() => {
     if (!record?.reply) {
       return ''
@@ -214,13 +211,13 @@ export const FeedItem = observer(function ({
       <PostSandboxWarning />
       <View style={styles.layout}>
         <View style={styles.layoutAvi}>
-          <Link href={authorHref} title={item.post.author.handle} asAnchor>
-            <UserAvatar
-              size={52}
-              avatar={item.post.author.avatar}
-              moderation={item.moderation.avatar}
-            />
-          </Link>
+          <PreviewableUserAvatar
+            size={52}
+            did={item.post.author.did}
+            handle={item.post.author.handle}
+            avatar={item.post.author.avatar}
+            moderation={item.moderation.avatar}
+          />
         </View>
         <View style={styles.layoutContent}>
           <PostMeta
@@ -229,8 +226,6 @@ export const FeedItem = observer(function ({
             authorHasWarning={!!item.post.author.labels?.length}
             timestamp={item.post.indexedAt}
             postHref={itemHref}
-            did={item.post.author.did}
-            showFollowBtn={showFollowBtn}
           />
           {!isThreadChild && replyAuthorDid !== '' && (
             <View style={[s.flexRow, s.mb2, s.alignCenter]}>
@@ -357,9 +352,9 @@ const styles = StyleSheet.create({
   layout: {
     flexDirection: 'row',
     marginTop: 1,
+    gap: 10,
   },
   layoutAvi: {
-    width: 70,
     paddingLeft: 8,
   },
   layoutContent: {

src/view/com/posts/FeedSlice.tsx

@@ -11,11 +11,9 @@ import {ModerationBehaviorCode} from 'lib/labeling/types'
 
 export function FeedSlice({
   slice,
-  showFollowBtn,
   ignoreMuteFor,
 }: {
   slice: PostsFeedSliceModel
-  showFollowBtn?: boolean
   ignoreMuteFor?: string
 }) {
   if (slice.moderation.list.behavior === ModerationBehaviorCode.Hide) {
@@ -32,7 +30,6 @@ export function FeedSlice({
           item={slice.items[0]}
           isThreadParent={slice.isThreadParentAt(0)}
           isThreadChild={slice.isThreadChildAt(0)}
-          showFollowBtn={showFollowBtn}
           ignoreMuteFor={ignoreMuteFor}
         />
         <FeedItem
@@ -40,7 +37,6 @@ export function FeedSlice({
           item={slice.items[1]}
           isThreadParent={slice.isThreadParentAt(1)}
           isThreadChild={slice.isThreadChildAt(1)}
-          showFollowBtn={showFollowBtn}
           ignoreMuteFor={ignoreMuteFor}
         />
         <ViewFullThread slice={slice} />
@@ -49,7 +45,6 @@ export function FeedSlice({
           item={slice.items[last]}
           isThreadParent={slice.isThreadParentAt(last)}
           isThreadChild={slice.isThreadChildAt(last)}
-          showFollowBtn={showFollowBtn}
           ignoreMuteFor={ignoreMuteFor}
         />
       </>
@@ -64,7 +59,6 @@ export function FeedSlice({
           item={item}
           isThreadParent={slice.isThreadParentAt(i)}
           isThreadChild={slice.isThreadChildAt(i)}
-          showFollowBtn={showFollowBtn}
           ignoreMuteFor={ignoreMuteFor}
         />
       ))}

src/view/com/posts/MultiFeed.tsx

@@ -28,7 +28,6 @@ import {CogIcon} from 'lib/icons'
 export const MultiFeed = observer(function Feed({
   multifeed,
   style,
-  showPostFollowBtn,
   scrollElRef,
   onScroll,
   scrollEventThrottle,
@@ -38,7 +37,6 @@ export const MultiFeed = observer(function Feed({
 }: {
   multifeed: PostsMultiFeedModel
   style?: StyleProp<ViewStyle>
-  showPostFollowBtn?: boolean
   scrollElRef?: MutableRefObject<FlatList<any> | null>
   onPressTryAgain?: () => void
   onScroll?: OnScrollCb
@@ -105,9 +103,7 @@ export const MultiFeed = observer(function Feed({
           </View>
         )
       } else if (item.type === 'feed-slice') {
-        return (
-          <FeedSlice slice={item.slice} showFollowBtn={showPostFollowBtn} />
-        )
+        return <FeedSlice slice={item.slice} />
       } else if (item.type === 'feed-loading') {
         return <PostFeedLoadingPlaceholder />
       } else if (item.type === 'feed-error') {
@@ -139,7 +135,7 @@ export const MultiFeed = observer(function Feed({
       }
       return null
     },
-    [showPostFollowBtn, pal],
+    [pal],
   )
 
   const ListFooter = React.useCallback(