Create dedicated Nostr Connect component, use nsec.app relay

app/components/user-menu.gjs

@@ -1,11 +1,11 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { service } from '@ember/service';
+import { inject as 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';
+import NostrConnect from './nostr-connect';
 
 export default class UserMenuComponent extends Component {
   @service storage;
@@ -46,37 +46,11 @@ export default class UserMenuComponent extends Component {
     this.isNostrConnectModalOpen = false;
   }
 
-  @action
-  async connectNostrExtension() {
-    try {
-      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);
-    }
-  }
-
   @action
   disconnectNostr() {
     this.nostrAuth.logout();
   }
 
-  get hasExtension() {
-    return typeof window !== 'undefined' && typeof window.nostr !== 'undefined';
-  }
-
   <template>
     <div class="user-menu-popover">
       <ul class="account-list">
@@ -173,45 +147,7 @@ export default class UserMenuComponent extends Component {
 
     {{#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>
+        <NostrConnect @onConnect={{this.closeNostrConnectModal}} />
       </Modal>
     {{/if}}
   </template>