feat(calendar): add explained period feature and update translations

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

@@ -888,16 +888,6 @@
 			</button>
 		</div>
 	}
-	@if (counterfactualLoading()) {
-		<p class="counterfactual-progress" aria-hidden="true">
-			{{ tr().planning.counterfactualLoading }}
-		</p>
-	}
-	@if (counterfactualError()) {
-		<div class="counterfactual-inline-error" role="alert">
-			<p>{{ tr().planning.counterfactualError }} {{ counterfactualError() }}</p>
-		</div>
-	}
 	<p class="calendar-help">
 		<mat-icon aria-hidden="true">touch_app</mat-icon>{{ tr().planning.calendarHelp }}
 	</p>
@@ -926,11 +916,17 @@
 			</li>
 			@if (planDetailsOpen() || traceReplay()) {
 				<li>
-					<span class="legend-symbol" aria-hidden="true">◎</span
+					<span class="legend-swatch current" aria-hidden="true"></span
 					>{{ tr().planning.currentPlacement }}
 				</li>
 			}
-			@if (counterfactual()) {
+			@if (explainedPeriod()) {
+				<li>
+					<span class="legend-swatch explained-period" aria-hidden="true"></span
+					>{{ tr().planning.explainedPeriod }}
+				</li>
+			}
+			@if (traceReplay() && counterfactual()) {
 				<li>
 					<span class="legend-symbol hypothetical-symbol" aria-hidden="true">~✓</span
 					>{{ tr().planning.eligible }}
@@ -1000,7 +996,8 @@
 						[horizonStart]="planningHorizon()?.start"
 						[horizonEnd]="planningHorizon()?.end"
 						[currentDate]="currentPlacementDate()"
-						[dateStatuses]="dateStatuses()"
+						[explainedPeriod]="explainedPeriod()"
+						[dateStatuses]="traceReplay() ? dateStatuses() : {}"
 						(dateSelected)="selectCalendarDate($event)"
 					></app-calendar-month>
 				</mat-card-content>