UI improvments

src/app/services/translation-service.ts

@@ -7,6 +7,7 @@ export interface AppTranslations {
 	app: {
 		title: string;
 		description: string;
+		skipToPlan: string;
 	};
 	userInput: {
 		title: string;
@@ -56,6 +57,8 @@ export interface AppTranslations {
 		active: string;
 		moveRuleUp: string;
 		moveRuleDown: string;
+		dragRule: string;
+		ruleMoved: string;
 		priorityInfo: string;
 		ifThenTemplate: string;
 		timeWindowTemplate: string;
@@ -99,7 +102,76 @@ export interface AppTranslations {
 		};
 	};
 	planning: {
+		comparison: {
+			title: string;
+			candidate: string;
+			preview: string;
+			nearby: string;
+			noAlternatives: string;
+			chooseDate: string;
+			dateRange: string;
+			invalidDate: string;
+			changes: string;
+			available: string;
+			unavailable: string;
+			backToPlan: string;
+			backToTrace: string;
+		};
+		details: {
+			intro: string;
+			balance: string;
+			available: string;
+			expires: string;
+			criteria: string;
+			criteriaHelp: string;
+			firstDifference: string;
+			higher: string;
+			lower: string;
+			tieBreaks: string;
+			audit: string;
+			auditHelp: string;
+			supporting: string;
+			remainingReasons: Record<string, string>;
+		};
+		explanation: {
+			breakTitle: string;
+			leaveDays: string;
+			freeDays: string;
+			daysOff: string;
+			wholeBreak: string;
+			leaveUsed: string;
+			expires: string;
+			linkedRules: string;
+			impact: string;
+			impactHelp: string;
+			criterion: string;
+			withoutDay: string;
+			withDay: string;
+			noChange: string;
+			priorityHelp: string;
+			tryDate: string;
+			plannedDate: string;
+			currentPlan: string;
+			alternative: string;
+			sameDate: string;
+			moveHelp: string;
+			traceHelp: string;
+			beforeDecision: string;
+			withCandidate: string;
+			comparisonUnavailable: string;
+			objectives: Record<string, { label: string; help: string }>;
+			preferenceHelp: Record<string, string | undefined>;
+			stages: Record<string, string>;
+			unavailable: Record<string, string | undefined>;
+		};
 		title: string;
+		calendarHelp: string;
+		explanationHelp: string;
+		traceHelp: string;
+		technicalDetails: string;
+		compareDates: string;
+		stopComparing: string;
+		replayNotice: string;
 		daysPlaced: string;
 		daysGained: string;
 		longestWorkSequence: string;
@@ -119,28 +191,8 @@ export interface AppTranslations {
 		previous: string;
 		next: string;
 		last: string;
-		balance: string;
-		rules: string;
-		noRules: string;
-		supporting: string;
-		yes: string;
-		no: string;
 		remaining: string;
-		timeOffPeriod: string;
-		firstDecisive: string;
-		contributions: string;
-		objectiveVector: string;
-		finalMetrics: string;
-		unplacedAtRisk: string;
-		holidayWeekValue: string;
-		shortSequenceDeficit: string;
-		supportingPlacements: string;
-		preferenceSatisfaction: string;
-		removedRestoredComparison: string;
-		fullComparison: string;
-		comparisonHelp: string;
 		counterfactual: string;
-		hypothetical: string;
 		counterfactualLoading: string;
 		counterfactualReady: string;
 		counterfactualError: string;
@@ -182,7 +234,6 @@ export interface AppTranslations {
 		nextCandidates: string;
 		page: string;
 		compareAlternatives: string;
-		tieBreak: string;
 		deltas: string;
 		activations: string;
 		noDecisions: string;

src/app/services/user-input-service.spec.ts

@@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { provideZonelessChangeDetection } from '@angular/core';
 import { UserInputService } from './user-input-service';
 import { SelectableDayType, VacDay } from './calendar-service';
+import { vi } from 'vitest';
 
 describe('UserInputService', () => {
 	let service: UserInputService;
@@ -13,6 +14,8 @@ describe('UserInputService', () => {
 		service = TestBed.inject(UserInputService);
 	});
 
+	afterEach(() => vi.restoreAllMocks());
+
 	it('should be created', () => {
 		expect(service).toBeTruthy();
 	});
@@ -28,12 +31,25 @@ describe('UserInputService', () => {
 		vacations.forEach((day) => {
 			expect(day.id).toBeDefined();
 			expect(day.type).toBeDefined();
-			expect(day.numberOfDays).toBeGreaterThanOrEqual(1);
-			expect(day.numberOfDays).toBeLessThanOrEqual(9);
+			expect(day.numberOfDays).toBeGreaterThanOrEqual(10);
+			expect(day.numberOfDays).toBeLessThanOrEqual(20);
 			expect(day.expiryDate).toBeInstanceOf(Date);
 		});
 	});
 
+	it.each([
+		[0, 10],
+		[1 - Number.EPSILON, 20],
+	])('starts every balance at %s random draw with %s days', (draw, expected) => {
+		vi.spyOn(Math, 'random').mockReturnValue(draw);
+		const initialBalances = new UserInputService().vacationNumberSignal();
+		expect(initialBalances.map((balance) => balance.numberOfDays)).toEqual([
+			expected,
+			expected,
+			expected,
+		]);
+	});
+
 	it('should update vacation number signal', () => {
 		const newVacations: VacDay[] = [
 			{

src/app/services/user-input-service.ts

@@ -6,7 +6,7 @@ import { SelectableDayType, VacDay } from './calendar-service';
 })
 export class UserInputService {
 	private getRandomNumber(): number {
-		return Math.floor(Math.random() * 9) + 1;
+		return Math.floor(Math.random() * 11) + 10;
 	}
 
 	private getInitialValues(): VacDay[] {