Connect Nostr via mobile app

app/components/place-details.gjs

@@ -515,7 +515,10 @@ export default class PlaceDetails extends Component {
           </p>
         {{/if}}
 
-        {{#if this.osmUrl}}
+      </div>
+
+      {{#if this.osmUrl}}
+      <div class="meta-info">
           <p class="content-with-icon">
             <Icon @name="camera" />
             <span>
@@ -524,9 +527,8 @@ export default class PlaceDetails extends Component {
               </a>
             </span>
           </p>
-        {{/if}}
-
       </div>
+      {{/if}}
     </div>
 
     {{#if this.isPhotoUploadModalOpen}}

app/components/user-menu.gjs

@@ -3,13 +3,17 @@ import { action } from '@ember/object';
 import { service } from '@ember/service';
 import Icon from '#components/icon';
 import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+import { eq } from 'ember-truth-helpers';
+import Modal from './modal';
 
 export default class UserMenuComponent extends Component {
   @service storage;
   @service osmAuth;
-
   @service nostrAuth;
 
+  @tracked isNostrConnectModalOpen = false;
+
   @action
   connectRS() {
     this.args.onClose();
@@ -33,9 +37,31 @@ export default class UserMenuComponent extends Component {
   }
 
   @action
-  async connectNostr() {
+  openNostrConnectModal() {
+    this.isNostrConnectModalOpen = true;
+  }
+
+  @action
+  closeNostrConnectModal() {
+    this.isNostrConnectModalOpen = false;
+  }
+
+  @action
+  async connectNostrExtension() {
     try {
-      await this.nostrAuth.login();
+      await this.nostrAuth.login('extension');
+      this.closeNostrConnectModal();
+    } catch (e) {
+      console.error(e);
+      alert(e.message);
+    }
+  }
+
+  @action
+  async connectNostrApp() {
+    try {
+      await this.nostrAuth.login('connect');
+      this.closeNostrConnectModal();
     } catch (e) {
       console.error(e);
       alert(e.message);
@@ -47,6 +73,10 @@ export default class UserMenuComponent extends Component {
     this.nostrAuth.logout();
   }
 
+  get hasExtension() {
+    return typeof window !== 'undefined' && typeof window.nostr !== 'undefined';
+  }
+
   <template>
     <div class="user-menu-popover">
       <ul class="account-list">
@@ -124,7 +154,7 @@ export default class UserMenuComponent extends Component {
               <button
                 class="btn-text text-primary"
                 type="button"
-                {{on "click" this.connectNostr}}
+                {{on "click" this.openNostrConnectModal}}
               >Connect</button>
             {{/if}}
           </div>
@@ -140,5 +170,49 @@ export default class UserMenuComponent extends Component {
         </li>
       </ul>
     </div>
+
+    {{#if this.isNostrConnectModalOpen}}
+      <Modal @onClose={{this.closeNostrConnectModal}}>
+        <div class="nostr-connect-modal">
+          <h2>Connect with Nostr</h2>
+
+          <div class="nostr-connect-options">
+            {{#if this.hasExtension}}
+              <button
+                class="btn btn-primary"
+                type="button"
+                {{on "click" this.connectNostrExtension}}
+              >
+                Browser Extension (nos2x, Alby)
+              </button>
+            {{else}}
+              <button
+                class="btn btn-secondary"
+                type="button"
+                disabled
+                title="No Nostr extension found in your browser."
+              >
+                Browser Extension (Not Found)
+              </button>
+            {{/if}}
+
+            <button
+              class="btn btn-primary"
+              type="button"
+              {{on "click" this.connectNostrApp}}
+            >
+              Mobile Signer App (Amber, etc.)
+            </button>
+          </div>
+
+          {{#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>
+            </div>
+          {{/if}}
+        </div>
+      </Modal>
+    {{/if}}
   </template>
 }