Created button for triggering native share dialog, if available

index.html

@@ -11,6 +11,7 @@
         <div class="form-container">
             <textarea id="secretInput" placeholder="Psst... what's it?"></textarea>
             <button id="shareButton">Share</button>
+            <button id="sendToButton">Send to...</button>
         </div>
         <div id="spinner" class="spinner hidden"></div>
     </div>

static/app.js

@@ -1,10 +1,29 @@
 import config from './config.js';
 import { generateKey, encryptData, decryptData, exportKey, importKey } from './crypto.js';
-
 const textarea = document.getElementById('secretInput');
 const shareButton = document.getElementById('shareButton');
+const sendToButton = document.getElementById('sendToButton');
 const spinner = document.getElementById('spinner');
 
+// Hide send to button when textarea content changes
+textarea.addEventListener('input', () => {
+    sendToButton.classList.add('hidden');
+});
+
+async function handleSendTo() {
+    try {
+        if (navigator.share) {
+            await navigator.share({
+                title: 'Secret Share',
+                text: 'Here\'s a secret for you',
+                url: textarea.value
+            });
+        }
+    } catch (error) {
+        console.error('Sharing failed:', error);
+    }
+}
+
 async function handleShare() {
     if (!textarea.value.trim()) return;
     
@@ -33,6 +52,11 @@ async function handleShare() {
         const shareUrl = `${window.location.origin}/${encodedData}`;
         
         textarea.value = shareUrl;
+        
+        // Show send to button if Web Share API is available
+        if (navigator.share) {
+            sendToButton.classList.remove('hidden');
+        }
     } catch (error) {
         console.error('Sharing failed:', error);
     } finally {
@@ -76,4 +100,5 @@ async function handlePageLoad() {
 }
 
 shareButton.addEventListener('click', handleShare);
+sendToButton.addEventListener('click', handleSendTo);
 window.addEventListener('load', handlePageLoad);

static/styles.css

@@ -51,12 +51,21 @@ button {
     font-size: 16px;
     cursor: pointer;
     transition: background-color 0.3s;
+    margin-left: 10px;
+}
+
+#sendToButton {
+    background-color: #7b68ee;
 }
 
 button:hover {
     background-color: #00c4aa;
 }
 
+#sendToButton:hover {
+    background-color: #6a5acd;
+}
+
 .spinner {
     position: absolute;
     top: 50%;