Connect Nostr account from My Contributions

And upon connection, immediately fetch contributions and render them

app/components/contributions-timeline.gjs

@@ -1,48 +1,86 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import Icon from './icon';
 import ContributionPhoto from './contribution-photo';
+import Modal from './modal';
+import NostrConnect from './nostr-connect';
 import eq from 'ember-truth-helpers/helpers/eq';
 import not from 'ember-truth-helpers/helpers/not';
 import restoreScroll from '../modifiers/restore-scroll';
 
-<template>
+export default class ContributionsTimelineComponent extends Component {
-  <div class="sidebar">
+  @tracked isNostrConnectModalOpen = false;
-    <div class="sidebar-header has-back-btn">
+
-      <button type="button" class="back-btn" {{on "click" @onBack}}>
+  @action
-        <Icon @name="arrow-left" @size={{20}} @color="#333" />
+  openNostrConnectModal(event) {
-      </button>
+    event.preventDefault();
-      <h2 class="sidebar-header-text-centered">
+    this.isNostrConnectModalOpen = true;
-        <span class="sidebar-header-icon-wrapper">
+  }
-          <Icon @name="activity" @size={{20}} @color="#898989" />
+
-        </span>
+  @action
-        My Contributions
+  closeNostrConnectModal() {
-      </h2>
+    this.isNostrConnectModalOpen = false;
-      <button type="button" class="close-btn" {{on "click" @onClose}}>
+  }
-        <Icon @name="x" @size={{20}} @color="#333" />
+
-      </button>
+  @action
+  onNostrConnected() {
+    this.closeNostrConnectModal();
+    this.args.onNostrConnected?.();
+  }
+
+  <template>
+    <div class="sidebar">
+      <div class="sidebar-header has-back-btn">
+        <button type="button" class="back-btn" {{on "click" @onBack}}>
+          <Icon @name="arrow-left" @size={{20}} @color="#333" />
+        </button>
+        <h2 class="sidebar-header-text-centered">
+          <span class="sidebar-header-icon-wrapper">
+            <Icon @name="activity" @size={{20}} @color="#898989" />
+          </span>
+          My Contributions
+        </h2>
+        <button type="button" class="close-btn" {{on "click" @onClose}}>
+          <Icon @name="x" @size={{20}} @color="#333" />
+        </button>
+      </div>
+
+      <div class="sidebar-content" {{restoreScroll @scrollTop}}>
+        {{#if @isLoading}}
+          <div class="sidebar-loading">
+            <Icon @name="loading-ring" @size={{24}} @color="#898989" />
+          </div>
+        {{else if (not @isConnected)}}
+          <p class="empty-state">
+            <a
+              href="#"
+              role="button"
+              tabindex="0"
+              {{on "click" this.openNostrConnectModal}}
+            >Connect your Nostr account</a>
+            to see your contributions.
+          </p>
+        {{else if (not @items.length)}}
+          <p class="empty-state">No contributions yet. Start by adding photos to
+            places.</p>
+        {{else}}
+          <ul class="contributions-list">
+            {{#each @items as |item|}}
+              {{#if (eq item.type "photo")}}
+                <ContributionPhoto @item={{item}} @onSelect={{@onSelect}} />
+              {{/if}}
+            {{/each}}
+          </ul>
+        {{/if}}
+      </div>
     </div>
 
-    <div class="sidebar-content" {{restoreScroll @scrollTop}}>
+    {{#if this.isNostrConnectModalOpen}}
-      {{#if @isLoading}}
+      <Modal @onClose={{this.closeNostrConnectModal}}>
-        <div class="sidebar-loading">
+        <NostrConnect @onConnect={{this.onNostrConnected}} />
-          <Icon @name="loading-ring" @size={{24}} @color="#898989" />
+      </Modal>
-        </div>
+    {{/if}}
-      {{else if (not @isConnected)}}
+  </template>
-        <p class="empty-state">
+}
-          Connect your Nostr account to see your contributions.
-        </p>
-      {{else if (not @items.length)}}
-        <p class="empty-state">No contributions yet. Start by adding photos to
-          places.</p>
-      {{else}}
-        <ul class="contributions-list">
-          {{#each @items as |item|}}
-            {{#if (eq item.type "photo")}}
-              <ContributionPhoto @item={{item}} @onSelect={{@onSelect}} />
-            {{/if}}
-          {{/each}}
-        </ul>
-      {{/if}}
-    </div>
-  </div>
-</template>

app/controllers/contributions.js

@@ -43,6 +43,11 @@ export default class ContributionsController extends Controller {
     this.router.transitionTo(`/place/${item.placeIdentifier}`);
   }
 
+  @action
+  onNostrConnected() {
+    this.loadContributionsTask.perform(this.nostrAuth.pubkey);
+  }
+
   @action
   backToMenu() {
     this.router.transitionTo('menu');

app/templates/contributions.gjs

@@ -10,6 +10,7 @@ import ContributionsTimeline from '#components/contributions-timeline';
       @onSelect={{@controller.selectContribution}}
       @onBack={{@controller.backToMenu}}
       @onClose={{@controller.close}}
+      @onNostrConnected={{@controller.onNostrConnected}}
     />
   {{/if}}
 </template>