fix(ui): hide planning details by default

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

@@ -61,6 +61,7 @@ export class CalendarYear {
 	protected readonly traceLoading = signal(false);
 	protected readonly traceResolved = signal(false);
 	protected readonly selectedPlacementIndex = signal(0);
+	protected readonly planDetailsOpen = signal(false);
 	protected readonly counterfactual = signal<CounterfactualAnalysis | null>(null);
 	protected readonly selectedCounterfactualDate = signal<string | null>(null);
 	protected readonly counterfactualLoading = signal(false);
@@ -146,7 +147,7 @@ export class CalendarYear {
 		if (this.counterfactual())
 			return this.selectedCounterfactualDate() ?? this.counterfactual()!.placement.date;
 		if (this.traceReplay()) return this.selectedTraceDecision()?.dates[0] ?? null;
-		return this.selectedExplanation()?.placement.date ?? null;
+		return this.planDetailsOpen() ? (this.selectedExplanation()?.placement.date ?? null) : null;
 	});
 
 	protected readonly dateStatuses = computed<Readonly<Record<string, CalendarDayStatus>>>(() => {
@@ -356,6 +357,7 @@ export class CalendarYear {
 		this.traceLoading.set(true);
 		this.traceResolved.set(false);
 		this.selectedPlacementIndex.set(0);
+		this.planDetailsOpen.set(false);
 		this.clearCounterfactual();
 		this.tracePhaseIndex.set(0);
 		this.traceDecisionIndex.set(0);
@@ -370,8 +372,6 @@ export class CalendarYear {
 		void calculation.explanation.then((explanation) => {
 			if (version !== this.calculationVersion) return;
 			this.planningExplanation.set(explanation ?? null);
-			if (explanation?.kind === 'PlanExplanation' && explanation.placements.length)
-				this.selectPlacement(0);
 		});
 		void calculation.explanationError.then((reason) => {
 			if (version === this.calculationVersion) this.explanationError.set(reason ?? null);
@@ -433,6 +433,13 @@ export class CalendarYear {
 		void this.analyzeSelection(explanation.placements[selected].placement);
 	}
 
+	protected togglePlanDetails(event: Event): void {
+		const open = (event.currentTarget as HTMLDetailsElement).open;
+		this.planDetailsOpen.set(open);
+		if (open) this.selectPlacement(this.selectedPlacementIndex());
+		else this.clearCounterfactual();
+	}
+
 	protected stepPlacement(step: 'first' | 'previous' | 'next' | 'last'): void {
 		const last = (this.planExplanation()?.placements.length ?? 1) - 1;
 		const current = this.selectedPlacementIndex();
@@ -448,7 +455,7 @@ export class CalendarYear {
 	}
 
 	protected selectCalendarDate(date: string): void {
-		if (!this.traceReplay()) {
+		if (!this.traceReplay() && this.planDetailsOpen()) {
 			const index = this.planExplanation()?.placements.findIndex(
 				(explanation) => explanation.placement.date === date,
 			);