Dialect configuration

packages/client/src/app/modules/settings/components/dialect-selector/dialect-selector.component.ts

@@ -1,34 +1,30 @@
-import { Component, effect, Input, Signal } from '@angular/core';
+import { AfterViewInit, Component, effect, Input, OnChanges, OnDestroy, signal, Signal, SimpleChanges, WritableSignal } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
 import { RecognitionDialect, SupportedDialects } from '../../models/settings.model';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '../../../../models/app.model';
 import { languageSelector } from '../../../../selectors/settings.selector';
-import { map } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { map, startWith, Subject, takeUntil } from 'rxjs';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
   selector: 'app-dialect-selector',
   templateUrl: './dialect-selector.component.html',
   styleUrls: ['./dialect-selector.component.scss'],
 })
-export class DialectSelectorComponent {
+export class DialectSelectorComponent implements OnChanges, OnDestroy {
 	@Input() group!: FormGroup;
 	@Input() controlName!: string;
+	@Input() languageControlName!: string;
 
-	public availableDialects: Signal<RecognitionDialect[] | undefined>;
+	public availableDialects: WritableSignal<RecognitionDialect[] | undefined> = signal(undefined);
 	private dialects = SupportedDialects;
+	private hasSubscription = false;
+	private onDestroy$: Subject<void> = new Subject<void>();
 
-	constructor(private store: Store<AppState>) {
-		this.availableDialects = toSignal(this.store.pipe(
-			select(languageSelector),
-			map((lang) => {
-				const exp = new RegExp(lang);
-				return this.dialects.filter((d) => exp.test(d))
-			})
-		));
+	constructor() {
 		effect(() => {
-			const control: AbstractControl | undefined = this.group.controls[this.controlName];
+			const control: AbstractControl | undefined = this.group?.controls[this.controlName];
 			const ad = this.availableDialects();
 			if (control) {
 				if (ad === undefined) {
@@ -41,4 +37,26 @@ export class DialectSelectorComponent {
 			}
 		})
 	}
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes['group'] && changes['languageControlName'] && !this.hasSubscription) {
+			const languageControl = this.group.get(this.languageControlName);
+			if (languageControl) {
+				this.hasSubscription = true;
+				languageControl.valueChanges.pipe(
+					startWith(languageControl.value),
+					takeUntil(this.onDestroy$)
+				).subscribe((language) => {
+					const exp = new RegExp(language);
+					const ad = this.dialects.filter((d) => exp.test(d));
+					ad.unshift('unspecified')
+					this.availableDialects.set(ad)
+				})
+			}
+		}
+	}
+
+	ngOnDestroy(): void {
+		this.onDestroy$.next();
+	}
 }

packages/client/src/app/modules/settings/components/ui-settings/ui-settings.component.html

@@ -4,6 +4,7 @@
     <div>
       <app-theme-selector [group]="formGroup" controlName="theme"></app-theme-selector>
       <app-language-selector [group]="formGroup" controlName="lang"></app-language-selector>
+			<app-dialect-selector [group]="formGroup" controlName="dialect" languageControlName="lang"></app-dialect-selector>
       <app-font-family-selector [group]="formGroup" controlName="font"></app-font-family-selector>
       <app-wake-lock-enabled [group]="formGroup" controlName="wakelock"></app-wake-lock-enabled>
       <app-render-history [group]="formGroup" controlName="renderHistory"></app-render-history>
@@ -17,7 +18,7 @@
         <button class="btn btn-secondaryß rounded-xl" translate type="button" routerLink="..">
           BUTTONS.cancel
         </button>
-    
+
         <button class="btn btn-primary rounded-xl" [disabled]="acceptedCookies() === false || formGroup.pristine" type="submit" translate>
           BUTTONS.saveAndClose
         </button>
@@ -42,7 +43,7 @@
         </div>
       </div>
     </div>
-    
+
   </div>
 </form>
 <app-save-to-server-dialog [openModal]="showSaveToServerModal" (afterClosed)="saveToServerCallback($event)"></app-save-to-server-dialog>

packages/client/src/app/modules/settings/components/ui-settings/ui-settings.component.ts

@@ -8,9 +8,9 @@ import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animati
 import { Subject, combineLatest, filter, map, startWith, takeUntil } from 'rxjs';
 import { AppAppearanceState, AppState } from '../../../../models/app.model';
 import { selectAppAppearance } from '../../../../selectors/app.selector';
-import { languageSelector, selectAppSettings, selectFontFamily, selectLineHeight, selectRenderHistoryLength, selectTextSize, themeSelector, wakeLockEnabledSelector } from '../../../../selectors/settings.selector';
+import { dialectSelector, languageSelector, selectAppSettings, selectFontFamily, selectLineHeight, selectRenderHistoryLength, selectTextSize, themeSelector, wakeLockEnabledSelector } from '../../../../selectors/settings.selector';
 import { selectUserSettingsSync } from '../../../../selectors/user.selector';
-import { AppTheme, FontFamily, FontFamilyClassMap, InterfaceLanguage, LineHeight, SettingsActions, SettingsState, TextSize } from '../../models/settings.model';
+import { AppTheme, FontFamily, FontFamilyClassMap, InterfaceLanguage, LineHeight, RecognitionDialect, SettingsActions, SettingsState, TextSize } from '../../models/settings.model';
 import { UserActions } from '../../../../actions/user.actions';
 
 @Component({
@@ -26,6 +26,7 @@ export class UiSettingsComponent implements OnInit, OnDestroy {
   public formGroup: FormGroup<{
     theme: FormControl<AppTheme | null>,
     lang: FormControl<InterfaceLanguage | null>,
+		dialect: FormControl<RecognitionDialect | null>,
     font: FormControl<FontFamily | null>,
     wakelock: FormControl<boolean | undefined | null>,
     renderHistory: FormControl<number | null>,
@@ -44,6 +45,7 @@ export class UiSettingsComponent implements OnInit, OnDestroy {
   private onDestroy$: Subject<void> = new Subject<void>();
   private currentTheme: Signal<AppTheme>;
   private language: Signal<InterfaceLanguage>;
+	private dialect: Signal<RecognitionDialect | undefined>;
   private wakeLockEnabled: Signal<boolean | undefined>;
   private currentTextSize: Signal<TextSize>;
   private currentLineHeight: Signal<LineHeight>;
@@ -64,13 +66,15 @@ export class UiSettingsComponent implements OnInit, OnDestroy {
     this.currentLineHeight = toSignal(this.store.select(selectLineHeight)) as Signal<LineHeight>;
     this.renderHistory = toSignal(this.store.select(selectRenderHistoryLength)) as Signal<number>;
     this.fontFamily = toSignal(this.store.select(selectFontFamily)) as Signal<FontFamily>;
+		this.dialect = toSignal(this.store.pipe(select(dialectSelector)));
 
     this.settingsState = toSignal(this.store.select(selectAppSettings)) as Signal<SettingsState>;
     this.syncUiSettings = toSignal(this.store.select(selectUserSettingsSync));
 
     this.formGroup = this.fb.group({
       theme: this.fb.control(this.currentTheme()),
       lang: this.fb.control(this.language()),
+			dialect: this.fb.control(this.dialect() || null),
       font: this.fb.control(this.fontFamily()),
       wakelock: this.fb.control(this.wakeLockEnabled()),
       renderHistory: this.fb.control(this.renderHistory()),

packages/client/src/assets/i18n/de.json

@@ -11,6 +11,7 @@
     "uk": "Ukranisch (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Generisch",
 		"en-AU": "Englisch (Australien)",
 		"en-CA": "Englisch (Kanada)",
 		"en-GB": "Englisch (Vereinigtes Königreich)",

packages/client/src/assets/i18n/en.json

@@ -11,6 +11,7 @@
     "uk": "Ukrainian (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Generic",
 		"en-AU":	"English (Australia)",
 		"en-CA":	"English (Canada)",
 		"en-GB":	"English (United Kingdom)",

packages/client/src/assets/i18n/es.json

@@ -11,6 +11,7 @@
     "uk": "Ucraniano (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Genérico",
 		"en-AU": "Inglés (Australia)",
 		"en-CA": "inglés (Canadá)",
 		"en-GB": "inglés (Reino Unido)",

packages/client/src/assets/i18n/fr.json

@@ -11,6 +11,7 @@
     "uk": "Ukrainien (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Générique",
 		"en-AU": "Anglais (Australie)",
 		"en-CA": "Anglais (Canada)",
 		"en-GB": "Anglais (Royaume-Uni)",

packages/client/src/assets/i18n/id.json

@@ -11,6 +11,7 @@
     "uk": "Ukrania (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Umum",
 		"en-AU": "Bahasa Inggris (Australia)",
 		"en-CA": "Bahasa Inggris (Kanada)",
 		"en-GB": "Bahasa Inggris (Inggris Raya)",

packages/client/src/assets/i18n/it.json

@@ -11,6 +11,7 @@
     "uk": "Ukrainian (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Generico",
 		"en-AU": "Inglese (Australia)",
 		"en-CA": "Inglese (Canada)",
 		"en-GB": "Inglese (Regno Unito)",

packages/client/src/assets/i18n/pl.json

@@ -11,6 +11,7 @@
     "uk": "Ukraiński (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Ogólny",
 		"en-AU": "Angielski (Australia)",
 		"en-CA": "Angielski (Kanada)",
 		"en-GB": "Angielski (Wielka Brytania)",

packages/client/src/assets/i18n/pt.json

@@ -11,6 +11,7 @@
     "uk": "Ucraniano (Український)"
   },
 	"DIALECTS": {
+		"unspecified": "Genérico",
 		"en-AU": "Inglês (Austrália)",
 		"en-CA": "Inglês (Canadá)",
 		"en-GB": "Inglês (Reino Unido)",

packages/client/src/assets/i18n/uk.json

@@ -11,6 +11,7 @@
     "uk": "Український"
   },
 	"DIALECTS": {
+		"unspecified": "загальний",
 		"en-AU": "Англійська (Австралія)",
 		"en-CA": "Англійська (Канада)",
 		"en-GB": "Англійська (Великобританія)",