Adding agents table UI

Chrono/Web/Layout/MainLayout.razor

@@ -6,7 +6,9 @@
 
     <main>
         <article class="content px-4">
-            @Body
+            <TelerikRootComponent>
+                @Body
+            </TelerikRootComponent>
         </article>
     </main>
 </div>

Chrono/Web/Layout/NavMenu.razor

@@ -11,12 +11,17 @@
     <nav class="nav flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+                <i class="bi bi-house-door-fill nav-icon"></i> Home
             </NavLink>
         </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="cards">
-                <span class="bi bi-collection-fill-nav-menu" aria-hidden="true"></span> Cards
+                <i class="bi bi-collection-fill nav-icon"></i> Cards
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="agents">
+                <i class="bi bi-people-fill nav-icon"></i> Agents
             </NavLink>
         </div>
     </nav>
@@ -32,4 +37,4 @@
         collapseNavMenu = !collapseNavMenu;
     }
 
-}
+}

Chrono/Web/Layout/NavMenu.razor.css

@@ -11,26 +11,11 @@
     font-size: 1.1rem;
 }
 
-.bi {
+.nav-icon {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
     margin-right: 0.75rem;
-    top: -1px;
+    font-size: 1.05rem;
-    background-size: cover;
+    width: 1.25rem;
-}
+    text-align: center;
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
 }
 
 .nav-item {
@@ -71,12 +56,10 @@
     }
 
     .collapse {
-        /* Never collapse the sidebar for wide screens */
         display: block;
     }
 
     .nav-scrollable {
-        /* Allow sidebar to scroll for tall menus */
         height: calc(100vh - 3.5rem);
         overflow-y: auto;
     }

Chrono/Web/Pages/Agents.razor

@@ -0,0 +1,58 @@
+@page "/agents"
+@using Chrono.Model
+
+<PageTitle>Agents</PageTitle>
+
+<div class="agents-page">
+    <div class="agents-header">
+        <h1>Agents</h1>
+        <p class="text-secondary">@agents.Count agents in the database</p>
+    </div>
+
+    <TelerikGrid Data="@agents"
+                 Sortable="true"
+                 FilterMode="@GridFilterMode.FilterRow"
+                 Pageable="true"
+                 PageSize="250"
+                 Resizable="true"
+                 Height="700px"
+                 class="agents-grid">
+        <GridColumns>
+            <GridColumn Title="Im." Width="30px">
+                <Template>
+                    @if (((CardData)context).HasImmortalize)
+                    {
+                        <i class="bi bi-star-fill" style="color: #ffd700;" title="Immortalizes"></i>
+                    }
+                </Template>
+            </GridColumn>
+            <GridColumn Field="@nameof(CardData.Name)" Title="Card" Width="220px">
+                <Template>
+                    <div class="agent-name-cell">
+                        <img src="@(((CardData)context).ImagePath)" alt="@(((CardData)context).Name)" class="agent-thumb"/>
+                        <span>@(((CardData)context).Name)</span>
+                    </div>
+                </Template>
+            </GridColumn>
+            <GridColumn Field="@nameof(CardData.Cost)" Title="Cost" Width="60px"/>
+            <GridColumn Field="@nameof(CardData.Faction)" Title="Faction" Width="110px"/>
+            <GridColumn Field="@nameof(CardData.Attack)" Title="ATK" Width="60px"/>
+            <GridColumn Field="@nameof(CardData.Health)" Title="HP" Width="60px"/>
+            <GridColumn Field="@nameof(CardData.Description)" Title="Description" Width="400px"/>
+
+        </GridColumns>
+    </TelerikGrid>
+</div>
+
+@code {
+    private List<CardData> agents = [];
+
+    protected override void OnInitialized()
+    {
+        agents = CardDatabase.Cards
+            .Where(c => c.Category == "Agent")
+            .OrderBy(c => c.Cost)
+            .ThenBy(c => c.Name)
+            .ToList();
+    }
+}

Chrono/Web/Pages/Agents.razor.css

@@ -0,0 +1,113 @@
+.agents-page {
+    --kendo-color-app-surface: oklch(5.3% 0.013 270deg);
+    --kendo-color-subtle: oklch(64% 0.018 270deg);
+    --kendo-color-surface: oklch(10% 0.015 270deg);
+    --kendo-color-border: oklch(25% 0.025 270deg / 0.7);
+    --kendo-color-border-alt: oklch(30% 0.03 270deg / 0.5);
+    --kendo-color-base: oklch(16% 0.02 270deg);
+    --kendo-color-primary: oklch(55% 0.23 275deg);
+    --kendo-color-secondary: oklch(35% 0 0deg);
+    --kendo-color-tertiary: oklch(55% 0.15 240deg);
+    --kendo-color-info: oklch(65% 0.15 250deg);
+    --kendo-color-success: oklch(60% 0.15 140deg);
+    --kendo-color-warning: oklch(75% 0.14 85deg);
+    --kendo-color-error: oklch(55% 0.20 30deg);
+    --kendo-color-inverse: oklch(85% 0.01 270deg);
+    --kendo-color-series: oklch(55% 0.23 275deg);
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+.agents-page ::deep .k-grid,
+.agents-page ::deep .k-grid-container,
+.agents-page ::deep .k-grid-content,
+.agents-page ::deep .k-grid-header-wrap {
+    background: transparent;
+    color: inherit;
+}
+
+.agents-page ::deep .k-grid-header,
+.agents-page ::deep .k-grid-footer,
+.agents-page ::deep .k-pager-wrap {
+    background: var(--bg-elevated);
+}
+
+.agents-page ::deep .k-grid-header .k-header,
+.agents-page ::deep .k-grid-header .k-column-title,
+.agents-page ::deep .k-grid-header .k-link,
+.agents-page ::deep .k-grid-header .k-grid-filter {
+    color: #e8e8f0;
+}
+
+.agents-page ::deep .k-grid-header .k-link:hover,
+.agents-page ::deep .k-grid-header .k-grid-filter:hover {
+    color: #ffffff;
+}
+
+.agents-page ::deep .k-grid td,
+.agents-page ::deep .k-grid-header th.k-header {
+    border-color: oklch(25% 0.025 270deg / 0.7);
+}
+
+.agents-page ::deep .k-grid tr.k-alt {
+    background: oklch(12% 0.015 270deg);
+}
+
+.agents-page ::deep .k-grid tr:hover {
+    background: oklch(20% 0.025 270deg);
+}
+
+.agents-page ::deep .k-grid-filter,
+.agents-page ::deep .k-grid-filter:hover {
+    color: var(--text-secondary);
+}
+
+.agents-page ::deep .k-input,
+.agents-page ::deep .k-picker {
+    color: var(--text-primary);
+    background: var(--bg-surface);
+    border-color: var(--border);
+}
+
+.agents-page ::deep .k-button-solid-base {
+    color: var(--text-secondary);
+    background: var(--bg-elevated);
+    border-color: var(--border);
+}
+
+.agents-page ::deep .k-button-solid-base:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.agents-page ::deep .k-pager-nav {
+    color: var(--text-secondary);
+}
+
+.agents-header {
+    margin-bottom: 1.5rem;
+}
+
+.agents-header h1 {
+    margin-bottom: 0.25rem;
+}
+
+.agents-header p {
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+.agent-name-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.agent-thumb {
+    width: 36px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 4px;
+    flex-shrink: 0;
+}

Chrono/Web/Program.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Telerik.Blazor;
 using Web;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
@@ -7,5 +8,6 @@ builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddTelerikBlazor();
 
 await builder.Build().RunAsync();

Chrono/Web/Web.csproj

@@ -10,6 +10,7 @@
     <ItemGroup>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.9"/>
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.9" PrivateAssets="all"/>
+        <PackageReference Include="Telerik.UI.for.Blazor" Version="14.0.0" />
     </ItemGroup>
 
     <ItemGroup>

Chrono/Web/_Imports.razor

@@ -8,4 +8,6 @@
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
 @using Web
-@using Web.Layout
+@using Web.Layout
+@using Telerik.Blazor
+@using Telerik.Blazor.Components

Chrono/Web/wwwroot/index.html

@@ -13,6 +13,7 @@
     <link rel="preload" id="webassembly" />
     <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="Web.styles.css" rel="stylesheet" />
     <script type="importmap"></script>