Enhance calendar settings dialog and optimize date selection logic

src/app/components/calendar-year/calendar-year.ts

@@ -24,7 +24,9 @@ export class CalendarYear {
 		effect(() => {
 			this.selectedDates = this.calendarService.getSelectedDatesForYear();
 			const vacationData = this.userInput.vacationNumberSignal();
-			this.calendarSettingsService.samediMalin();
+			const c = this.calendarSettingsService.samediMalin();
+			console.log('Samedi Malin setting:', c);
+			console.log('Optimizing vacations with data:', vacationData);
 			this.isLoading.set(true);
 			// Simulate server-side calculation with a small delay
 			setTimeout(() => {

src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html

@@ -1,33 +1,29 @@
-@defer (hydrate on viewport) {
-	<div class="container">
-		<div>
-			<h1>Calendar Settings</h1>
-			<p>Configure your calendar settings here.</p>
-		</div>
-		<div style="display: flex; flex-direction: column; gap: 1rem">
-			<div style="align-self: flex-start">
-				<mat-slide-toggle
-					id="showWeekNumbers"
-					name="showWeekNumbers"
-					[checked]="calendarSettingsService.showWeekNumbers()"
-					(change)="calendarSettingsService.showWeekNumbers.set($event.checked)"
-				>
-					Afficher les numéros de semaine
-				</mat-slide-toggle>
-			</div>
-			<div style="align-self: flex-start">
-				<mat-slide-toggle
-					id="samediMalin"
-					name="samediMalin"
-					[checked]="calendarSettingsService.samediMalin()"
-					(change)="calendarSettingsService.samediMalin.set($event.checked)"
-				>
-					Activer le Samedi Malin
-				</mat-slide-toggle>
-			</div>
-		</div>
-		<button mat-button (click)="closeDialog()">Fermer</button>
+<div class="container">
+	<div>
+		<h1>Calendar Settings</h1>
+		<p>Configure your calendar settings here.</p>
 	</div>
-} @placeholder {
-	<p>loading ...</p>
-}
+	<div style="display: flex; flex-direction: column; gap: 1rem">
+		<div style="align-self: flex-start">
+			<mat-slide-toggle
+				id="showWeekNumbers"
+				name="showWeekNumbers"
+				[checked]="calendarSettingsService.showWeekNumbers()"
+				(change)="calendarSettingsService.showWeekNumbers.set($event.checked)"
+			>
+				Afficher les numéros de semaine
+			</mat-slide-toggle>
+		</div>
+		<div style="align-self: flex-start">
+			<mat-slide-toggle
+				id="samediMalin"
+				name="samediMalin"
+				[checked]="calendarSettingsService.samediMalin()"
+				(change)="calendarSettingsService.samediMalin.set($event.checked)"
+			>
+				Activer le Samedi Malin
+			</mat-slide-toggle>
+		</div>
+	</div>
+	<button mat-button (click)="closeDialog()">Fermer</button>
+</div>

src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.ts

@@ -4,6 +4,7 @@ import { MatCheckbox } from '@angular/material/checkbox';
 import { MatDialogRef } from '@angular/material/dialog';
 import { CalendarSettingsService } from '../../../services/calendar-settings-service';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
 
 @Component({
 	selector: 'app-calendar-settings-dialog',