refactor: create PureTranslateButton component, used in PureStatus component

src/components/pure-status.tsx

@@ -11,8 +11,8 @@ import { unfilterStatus } from 'soapbox/actions/statuses.ts';
 import PureEventPreview from 'soapbox/components/pure-event-preview.tsx';
 import PureStatusContent from 'soapbox/components/pure-status-content.tsx';
 import PureStatusReplyMentions from 'soapbox/components/pure-status-reply-mentions.tsx';
+import PureTranslateButton from 'soapbox/components/pure-translate-button.tsx';
 import PureSensitiveContentOverlay from 'soapbox/components/statuses/pure-sensitive-content-overlay.tsx';
-import TranslateButton from 'soapbox/components/translate-button.tsx';
 import { Card } from 'soapbox/components/ui/card.tsx';
 import Icon from 'soapbox/components/ui/icon.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
@@ -475,7 +475,7 @@ const PureStatus: React.FC<IPureStatus> = (props) => {
                     translatable
                   />
 
-                  <TranslateButton status={statusImmutable} /> {/* fix later */}
+                  <PureTranslateButton status={status} />
 
                   {(quote || actualStatus.card || actualStatus.media_attachments.length > 0) && (
                     <Stack space={4}>

src/components/pure-translate-button.tsx

@@ -0,0 +1,82 @@
+import languageIcon from '@tabler/icons/outline/language.svg';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses.ts';
+import Button from 'soapbox/components/ui/button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
+import { Entities, EntityTypes } from 'soapbox/entity-store/entities.ts';
+import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
+import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
+import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+
+interface IPureTranslateButton {
+  status: EntityTypes[Entities.STATUSES];
+}
+
+const PureTranslateButton: React.FC<IPureTranslateButton> = ({ status }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+  const features = useFeatures();
+  const { instance } = useInstance();
+
+  const me = useAppSelector((state) => state.me);
+
+  const {
+    allow_remote: allowRemote,
+    allow_unauthenticated: allowUnauthenticated,
+    source_languages: sourceLanguages,
+    target_languages: targetLanguages,
+  } = instance.pleroma.metadata.translation;
+
+  const renderTranslate = (me || allowUnauthenticated) && (allowRemote || status.account.local) && ['public', 'unlisted'].includes(status.visibility) && status.content.length > 0 && status.language !== null && intl.locale !== status.language;
+
+  const supportsLanguages = (!sourceLanguages || sourceLanguages.includes(status.language!)) && (!targetLanguages || targetLanguages.includes(intl.locale));
+
+  const handleTranslate: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+
+    if (status.translation) {
+      dispatch(undoStatusTranslation(status.id));
+    } else {
+      dispatch(translateStatus(status.id, intl.locale));
+    }
+  };
+
+  if (!features.translations || !renderTranslate || !supportsLanguages) return null;
+
+  if (status.translation) {
+    const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });
+    const languageName = languageNames.of(status.language!);
+    const provider     = status.translation.provider;
+
+    return (
+      <Stack space={3} alignItems='start'>
+        <Button
+          theme='muted'
+          text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
+          icon={languageIcon}
+          onClick={handleTranslate}
+        />
+        <Text theme='muted'>
+          <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
+        </Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <div>
+      <Button
+        theme='muted'
+        text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
+        icon={languageIcon}
+        onClick={handleTranslate}
+      />
+    </div>
+
+  );
+};
+
+export default PureTranslateButton;