fix(frontend): propagate locale changes reactively to mounted shells

frontend/angular/src/app/features/host/host-shell.component.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { createApiClient } from '../../../../../src/api/client';
 import type { FinishGameResponse, ScoreboardResponse } from '../../../../../src/api/types';
 import { createVerticalSliceController } from '../../../../../src/spa/vertical-slice';
-import { clientHasNoAudioOutput, resolvePreferredLocale, t } from '../../lobby-i18n';
+import { clientHasNoAudioOutput, resolvePreferredLocale, subscribeToLocaleChanges, t } from '../../lobby-i18n';
 
 interface SessionDetail {
   session: { code: string; status: string; current_round: number };
@@ -64,7 +64,7 @@ type LeaderboardResponse = FinishGameResponse;
     </div>
   `,
 })
-export class HostShellComponent implements OnInit {
+export class HostShellComponent implements OnInit, OnDestroy {
   locale = resolvePreferredLocale();
   readonly clientHasNoAudioOutput = clientHasNoAudioOutput;
 
@@ -84,8 +84,12 @@ export class HostShellComponent implements OnInit {
 
   private readonly api = createApiClient();
   private readonly controller = createVerticalSliceController(this.api);
+  private unsubscribeLocale: (() => void) | null = null;
 
   ngOnInit(): void {
+    this.unsubscribeLocale = subscribeToLocaleChanges((locale) => {
+      this.locale = locale;
+    });
     if (typeof window === 'undefined') {
       return;
     }
@@ -105,6 +109,11 @@ export class HostShellComponent implements OnInit {
     void this.refreshSession();
   }
 
+  ngOnDestroy(): void {
+    this.unsubscribeLocale?.();
+    this.unsubscribeLocale = null;
+  }
+
   copy(key: string): string {
     return t(key, this.locale);
   }