feat(planning): explain and trace planning decisions

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

@@ -26,21 +26,45 @@
 							<p class="day empty"></p>
 						} @else {
 							@let dayTooltip = getDayTooltip(day);
-							<p
+							@let dateKey = getDateKey(day);
+							@let status = getStatus(day);
+							<button
+								type="button"
+								[attr.data-date]="dateKey"
 								[class.past]="day < getNow()"
 								[class.start]="selectedDates.isStart(day)"
 								[class.end]="selectedDates.isEnd(day)"
 								[class.selected]="selectedDates.isSelected(day)"
+								[class.current]="dateKey === currentDate"
+								[class.context-only]="!isInHorizon(day)"
+								[class.eligible]="status?.kind === 'eligible'"
+								[class.ineligible]="status?.kind === 'ineligible'"
+								[class.chosen]="status?.kind === 'chosen'"
+								[class.evaluated-rejected]="status?.kind === 'evaluated-rejected'"
+								[class.pruned]="status?.kind === 'pruned'"
+								[class.not-examined]="status?.kind === 'not-examined'"
+								[class.change-added]="status?.change === 'added'"
+								[class.change-moved-from]="status?.change === 'moved-from'"
+								[class.change-moved-to]="status?.change === 'moved-to'"
+								[class.change-removed]="status?.change === 'removed'"
+								[class.change-shared]="status?.change === 'shared'"
+								[class.change-unchanged]="status?.change === 'unchanged'"
 								[class]="selectedDates.getClasses(day)"
 								class="day number"
+								[disabled]="!isInHorizon(day)"
 								[matTooltip]="dayTooltip"
 								[matTooltipShowDelay]="500"
-								[attr.aria-label]="
-									dayTooltip ? day.getDate() + ': ' + dayTooltip : null
-								"
+								[attr.aria-label]="getDayAriaLabel(day)"
+								[attr.aria-current]="dateKey === currentDate ? 'date' : null"
+								(click)="dateSelected.emit(dateKey)"
 							>
-								{{ day.getDate() }}
-							</p>
+								<span>{{ day.getDate() }}</span>
+								@if (status) {
+									<small class="status-marker" aria-hidden="true">{{
+										getStatusMarker(day)
+									}}</small>
+								}
+							</button>
 						}
 					}
 				</div>