From 0847e2752b21b6556a1c9302cebad60bb877c0de Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 24 Apr 2024 00:36:59 +0100
Subject: [PATCH] Add option to remove quoted post in composer (#3670)
* add option to remove quoted post
* add generous hitslop
---
src/view/com/composer/Composer.tsx | 11 ++++--
src/view/com/util/post-embeds/QuoteEmbed.tsx | 41 +++++++++++++++++++-
2 files changed, 47 insertions(+), 5 deletions(-)
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 8d14c16e..59d6cfb9 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 b5f57825..935696ab 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 {