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

1 files changed, 18 insertions, 101 deletions

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 628c88722..396b0278d 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -4,12 +4,10 @@ import {Text} from './text/Text'
 import {DesktopWebTextLink} from './Link'
 import {ago, niceDate} from 'lib/strings/time'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useStores} from 'state/index'
 import {UserAvatar} from './UserAvatar'
 import {observer} from 'mobx-react-lite'
-import {FollowButton} from '../profile/FollowButton'
-import {FollowState} from 'state/models/cache/my-follows'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {isAndroid, isIOS} from 'platform/detection'
 
 interface PostMetaOpts {
   authorAvatar?: string
@@ -18,88 +16,17 @@ interface PostMetaOpts {
   authorHasWarning: boolean
   postHref: string
   timestamp: string
-  did?: string
-  showFollowBtn?: boolean
 }
 
 export const PostMeta = observer(function (opts: PostMetaOpts) {
   const pal = usePalette('default')
   const displayName = opts.authorDisplayName || opts.authorHandle
   const handle = opts.authorHandle
-  const store = useStores()
-  const isMe = opts.did === store.me.did
-  const followState =
-    typeof opts.did === 'string'
-      ? store.me.follows.getFollowState(opts.did)
-      : FollowState.Unknown
 
-  const [didFollow, setDidFollow] = React.useState(false)
-  const onToggleFollow = React.useCallback(() => {
-    setDidFollow(true)
-  }, [setDidFollow])
-
-  if (
-    opts.showFollowBtn &&
-    !isMe &&
-    (followState === FollowState.NotFollowing || didFollow) &&
-    opts.did
-  ) {
-    // two-liner with follow button
-    return (
-      <View style={styles.metaTwoLine}>
-        <View style={styles.metaTwoLineLeft}>
-          <View style={styles.metaTwoLineTop}>
-            <DesktopWebTextLink
-              type="lg-bold"
-              style={pal.text}
-              numberOfLines={1}
-              lineHeight={1.2}
-              text={sanitizeDisplayName(displayName)}
-              href={`/profile/${opts.authorHandle}`}
-            />
-            <Text
-              type="md"
-              style={pal.textLight}
-              lineHeight={1.2}
-              accessible={false}>
-              &nbsp;&middot;&nbsp;
-            </Text>
-            <DesktopWebTextLink
-              type="md"
-              style={[styles.metaItem, pal.textLight]}
-              lineHeight={1.2}
-              text={ago(opts.timestamp)}
-              accessibilityLabel={niceDate(opts.timestamp)}
-              accessibilityHint=""
-              href={opts.postHref}
-            />
-          </View>
-          <DesktopWebTextLink
-            type="md"
-            style={[styles.metaItem, pal.textLight]}
-            lineHeight={1.2}
-            numberOfLines={1}
-            text={`@${handle}`}
-            href={`/profile/${opts.authorHandle}`}
-          />
-        </View>
-
-        <View>
-          <FollowButton
-            unfollowedType="default"
-            did={opts.did}
-            onToggleFollow={onToggleFollow}
-          />
-        </View>
-      </View>
-    )
-  }
-
-  // one-liner
   return (
-    <View style={styles.meta}>
+    <View style={styles.metaOneLine}>
       {typeof opts.authorAvatar !== 'undefined' && (
-        <View style={[styles.metaItem, styles.avatar]}>
+        <View style={styles.avatar}>
           <UserAvatar
             avatar={opts.authorAvatar}
             size={16}
@@ -107,7 +34,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
           />
         </View>
       )}
-      <View style={[styles.metaItem, styles.maxWidth]}>
+      <View style={styles.maxWidth}>
         <DesktopWebTextLink
           type="lg-bold"
           style={pal.text}
@@ -128,12 +55,18 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
           href={`/profile/${opts.authorHandle}`}
         />
       </View>
-      <Text type="md" style={pal.textLight} lineHeight={1.2} accessible={false}>
-        &middot;&nbsp;
-      </Text>
+      {!isAndroid && (
+        <Text
+          type="md"
+          style={pal.textLight}
+          lineHeight={1.2}
+          accessible={false}>
+          &middot;
+        </Text>
+      )}
       <DesktopWebTextLink
         type="md"
-        style={[styles.metaItem, pal.textLight]}
+        style={pal.textLight}
         lineHeight={1.2}
         text={ago(opts.timestamp)}
         accessibilityLabel={niceDate(opts.timestamp)}
@@ -145,32 +78,16 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
 })
 
 const styles = StyleSheet.create({
-  meta: {
+  metaOneLine: {
     flexDirection: 'row',
     paddingBottom: 2,
-  },
-  metaTwoLine: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '100%',
-    paddingBottom: 4,
-  },
-  metaTwoLineLeft: {
-    flex: 1,
-    paddingRight: 40,
-  },
-  metaTwoLineTop: {
-    flexDirection: 'row',
-    alignItems: 'baseline',
-  },
-  metaItem: {
-    paddingRight: 5,
+    gap: 4,
   },
   avatar: {
     alignSelf: 'center',
   },
   maxWidth: {
-    maxWidth: '80%',
+    flex: isAndroid ? 1 : undefined,
+    maxWidth: isIOS ? '80%' : undefined,
   },
 })