diff --git a/app/soapbox/features/group/components/group-options-button.tsx b/app/soapbox/features/group/components/group-options-button.tsx index 597a751d7..ebc3152e4 100644 --- a/app/soapbox/features/group/components/group-options-button.tsx +++ b/app/soapbox/features/group/components/group-options-button.tsx @@ -19,6 +19,7 @@ const messages = defineMessages({ leave: { id: 'group.leave.label', defaultMessage: 'Leave' }, leaveSuccess: { id: 'group.leave.success', defaultMessage: 'Left the group' }, report: { id: 'group.report.label', defaultMessage: 'Report' }, + share: { id: 'group.share.label', defaultMessage: 'Share' }, }); interface IGroupActionButton { @@ -35,6 +36,15 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => { const isAdmin = group.relationship?.role === GroupRoles.ADMIN; const isBlocked = group.relationship?.blocked_by; + const handleShare = () => { + navigator.share({ + text: group.display_name, + url: group.url, + }).catch((e) => { + if (e.name !== 'AbortError') console.error(e); + }); + }; + const onLeaveGroup = () => dispatch(openModal('CONFIRM', { heading: intl.formatMessage(messages.confirmationHeading), @@ -49,6 +59,7 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => { })); const menu: Menu = useMemo(() => { + const canShare = 'share' in navigator; const items = []; if (isMember || isAdmin) { @@ -59,6 +70,14 @@ const GroupOptionsButton = ({ group }: IGroupActionButton) => { }); } + if (canShare) { + items.push({ + text: intl.formatMessage(messages.share), + icon: require('@tabler/icons/share.svg'), + action: handleShare, + }); + } + if (isAdmin) { items.push({ text: intl.formatMessage(messages.leave), diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index 6138dbdd5..9281992cb 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -807,6 +807,7 @@ "group.report.label": "Report", "group.role.admin": "Admin", "group.role.owner": "Owner", + "group.share.label": "Share", "group.tabs.all": "All", "group.tabs.media": "Media", "group.tabs.members": "Members",