Localizing search box strings, channel tags

fixes #3124
fixes #3128
fixes #3083

frontend/src/app/components/search-form/search-results/search-results.component.html

@@ -1,30 +1,30 @@
 <div class="dropdown-menu show" *ngIf="results" [hidden]="!results.hashQuickMatch && !results.addresses.length && !results.nodes.length && !results.channels.length">
   <ng-template [ngIf]="results.blockHeight">
-    <div class="card-title">Bitcoin Block Height</div>
+    <div class="card-title" i18n="search.bitcoin-block-height">Bitcoin Block Height</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
-      Go to "{{ results.searchText }}"
+      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.txId">
-    <div class="card-title">Bitcoin Transaction</div>
+    <div class="card-title" i18n="search.bitcoin-transaction">Bitcoin Transaction</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
-      Go to "{{ results.searchText | shortenString : 13 }}"
+      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.address">
-    <div class="card-title">Bitcoin Address</div>
+    <div class="card-title" i18n="search.bitcoin-address">Bitcoin Address</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
-      Go to "{{ results.searchText | shortenString : isMobile ? 20 : 30 }}"
+      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : isMobile ? 20 : 30 }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.blockHash">
-    <div class="card-title">Bitcoin Block</div>
+    <div class="card-title" i18n="search.bitcoin-block">Bitcoin Block</div>
     <button (click)="clickItem(0)" [class.active]="0 === activeIdx" type="button" role="option" class="dropdown-item">
-      Go to "{{ results.searchText | shortenString : 13 }}"
+      <ng-container *ngTemplateOutlet="goTo; context: { $implicit: results.searchText | shortenString : 13 }"></ng-container>
     </button>
   </ng-template>
   <ng-template [ngIf]="results.addresses.length">
-    <div class="card-title">Bitcoin Addresses</div>
+    <div class="card-title" i18n="search.bitcoin-addresses">Bitcoin Addresses</div>
     <ng-template ngFor [ngForOf]="results.addresses" let-address let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + i)" [class.active]="(results.hashQuickMatch + i) === activeIdx" type="button" role="option" class="dropdown-item">
         <ngb-highlight [result]="address | shortenString : isMobile ? 25 : 36" [term]="results.searchText"></ngb-highlight>
@@ -32,7 +32,7 @@
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.nodes.length">
-    <div class="card-title">Lightning Nodes</div>
+    <div class="card-title" i18n="search.lightning-nodes">Lightning Nodes</div>
     <ng-template ngFor [ngForOf]="results.nodes" let-node let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + i)" [class.inactive]="node.status === 0" [class.active]="results.hashQuickMatch + results.addresses.length + i === activeIdx" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]" type="button" role="option" class="dropdown-item">
         <ngb-highlight [result]="node.alias" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ node.public_key | shortenString : 10 }}</span>
@@ -40,7 +40,7 @@
     </ng-template>
   </ng-template>
   <ng-template [ngIf]="results.channels.length">
-    <div class="card-title">Lightning Channels</div>
+    <div class="card-title" i18n="search.lightning-channels">Lightning Channels</div>
     <ng-template ngFor [ngForOf]="results.channels" let-channel let-i="index">
       <button (click)="clickItem(results.hashQuickMatch + results.addresses.length + results.nodes.length + i)" [class.inactive]="channel.status === 2"  [class.active]="results.hashQuickMatch + results.addresses.length + results.nodes.length + i === activeIdx" type="button" role="option" class="dropdown-item">
         <ngb-highlight [result]="channel.short_id" [term]="results.searchText"></ngb-highlight> &nbsp;<span class="symbol">{{ channel.id }}</span>
@@ -48,3 +48,5 @@
     </ng-template>
   </ng-template>
 </div>
+
+<ng-template #goTo let-x i18n="search.go-to">Go to "{{ x }}"</ng-template>

frontend/src/app/lightning/channel/closing-type/closing-type.component.ts

@@ -17,19 +17,19 @@ export class ClosingTypeComponent implements OnChanges {
   getLabelFromType(type: number): { label: string; class: string } {
     switch (type) {
       case 1: return { 
-        label: 'Mutually closed',
+        label: $localize`Mutually closed`,
         class: 'success',
       };
       case 2: return {
-        label: 'Force closed',
+        label: $localize`Force closed`,
         class: 'warning',
       };
       case 3: return {
-        label: 'Force closed with penalty',
+        label: $localize`Force closed with penalty`,
         class: 'danger',
       };
       default: return {
-        label: 'Unknown',
+        label: $localize`:@@e5d8bb389c702588877f039d72178f219453a72d:Unknown`,
         class: 'secondary',
       };
     }

frontend/src/app/lightning/channels-statistics/channels-statistics.component.html

@@ -1,9 +1,9 @@
 <div class="widget-toggler">
   <a href="" (click)="switchMode('avg')" class="toggler-option"
-    [ngClass]="{'inactive': mode === 'avg'}"><small>avg</small></a>
+    [ngClass]="{'inactive': mode === 'avg'}"><small i18n="statistics.average-small">avg</small></a>
   <span style="color: #ffffff66; font-size: 8px"> | </span>
   <a href="" (click)="switchMode('med')" class="toggler-option"
-    [ngClass]="{'inactive': mode === 'med'}"><small>med</small></a>
+    [ngClass]="{'inactive': mode === 'med'}"><small i18n="statistics.median-small">med</small></a>
 </div>
 
 <div class="fee-estimation-wrapper" *ngIf="statistics$ | async as statistics; else loadingReward">