1 files changed, 32 insertions, 2 deletions

diff --git a/overlays/spm/frontend/src/app/spm/spm.component.html b/overlays/spm/frontend/src/app/spm/spm.component.html
index d1339d95..5d0e625a 100644
--- a/overlays/spm/frontend/src/app/spm/spm.component.html
+++ b/overlays/spm/frontend/src/app/spm/spm.component.html
@@ -1,3 +1,33 @@
-<p>spm works!</p>
+<div id="mail-panel-container" fxLayout="row wrap" style="gap: 16px">
+  <ng-template ngFor [ngForOf]="spmMails$ | async | keyvalue: asIsOrder" let-entry>
+    <mat-card>
+      <mat-card-title class="mono" *ngIf="entry.value.state !== 'loading'">{{entry.value.local}}</mat-card-title>
+      <mat-card-subtitle class="mono" *ngIf="entry.value.state !== 'loading'">@{{entry.value.domain}}</mat-card-subtitle>
+      <mat-card-content *ngIf="entry.value.state === 'loading'">
+        <mat-spinner style="margin: auto"></mat-spinner>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="claim(entry.key)" [disabled]="entry.value.state === 'loaded' || entry.value.state === 'claiming' ? null : true">
+          <mat-icon aria-hidden="false" aria-label="Claim" svgIcon="check"></mat-icon>
+          <span *ngIf="entry.value.state !== 'claimed'">Claim</span>
+          <span *ngIf="entry.value.state === 'claimed'">Claimed</span>
+        </button>
+        <button mat-stroked-button color="warn" (click)="forget(entry.key)">
+          <mat-icon aria-hidden="false" aria-label="Forget" svgIcon="delete_forever"></mat-icon>
+          <span *ngIf="entry.value.state !== 'claimed'">Forget</span>
+          <span *ngIf="entry.value.state === 'claimed'">Hide</span>
+        </button>
+      </mat-card-actions>
+      <mat-card-footer *ngIf="entry.value.state === 'loaded' && entry.value.percent_expiration">
+        <mat-progress-bar mode="determinate" [value]="entry.value.percent_expiration"></mat-progress-bar>
+      </mat-card-footer>
+      <mat-card-footer *ngIf="entry.value.state === 'claiming'">
+        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+      </mat-card-footer>
+    </mat-card>
+  </ng-template>
+</div>
 
-<mat-icon aria-hidden="false" aria-label="Thumbs up" svgIcon="thumb_up"></mat-icon>
+<button id="add-button" mat-fab color="accent" (click)="add()">
+  <mat-icon aria-hidden="false" aria-label="Add" svgIcon="add"></mat-icon>
+</button>