pl-fe: introduce wrench reaction button

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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<IStatusActionBar> = ({
   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<IStatusActionBar> = ({
     }
   };
 
+  const handleWrenchClick: React.EventHandler<React.MouseEvent> = (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<IStatusActionBar> = ({
           />
         )}
 
+        {me && !withLabels && features.emojiReacts && showWrenchButton && (
+          <StatusActionButton
+            title={intl.formatMessage(messages.wrench)}
+            icon={require('@tabler/icons/outline/tool.svg')}
+            color='accent'
+            filled
+            onClick={handleWrenchClick}
+            onLongPress={handleWrenchLongPress}
+            active={wrenches?.me}
+            count={wrenches?.count || undefined}
+            theme={statusActionButtonTheme}
+          />
+        )}
+
         {me && !withLabels && features.emojiReacts && (
           <EmojiPickerDropdown
             onPickEmoji={handlePickEmoji}

packages/pl-fe/src/features/preferences/index.tsx

@@ -214,6 +214,12 @@ const Preferences = () => {
         >
           <SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
         </ListItem>
+
+        {features.emojiReacts && (
+          <ListItem label={<FormattedMessage id='preferences.fields.wrench_label' defaultMessage='Display wrench reaction button' />} >
+            <SettingToggle settings={settings} settingPath={['showWrenchButton']} onChange={onToggleChange} />
+          </ListItem>
+        )}
       </List>
 
       <List>

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.",

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),