[PM-6511] New i18n for angular (#8122)

* Use state provider to store preferred language

* migrate preferred language

* Use new i18n provider to get LOCAL_ID

* Fix preloaded english i18n

This is a mock service that forces english translations, it doesn't need the i18n interface that allows changing of locales.

* PR improvements

* Fixup merge

libs/common/src/platform/abstractions/i18n.service.ts

@@ -4,4 +4,5 @@ import { TranslationService } from "./translation.service";
 
 export abstract class I18nService extends TranslationService {
   locale$: Observable<string>;
+  abstract setLocale(locale: string): Promise<void>;
 }

libs/common/src/platform/services/i18n.service.ts

@@ -1,28 +1,36 @@
-import { Observable, ReplaySubject } from "rxjs";
+import { Observable, firstValueFrom, map } from "rxjs";
 
 import { I18nService as I18nServiceAbstraction } from "../abstractions/i18n.service";
+import { GlobalState, GlobalStateProvider, KeyDefinition, TRANSLATION_DISK } from "../state";
 
 import { TranslationService } from "./translation.service";
 
+const LOCALE_KEY = new KeyDefinition<string>(TRANSLATION_DISK, "locale", {
+  deserializer: (value) => value,
+});
+
 export class I18nService extends TranslationService implements I18nServiceAbstraction {
-  protected _locale = new ReplaySubject<string>(1);
-  private _translationLocale: string;
-  locale$: Observable<string> = this._locale.asObservable();
+  translationLocale: string;
+  protected translationLocaleState: GlobalState<string>;
+  locale$: Observable<string>;
 
   constructor(
     protected systemLanguage: string,
     protected localesDirectory: string,
     protected getLocalesJson: (formattedLocale: string) => Promise<any>,
+    globalStateProvider: GlobalStateProvider,
   ) {
     super(systemLanguage, localesDirectory, getLocalesJson);
+    this.translationLocaleState = globalStateProvider.get(LOCALE_KEY);
+    this.locale$ = this.translationLocaleState.state$.pipe(map((locale) => locale ?? null));
   }
 
-  get translationLocale(): string {
-    return this._translationLocale;
+  async setLocale(locale: string): Promise<void> {
+    await this.translationLocaleState.update(() => locale);
   }
 
-  set translationLocale(locale: string) {
-    this._translationLocale = locale;
-    this._locale.next(locale);
+  override async init() {
+    const storedLocale = await firstValueFrom(this.translationLocaleState.state$);
+    await super.init(storedLocale);
   }
 }

libs/common/src/platform/state/state-definitions.ts

@@ -57,6 +57,7 @@ export const CLEAR_EVENT_DISK = new StateDefinition("clearEvent", "disk");
 export const CRYPTO_DISK = new StateDefinition("crypto", "disk");
 export const CRYPTO_MEMORY = new StateDefinition("crypto", "memory");
 export const ENVIRONMENT_DISK = new StateDefinition("environment", "disk");
+export const TRANSLATION_DISK = new StateDefinition("translation", "disk");
 
 // Secrets Manager