Add ability to share Group

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),

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",