Add date display to status tooltip

src/app/frontend/assets/ts/features/status.ts

@@ -68,6 +68,7 @@ export class StatusService {
         isActive: false,
         style: "",
         incidents: undefined,
+        date: undefined,
       };
       return;
     }
@@ -87,6 +88,7 @@ export class StatusService {
       isActive: true,
       incidents: day?.incidents,
       style: style,
+      date: day.date,
     };
   }
   public stop(): void {

src/app/frontend/assets/ts/shared/services/status.processor.ts

@@ -163,10 +163,16 @@ export class StatusProcessor {
       const dayStart = startOfDay(day);
       const dayEnd = endOfDay(day);
 
+      const formattedDate = day.toLocaleDateString(LOCALE, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+      });
+
       const hasActiveMonitor = this.hasActiveMonitorOnDay(monitors, dayEnd);
 
       if (!hasActiveMonitor) {
-        return { color: "bg-empty", index: dayIndex };
+        return { color: "bg-empty", index: dayIndex, date: formattedDate };
       }
 
       const dayIncidents = this.filterIncidentsByDateRange(
@@ -179,6 +185,7 @@ export class StatusProcessor {
         return {
           color: "bg-operational",
           index: dayIndex,
+          date: formattedDate,
           incidents: [],
         };
       }
@@ -191,6 +198,7 @@ export class StatusProcessor {
       return {
         index: dayIndex,
         color: prioritizedIncidents[0].color,
+        date: formattedDate,
         incidents: this.sortIncidentsByLatest(prioritizedIncidents, false),
       };
     });

src/app/frontend/assets/ts/shared/types/status.ts

@@ -9,6 +9,7 @@ export interface Tooltip {
   isActive: boolean;
   incidents?: EnrichedIncident[];
   style: string;
+  date?: string;
 }
 
 export interface IncidentConfig {
@@ -26,6 +27,7 @@ export interface EnrichedIncident extends IncidentForStatus, IncidentConfig {
 export interface Days {
   color: string;
   index: number;
+  date: string;
   incidents?: EnrichedIncident[];
 }
 

src/app/frontend/templates/status/tooltip.html

@@ -9,6 +9,13 @@
   class="hidden sm:block fixed max-h-96 overflow-y-auto bg-form border border-form-border rounded-form shadow-form p-2 z-50 max-w-xs"
 >
   <div>
+    <div class="mb-2 pb-2 border-b border-form-border">
+      <p
+        class="text-sm font-semibold text-title text-center"
+        x-text="tooltip.date"
+      ></p>
+    </div>
+
     {%
       set variants = [
         {