feat: implement internationalization with multi-language support and runtime language selection

src/app/components/user-input/user-input.ts

@@ -7,7 +7,8 @@ import { MatCard, MatCardContent } from '@angular/material/card';
 import { MatIcon } from '@angular/material/icon';
 import { DayInput } from '../userInput/day-input/day-input';
 import { MatButtonModule } from '@angular/material/button';
-import { tooltipTypeMapping, DayType, VacDay } from '../../services/calendar-service';
+import { VacDay } from '../../services/calendar-service';
+import { TranslationService } from '../../services/translation-service';
 
 @Component({
 	selector: 'app-user-input',
@@ -27,6 +28,11 @@ import { tooltipTypeMapping, DayType, VacDay } from '../../services/calendar-ser
 })
 export class UserInput {
 	private userInputService: UserInputService = inject(UserInputService);
+	protected readonly translationService = inject(TranslationService);
+
+	get tr() {
+		return this.translationService.tr;
+	}
 
 	protected remainingDays = computed(() => {
 		const remaining = this.userInputService.remainingVacationDaysSignal();
@@ -38,13 +44,17 @@ export class UserInput {
 		return remaining
 			.filter((day) => day.numberOfDays > 0)
 			.map((day) => {
-				const typeName = tooltipTypeMapping[day.type as unknown as DayType];
-				const expiryDate = day.expiryDate.toLocaleDateString('fr-FR', {
-					day: 'numeric',
-					month: 'short',
-					year: 'numeric',
-				});
-				return `${day.numberOfDays} ${typeName} (exp. ${expiryDate})`;
+				const typeName = this.translationService.getDayTypeLabel(day.type);
+				const expiryDate = day.expiryDate.toLocaleDateString(
+					this.translationService.locale(),
+					{
+						day: 'numeric',
+						month: 'short',
+						year: 'numeric',
+					},
+				);
+				const expiresLabel = this.tr().userInput.expires;
+				return `${day.numberOfDays} ${typeName} (${expiresLabel} ${expiryDate})`;
 			});
 	});