Enhancements to Indicator components and layout adjustments

The `System.ComponentModel.DataAnnotations` namespace has been introduced in `Indicator.razor.cs` to support data annotations. A new optional parameter named `Size` has been added to the `Indicator` component to allow setting the icon size, limited to a range of 12 to 128. In addition, when the `Size` parameter is not null, the `icon` rendering fragment adds a corresponding `size` attribute based on the `Size` value, which directly affects the rendered output.

In `ServiceItem.razor`, a reference to the `StatusDashboard.Components.Event` namespace has been added and the component display logic has been modified. The new `future` private field and its logic update in the `OnParametersSetAsync` method enables the component to decide whether to display special layouts (containing `FluentCounterBadge` and `Indicator`) based on the start time of the event compared to the current UTC time to distinguish between the upcoming events and the current state.

Changes in the `Home.razor` file include the addition of `flex-wrap` and `gap-y-2` classes to the two `section` elements, designed to improve responsive layouts and ensure that content aligns better across different screen sizes.

Components/Home/Indicator.razor.cs

@@ -1,5 +1,6 @@
 namespace StatusDashboard.Components.Home;
 
+using System.ComponentModel.DataAnnotations;
 using System.Diagnostics.CodeAnalysis;
 using Event;
 using Microsoft.AspNetCore.Components;
@@ -15,6 +16,10 @@ public partial class Indicator {
     [EditorRequired]
     public EventType? Type { get; set; }
 
+    [Parameter]
+    [Range(12, 128)]
+    public byte? Size { get; set; }
+
     [Parameter]
     public string? Class { get; set; }
 
@@ -41,6 +46,10 @@ private RenderFragment icon {
                 x.AddAttribute(1, "accessibility-title", this.Type);
                 x.AddAttribute(2, "fill", fillColor);
                 x.AddAttribute(3, "class", this.Class);
+
+                if (this.Size is not null) 
+                    x.AddAttribute(4, "size", this.Size);
+
                 x.CloseElement();
             };
         }

Components/Home/ServiceItem.razor

@@ -1,10 +1,24 @@
 @using Microsoft.EntityFrameworkCore
+@using StatusDashboard.Components.Event
 @using StatusDashboard.Services
 @implements IAsyncDisposable
 @inject IDbContextFactory<StatusContext> context;
 
 <li class="flex items-center py-2">
-  <Indicator Type="@status" />
+  @if (future)
+  {
+    <div class="flex h-6">
+      <FluentCounterBadge
+        Dot="true"
+        Style="background: royalblue; border: none">
+        <Indicator Type="EventType.Operational" />
+      </FluentCounterBadge>
+    </div>
+  }
+  else
+  {
+    <Indicator Type="@status" />
+  }
 
   <label class="ml-2.5 text-xl font-medium text-slate-700">
     @RegionService.Service.Name

Components/Home/ServiceItem.razor.cs

@@ -17,18 +17,26 @@ public partial class ServiceItem {
 
     private EventType status { get; set; }
 
+    private bool future { get; set; }
+
     public async ValueTask DisposeAsync() => await this.db.DisposeAsync();
 
     protected override async Task OnInitializedAsync() => this.db = await this.context.CreateDbContextAsync();
 
     protected override async Task OnParametersSetAsync() {
-        this.status = await this.db.RegionService
+        var res = await this.db.RegionService
             .Where(x => x.Id == this.RegionService.Id)
             .SelectMany(x => x.Events)
-            .Select(x => new { x.Type, x.Histories.OrderByDescending(h => h.Created).First().Status })
+            .Select(x => new { x.Type, x.Start, x.Histories.OrderByDescending(h => h.Created).First().Status })
             .Where(x => x.Status != EventStatus.Completed && x.Status != EventStatus.Resolved)
             .OrderByDescending(x => x.Type)
-            .Select(x => x.Type)
+            .Select(x => new { x.Type , x.Start })
             .FirstOrDefaultAsync();
+
+        if (res is null)
+            return;
+
+        this.status = res.Type;
+        this.future = res.Start > DateTime.UtcNow;
     }
 }

Components/Pages/Home.razor

@@ -26,13 +26,13 @@
   </section>
 </CascadingValue>
 
-<section class="flex justify-between py-2">
+<section class="flex flex-wrap justify-between gap-y-2 py-2">
   <div class="flex items-center gap-x-2">
     <div class="Blink" />
     <label>Auto Refresh Enabled</label>
   </div>
 
-  <legend class="flex items-center gap-x-6">
+  <legend class="flex flex-wrap items-center gap-x-6 gap-y-2.5">
     @foreach (var state in Enum.GetValues<EventType>())
     {
       <div class="flex gap-x-2">