From 3233150cc44f7bf25abc5755e953148e01d516df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 19 Aug 2026 12:24:50 -0600
Subject: [PATCH 1/2] Connect Nostr account from My Contributions

And upon connection, immediately fetch contributions and render them
---
 app/components/contributions-timeline.gjs | 116 ++++++++++++++--------
 app/controllers/contributions.js          |   5 +
 app/templates/contributions.gjs           |   1 +
 3 files changed, 83 insertions(+), 39 deletions(-)

diff --git a/app/components/contributions-timeline.gjs b/app/components/contributions-timeline.gjs
index ecc2eff..72e5ef0 100644
--- a/app/components/contributions-timeline.gjs
+++ b/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>
-  <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>
+export default class ContributionsTimelineComponent extends Component {
+  @tracked isNostrConnectModalOpen = false;
+
+  @action
+  openNostrConnectModal(event) {
+    event.preventDefault();
+    this.isNostrConnectModalOpen = true;
+  }
+
+  @action
+  closeNostrConnectModal() {
+    this.isNostrConnectModalOpen = false;
+  }
+
+  @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 @isLoading}}
-        <div class="sidebar-loading">
-          <Icon @name="loading-ring" @size={{24}} @color="#898989" />
-        </div>
-      {{else if (not @isConnected)}}
-        <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>
+    {{#if this.isNostrConnectModalOpen}}
+      <Modal @onClose={{this.closeNostrConnectModal}}>
+        <NostrConnect @onConnect={{this.onNostrConnected}} />
+      </Modal>
+    {{/if}}
+  </template>
+}
diff --git a/app/controllers/contributions.js b/app/controllers/contributions.js
index 38a0a44..15909e2 100644
--- a/app/controllers/contributions.js
+++ b/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');
diff --git a/app/templates/contributions.gjs b/app/templates/contributions.gjs
index bcf6c2a..cfa5398 100644
--- a/app/templates/contributions.gjs
+++ b/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>

From b7e46da3e9bc8ffe0aea9a85f09a625574b7fd6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 19 Aug 2026 12:32:21 -0600
Subject: [PATCH 2/2] Add test for new Nostr connect location

---
 .../contributions-timeline-test.gjs           | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/tests/integration/components/contributions-timeline-test.gjs b/tests/integration/components/contributions-timeline-test.gjs
index 682025d..e639508 100644
--- a/tests/integration/components/contributions-timeline-test.gjs
+++ b/tests/integration/components/contributions-timeline-test.gjs
@@ -1,14 +1,23 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'marco/tests/helpers';
 import { render, click } from '@ember/test-helpers';
+import Service from '@ember/service';
 import ContributionsTimeline from 'marco/components/contributions-timeline';
+import { setupNostrMocks } from 'marco/tests/helpers/mock-nostr';
 
 function noop() {}
 
+class MockToastService extends Service {
+  show() {}
+}
+
 module('Integration | Component | contributions-timeline', function (hooks) {
   setupRenderingTest(hooks);
+  setupNostrMocks(hooks);
 
   hooks.beforeEach(function () {
+    this.owner.register('service:toast', MockToastService);
+
     this.noop = noop;
     this.emptyItems = [];
   });
@@ -48,6 +57,28 @@ module('Integration | Component | contributions-timeline', function (hooks) {
     assert.dom('.empty-state').includesText('Connect your Nostr account');
   });
 
+  test('clicking "Connect your Nostr account" opens the Nostr connect modal', async function (assert) {
+    await render(
+      <template>
+        <div id="modal-portal"></div>
+        <ContributionsTimeline
+          @items={{this.emptyItems}}
+          @isLoading={{false}}
+          @isConnected={{false}}
+          @onBack={{this.noop}}
+          @onClose={{this.noop}}
+          @onSelect={{this.noop}}
+        />
+      </template>
+    );
+
+    assert.dom('.nostr-connect-modal').doesNotExist();
+
+    await click('.empty-state a');
+
+    assert.dom('.nostr-connect-modal').exists();
+  });
+
   test('it renders an empty state when connected but no contributions', async function (assert) {
     await render(
       <template>