Add option to remove quoted post in composer (#3670)

* add option to remove quoted post

* add generous hitslop

2 files changed, 47 insertions, 5 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 8d14c16e2..59d6cfb9c 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -53,7 +53,7 @@ import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
 import * as Prompt from '#/components/Prompt'
-import {QuoteEmbed} from '../util/post-embeds/QuoteEmbed'
+import {QuoteEmbed, QuoteX} from '../util/post-embeds/QuoteEmbed'
 import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
@@ -483,8 +483,13 @@ export const ComposePost = observer(function ComposePost({
             />
           )}
           {quote ? (
-            <View style={[s.mt5, isWeb && s.mb10, {pointerEvents: 'none'}]}>
-              <QuoteEmbed quote={quote} />
+            <View style={[s.mt5, isWeb && s.mb10]}>
+              <View style={{pointerEvents: 'none'}}>
+                <QuoteEmbed quote={quote} />
+              </View>
+              {quote.uri !== initQuote?.uri && (
+                <QuoteX onRemove={() => setQuote(undefined)} />
+              )}
             </View>
           ) : undefined}
         </ScrollView>
diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx
index b5f57825b..935696ab7 100644
--- a/src/view/com/util/post-embeds/QuoteEmbed.tsx
+++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx
@@ -1,5 +1,11 @@
 import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native'
 import {
   AppBskyEmbedExternal,
   AppBskyEmbedImages,
@@ -12,9 +18,13 @@ import {
   RichText as RichTextAPI,
 } from '@atproto/api'
 import {AtUri} from '@atproto/api'
-import {Trans} from '@lingui/macro'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {HITSLOP_20} from '#/lib/constants'
+import {s} from '#/lib/styles'
 import {useModerationOpts} from '#/state/queries/preferences'
 import {RQKEY as RQKEY_URI} from '#/state/queries/resolve-uri'
 import {usePalette} from 'lib/hooks/usePalette'
@@ -177,6 +187,33 @@ export function QuoteEmbed({
   )
 }
 
+export function QuoteX({onRemove}: {onRemove: () => void}) {
+  const {_} = useLingui()
+  return (
+    <TouchableOpacity
+      style={[
+        a.absolute,
+        a.p_xs,
+        a.rounded_full,
+        a.align_center,
+        a.justify_center,
+        {
+          top: 16,
+          right: 10,
+          backgroundColor: 'rgba(0, 0, 0, 0.75)',
+        },
+      ]}
+      onPress={onRemove}
+      accessibilityRole="button"
+      accessibilityLabel={_(msg`Remove quote`)}
+      accessibilityHint={_(msg`Removes quoted post`)}
+      onAccessibilityEscape={onRemove}
+      hitSlop={HITSLOP_20}>
+      <FontAwesomeIcon size={12} icon="xmark" style={s.white} />
+    </TouchableOpacity>
+  )
+}
+
 function viewRecordToPostView(
   viewRecord: AppBskyEmbedRecord.ViewRecord,
 ): AppBskyFeedDefs.PostView {