From 5a6dcf0c4dfcfa9d330d8ec782ae388b48ae08c6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 20:32:18 -0500
Subject: [PATCH 1/7] Embeds: render embeds before anything else

---
 app/soapbox/containers/soapbox.tsx | 34 ++++++++++++++++--------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index d46c7f0af8..92b6f6f955 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -149,12 +149,6 @@ const SoapboxMount = () => {
         <Route path='/verify' component={AuthLayout} />
       )}
 
-      <Route
-        path='/embed/:statusId'
-        render={(props) => <EmbeddedStatus params={props.match.params} />}
-      />
-      <Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
-
       <Route path='/reset-password' component={AuthLayout} />
       <Route path='/edit-password' component={AuthLayout} />
       <Route path='/invite/:token' component={AuthLayout} />
@@ -176,19 +170,27 @@ const SoapboxMount = () => {
     <ErrorBoundary>
       <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
         <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
-          <>
-            {renderBody()}
+          <Switch>
+            <Route
+              path='/embed/:statusId'
+              render={(props) => <EmbeddedStatus params={props.match.params} />}
+            />
+            <Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
 
-            <BundleContainer fetchComponent={NotificationsContainer}>
-              {(Component) => <Component />}
-            </BundleContainer>
+            <Route>
+              {renderBody()}
 
-            <BundleContainer fetchComponent={ModalContainer}>
-              {Component => <Component />}
-            </BundleContainer>
+              <BundleContainer fetchComponent={NotificationsContainer}>
+                {(Component) => <Component />}
+              </BundleContainer>
 
-            <GdprBanner />
-          </>
+              <BundleContainer fetchComponent={ModalContainer}>
+                {Component => <Component />}
+              </BundleContainer>
+
+              <GdprBanner />
+            </Route>
+          </Switch>
         </ScrollContext>
       </BrowserRouter>
     </ErrorBoundary>

From 3909c74c00454668f1da6d4484856a1c70d78128 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:21:03 -0500
Subject: [PATCH 2/7] Add new CopyableInput component, use in EmbedModal

---
 app/soapbox/components/copyable-input.tsx     | 42 +++++++++++++++++++
 app/soapbox/components/ui/button/button.tsx   | 10 ++---
 .../features/ui/components/embed-modal.tsx    | 14 ++-----
 3 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 app/soapbox/components/copyable-input.tsx

diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
new file mode 100644
index 0000000000..4a42452bbf
--- /dev/null
+++ b/app/soapbox/components/copyable-input.tsx
@@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { Button, HStack, Input } from './ui';
+
+interface ICopyableInput {
+  /** Text to be copied. */
+  value?: string,
+}
+
+/** An input with copy abilities. */
+const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
+  const input = useRef<HTMLInputElement>(null);
+
+  const selectInput = () => {
+    input.current?.select();
+  };
+
+  return (
+    <HStack alignItems='center'>
+      <Input
+        ref={input}
+        type='text'
+        value={value}
+        className='rounded-r-none'
+        outerClassName='flex-grow'
+        onClick={selectInput}
+        readOnly
+      />
+
+      <Button
+        theme='primary'
+        className='mt-1 h-full rounded-l-none rounded-r-lg'
+        onClick={selectInput}
+      >
+        <FormattedMessage id='input.copy' defaultMessage='Copy' />
+      </Button>
+    </HStack>
+  );
+};
+
+export default CopyableInput;
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index 15826ff2d3..e3ae339fc7 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -12,8 +13,8 @@ interface IButton {
   block?: boolean,
   /** Elements inside the <button> */
   children?: React.ReactNode,
-  /** @deprecated unused */
-  classNames?: string,
+  /** Extra class names for the button. */
+  className?: string,
   /** Prevent the button from being clicked. */
   disabled?: boolean,
   /** URL to an SVG icon to render inside the button. */
@@ -22,8 +23,6 @@ interface IButton {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void,
   /** A predefined button size. */
   size?: ButtonSizes,
-  /** @deprecated unused */
-  style?: React.CSSProperties,
   /** Text inside the button. Takes precedence over `children`. */
   text?: React.ReactNode,
   /** Makes the button into a navlink, if provided. */
@@ -47,6 +46,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     theme = 'secondary',
     to,
     type = 'button',
+    className,
   } = props;
 
   const themeClass = useButtonStyles({
@@ -72,7 +72,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
 
   const renderButton = () => (
     <button
-      className={themeClass}
+      className={classNames(themeClass, className)}
       disabled={disabled}
       onClick={handleClick}
       ref={ref}
diff --git a/app/soapbox/features/ui/components/embed-modal.tsx b/app/soapbox/features/ui/components/embed-modal.tsx
index a715b50a73..ae149e1380 100644
--- a/app/soapbox/features/ui/components/embed-modal.tsx
+++ b/app/soapbox/features/ui/components/embed-modal.tsx
@@ -2,8 +2,9 @@ import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { closeModal } from 'soapbox/actions/modals';
+import CopyableInput from 'soapbox/components/copyable-input';
 import SafeEmbed from 'soapbox/components/safe-embed';
-import { Modal, Stack, Text, Input, Divider } from 'soapbox/components/ui';
+import { Modal, Stack, Text, Divider } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 import useEmbed from 'soapbox/queries/embed';
 
@@ -22,10 +23,6 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
     }
   }, [isError]);
 
-  const handleInputClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
-    e.currentTarget.select();
-  };
-
   const handleClose = () => {
     dispatch(closeModal('EMBED'));
   };
@@ -40,12 +37,7 @@ const EmbedModal: React.FC<IEmbedModal> = ({ url, onError }) => {
           <FormattedMessage id='embed.instructions' defaultMessage='Embed this post on your website by copying the code below.' />
         </Text>
 
-        <Input
-          type='text'
-          readOnly
-          value={embed?.html || ''}
-          onClick={handleInputClick}
-        />
+        <CopyableInput value={embed?.html || ''} />
       </Stack>
 
       <div className='py-9'>

From 48ba485a0d05d05e6309da901bdfcf1059e283e3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:23:17 -0500
Subject: [PATCH 3/7] CryptoAddress: use new CopyableInput component

---
 .../features/crypto_donate/components/crypto_address.tsx    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.tsx b/app/soapbox/features/crypto_donate/components/crypto_address.tsx
index 1ecccf0834..04a6e63884 100644
--- a/app/soapbox/features/crypto_donate/components/crypto_address.tsx
+++ b/app/soapbox/features/crypto_donate/components/crypto_address.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
+import CopyableInput from 'soapbox/components/copyable-input';
 import { Text, Icon, Stack, HStack } from 'soapbox/components/ui';
-import { CopyableInput } from 'soapbox/features/forms';
 
 import { getExplorerUrl } from '../utils/block_explorer';
 import { getTitle } from '../utils/coin_db';
@@ -57,9 +57,7 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
         <Text>{note}</Text>
       )}
 
-      <div className='crypto-address__address simple_form'>
-        <CopyableInput value={address} />
-      </div>
+      <CopyableInput value={address} />
     </Stack>
   );
 };

From 82aad21900c7bcc7f48a0455e0aed79bf50fd984 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:28:20 -0500
Subject: [PATCH 4/7] CopyableInput: oh yeah, make the input actually copy

---
 app/soapbox/components/copyable-input.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
index 4a42452bbf..c38cc8c5b3 100644
--- a/app/soapbox/components/copyable-input.tsx
+++ b/app/soapbox/components/copyable-input.tsx
@@ -5,7 +5,7 @@ import { Button, HStack, Input } from './ui';
 
 interface ICopyableInput {
   /** Text to be copied. */
-  value?: string,
+  value: string,
 }
 
 /** An input with copy abilities. */
@@ -14,6 +14,12 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
 
   const selectInput = () => {
     input.current?.select();
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(value);
+    } else {
+      document.execCommand('copy');
+    }
   };
 
   return (

From 9c7274ee01f4864031a532d7b4501e2c0b5b3e42 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:29:46 -0500
Subject: [PATCH 5/7] Delete legacy CopyableInput component

---
 .../components/detailed_crypto_address.tsx    |  7 +++--
 app/soapbox/features/forms/index.tsx          | 26 -------------------
 2 files changed, 3 insertions(+), 30 deletions(-)

diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
index 76b83c1960..3435273c77 100644
--- a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
+++ b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx
@@ -1,8 +1,8 @@
 import { QRCodeCanvas as QRCode } from 'qrcode.react';
 import React from 'react';
 
+import CopyableInput from 'soapbox/components/copyable-input';
 import Icon from 'soapbox/components/icon';
-import { CopyableInput } from 'soapbox/features/forms';
 
 import { getExplorerUrl } from '../utils/block_explorer';
 import { getTitle } from '../utils/coin_db';
@@ -38,9 +38,8 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
       <div className='crypto-address__qrcode'>
         <QRCode value={address} />
       </div>
-      <div className='crypto-address__address simple_form'>
-        <CopyableInput value={address} />
-      </div>
+
+      <CopyableInput value={address} />
     </div>
   );
 };
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index 9504d05606..dc9e3faa06 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -287,29 +287,3 @@ export const FileChooserLogo: React.FC<IFileChooserLogo> = props => (
 FileChooserLogo.defaultProps = {
   accept: ['image/svg', 'image/png'],
 };
-
-interface ICopyableInput {
-  value: string,
-}
-
-export const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
-  const node = useRef<HTMLInputElement>(null);
-
-  const handleCopyClick: React.MouseEventHandler = () => {
-    if (!node.current) return;
-
-    node.current.select();
-    node.current.setSelectionRange(0, 99999);
-
-    document.execCommand('copy');
-  };
-
-  return (
-    <div className='copyable-input'>
-      <input ref={node} type='text' value={value} readOnly />
-      <button className='p-2 text-white bg-primary-600' onClick={handleCopyClick}>
-        <FormattedMessage id='forms.copy' defaultMessage='Copy' />
-      </button>
-    </div>
-  );
-};

From 764b2302d92de8d3356a1fba9bf1311cf17c1698 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:31:03 -0500
Subject: [PATCH 6/7] Embeds: enable for TruthSocial

---
 app/soapbox/utils/features.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 2043e35456..c9eac36880 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -242,7 +242,10 @@ const getInstanceFeatures = (instance: Instance) => {
      * Ability to embed posts on external sites.
      * @see GET /api/oembed
      */
-    embeds: v.software === MASTODON,
+    embeds: any([
+      v.software === MASTODON,
+      v.software === TRUTHSOCIAL,
+    ]),
 
     /**
      * Ability to add emoji reactions to a status.

From 954e02067e3adb8b3b7d0c83430d8af0960ffaf3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 25 Aug 2022 21:39:35 -0500
Subject: [PATCH 7/7] Remove unused import from features/forms

---
 app/soapbox/features/forms/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index dc9e3faa06..4bab25a5d9 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { v4 as uuidv4 } from 'uuid';
 
 import { Text, Select } from '../../components/ui';