Add bunker login for desktop via QR code

app/components/nostr-connect.gjs

@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { on } from '@ember/modifier';
 import { eq } from 'ember-truth-helpers';
+import qrCode from '../modifiers/qr-code';
 
 export default class NostrConnectComponent extends Component {
   @service nostrAuth;
@@ -72,8 +73,16 @@ export default class NostrConnectComponent extends Component {
 
       {{#if (eq this.nostrAuth.connectStatus "waiting")}}
         <div class="alert alert-info nostr-connect-status">
-          <p>Waiting for you to approve the connection in your mobile signer
-            app...</p>
+          {{#if this.nostrAuth.isMobile}}
+            <p>Waiting for you to approve the connection in your mobile signer
+              app...</p>
+          {{else}}
+            <p>Scan this QR code with a compatible Nostr signer app (like
+              Amber):</p>
+            <div class="qr-code-container">
+              <canvas {{qrCode this.nostrAuth.connectUri}}></canvas>
+            </div>
+          {{/if}}
         </div>
       {{/if}}
     </div>

app/modifiers/qr-code.js

@@ -0,0 +1,17 @@
+import { modifier } from 'ember-modifier';
+import QRCode from 'qrcode';
+
+export default modifier((element, [text]) => {
+  if (text) {
+    QRCode.toCanvas(element, text, {
+      width: 256,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#ffffff',
+      },
+    }).catch((err) => {
+      console.error('Failed to generate QR code', err);
+    });
+  }
+});

app/services/nostr-auth.js

@@ -62,6 +62,10 @@ export default class NostrAuthService extends Service {
     }
   }
 
+  get isMobile() {
+    return /Mobi|Android|iPhone|iPad/i.test(navigator.userAgent);
+  }
+
   get isConnected() {
     return (
       !!this.pubkey &&
@@ -153,8 +157,10 @@ export default class NostrAuthService extends Service {
           icons: [],
         });
 
-        // Trigger the deep link intent immediately for the user
-        window.location.href = this.connectUri;
+        // Trigger the deep link intent immediately for the user if on mobile
+        if (this.isMobile) {
+          window.location.href = this.connectUri;
+        }
 
         // Start listening to the relay
         await this._signerInstance.open();

app/styles/app.css

@@ -1392,6 +1392,18 @@ button.create-place {
 
 .nostr-connect-status {
   margin-top: 1.5rem;
+  text-align: center;
+}
+
+.qr-code-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.qr-code-container canvas {
+  border-radius: 8px;
+  background: white; /* Ensure good contrast for scanning */
 }
 
 /* Modal */