T hoguet/issue16 (#61)

* feat: enhance loading spinner with progress indication and add warning for unplaced vacation days

* feat: upgrade Angular dependencies to version 21 and implement new animation features

- Updated Angular dependencies in package.json to version 21.x.x.
- Added `provideAnimationsAsync` to app configuration for improved animation handling.
- Refactored user input component to utilize a dynamic list of vacation days with animations.
- Introduced a new `DayInput` component for managing individual vacation days.
- Enhanced styling and animations for user input and day input components.
- Updated calendar service to support new vacation day structure.
- Adjusted tests to accommodate changes in component structure and dependencies.

* feat: enhance vacation optimization logic and UI components

* Fix signal immutability violations and cleanup unused code (#62)

* Initial plan

* fix: address PR review comments for signal immutability and cleanup

Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

* fix: add --legacy-peer-deps for Angular 21 compatibility (#63)

* Initial plan

* fix: add --legacy-peer-deps to npm ci for Angular 21 compatibility

Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

* Fix unit tests for VacDay[] type migration (#64)

* Initial plan

* fix: update unit tests to match VacDay[] type structure

Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

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

@@ -1,29 +1,40 @@
 <div class="user-input">
 	<p>Optimisez vos jours de vacances en fonction des jours fériés et des week-ends !</p>
-	<form [formGroup]="userInputForm">
-		<mat-form-field appearance="fill">
-			<mat-label>Combien de CP par an ?</mat-label>
-			<input matInput type="number" max="365" min="0" formControlName="CP" />
-		</mat-form-field>
-		<mat-form-field appearance="fill">
-			<mat-label>Combien de jours de RTT par an ?</mat-label>
-			<input matInput type="number" max="365" min="0" formControlName="RTT" />
-		</mat-form-field>
-		<mat-form-field appearance="fill">
-			<mat-label>Autres jours</mat-label>
-			<input matInput type="number" max="365" min="0" formControlName="Others" />
-		</mat-form-field>
-	</form>
+	<div class="listOfDays">
+		@for (day of daysOff; track day.id) {
+			<div class="day-input-wrapper" animate.enter="day-enter" animate.leave="day-leave">
+				<app-day-input [day]="day" (dayChange)="updateDay($index, $event)" (deleteEntry)="removeFromList($index)"></app-day-input>
+			</div>
+		}
+		<mat-card class="add-day-card mat-elevation-z2" (click)="addDay()">
+			<button matFab aria-label="Add entry">
+				<mat-icon>add</mat-icon>
+			</button>
+			<h3>Ajouter un jour de vacances</h3>
+		</mat-card>
+	</div>
+	<div class="action-buttons">
+		<button matFab extended (click)="triggerComputation()">
+			<mat-icon>calculate</mat-icon>
+			Calculer
+		</button>
+		<app-calendar-settings></app-calendar-settings>
+	</div>
 	@if (hasRemainingDays()) {
 		<mat-card class="mat-elevation-z2 warning-card">
 			<mat-card-content class="warning-content">
-				<mat-icon color="warn" aria-hidden="true">warning</mat-icon>
-				<span>
-					{{ remainingDays() }} jour{{ remainingDays() > 1 ? 's' : '' }} de vacances non
-					placé{{ remainingDays() > 1 ? 's' : '' }}. Veuillez les placer manuellement.
-				</span>
+				<mat-icon color="warn">warning</mat-icon>
+				<div class="warning">
+					<span>
+						{{ remainingDays() }} jour{{ remainingDays() > 1 ? 's' : '' }} de vacances
+						non placé{{ remainingDays() > 1 ? 's' : '' }}:
+					</span>
+					@for (day of remainingDaysDetails(); track $index) {
+						<span class="remaining-day-detail">- {{ day }}</span>
+					}
+					<span> Veuillez les placer manuellement. </span>
+				</div>
 			</mat-card-content>
 		</mat-card>
 	}
-	<app-calendar-settings></app-calendar-settings>
 </div>