Add support for sharing dialog in inbox answer sharing

app/assets/stylesheets/components/_inbox-entry.scss

@@ -57,3 +57,9 @@
     position: relative;
   }
 }
+
+body:not(.cap-web-share) {
+  [data-controller="share"] {
+    display: none;
+  }
+}

app/javascript/retrospring/controllers/inbox_sharing_controller.ts

@@ -1,12 +1,13 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-  static targets = ['twitter', 'tumblr', 'telegram', 'custom'];
+  static targets = ['twitter', 'tumblr', 'telegram', 'other', 'custom'];
 
   declare readonly twitterTarget: HTMLAnchorElement;
   declare readonly tumblrTarget: HTMLAnchorElement;
   declare readonly telegramTarget: HTMLAnchorElement;
   declare readonly customTarget: HTMLAnchorElement;
+  declare readonly otherTarget: HTMLButtonElement;
   declare readonly hasCustomTarget: boolean;
 
   static values = {
@@ -22,6 +23,7 @@ export default class extends Controller {
       this.twitterTarget.addEventListener('click', () => this.close());
       this.tumblrTarget.addEventListener('click', () => this.close());
       this.telegramTarget.addEventListener('click', () => this.close());
+      this.otherTarget.addEventListener('click', () => this.close());
 
       if (this.hasCustomTarget) {
         this.customTarget.addEventListener('click', () => this.close());

app/javascript/retrospring/controllers/share_controller.ts

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static values = {
+    url: String,
+    text: String,
+    title: String
+  };
+
+  declare readonly urlValue: string;
+  declare readonly textValue: string;
+  declare readonly titleValue: string;
+
+  share() {
+    let shareConfiguration = {};
+
+    if (this.urlValue.length >= 1) {
+      shareConfiguration = {
+        ...shareConfiguration,
+        ...{ url: this.urlValue }
+      };
+    }
+
+    if (this.textValue.length >= 1) {
+      shareConfiguration = {
+        ...shareConfiguration,
+        ...{ text: this.textValue }
+      };
+    }
+
+    if (this.titleValue.length >= 1) {
+      shareConfiguration = {
+        ...shareConfiguration,
+        ...{ title: this.titleValue }
+      };
+    }
+
+    navigator.share(shareConfiguration).then(() => {
+      this.element.dispatchEvent(new CustomEvent('retrospring:shared'));
+    });
+  }
+}

app/javascript/retrospring/features/inbox/entry/answer.ts

@@ -34,6 +34,11 @@ export function answerEntryHandler(event: Event): void {
       if (sharing != null) {
         sharing.dataset.inboxSharingConfigValue = JSON.stringify(data.sharing);
       }
+
+      const shareButton = inboxEntry.querySelector<HTMLButtonElement>('[data-controller="share"]');
+      if (shareButton != null) {
+        shareButton.dataset.shareTextValue = decodeURIComponent(data.sharing.custom).replaceAll('+', ' ');
+      }
       else {
         (inboxEntry as HTMLElement).remove();
       }

app/javascript/retrospring/initializers/stimulus.ts

@@ -13,6 +13,7 @@ import InboxSharingController from "retrospring/controllers/inbox_sharing_contro
 import ToastController from "retrospring/controllers/toast_controller";
 import PwaBadgeController from "retrospring/controllers/pwa_badge_controller";
 import NavigationController from "retrospring/controllers/navigation_controller";
+import ShareController from "retrospring/controllers/share_controller";
 
 /**
  * This module sets up Stimulus and our controllers
@@ -37,4 +38,5 @@ export default function (): void {
   window['Stimulus'].register('navigation', NavigationController);
   window['Stimulus'].register('theme', ThemeController);
   window['Stimulus'].register('toast', ToastController);
+  window['Stimulus'].register('share', ShareController);
 }

app/views/inbox/_entry.html.haml

@@ -52,6 +52,9 @@
             %a.btn.btn-primary{ href: "#", data: { inbox_sharing_target: "telegram" }, target: "_blank" }
               %i.fab.fa-telegram.fa-fw
               Telegram
+            %button.btn.btn-primary{ data: { controller: "share", action: "share#share", inbox_sharing_target: "other" } }
+              %i.fa.fa-fw.fa-share-alt
+              = t("actions.share.other")
             - if current_user.sharing_custom_url.present?
               %a.btn.btn-primary{ href: current_user.sharing_custom_url, data: { inbox_sharing_target: "custom" }, target: "_blank" }
                 = current_user.display_sharing_custom_url