Add secondary Wrapstodon share button (#37224)

app/javascript/mastodon/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/mastodon/features/annual_report/share_button.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
+import { showAlert } from '@/mastodon/actions/alerts';
 import { resetCompose, focusCompose } from '@/mastodon/actions/compose';
 import { closeModal } from '@/mastodon/actions/modal';
 import { Button } from '@/mastodon/components/button';
@@ -10,6 +11,7 @@ import type { AnnualReport as AnnualReportData } from '@/mastodon/models/annual_
 import { useAppDispatch } from '@/mastodon/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 (
-    <Button
-      text={intl.formatMessage(messages.share_on_mastodon)}
-      onClick={handleShareClick}
-    />
+    <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>
   );
 };

app/javascript/mastodon/locales/en.json

@@ -143,6 +143,7 @@
   "annual_report.summary.archetype.title_public": "{name}'s archetype",
   "annual_report.summary.archetype.title_self": "Your archetype",
   "annual_report.summary.close": "Close",
+  "annual_report.summary.copy_link": "Copy link",
   "annual_report.summary.followers.new_followers": "{count, plural, one {new follower} other {new followers}}",
   "annual_report.summary.highlighted_post.boost_count": "This post was boosted {count, plural, one {once} other {# times}}.",
   "annual_report.summary.highlighted_post.favourite_count": "This post was favorited {count, plural, one {once} other {# times}}.",
@@ -155,6 +156,7 @@
   "annual_report.summary.new_posts.new_posts": "new posts",
   "annual_report.summary.percentile.text": "<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of {domain} users.</bottomLabel>",
   "annual_report.summary.percentile.we_wont_tell_bernie": "We won't tell Bernie.",
+  "annual_report.summary.share_elsewhere": "Share elsewhere",
   "annual_report.summary.share_message": "I got the {archetype} archetype!",
   "annual_report.summary.share_on_mastodon": "Share on Mastodon",
   "attachments_list.unprocessed": "(unprocessed)",