[PM-6769] [SM-1158] Fix Translation pipe issues on main (#8319)

* Require init in i18n service.

this is needed to load translations and set translation locale

* No longer need to cast i18n

* Expose user preferred locale in i18nService

This is for correctly displaying `default` when no locale has been set in preferences components. The `locale$` observable should always resolve to the currently locale currently being translated to.

apps/web/src/app/core/init.service.ts

@@ -19,8 +19,6 @@ import { ContainerService } from "@bitwarden/common/platform/services/container.
 import { EventUploadService } from "@bitwarden/common/services/event/event-upload.service";
 import { VaultTimeoutService } from "@bitwarden/common/services/vault-timeout/vault-timeout.service";
 
-import { I18nService } from "../core/i18n.service";
-
 @Injectable()
 export class InitService {
   constructor(
@@ -52,7 +50,7 @@ export class InitService {
 
       setTimeout(() => this.notificationsService.init(), 3000);
       await this.vaultTimeoutService.init(true);
-      await (this.i18nService as I18nService).init();
+      await this.i18nService.init();
       (this.eventUploadService as EventUploadService).init(true);
       this.twoFactorService.init();
       const htmlEl = this.win.document.documentElement;

apps/web/src/app/core/tests/preloaded-english-i18n.module.ts

@@ -8,6 +8,7 @@ import eng from "../../../locales/en/messages.json";
 
 class PreloadedEnglishI18nService extends TranslationService implements I18nService {
   translationLocale = "en";
+  userSetLocale$: Observable<string | undefined> = of("en");
   locale$: Observable<string> = of("en");
   constructor() {
     super("en", "", () => {

apps/web/src/app/settings/preferences.component.ts

@@ -141,7 +141,7 @@ export class PreferencesComponent implements OnInit {
       ),
       enableFavicons: !(await this.settingsService.getDisableFavicon()),
       theme: await firstValueFrom(this.themeStateService.selectedTheme$),
-      locale: (await firstValueFrom(this.i18nService.locale$)) ?? null,
+      locale: (await firstValueFrom(this.i18nService.userSetLocale$)) ?? null,
     };
     this.startingLocale = initialFormValues.locale;
     this.form.setValue(initialFormValues, { emitEvent: false });