diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index ca96e3a67..8e59f9ac1 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -5,7 +5,7 @@ import { useHistory, useRouteMatch } from 'react-router-dom'; import { blockAccount } from 'pl-fe/actions/accounts'; import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'pl-fe/actions/compose'; -import { emojiReact } from 'pl-fe/actions/emoji-reacts'; +import { emojiReact, unEmojiReact } from 'pl-fe/actions/emoji-reacts'; import { editEvent } from 'pl-fe/actions/events'; import { toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog } from 'pl-fe/actions/interactions'; import { deleteStatusModal, toggleStatusSensitivityModal } from 'pl-fe/actions/moderation'; @@ -104,6 +104,7 @@ const messages = defineMessages({ unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' }, unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' }, viewReactions: { id: 'status.view_reactions', defaultMessage: 'View reactions' }, + wrench: { id: 'status.wrench', defaultMessage: 'Wrench reaction' }, addKnownLanguage: { id: 'status.add_known_language', defaultMessage: 'Do not auto-translate posts in {language}.' }, translate: { id: 'status.translate', defaultMessage: 'Translate' }, hideTranslation: { id: 'status.hide_translation', defaultMessage: 'Hide translation' }, @@ -143,7 +144,9 @@ const StatusActionBar: React.FC = ({ const { groupRelationship } = useGroupRelationship(status.group_id || undefined); const features = useFeatures(); const instance = useInstance(); - const { autoTranslate, boostModal, deleteModal, knownLanguages } = useSettings(); + const { autoTranslate, boostModal, deleteModal, knownLanguages, showWrenchButton } = useSettings(); + + const wrenches = showWrenchButton && status.emoji_reactions.find(emoji => emoji.name === '🔧') || undefined; const { translationLanguages } = useTranslationLanguages(); @@ -211,10 +214,24 @@ const StatusActionBar: React.FC = ({ } }; + const handleWrenchClick: React.EventHandler = (e) => { + if (!me) { + onOpenUnauthorizedModal('DISLIKE'); + } else if (wrenches?.me) { + dispatch(unEmojiReact(status, '🔧')); + } else { + dispatch(emojiReact(status, '🔧')); + } + }; + const handleDislikeLongPress = status.dislikes_count ? () => { openModal('DISLIKES', { statusId: status.id }); } : undefined; + const handleWrenchLongPress = wrenches?.count ? () => { + openModal('REACTIONS', { statusId: status.id, reaction: wrenches.name }); + } : undefined; + const handlePickEmoji = (emoji: EmojiType) => { dispatch(emojiReact(status, emoji.custom ? emoji.id : emoji.native, emoji.custom ? emoji.imageUrl : undefined)); }; @@ -784,6 +801,20 @@ const StatusActionBar: React.FC = ({ /> )} + {me && !withLabels && features.emojiReacts && showWrenchButton && ( + + )} + {me && !withLabels && features.emojiReacts && ( { > + + {features.emojiReacts && ( + } > + + + )} diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 2ec123e00..0d0362392 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -1256,6 +1256,7 @@ "preferences.fields.theme": "Theme", "preferences.fields.underline_links_label": "Always underline links in posts", "preferences.fields.unfollow_modal_label": "Show confirmation dialog before unfollowing someone", + "preferences.fields.wrench_label": "Display wrench reaction button", "preferences.hints.demetricator": "Decrease social media anxiety by hiding all numbers from the site.", "preferences.notifications.advanced": "Show all notification categories", "preferences.options.content_type_html": "HTML", @@ -1512,6 +1513,7 @@ "status.visibility.local": "The post is only visible to users on your instance", "status.visibility.mutuals_only": "The post is only visible to people who mutually follow the author", "status.visibility.private": "The post is only visible to followers of the author", + "status.wrench": "Wrench reaction", "status_list.queue_label": "Click to see {count} new {count, plural, one {post} other {posts}}", "statuses.quote_tombstone": "Post is unavailable.", "statuses.tombstone": "One or more posts are unavailable.", diff --git a/packages/pl-fe/src/schemas/pl-fe/settings.ts b/packages/pl-fe/src/schemas/pl-fe/settings.ts index 11584e66f..07d315d3d 100644 --- a/packages/pl-fe/src/schemas/pl-fe/settings.ts +++ b/packages/pl-fe/src/schemas/pl-fe/settings.ts @@ -35,6 +35,7 @@ const settingsSchema = v.object({ preserveSpoilers: v.fallback(v.boolean(), false), autoTranslate: v.fallback(v.boolean(), false), knownLanguages: v.fallback(v.array(v.string()), []), + showWrenchButton: v.fallback(v.boolean(), true), systemFont: v.fallback(v.boolean(), false), demetricator: v.fallback(v.boolean(), false),