Always show post dropdown button at the bottom of the post, add share button to highlighted post (#2646)

* Always show post dropdown at the bottom

* Rm useless view (no longer needed)

* space icons evenly in big, add equal padding

* add share icon

* add onShare

* confirmed figma noob. figured it out.

* use our svg naming strat

* Update icon

---------

Co-authored-by: Hailey <me@haileyok.com>
Co-authored-by: Eric Bailey <git@esb.lol>

assets/icons/arrowOutOfBox_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.707 3.293a1 1 0 0 0-1.414 0l-4.5 4.5a1 1 0 0 0 1.414 1.414L11 6.414v8.836a1 1 0 1 0 2 0V6.414l2.793 2.793a1 1 0 1 0 1.414-1.414l-4.5-4.5ZM5 12.75a1 1 0 1 0-2 0V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.25a1 1 0 1 0-2 0V19H5v-6.25Z" clip-rule="evenodd"/></svg>

src/components/icons/ArrowOutOfBox.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowOutOfBox_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12.707 3.293a1 1 0 0 0-1.414 0l-4.5 4.5a1 1 0 0 0 1.414 1.414L11 6.414v8.836a1 1 0 1 0 2 0V6.414l2.793 2.793a1 1 0 1 0 1.414-1.414l-4.5-4.5ZM5 12.75a1 1 0 1 0-2 0V20a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-7.25a1 1 0 1 0-2 0V19H5v-6.25Z',
+})

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

@@ -23,7 +23,6 @@ import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
 import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/post-embeds'
 import {PostCtrls} from '../util/post-ctrls/PostCtrls'
-import {PostDropdownBtn} from '../util/forms/PostDropdownBtn'
 import {PostHider} from '../util/moderation/PostHider'
 import {ContentHider} from '../util/moderation/ContentHider'
 import {PostAlerts} from '../util/moderation/PostAlerts'
@@ -43,7 +42,6 @@ import {useModerationOpts} from '#/state/queries/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow'
 import {ThreadPost} from '#/state/queries/post-thread'
-import {useSession} from '#/state/session'
 import {WhoCanReply} from '../threadgate/WhoCanReply'
 
 export function PostThreadItem({
@@ -162,7 +160,6 @@ let PostThreadItemLoaded = ({
   const {_} = useLingui()
   const langPrefs = useLanguagePrefs()
   const {openComposer} = useComposerControls()
-  const {currentAccount} = useSession()
   const [limitLines, setLimitLines] = React.useState(
     () => countLines(richText?.text) >= MAX_POST_LINES,
   )
@@ -188,9 +185,6 @@ let PostThreadItemLoaded = ({
     return makeProfileLink(post.author, 'post', urip.rkey, 'reposted-by')
   }, [post.uri, post.author])
   const repostsTitle = _(msg`Reposts of this post`)
-  const isModeratedPost =
-    moderation.decisions.post.cause?.type === 'label' &&
-    moderation.decisions.post.cause.label.src !== currentAccount?.did
 
   const translatorUrl = getTranslatorLink(
     record?.text || '',
@@ -331,23 +325,6 @@ let PostThreadItemLoaded = ({
                 </Link>
               </View>
             </View>
-            <PostDropdownBtn
-              testID="postDropdownBtn"
-              postAuthor={post.author}
-              postCid={post.cid}
-              postUri={post.uri}
-              record={record}
-              richText={richText}
-              showAppealLabelItem={
-                post.author.did === currentAccount?.did && isModeratedPost
-              }
-              style={{
-                paddingVertical: 6,
-                paddingHorizontal: 10,
-                marginLeft: 'auto',
-                width: 40,
-              }}
-            />
           </View>
           <View style={[s.pl10, s.pr10, s.pb10]}>
             <ContentHider
@@ -437,7 +414,7 @@ let PostThreadItemLoaded = ({
             ) : (
               <></>
             )}
-            <View style={[s.pl10, s.pb5]}>
+            <View style={[s.pl10, s.pr10, s.pb5]}>
               <PostCtrls
                 big
                 post={post}

src/view/com/util/post-ctrls/PostCtrls.tsx

@@ -9,6 +9,7 @@ import {
 import {
   AppBskyFeedDefs,
   AppBskyFeedPost,
+  AtUri,
   RichText as RichTextAPI,
 } from '@atproto/api'
 import {Text} from '../text/Text'
@@ -30,6 +31,10 @@ import {Shadow} from '#/state/cache/types'
 import {useRequireAuth} from '#/state/session'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
+import {toShareUrl} from 'lib/strings/url-helpers'
+import {shareUrl} from 'lib/sharing'
+import {makeProfileLink} from 'lib/routes/links'
 
 let PostCtrls = ({
   big,
@@ -116,11 +121,18 @@ let PostCtrls = ({
     closeModal,
   ])
 
+  const onShare = useCallback(() => {
+    const urip = new AtUri(post.uri)
+    const href = makeProfileLink(post.author, 'post', urip.rkey)
+    const url = toShareUrl(href)
+    shareUrl(url)
+  }, [post.uri, post.author])
+
   return (
     <View style={[styles.ctrls, style]}>
       <View
         style={[
-          styles.ctrl,
+          big ? styles.ctrlBig : styles.ctrl,
           post.viewer?.replyDisabled ? {opacity: 0.5} : undefined,
         ]}>
         <TouchableOpacity
@@ -149,7 +161,7 @@ let PostCtrls = ({
           ) : undefined}
         </TouchableOpacity>
       </View>
-      <View style={styles.ctrl}>
+      <View style={big ? styles.ctrlBig : styles.ctrl}>
         <RepostButton
           big={big}
           isReposted={!!post.viewer?.repost}
@@ -158,7 +170,7 @@ let PostCtrls = ({
           onQuote={onQuote}
         />
       </View>
-      <View style={styles.ctrl}>
+      <View style={big ? styles.ctrlBig : styles.ctrl}>
         <TouchableOpacity
           testID="likeBtn"
           style={[styles.btn, !big && styles.btnPad]}
@@ -193,20 +205,34 @@ let PostCtrls = ({
           ) : undefined}
         </TouchableOpacity>
       </View>
-      {big ? undefined : (
+      {big && (
-        <View style={styles.ctrl}>
+        <View style={styles.ctrlBig}>
-          <PostDropdownBtn
+          <TouchableOpacity
-            testID="postDropdownBtn"
+            testID="likeBtn"
-            postAuthor={post.author}
+            style={[styles.btn]}
-            postCid={post.cid}
+            onPress={onShare}
-            postUri={post.uri}
+            accessibilityRole="button"
-            record={record}
+            accessibilityLabel={`${
-            richText={richText}
+              post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`)
-            showAppealLabelItem={showAppealLabelItem}
+            } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`}
-            style={styles.btnPad}
+            accessibilityHint=""
-          />
+            hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+            <ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} />
+          </TouchableOpacity>
         </View>
       )}
+      <View style={big ? styles.ctrlBig : styles.ctrl}>
+        <PostDropdownBtn
+          testID="postDropdownBtn"
+          postAuthor={post.author}
+          postCid={post.cid}
+          postUri={post.uri}
+          record={record}
+          richText={richText}
+          showAppealLabelItem={showAppealLabelItem}
+          style={styles.btnPad}
+        />
+      </View>
     </View>
   )
 }
@@ -223,6 +249,9 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'flex-start',
   },
+  ctrlBig: {
+    alignItems: 'center',
+  },
   btn: {
     flexDirection: 'row',
     alignItems: 'center',