Refactor i18n approach (#2875)

* Refactor i18n approach

* chore: move to shared

* chore: add default

* create DialogService and update LoadingService (#2876)

* complete translation infra for ui project, currently broken

* cleanup and more dictionaries

* chore: fix

---------

Co-authored-by: Matt Hill <MattDHill@users.noreply.github.com>
Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/ui/src/app/routes/diagnostic/home/home.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { RouterModule, Routes } from '@angular/router'
 import { HomePage } from './home.page'
+import { i18nPipe } from '@start9labs/shared'
 
 const ROUTES: Routes = [
   {
@@ -12,7 +13,7 @@ const ROUTES: Routes = [
 ]
 
 @NgModule({
-  imports: [CommonModule, TuiButton, RouterModule.forChild(ROUTES)],
+  imports: [CommonModule, TuiButton, RouterModule.forChild(ROUTES), i18nPipe],
   declarations: [HomePage],
 })
 export class HomePageModule {}

web/projects/ui/src/app/routes/diagnostic/home/home.page.html

@@ -1,20 +1,20 @@
 <ng-container *ngIf="!restarted; else refresh">
-  <h1 class="title">StartOS - Diagnostic Mode</h1>
+  <h1 class="title">StartOS - {{ 'Diagnostic Mode' | i18n }}</h1>
 
   <ng-container *ngIf="error">
-    <h2 class="subtitle">StartOS launch error:</h2>
+    <h2 class="subtitle">StartOS {{ 'launch error' | i18n }}:</h2>
     <code class="code warning">
       <p>{{ error.problem }}</p>
       <p *ngIf="error.details">{{ error.details }}</p>
     </code>
 
-    <a tuiButton routerLink="logs">View Logs</a>
+    <a tuiButton routerLink="logs">{{ 'View logs' | i18n }}</a>
 
-    <h2 class="subtitle">Possible solutions:</h2>
+    <h2 class="subtitle">{{ 'Possible solutions' | i18n }}:</h2>
     <code class="code"><p>{{ error.solution }}</p></code>
 
     <div class="buttons">
-      <button tuiButton (click)="restart()">Restart Server</button>
+      <button tuiButton (click)="restart()">{{ 'Restart server' | i18n }}</button>
 
       <button
         *ngIf="error.code === 15 || error.code === 25"
@@ -22,7 +22,7 @@
         appearance="secondary"
         (click)="forgetDrive()"
       >
-        {{ error.code === 15 ? 'Setup Current Drive' : 'Enter Recovery Mode'}}
+        {{ error.code === 15 ? ('Setup current drive' | i18n) : ('Enter recovery mode' | i18n) }}
       </button>
 
       <button
@@ -30,16 +30,16 @@
         appearance="secondary-destructive"
         (click)="presentAlertRepairDisk()"
       >
-        Repair Drive
+        {{ 'Repair drive' | i18n }}
       </button>
     </div>
   </ng-container>
 </ng-container>
 
 <ng-template #refresh>
-  <h1 class="title">Server is restarting</h1>
+  <h1 class="title">{{ 'Server is restarting' | i18n }}</h1>
   <h2 class="subtitle">
-    Wait for the server to restart, then refresh this page.
+    {{ 'Wait for the server to restart, then refresh this page.' | i18n }}
   </h2>
-  <button tuiButton (click)="refreshPage()">Refresh</button>
+  <button tuiButton (click)="refreshPage()">{{ 'Refresh' | i18n }}</button>
 </ng-template>

web/projects/ui/src/app/routes/diagnostic/home/home.page.ts

@@ -1,12 +1,11 @@
-import { TUI_CONFIRM } from '@taiga-ui/kit'
 import { Component, Inject } from '@angular/core'
 import { WA_WINDOW } from '@ng-web-apis/common'
-import { LoadingService } from '@start9labs/shared'
-import { TuiDialogService } from '@taiga-ui/core'
+import { DialogService, i18nKey, LoadingService } from '@start9labs/shared'
 import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigService } from 'src/app/services/config.service'
 
+// @TODO Alex how to use i18nPipe in this component since not standalone?
 @Component({
   selector: 'diagnostic-home',
   templateUrl: 'home.page.html',
@@ -16,15 +15,15 @@ export class HomePage {
   restarted = false
   error?: {
     code: number
-    problem: string
-    solution: string
+    problem: i18nKey
+    solution: i18nKey
     details?: string
   }
 
   constructor(
     private readonly loader: LoadingService,
     private readonly api: ApiService,
-    private readonly dialogs: TuiDialogService,
+    private readonly dialog: DialogService,
     @Inject(WA_WINDOW) private readonly window: Window,
     readonly config: ConfigService,
   ) {}
@@ -64,7 +63,7 @@ export class HomePage {
       } else if (error.code === 2) {
         this.error = {
           code: 2,
-          problem: 'Filesystem I/O error.',
+          problem: 'Filesystem error',
           solution:
             'Repairing the disk could help resolve this issue. Please DO NOT unplug the drive or server during this time or the situation will become worse.',
           details: error.data?.details,
@@ -73,7 +72,7 @@ export class HomePage {
       } else if (error.code === 48) {
         this.error = {
           code: 48,
-          problem: 'Disk management error.',
+          problem: 'Disk management error',
           solution:
             'Repairing the disk could help resolve this issue. Please DO NOT unplug the drive or server during this time or the situation will become worse.',
           details: error.data?.details,
@@ -81,8 +80,8 @@ export class HomePage {
       } else {
         this.error = {
           code: error.code,
-          problem: error.message,
-          solution: 'Please contact support.',
+          problem: error.message as i18nKey,
+          solution: 'Please contact support',
           details: error.data?.details,
         }
       }
@@ -92,7 +91,7 @@ export class HomePage {
   }
 
   async restart(): Promise<void> {
-    const loader = this.loader.open('Loading...').subscribe()
+    const loader = this.loader.open('Loading').subscribe()
 
     try {
       await this.api.diagnosticRestart()
@@ -105,7 +104,7 @@ export class HomePage {
   }
 
   async forgetDrive(): Promise<void> {
-    const loader = this.loader.open('Loading...').subscribe()
+    const loader = this.loader.open('Loading').subscribe()
 
     try {
       await this.api.diagnosticForgetDrive()
@@ -119,15 +118,15 @@ export class HomePage {
   }
 
   async presentAlertRepairDisk() {
-    this.dialogs
-      .open(TUI_CONFIRM, {
+    this.dialog
+      .openConfirm({
         label: 'Warning',
         size: 's',
         data: {
           no: 'Cancel',
           yes: 'Repair',
           content:
-            '<p>This action should only be executed if directed by a Start9 support specialist.</p><p>If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem <i>will</i> be in an unrecoverable state. Please proceed with caution.</p>',
+            'This action should only be executed if directed by a Start9 support specialist. We recommend backing up your device before preforming this action. If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem will be in an unrecoverable state. Please proceed with caution.',
         },
       })
       .pipe(filter(Boolean))
@@ -145,7 +144,7 @@ export class HomePage {
   }
 
   private async repairDisk(): Promise<void> {
-    const loader = this.loader.open('Loading...').subscribe()
+    const loader = this.loader.open('Loading').subscribe()
 
     try {
       await this.api.diagnosticRepairDisk()