diff --git a/app/javascript/flavours/glitch/features/annual_report/index.module.scss b/app/javascript/flavours/glitch/features/annual_report/index.module.scss index 375b2e211e..024518d72f 100644 --- a/app/javascript/flavours/glitch/features/annual_report/index.module.scss +++ b/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); } diff --git a/app/javascript/flavours/glitch/features/annual_report/share_button.tsx b/app/javascript/flavours/glitch/features/annual_report/share_button.tsx index 652c8af913..58ea889336 100644 --- a/app/javascript/flavours/glitch/features/annual_report/share_button.tsx +++ b/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 ( -