Refactor first seen tooltip labels

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html

@@ -14,13 +14,25 @@
           <a [routerLink]="['/tx/' | relativeUrl, txid]">{{ txid | shortenString : 16}}</a>
         </td>
       </tr>
-      <tr *ngIf="time && !relativeTime">
+      <tr *ngIf="time">
-        <td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
+        <ng-container [ngSwitch]="timeMode">
-        <td class="value"><i><app-time kind="since" [time]="time" [fastRender]="true"></app-time></i></td>
+          <ng-container *ngSwitchCase="'mempool'">
-      </tr>
+            <td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
-      <tr *ngIf="time && relativeTime">
+            <td class="value"><i><app-time kind="since" [time]="time" [fastRender]="true"></app-time></i></td>
-        <td class="label" i18n="transaction.confirmed-after|Transaction confirmed after">Confirmed</td>
+          </ng-container>
-        <td class="value"><i><app-time kind="span" [time]="relativeTime - time"></app-time></i></td>
+          <ng-container *ngSwitchCase="'missed'">
+            <td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
+            <td class="value"><i><app-time kind="before" [time]="relativeTime - time"></app-time></i></td>
+          </ng-container>
+          <ng-container *ngSwitchCase="'after'">
+            <td class="label" i18n="transaction.first-seen|Transaction first seen">First seen</td>
+            <td class="value"><i><app-time kind="span" [time]="time - relativeTime"></app-time></i></td>
+          </ng-container>
+          <ng-container *ngSwitchCase="'mined'">
+            <td class="label" i18n="transaction.confirmed-after|Transaction confirmed after">Confirmed</td>
+            <td class="value"><i><app-time kind="span" [time]="relativeTime - time"></app-time></i></td>
+          </ng-container>
+        </ng-container>
       </tr>
       <tr>
         <td class="label" i18n="dashboard.latest-transactions.amount">Amount</td>

frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts

@@ -29,6 +29,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
   effectiveRate;
   acceleration;
   hasEffectiveRate: boolean = false;
+  timeMode: 'mempool' | 'mined' | 'missed' | 'after' = 'mempool';
   filters: Filter[] = [];
   activeFilters: { [key: string]: boolean } = {};
 
@@ -76,6 +77,22 @@ export class BlockOverviewTooltipComponent implements OnChanges {
           this.activeFilters[filter.key] = true;
         }
       }
+
+      if (!this.relativeTime) {
+        this.timeMode = 'mempool';
+      } else {
+        if (this.tx?.context === 'actual' || this.tx?.status === 'found') {
+          this.timeMode = 'mined';
+        } else {
+          const time = this.relativeTime || Date.now();
+          if (this.time <= time) {
+            this.timeMode = 'missed';
+          } else {
+            this.timeMode = 'after';
+          }
+        }
+      }
+
       this.cd.markForCheck();
     }
   }

frontend/src/app/components/time/time.component.ts

@@ -23,7 +23,7 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input() time: number;
   @Input() dateString: number;
-  @Input() kind: 'plain' | 'since' | 'until' | 'span' = 'plain';
+  @Input() kind: 'plain' | 'since' | 'until' | 'span' | 'before' = 'plain';
   @Input() fastRender = false;
   @Input() fixedRender = false;
   @Input() relative = false;
@@ -86,7 +86,9 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
         seconds = Math.floor(this.time);
     }
 
-    if (seconds < 60) {
+    if (seconds < 1 && this.kind === 'span') {
+      return $localize`:@@date-base.immediately:Immediately`;
+    } else if (seconds < 60) {
       if (this.relative || this.kind === 'since') {
         return $localize`:@@date-base.just-now:Just now`;
       } else if (this.kind === 'until') {
@@ -206,6 +208,28 @@ export class TimeComponent implements OnInit, OnChanges, OnDestroy {
           }
         }
         break;
+      case 'before':
+      if (number === 1) {
+        switch (unit) { // singular (1 day)
+          case 'year': return $localize`:@@time-span:${dateStrings.i18nYear}:DATE: before`; break;
+          case 'month': return $localize`:@@time-span:${dateStrings.i18nMonth}:DATE: before`; break;
+          case 'week': return $localize`:@@time-span:${dateStrings.i18nWeek}:DATE: before`; break;
+          case 'day': return $localize`:@@time-span:${dateStrings.i18nDay}:DATE: before`; break;
+          case 'hour': return $localize`:@@time-span:${dateStrings.i18nHour}:DATE: before`; break;
+          case 'minute': return $localize`:@@time-span:${dateStrings.i18nMinute}:DATE: before`; break;
+          case 'second': return $localize`:@@time-span:${dateStrings.i18nSecond}:DATE: before`; break;
+        }
+      } else {
+        switch (unit) { // plural (2 days)
+          case 'year': return $localize`:@@time-span:${dateStrings.i18nYears}:DATE: before`; break;
+          case 'month': return $localize`:@@time-span:${dateStrings.i18nMonths}:DATE: before`; break;
+          case 'week': return $localize`:@@time-span:${dateStrings.i18nWeeks}:DATE: before`; break;
+          case 'day': return $localize`:@@time-span:${dateStrings.i18nDays}:DATE: before`; break;
+          case 'hour': return $localize`:@@time-span:${dateStrings.i18nHours}:DATE: before`; break;
+          case 'minute': return $localize`:@@time-span:${dateStrings.i18nMinutes}:DATE: before`; break;
+          case 'second': return $localize`:@@time-span:${dateStrings.i18nSeconds}:DATE: before`; break;
+        }
+      }
       break;
       default:
         if (number === 1) {