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.ts

@@ -1,4 +1,4 @@
-import { Component, effect, signal, inject, untracked } from '@angular/core';
+import { Component, computed, effect, signal, inject, untracked } from '@angular/core';
 import { UserInputService } from '../../services/user-input-service';
 import { MatCard, MatCardContent } from '@angular/material/card';
 import { CalendarMonth } from '../calendar-month/calendar-month';
@@ -9,10 +9,19 @@ import { RuleService } from '../../services/rule-service';
 import { TranslationService } from '../../services/translation-service';
 import { PlanOutcome, PlanningOutcome } from '../../services/leave-planner.service';
 import { SelectableDayType, VacDay } from '../../services/calendar-service';
+import { MatIcon } from '@angular/material/icon';
+import { CalendarSettings } from '../calendar-settings/calendar-settings';
 
 @Component({
 	selector: 'app-calendar-year',
-	imports: [MatCard, CalendarMonth, MatCardContent, MatProgressSpinner],
+	imports: [
+		MatCard,
+		CalendarMonth,
+		MatCardContent,
+		MatProgressSpinner,
+		MatIcon,
+		CalendarSettings,
+	],
 	templateUrl: './calendar-year.html',
 	styleUrl: './calendar-year.scss',
 })
@@ -31,6 +40,14 @@ export class CalendarYear {
 
 	protected loadingProgress = signal(0);
 	protected planningOutcome = signal<PlanningOutcome | null>(null);
+	protected displayedPlan = computed(() => {
+		const outcome = this.planningOutcome();
+		return outcome?.kind === 'Plan'
+			? outcome
+			: outcome?.kind === 'PlanningIncomplete'
+				? outcome.incumbent
+				: undefined;
+	});
 	private calculationVersion = 0;
 
 	protected hasPlannerError(): boolean {
@@ -127,12 +144,7 @@ export class CalendarYear {
 
 	private applyOutcome(outcome: PlanningOutcome): void {
 		this.planningOutcome.set(outcome);
-		const plan =
-			outcome.kind === 'Plan'
-				? outcome
-				: outcome.kind === 'PlanningIncomplete'
-					? outcome.incumbent
-					: undefined;
+		const plan = this.displayedPlan();
 		if (plan) {
 			this.selectedDates = this.calendarService.selectedDatesForPlan(plan);
 			this.userInput.remainingVacationDaysSignal.set(this.toLegacyBalances(plan));