feat: enhance user input and rules panel components

- Updated dark-light mode button styles for improved responsiveness.
- Enhanced rules panel with additional buttons for moving rules up and down, and updated styles for better layout.
- Added active rule count display in the rules panel header.
- Improved user input component layout with section headings and updated button styles.
- Refactored day input component to use grid layout for better alignment and responsiveness.
- Added new translations for user input and rules panel features.
- Implemented tests for new functionality in rules panel and day input components.
- Added application routes test to ensure correct routing configuration.

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

@@ -3,33 +3,107 @@
 		<div class="loading-overlay">
 			<div class="loading-spinner">
 				<div class="spinner-container">
-					<mat-spinner [mode]="'determinate'" [value]="loadingProgress()"></mat-spinner>
+					<mat-spinner
+						[diameter]="72"
+						[mode]="'determinate'"
+						[value]="loadingProgress()"
+					></mat-spinner>
 					<div class="spinner-text">{{ loadingProgress() }}%</div>
 				</div>
 				<p>{{ tr().loading }}</p>
 			</div>
 		</div>
 	}
-	@if (planningOutcome()?.kind === 'InvalidInput') {
-		<p class="planning-status" role="alert">{{ tr().planning.invalidInput }}</p>
-	} @else if (planningOutcome()?.kind === 'PlanningConflict') {
-		<p class="planning-status" role="alert">{{ tr().planning.conflict }}</p>
-	} @else if (planningOutcome()?.kind === 'PlanningIncomplete') {
-		<p class="planning-status" role="status">
-			{{ hasPlannerError() ? tr().planning.error : tr().planning.incomplete }}
-		</p>
-	} @else if (planningOutcome()?.kind === 'Plan') {
-		<p class="planning-status" role="status">{{ tr().planning.complete }}</p>
-	}
-	@for (month of months; track $index) {
-		<mat-card class="card">
-			<mat-card-content>
-				<app-calendar-month
-					[monthIndex]="month"
-					[year]="getYear(month)"
-					[selectedDates]="selectedDates"
-				></app-calendar-month>
-			</mat-card-content>
-		</mat-card>
+
+	<header class="results-header">
+		<div class="results-heading">
+			<h2 id="planning-results-title">{{ tr().planning.title }}</h2>
+			@if (planningOutcome()?.kind === 'InvalidInput') {
+				<p class="planning-status error" role="alert">
+					<mat-icon aria-hidden="true">error</mat-icon>
+					{{ tr().planning.invalidInput }}
+				</p>
+			} @else if (planningOutcome()?.kind === 'PlanningConflict') {
+				<p class="planning-status error" role="alert">
+					<mat-icon aria-hidden="true">error</mat-icon>
+					{{ tr().planning.conflict }}
+				</p>
+			} @else if (planningOutcome()?.kind === 'PlanningIncomplete') {
+				<p
+					class="planning-status"
+					[class.error]="hasPlannerError()"
+					[class.warning]="!hasPlannerError()"
+					[attr.role]="hasPlannerError() ? 'alert' : 'status'"
+				>
+					<mat-icon aria-hidden="true">{{
+						hasPlannerError() ? 'error' : 'warning'
+					}}</mat-icon>
+					{{ hasPlannerError() ? tr().planning.error : tr().planning.incomplete }}
+				</p>
+			} @else if (planningOutcome()?.kind === 'Plan') {
+				<p class="planning-status success" role="status">
+					<mat-icon aria-hidden="true">check_circle</mat-icon>
+					{{ tr().planning.complete }}
+				</p>
+			}
+		</div>
+		<app-calendar-settings></app-calendar-settings>
+	</header>
+
+	@if (displayedPlan(); as plan) {
+		<dl class="plan-summary">
+			<div>
+				<dt>{{ tr().planning.daysPlaced }}</dt>
+				<dd>{{ plan.placements.length }}</dd>
+			</div>
+			<div>
+				<dt>{{ tr().planning.daysGained }}</dt>
+				<dd>{{ plan.metrics.nonWorkingDayGain }}</dd>
+			</div>
+			<div>
+				<dt>{{ tr().planning.longestWorkSequence }}</dt>
+				<dd>{{ plan.metrics.longestWorkSequence }}</dd>
+			</div>
+		</dl>
 	}
+
+	<div class="calendar-legend" role="group" [attr.aria-label]="tr().planning.legend">
+		<strong>{{ tr().planning.legend }}</strong>
+		<ul>
+			<li>
+				<span class="legend-swatch weekend" aria-hidden="true"></span
+				>{{ tr().dayTypes.weekend }}
+			</li>
+			<li>
+				<span class="legend-swatch closed-day" aria-hidden="true"></span
+				>{{ tr().dayTypes.closedDay }}
+			</li>
+			<li><span class="legend-swatch cp" aria-hidden="true"></span>{{ tr().dayTypes.cp }}</li>
+			<li>
+				<span class="legend-swatch rtt" aria-hidden="true"></span>{{ tr().dayTypes.rtt }}
+			</li>
+			<li>
+				<span class="legend-swatch other" aria-hidden="true"></span
+				>{{ tr().dayTypes.other }}
+			</li>
+			<li>
+				<span class="legend-swatch today" aria-hidden="true"></span
+				>{{ tr().dayTypes.today }}
+			</li>
+		</ul>
+	</div>
+
+	<div class="month-grid">
+		@for (month of months; track $index) {
+			<mat-card class="month-card">
+				<mat-card-content>
+					<app-calendar-month
+						[monthIndex]="month"
+						[year]="getYear(month)"
+						[selectedDates]="selectedDates"
+					></app-calendar-month>
+				</mat-card-content>
+			</mat-card>
+		}
+	</div>
 </div>