Add buttons for opening signer app, copying connect link

app/components/nostr-connect.gjs

@@ -41,6 +41,40 @@ export default class NostrConnectComponent extends Component {
     }
   }
 
+  @action
+  async copyConnectUri() {
+    const text = this.nostrAuth.connectUri;
+
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+
+        textArea.style.position = 'fixed';
+        textArea.style.top = '0';
+        textArea.style.left = '0';
+        textArea.style.opacity = '0';
+
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+
+        if (!successful) {
+          throw new Error('Fallback copy failed');
+        }
+      }
+      this.toast.show('Connection link copied to clipboard');
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+      alert('Failed to copy link');
+    }
+  }
+
   <template>
     <div class="nostr-connect-modal">
       <h2>Connect with Nostr</h2>
@@ -59,7 +93,7 @@ export default class NostrConnectComponent extends Component {
             class="btn btn-outline"
             type="button"
             disabled
-            title="No Nostr extension found in your browser."
+            title="No Nostr extension found in your browser"
           >
             Browser Extension (Not Found)
           </button>
@@ -79,9 +113,20 @@ export default class NostrConnectComponent extends Component {
           {{#if this.nostrAuth.isMobile}}
             <p>Waiting for you to approve the connection in your mobile signer
               app...</p>
+            <div class="mobile-connect-actions">
+              <a href={{this.nostrAuth.connectUri}} class="btn btn-primary">
+                Open Signer App
+              </a>
+              <button
+                class="btn btn-outline"
+                type="button"
+                {{on "click" this.copyConnectUri}}
+              >
+                Copy Connection Link
+              </button>
+            </div>
           {{else}}
-            <p>Scan this QR code with a compatible Nostr signer app (like
+            <p>Scan this QR code with a Nostr signer app (like Amber):</p>
-              Amber):</p>
             <div class="qr-code-container">
               <canvas {{qrCode this.nostrAuth.connectUri}}></canvas>
             </div>

app/styles/app.css

@@ -1084,6 +1084,7 @@ abbr[title] {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
+  text-decoration: none;
 }
 
 .btn:disabled {
@@ -1780,6 +1781,13 @@ button.create-place {
   margin-top: 1.5rem;
 }
 
+.mobile-connect-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
 .nostr-connect-status {
   margin-top: 1.5rem;
   text-align: center;