fix in lang picker

frontend/src/app/core/services/language.service.ts

@@ -39,6 +39,7 @@ export class LanguageService {
 
   setForAuthenticatedUser(lang: AppLanguage) {
     const nextLang = this.read(lang) || 'pl';
+    localStorage.setItem(this.key, nextLang);
     this.apply(nextLang);
   }
 

frontend/src/app/shared/auth/auth-toolbar.component.html

@@ -8,8 +8,15 @@
   ></button>
 
   <label class="auth-toolbar__select-wrap">
-    <select class="auth-toolbar__select" [value]="language.current()" (change)="changeLanguage($event)">
+    <select
-      <option *ngFor="let option of languageOptions" [value]="option.code">{{ option.label }}</option>
+      class="auth-toolbar__select"
+      [ngModel]="language.current()"
+      [ngModelOptions]="{ standalone: true }"
+      (ngModelChange)="changeLanguage($event)"
+    >
+      <option *ngFor="let option of languageOptions; trackBy: trackByLanguageCode" [ngValue]="option.code">
+        {{ option.flag }} {{ option.label }}
+      </option>
     </select>
   </label>
 </div>

frontend/src/app/shared/auth/auth-toolbar.component.ts

@@ -1,31 +1,28 @@
 import { CommonModule } from '@angular/common';
 import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 
-import { AppLanguage, LanguageService } from '../../core/services/language.service';
+import { AppLanguage, AppLanguageOption, LanguageService } from '../../core/services/language.service';
 import { ThemeService } from '../../core/services/theme.service';
 
 @Component({
   selector: 'app-auth-toolbar',
   standalone: true,
-  imports: [CommonModule, ButtonModule],
+  imports: [CommonModule, FormsModule, ButtonModule],
   templateUrl: './auth-toolbar.component.html'
 })
 export class AuthToolbarComponent {
   readonly theme = inject(ThemeService);
   readonly language = inject(LanguageService);
 
-  get languageOptions() {
+  readonly languageOptions = this.language.options;
-    const current = this.language.current();
+
-    return [
+  trackByLanguageCode(_: number, option: AppLanguageOption) {
-      { code: 'no', label: `${current === 'no' ? '✓ ' : ''}🇳🇴 Norsk` },
+    return option.code;
-      { code: 'es', label: `${current === 'es' ? '✓ ' : ''}🇪🇸 Español` },
-      { code: 'pl', label: `${current === 'pl' ? '✓ ' : ''}🇵🇱 Polski` },
-      { code: 'en', label: `${current === 'en' ? '✓ ' : ''}🇬🇧 English` }
-    ];
   }
 
-  changeLanguage(event: Event) {
+  changeLanguage(lang: AppLanguage | string) {
-    this.language.set((event.target as HTMLSelectElement).value as AppLanguage);
+    this.language.set(lang as AppLanguage);
   }
 }

frontend/src/app/shared/layout/app-topbar.component.html

@@ -17,8 +17,15 @@
     ></button>
 
     <label class="topbar__lang-picker" [attr.aria-label]="'topbar.languageSelector' | translate">
-      <select class="topbar__lang-select" [value]="lang" (change)="onLanguageSelect($event)">
+      <select
-        <option *ngFor="let option of displayLanguages" [value]="option.code">{{ option.label }}</option>
+        class="topbar__lang-select"
+        [ngModel]="lang"
+        [ngModelOptions]="{ standalone: true }"
+        (ngModelChange)="onLanguageSelect($event)"
+      >
+        <option *ngFor="let option of languages; trackBy: trackByLanguageCode" [ngValue]="option.code">
+          {{ option.flag }} {{ option.label }}
+        </option>
       </select>
     </label>
 

frontend/src/app/shared/layout/app-topbar.component.ts

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { AvatarModule } from 'primeng/avatar';
 import { ButtonModule } from 'primeng/button';
@@ -13,7 +14,7 @@ export interface TopbarLanguageOption {
 @Component({
   selector: 'app-topbar',
   standalone: true,
-  imports: [CommonModule, TranslateModule, ButtonModule, AvatarModule],
+  imports: [CommonModule, FormsModule, TranslateModule, ButtonModule, AvatarModule],
   templateUrl: './app-topbar.component.html'
 })
 export class AppTopbarComponent {
@@ -31,15 +32,11 @@ export class AppTopbarComponent {
     return this.username.slice(0, 2).toUpperCase();
   }
 
-  get displayLanguages(): TopbarLanguageOption[] {
+  trackByLanguageCode(_: number, option: TopbarLanguageOption) {
-    return this.languages.map((option) => ({
+    return option.code;
-      ...option,
-      label: `${option.flag} ${option.label}${option.code === this.lang ? ' ✓' : ''}`
-    }));
   }
 
-  onLanguageSelect(event: Event) {
+  onLanguageSelect(value: string) {
-    const value = (event.target as HTMLSelectElement).value;
     this.languageChange.emit(value);
   }
 }