From 53f13e4a6366eb56acebe6d672b06ec063fd5881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Thu, 7 Mar 2024 16:48:37 +0100
Subject: [PATCH 1/8] Move reimbursement items to separate component

---
 .../reimbursement-item/component.js           | 19 ++++++++++
 .../reimbursement-item/template.hbs           | 34 +++++++++++++++++
 .../reimbursement-list/component.js           | 13 -------
 .../reimbursement-list/template.hbs           | 37 +------------------
 4 files changed, 55 insertions(+), 48 deletions(-)
 create mode 100644 app/components/reimbursement-item/component.js
 create mode 100644 app/components/reimbursement-item/template.hbs

diff --git a/app/components/reimbursement-item/component.js b/app/components/reimbursement-item/component.js
new file mode 100644
index 0000000..1ada034
--- /dev/null
+++ b/app/components/reimbursement-item/component.js
@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import config from 'kredits-web/config/environment';
+
+export default class ReimbursementItemComponent extends Component {
+  @service kredits;
+
+  get ipfsGatewayUrl () {
+    return config.ipfs.gatewayUrl;
+  }
+
+  @action
+  veto (id) {
+    this.kredits.vetoReimbursement(id).then(transaction => {
+      console.debug('[controllers:budget] Veto submitted to chain: '+transaction.hash);
+    });
+  }
+}
diff --git a/app/components/reimbursement-item/template.hbs b/app/components/reimbursement-item/template.hbs
new file mode 100644
index 0000000..96828de
--- /dev/null
+++ b/app/components/reimbursement-item/template.hbs
@@ -0,0 +1,34 @@
+<li data-reimbursement-id={{@reimbursement.id}}
+    class="{{item-status @reimbursement}}">
+  <p class="meta">
+    <span class="recipient">
+      <UserAvatar @contributor={{@reimbursement.contributor}} />
+    </span>
+    <span class="title">
+      Expenses covered by {{@reimbursement.contributor.name}}
+    </span>
+  </p>
+  <p class="token-amount">
+    <span class="amount">
+      {{sats-to-btc @reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
+  </p>
+
+  <ExpenseList @expenses={{@reimbursement.expenses}} />
+
+  <div class="meta">
+    <p class="confirmation-eta">
+      <ConfirmedIn @confirmedAtBlock={{@reimbursement.confirmedAt}} />
+    </p>
+    <p class="actions">
+      <a href="{{this.ipfsGatewayUrl}}/{{@reimbursement.ipfsHash}}"
+         class="button small" target="_blank" rel="noopener noreferrer">
+        Inspect IPFS data
+      </a>
+      {{#if this.kredits.currentUserIsCore}}
+        <button {{on "click" (fn this.veto @reimbursement.id)}}
+                disabled={{@reimbursement.vetoed}}
+                class="button small danger" type="button">veto</button>
+      {{/if}}
+    </p>
+  </div>
+</li>
diff --git a/app/components/reimbursement-list/component.js b/app/components/reimbursement-list/component.js
index 79c260d..34f7820 100644
--- a/app/components/reimbursement-list/component.js
+++ b/app/components/reimbursement-list/component.js
@@ -1,23 +1,10 @@
 import Component from '@glimmer/component';
 import { sort } from '@ember/object/computed';
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import config from 'kredits-web/config/environment';
 
 export default class ReimbursementListComponent extends Component {
   @service kredits;
 
   itemSorting = Object.freeze(['pendingStatus:asc', 'id:desc']);
   @sort('args.items', 'itemSorting') itemsSorted;
-
-  get ipfsGatewayUrl () {
-    return config.ipfs.gatewayUrl;
-  }
-
-  @action
-  veto (id) {
-    this.kredits.vetoReimbursement(id).then(transaction => {
-      console.debug('[controllers:budget] Veto submitted to chain: '+transaction.hash);
-    });
-  }
 }
diff --git a/app/components/reimbursement-list/template.hbs b/app/components/reimbursement-list/template.hbs
index 50dcedf..98cd41f 100644
--- a/app/components/reimbursement-list/template.hbs
+++ b/app/components/reimbursement-list/template.hbs
@@ -1,38 +1,5 @@
 <ul class="item-list spaced reimbursement-list {{if @loading 'loading'}}">
-  {{#each this.itemsSorted as |reimbursement|}}
-    <li data-reimbursement-id={{reimbursement.id}}
-        class="{{item-status reimbursement}}">
-      <p class="meta">
-        <span class="recipient">
-          <UserAvatar @contributor={{reimbursement.contributor}} />
-        </span>
-        <span class="title">
-          Expenses covered by {{reimbursement.contributor.name}}
-        </span>
-      </p>
-      <p class="token-amount">
-        <span class="amount">
-          {{sats-to-btc reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
-      </p>
-
-      <ExpenseList @expenses={{reimbursement.expenses}} />
-
-      <div class="meta">
-        <p class="confirmation-eta">
-          <ConfirmedIn @confirmedAtBlock={{reimbursement.confirmedAt}} />
-        </p>
-        <p class="actions">
-          <a href="{{this.ipfsGatewayUrl}}/{{reimbursement.ipfsHash}}"
-             class="button small" target="_blank" rel="noopener noreferrer">
-            Inspect IPFS data
-          </a>
-          {{#if this.kredits.currentUserIsCore}}
-            <button {{on "click" (fn this.veto reimbursement.id)}}
-                    disabled={{reimbursement.vetoed}}
-                    class="button small danger" type="button">veto</button>
-          {{/if}}
-        </p>
-      </div>
-    </li>
+  {{#each this.itemsSorted as |item|}}
+    <ReimbursementItem @reimbursement={{item}} />
   {{/each}}
 </ul>
\ No newline at end of file

From af309ff682ac6f32e2010f9b3c1c52f52804c1db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Thu, 7 Mar 2024 17:04:50 +0100
Subject: [PATCH 2/8] Hide veto button for confirmed reimbursements

---
 app/components/reimbursement-item/component.js | 12 ++++++++++++
 app/components/reimbursement-item/template.hbs |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/components/reimbursement-item/component.js b/app/components/reimbursement-item/component.js
index 1ada034..51e8b82 100644
--- a/app/components/reimbursement-item/component.js
+++ b/app/components/reimbursement-item/component.js
@@ -10,6 +10,18 @@ export default class ReimbursementItemComponent extends Component {
     return config.ipfs.gatewayUrl;
   }
 
+  get isConfirmed () {
+    return (this.args.reimbursement.confirmedAt - this.kredits.currentBlock) <= 0;
+  }
+
+  get isUnconfirmed () {
+    return !this.isConfirmed;
+  }
+
+  get showVetoButton () {
+    return this.isUnconfirmed && this.kredits.currentUserIsCore;
+  }
+
   @action
   veto (id) {
     this.kredits.vetoReimbursement(id).then(transaction => {
diff --git a/app/components/reimbursement-item/template.hbs b/app/components/reimbursement-item/template.hbs
index 96828de..e3f4140 100644
--- a/app/components/reimbursement-item/template.hbs
+++ b/app/components/reimbursement-item/template.hbs
@@ -24,7 +24,7 @@
          class="button small" target="_blank" rel="noopener noreferrer">
         Inspect IPFS data
       </a>
-      {{#if this.kredits.currentUserIsCore}}
+      {{#if this.showVetoButton}}
         <button {{on "click" (fn this.veto @reimbursement.id)}}
                 disabled={{@reimbursement.vetoed}}
                 class="button small danger" type="button">veto</button>

From 49b3825af462af75144591ec199d5f88ce8d0bef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Thu, 14 Mar 2024 17:48:23 +0100
Subject: [PATCH 3/8] Show confirmation block for confirmed reimbursements

---
 app/components/confirmed-in/template.hbs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/components/confirmed-in/template.hbs b/app/components/confirmed-in/template.hbs
index 44614dc..65ac4f0 100644
--- a/app/components/confirmed-in/template.hbs
+++ b/app/components/confirmed-in/template.hbs
@@ -1,3 +1,5 @@
-{{#unless this.isConfirmed}}
+{{#if this.isConfirmed}}
+Confirmed at block <strong>{{@confirmedAtBlock}}</strong> (~ {{this.confirmedInHumanTime}} ago)
+{{else}}
 Confirming in <strong>{{this.confirmedInBlocks}}</strong> blocks (~ {{this.confirmedInHumanTime}})
-{{/unless}}
+{{/if}}

From 3ee140723ca76482bdfe10c665d5236f4d079e1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Thu, 14 Mar 2024 17:49:12 +0100
Subject: [PATCH 4/8] Hide line items by default for confirmed reimbursements

---
 app/components/reimbursement-item/component.js | 14 ++++++++++++++
 app/components/reimbursement-item/template.hbs |  5 ++++-
 app/components/reimbursement-list/template.hbs |  2 +-
 app/styles/_item-list.scss                     | 10 ++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/components/reimbursement-item/component.js b/app/components/reimbursement-item/component.js
index 51e8b82..8afcee0 100644
--- a/app/components/reimbursement-item/component.js
+++ b/app/components/reimbursement-item/component.js
@@ -1,10 +1,19 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import config from 'kredits-web/config/environment';
 
 export default class ReimbursementItemComponent extends Component {
   @service kredits;
+  @tracked showExpenseDetails = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    if (this.isUnconfirmed && !this.args.reimbursement.vetoed) {
+      this.showExpenseDetails = true;
+    }
+  }
 
   get ipfsGatewayUrl () {
     return config.ipfs.gatewayUrl;
@@ -22,6 +31,11 @@ export default class ReimbursementItemComponent extends Component {
     return this.isUnconfirmed && this.kredits.currentUserIsCore;
   }
 
+  @action
+  toggleExpenseDetails () {
+    this.showExpenseDetails = !this.showExpenseDetails;
+  }
+
   @action
   veto (id) {
     this.kredits.vetoReimbursement(id).then(transaction => {
diff --git a/app/components/reimbursement-item/template.hbs b/app/components/reimbursement-item/template.hbs
index e3f4140..7a2276d 100644
--- a/app/components/reimbursement-item/template.hbs
+++ b/app/components/reimbursement-item/template.hbs
@@ -1,5 +1,6 @@
 <li data-reimbursement-id={{@reimbursement.id}}
-    class="{{item-status @reimbursement}}">
+    class="{{item-status @reimbursement}}"
+    {{on "click" this.toggleExpenseDetails}}>
   <p class="meta">
     <span class="recipient">
       <UserAvatar @contributor={{@reimbursement.contributor}} />
@@ -13,7 +14,9 @@
       {{sats-to-btc @reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
   </p>
 
+  {{#if this.showExpenseDetails}}
   <ExpenseList @expenses={{@reimbursement.expenses}} />
+  {{/if}}
 
   <div class="meta">
     <p class="confirmation-eta">
diff --git a/app/components/reimbursement-list/template.hbs b/app/components/reimbursement-list/template.hbs
index 98cd41f..3988acc 100644
--- a/app/components/reimbursement-list/template.hbs
+++ b/app/components/reimbursement-list/template.hbs
@@ -1,4 +1,4 @@
-<ul class="item-list spaced reimbursement-list {{if @loading 'loading'}}">
+<ul class="item-list collapsible spaced reimbursement-list {{if @loading 'loading'}}">
   {{#each this.itemsSorted as |item|}}
     <ReimbursementItem @reimbursement={{item}} />
   {{/each}}
diff --git a/app/styles/_item-list.scss b/app/styles/_item-list.scss
index 548bf3c..6f33b3e 100644
--- a/app/styles/_item-list.scss
+++ b/app/styles/_item-list.scss
@@ -16,6 +16,16 @@ ul.item-list {
     }
   }
 
+  &.collapsible {
+    > li {
+      border-left: 1px solid transparent;
+
+      &:hover {
+        border-left: 1px solid $blue;
+      }
+    }
+  }
+
   &.loading {
     @include loading-border-top;
 

From 0cd05d14bc8b88839814d7b48dbe3ff318909696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Thu, 14 Mar 2024 17:55:14 +0100
Subject: [PATCH 5/8] Don't fail linting for click handlers on arbitrary HTML
 elements

---
 .template-lintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.template-lintrc.js b/.template-lintrc.js
index 22c9f7b..0620fa7 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   rules: {
     'simple-unless': false,
     'no-nested-interactive': false,
+    'no-invalid-interactive': false,
     'no-html-comments': false
   },
 

From dd2bdd5332c865dcc4adce90dd5748d4eaf4598c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Thu, 14 Mar 2024 19:15:10 +0100
Subject: [PATCH 6/8] Show dates in collapsed entries of confirmed
 reimbursements

---
 .../reimbursement-item/component.js           | 26 ++++++++++++++++++-
 .../reimbursement-item/template.hbs           |  6 ++++-
 app/helpers/fmt-date-localized.js             |  2 +-
 .../components/_reimbursement-list.scss       |  3 ---
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/components/reimbursement-item/component.js b/app/components/reimbursement-item/component.js
index 8afcee0..795eb12 100644
--- a/app/components/reimbursement-item/component.js
+++ b/app/components/reimbursement-item/component.js
@@ -3,6 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import config from 'kredits-web/config/environment';
+import fmtDateLocalized from 'kredits-web/helpers/fmt-date-localized';
 
 export default class ReimbursementItemComponent extends Component {
   @service kredits;
@@ -10,9 +11,10 @@ export default class ReimbursementItemComponent extends Component {
 
   constructor(owner, args) {
     super(owner, args);
-    if (this.isUnconfirmed && !this.args.reimbursement.vetoed) {
+    if (this.isUnconfirmed && !this.isVetoed) {
       this.showExpenseDetails = true;
     }
+    console.debug(fmtDateLocalized);
   }
 
   get ipfsGatewayUrl () {
@@ -27,10 +29,32 @@ export default class ReimbursementItemComponent extends Component {
     return !this.isConfirmed;
   }
 
+  get isVetoed () {
+    return this.args.reimbursement.vetoed;
+  }
+
   get showVetoButton () {
     return this.isUnconfirmed && this.kredits.currentUserIsCore;
   }
 
+  get showConfirmedIn () {
+    return !this.isVetoed &&
+           (this.showExpenseDetails || this.isUnconfirmed);
+  }
+
+  get expenses () {
+    return this.args.reimbursement.expenses;
+  }
+
+  get expensesDateRange () {
+    const dates = this.expenses.map(e => e.date).uniq().sort();
+    let out = fmtDateLocalized.compute(dates.firstObject)
+    if (dates.length > 1) {
+      out += ' - ' + fmtDateLocalized.compute(dates.lastObject)
+    }
+    return out;
+  }
+
   @action
   toggleExpenseDetails () {
     this.showExpenseDetails = !this.showExpenseDetails;
diff --git a/app/components/reimbursement-item/template.hbs b/app/components/reimbursement-item/template.hbs
index 7a2276d..793ef1f 100644
--- a/app/components/reimbursement-item/template.hbs
+++ b/app/components/reimbursement-item/template.hbs
@@ -19,8 +19,12 @@
   {{/if}}
 
   <div class="meta">
-    <p class="confirmation-eta">
+    <p>
+      {{#if this.showConfirmedIn}}
       <ConfirmedIn @confirmedAtBlock={{@reimbursement.confirmedAt}} />
+      {{else}}
+        {{#unless this.isVetoed}}{{this.expensesDateRange}}{{/unless}}
+      {{/if}}
     </p>
     <p class="actions">
       <a href="{{this.ipfsGatewayUrl}}/{{@reimbursement.ipfsHash}}"
diff --git a/app/helpers/fmt-date-localized.js b/app/helpers/fmt-date-localized.js
index a27bb28..baaa4b2 100644
--- a/app/helpers/fmt-date-localized.js
+++ b/app/helpers/fmt-date-localized.js
@@ -1,7 +1,7 @@
 import { helper } from '@ember/component/helper';
 import getLocale from 'kredits-web/utils/get-locale';
 
-export default helper(function(dateStr) {
+export default helper(function fmtDateLocalized(dateStr) {
   const date = new Date(dateStr);
   const locale = getLocale();
   return new Intl.DateTimeFormat(locale).format(date);
diff --git a/app/styles/components/_reimbursement-list.scss b/app/styles/components/_reimbursement-list.scss
index 556f69a..afb2502 100644
--- a/app/styles/components/_reimbursement-list.scss
+++ b/app/styles/components/_reimbursement-list.scss
@@ -43,9 +43,6 @@ ul.reimbursement-list {
       flex: 1;
       padding: 1.6rem 0 1rem 0;
 
-      &.confirmation-eta {
-      }
-
       &.actions {
         text-align: right;
       }

From fc044df9fd930780966c395979f71c1bc28bf7df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 20 Mar 2024 14:32:37 +0100
Subject: [PATCH 7/8] Add correct role to interactive element

Co-authored-by: Garret Alfert <alfert@wevelop.de>
---
 .template-lintrc.js                            | 1 -
 app/components/reimbursement-item/template.hbs | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/.template-lintrc.js b/.template-lintrc.js
index 0620fa7..22c9f7b 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -6,7 +6,6 @@ module.exports = {
   rules: {
     'simple-unless': false,
     'no-nested-interactive': false,
-    'no-invalid-interactive': false,
     'no-html-comments': false
   },
 
diff --git a/app/components/reimbursement-item/template.hbs b/app/components/reimbursement-item/template.hbs
index 793ef1f..408860e 100644
--- a/app/components/reimbursement-item/template.hbs
+++ b/app/components/reimbursement-item/template.hbs
@@ -1,6 +1,6 @@
 <li data-reimbursement-id={{@reimbursement.id}}
     class="{{item-status @reimbursement}}"
-    {{on "click" this.toggleExpenseDetails}}>
+    role="button" {{on "click" this.toggleExpenseDetails}}>
   <p class="meta">
     <span class="recipient">
       <UserAvatar @contributor={{@reimbursement.contributor}} />

From 071922d9796413d1dee336637c3cfef5eacaccd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 20 Mar 2024 14:35:01 +0100
Subject: [PATCH 8/8] Remove obsolete debug log

---
 app/components/reimbursement-item/component.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/reimbursement-item/component.js b/app/components/reimbursement-item/component.js
index 795eb12..e3a7f3a 100644
--- a/app/components/reimbursement-item/component.js
+++ b/app/components/reimbursement-item/component.js
@@ -14,7 +14,6 @@ export default class ReimbursementItemComponent extends Component {
     if (this.isUnconfirmed && !this.isVetoed) {
       this.showExpenseDetails = true;
     }
-    console.debug(fmtDateLocalized);
   }
 
   get ipfsGatewayUrl () {