feat(download): add share button to download page

Introduce a new "Share" button on the download page to allow users to easily share the box link.

- Add the share button markup and SVG icon to `download.html`
- Include the `13-share.js` script in the base layout to handle the share action
- Add CSS styling for the share button in `30-download.css`

backend/static/css/30-download.css

@@ -704,6 +704,11 @@
   pointer-events: none;
 }
 
+.download-share-button {
+  margin-top: 1rem;
+  margin-bottom: 0.65rem;
+}
+
 .upload-processing-alert {
   margin: 1rem 0;
   padding: .85rem 1rem;

backend/static/js/13-share.js

@@ -0,0 +1,50 @@
+(function () {
+  const shareButtons = document.querySelectorAll("[data-share-box]");
+  if (shareButtons.length === 0) {
+    return;
+  }
+
+  shareButtons.forEach((button) => {
+    const label = button.querySelector("[data-share-box-label]") || button;
+    const shareData = {
+      title: button.dataset.shareTitle || document.title,
+      text: button.dataset.shareText || "",
+      url: window.Warpbox.absoluteURL(button.dataset.shareUrl || window.location.href),
+    };
+    const canShare = typeof navigator.share === "function" && (!navigator.canShare || navigator.canShare(shareData));
+
+    label.textContent = canShare ? "Share" : "Copy Link";
+    button.setAttribute("aria-label", canShare ? "Share this box" : "Copy box link");
+
+    button.addEventListener("click", async () => {
+      if (canShare) {
+        try {
+          await navigator.share(shareData);
+          return;
+        } catch (error) {
+          if (error && error.name === "AbortError") {
+            return;
+          }
+        }
+      }
+      await copyShareURL(button, label, shareData.url, canShare);
+    });
+  });
+
+  async function copyShareURL(button, label, url, shareMode) {
+    try {
+      await window.Warpbox.writeClipboard(url);
+      const previous = label.textContent;
+      label.textContent = "Copied";
+      window.setTimeout(() => {
+        label.textContent = shareMode ? "Share" : "Copy Link";
+      }, 1400);
+    } catch (error) {
+      if (window.Warpbox && typeof window.Warpbox.error === "function") {
+        window.Warpbox.error("The share link could not be copied.", {
+          title: "Copy failed",
+        });
+      }
+    }
+  }
+})();

backend/templates/layouts/base.html

@@ -72,6 +72,7 @@
   <script defer src="/static/js/03-popups.js?version={{.AppVersion}}"></script>
   <script defer src="/static/js/10-file-browser.js?version={{.AppVersion}}"></script>
   <script defer src="/static/js/12-reactions.js?version={{.AppVersion}}"></script>
+  <script defer src="/static/js/13-share.js?version={{.AppVersion}}"></script>
   <script defer src="/static/js/20-storage-admin.js?version={{.AppVersion}}"></script>
   <script defer src="/static/js/25-admin-charts.js?version={{.AppVersion}}"></script>
   <script defer src="/static/js/30-token-copy.js?version={{.AppVersion}}"></script>

backend/templates/pages/download.html

@@ -43,6 +43,10 @@
         </div>
 
         {{if not .Data.Locked}}
+          <button class="button button-outline button-wide download-share-button" type="button" data-share-box data-share-url="/d/{{.Data.Box.ID}}" data-share-title="{{if .Data.Locked}}Protected Warpbox box{{else}}Warpbox box {{.Data.Box.ID}}{{end}}" data-share-text="Shared files on Warpbox">
+            <svg viewBox="0 0 24 24" role="img" focusable="false" aria-hidden="true"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7" /><path d="M16 6 12 2 8 6" /><path d="M12 2v14" /></svg>
+            <span data-share-box-label>Share</span>
+          </button>
           {{if or $processing $failed}}
             <span class="button button-outline button-wide is-disabled" aria-disabled="true">
               {{if $failed}}Download unavailable{{else}}Files processing{{end}}