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 => {

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">

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}}

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;