[Glitch] Add secondary Wrapstodon share button

Port 6821b70796 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/annual_report/index.module.scss

@@ -174,7 +174,7 @@ $mobile-breakpoint: 540px;
 
 .title {
   text-transform: uppercase;
-  color: #c2c8ff;
+  color: var(--color-text-brand-soft);
   font-weight: 500;
 
   &:last-child {
@@ -333,6 +333,19 @@ $mobile-breakpoint: 540px;
   mix-blend-mode: screen;
 }
 
+.shareButtonWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.secondaryShareButton {
+  // Extra selector is needed to override color
+  &:global(.button) {
+    color: var(--color-text-primary);
+  }
+}
+
 .navItemBadge {
   background: var(--color-bg-brand-soft);
 }

app/javascript/flavours/glitch/features/annual_report/share_button.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { showAlert } from '@/flavours/glitch/actions/alerts';
 import { resetCompose, focusCompose } from '@/flavours/glitch/actions/compose';
 import { closeModal } from '@/flavours/glitch/actions/modal';
 import { Button } from '@/flavours/glitch/components/button';
@@ -10,6 +11,7 @@ import type { AnnualReport as AnnualReportData } from '@/flavours/glitch/models/
 import { useAppDispatch } from '@/flavours/glitch/store';
 
 import { archetypeNames } from './archetype';
+import styles from './index.module.scss';
 
 const messages = defineMessages({
   share_message: {
@@ -20,11 +22,24 @@ const messages = defineMessages({
     id: 'annual_report.summary.share_on_mastodon',
     defaultMessage: 'Share on Mastodon',
   },
+  share_elsewhere: {
+    id: 'annual_report.summary.share_elsewhere',
+    defaultMessage: 'Share elsewhere',
+  },
+  copy_link: {
+    id: 'annual_report.summary.copy_link',
+    defaultMessage: 'Copy link',
+  },
+  copied: {
+    id: 'copy_icon_button.copied',
+    defaultMessage: 'Copied to clipboard',
+  },
 });
 
 export const ShareButton: FC<{ report: AnnualReportData }> = ({ report }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+
   const handleShareClick = useCallback(() => {
     // Generate the share message.
     const archetypeName = intl.formatMessage(
@@ -47,10 +62,35 @@ export const ShareButton: FC<{ report: AnnualReportData }> = ({ report }) => {
     dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
   }, [report, intl, dispatch]);
 
+  const supportsNativeShare = 'share' in navigator;
+
+  const handleSecondaryShare = useCallback(() => {
+    if (report.schema_version === 2 && report.share_url) {
+      if (supportsNativeShare) {
+        void navigator.share({
+          url: report.share_url,
+        });
+      } else {
+        void navigator.clipboard.writeText(report.share_url);
+        dispatch(showAlert({ message: messages.copied }));
+      }
+    }
+  }, [report, supportsNativeShare, dispatch]);
+
   return (
+    <div className={styles.shareButtonWrapper}>
       <Button
         text={intl.formatMessage(messages.share_on_mastodon)}
         onClick={handleShareClick}
       />
+      <Button
+        plain
+        className={styles.secondaryShareButton}
+        text={intl.formatMessage(
+          supportsNativeShare ? messages.share_elsewhere : messages.copy_link,
+        )}
+        onClick={handleSecondaryShare}
+      />
+    </div>
   );
 };