Restructuing

2026-07-05 16:30:58 -04:00
parent 678e20d402
commit 7b0f2ce1a5
767 changed files with 354 additions and 76 deletions
@@ -0,0 +1,282 @@
+@using System.Text.RegularExpressions
+@using global::Model
+@namespace Chrono.Components
+
+@if (Card != null)
+{
+    <div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
+    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
+        <button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
+        <div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
+            @if (HasImage)
+            {
+                <div class="detail-image">
+                    <img src="@Card.ImagePath" alt="@Card.Name"
+                         onerror="this.style.display='none';this.parentElement.style.display='none'"/>
+                </div>
+            }
+            <div class="detail-info">
+                <div class="detail-header">
+                    <h2>@Card.Name</h2>
+                    <div class="detail-meta">
+                        <span class="meta-badge category @Card.Category?.ToLowerInvariant()">@Card.Category</span>
+                        @if (Card.Cost.HasValue)
+                        {
+                            <span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @Card.Cost</span>
+                        }
+                        @if (Card.Attack.HasValue)
+                        {
+                            <span class="meta-badge attack"><i class="bi bi-crosshair"></i> @Card.Attack</span>
+                        }
+                        @if (Card.Health.HasValue)
+                        {
+                            <span class="meta-badge health"><i class="bi bi-heart-fill"></i> @Card.Health</span>
+                        }
+                        @if (Card.Speed != null)
+                        {
+                            <span class="meta-badge speed"><i class="bi bi-wind"></i> @Card.Speed</span>
+                        }
+                    </div>
+                </div>
+
+                @if (Card.Faction != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
+                        <span class="field-value">@Card.Faction</span>
+                    </div>
+                }
+
+                @if (Card.Description != null)
+                {
+                    <div class="detail-field description">
+                        <span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
+                        <span class="field-value">@RenderDescription(Card.Description)</span>
+                    </div>
+                }
+
+                @if (Card.Set != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-collection"></i> Set</span>
+                        <span class="field-value">@Card.Set</span>
+                    </div>
+                }
+
+                @if (Card.Archetypes is { Count: > 0 })
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
+                        <span class="field-value">@string.Join(", ", Card.Archetypes)</span>
+                    </div>
+                }
+
+                @if (Card.ImmortalizeWhen != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
+                        <span class="field-value">@Card.ImmortalizeWhen</span>
+                    </div>
+                }
+
+                @if (Card.HasImmortalize)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
+                        <span class="field-value">
+                            @foreach (var name in Card.ImmortalizeTo!)
+                            {
+                                var targetName = name;
+                                var target = LookupCard(targetName);
+                                if (target != null)
+                                {
+                                    <button class="inline-card-btn"
+                                            @onclick="() => Navigate(target)">@targetName</button>
+                                }
+                                else
+                                {
+                                    @targetName
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+
+                @if (Card.ImmortalizeFrom != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
+                        <span class="field-value">
+                            @{
+                                var fromCard = LookupCard(Card.ImmortalizeFrom);
+                                if (fromCard != null)
+                                {
+                                    <button class="inline-card-btn"
+                                            @onclick="() => Navigate(fromCard)">@Card.ImmortalizeFrom</button>
+                                }
+                                else
+                                {
+                                    @Card.ImmortalizeFrom
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+
+                @if (ShowNotes && Card.IsAgent)
+                {
+                    <div class="detail-field note">
+                        <span class="field-label"><i class="bi bi-pencil-fill"></i> Personal Note</span>
+                        <textarea class="form-control note-input" @bind="currentNote" @onblur="SaveNote"
+                                  placeholder="Add a private note about this agent..."></textarea>
+                        @if (isSaving)
+                        {
+                            <span class="saving-indicator">Saving...</span>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public CardData? Card { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+    [Parameter] public EventCallback<CardData> OnNavigate { get; set; }
+    [Parameter] public bool ShowNotes { get; set; }
+
+    [Inject] private HttpClient Http { get; set; } = default!;
+
+    private bool HasImage => Card?.ImageFile is { Length: > 0 } && Card.ImageFile != "placeholder.png";
+
+    private string currentNote = "";
+    private bool isSaving;
+
+    protected override void OnParametersSet()
+    {
+        if (Card != null && Card.IsAgent)
+        {
+            currentNote = "";
+            _ = LoadNote();
+        }
+    }
+
+    private async Task LoadNote()
+    {
+        if (Card == null || !Card.IsAgent) return;
+        try
+        {
+            var note = await Http.GetFromJsonAsync<CardNote>($"api/notes/{Uri.EscapeDataString(Card.Name)}");
+            currentNote = note?.Note ?? "";
+        }
+        catch
+        {
+            currentNote = "";
+        }
+    }
+
+    private async Task SaveNote()
+    {
+        if (Card == null || !Card.IsAgent) return;
+
+        isSaving = true;
+        try
+        {
+            await Http.PostAsJsonAsync("api/notes", new CardNote { CardName = Card.Name, Note = currentNote });
+        }
+        catch
+        {
+        }
+        finally
+        {
+            isSaving = false;
+        }
+    }
+
+    private void HandleClose()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void HandleBackdropClick()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void Navigate(CardData card)
+    {
+        _ = OnNavigate.InvokeAsync(card);
+    }
+
+    private static CardData? LookupCard(string cardName)
+    {
+        return CardDatabase.Cards.FirstOrDefault(c =>
+            string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
+    }
+
+    private RenderFragment RenderDescription(string description)
+    {
+        return builder =>
+        {
+            var cardNames = CardDatabase.Cards
+                .Select(c => c.Name)
+                .Where(n => !string.IsNullOrWhiteSpace(n))
+                .OrderByDescending(n => n.Length)
+                .ToList();
+
+            var seq = 0;
+            var remaining = description;
+
+            while (!string.IsNullOrEmpty(remaining))
+            {
+                var bestIdx = -1;
+                string? bestName = null;
+
+                foreach (var name in cardNames)
+                {
+                    var pattern = $@"\b{Regex.Escape(name)}\b";
+                    var match = Regex.Match(remaining, pattern, RegexOptions.IgnoreCase);
+
+                    if (match.Success)
+                    {
+                        if (bestIdx == -1 || match.Index < bestIdx)
+                        {
+                            bestIdx = match.Index;
+                            bestName = match.Value;
+                        }
+                    }
+                }
+
+                if (bestIdx != -1 && bestName != null)
+                {
+                    if (bestIdx > 0)
+                        builder.AddContent(seq++, remaining[..bestIdx]);
+
+                    var card = LookupCard(bestName);
+                    if (card != null)
+                    {
+                        builder.OpenElement(seq++, "button");
+                        builder.AddAttribute(seq++, "class", "inline-card-btn");
+                        builder.AddAttribute(seq++, "onclick",
+                            EventCallback.Factory.Create(this, () => Navigate(card)));
+                        builder.AddContent(seq++, bestName);
+                        builder.CloseElement();
+                    }
+                    else
+                    {
+                        builder.AddContent(seq++, bestName);
+                    }
+
+                    remaining = remaining[(bestIdx + bestName.Length)..];
+                }
+                else
+                {
+                    builder.AddContent(seq++, remaining);
+                    remaining = "";
+                }
+            }
+        };
+    }
+
+}
@@ -0,0 +1,259 @@
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1040;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    animation: fade-in 0.2s ease-out;
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.card-detail {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1050;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 0;
+    max-width: 720px;
+    width: 92vw;
+    max-height: 88vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    color: var(--text-primary);
+    animation: detail-enter 0.25s ease-out;
+}
+
+@keyframes detail-enter {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.detail-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 0.8rem;
+    transition: all var(--transition);
+}
+
+.detail-close:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.detail-layout {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1.5rem;
+}
+
+.detail-image {
+    flex: 0 0 260px;
+}
+
+.detail-image img {
+    width: 100%;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+}
+
+/* ── No-image layout ── */
+.card-detail-noimg {
+    max-width: 460px;
+}
+
+.layout-noimg {
+    justify-content: center;
+}
+
+.detail-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.detail-header {
+    margin-bottom: 1rem;
+}
+
+.detail-header h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.4rem;
+    line-height: 1.3;
+}
+
+.detail-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.meta-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.6rem;
+    border-radius: 100px;
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.meta-badge.category.agent,
+.meta-badge.category.immortalized {
+    background: rgba(79, 195, 247, 0.15);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.meta-badge.category.spell {
+    background: rgba(206, 147, 216, 0.15);
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.3);
+}
+
+.meta-badge.cost {
+    background: rgba(255, 215, 0, 0.12);
+    color: var(--gold);
+    border-color: rgba(255, 215, 0, 0.3);
+}
+
+.meta-badge.attack {
+    background: rgba(239, 83, 80, 0.15);
+    color: #ef5350;
+    border-color: rgba(239, 83, 80, 0.3);
+}
+
+.meta-badge.health {
+    background: rgba(102, 187, 106, 0.15);
+    color: #66bb6a;
+    border-color: rgba(102, 187, 106, 0.3);
+}
+
+.meta-badge.speed {
+    background: rgba(79, 195, 247, 0.12);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.detail-field {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+    font-size: 0.88rem;
+    line-height: 1.45;
+}
+
+.detail-field.description {
+    background: var(--bg-elevated);
+    padding: 0.6rem 0.75rem;
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--accent);
+    margin-top: 0.25rem;
+}
+
+.field-label {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    min-width: 7.5rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.3rem;
+}
+
+.detail-field.description .field-label {
+    min-width: auto;
+    color: var(--accent);
+}
+
+.field-value {
+    color: var(--text-secondary);
+}
+
+.detail-field.description .field-value {
+    color: var(--text-primary);
+    font-style: italic;
+}
+
+.card-detail::-webkit-scrollbar {
+    width: 4px;
+}
+
+.card-detail::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 2px;
+}
+
+.inline-card-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    color: var(--accent);
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: rgba(108, 99, 255, 0.3);
+    transition: color var(--transition), text-decoration-color var(--transition);
+}
+
+.inline-card-btn:hover {
+    color: #7b73ff;
+    text-decoration-color: #7b73ff;
+}
+
+
+@media (max-width: 768px) {
+    .detail-layout {
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    .detail-image {
+        flex: 0 0 auto;
+        max-width: 180px;
+        margin: 0 auto;
+    }
+
+    .card-detail,
+    .card-detail-noimg {
+        max-height: 90vh;
+    }
+
+    .card-detail-noimg {
+        max-width: 92vw;
+    }
+}
@@ -0,0 +1,15 @@
+@inherits LayoutComponentBase
+<div class="page">
+    <div class="sidebar">
+        <NavMenu/>
+    </div>
+
+    <main>
+        <NavigationTracker/>
+        <article class="content px-4">
+            <TelerikRootComponent>
+                @Body
+            </TelerikRootComponent>
+        </article>
+    </main>
+</div>
@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row ::deep a, .top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
+
+.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+    text-decoration: underline;
+}
+
+.top-row ::deep a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
@@ -0,0 +1,53 @@
+
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">
+            <i class="bi bi-hourglass-split me-2 text-warning"></i> Chrono CCG
+        </a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</div>
+
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+    <nav class="nav flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <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">
+                <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>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="decks">
+                <i class="bi bi-journal-text nav-icon"></i> Decks
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="docs">
+                <i class="bi bi-book-fill nav-icon"></i> Docs
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+
+}
@@ -0,0 +1,66 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    min-height: 3.5rem;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.nav-icon {
+    margin-right: 0.75rem;
+    font-size: 1.05rem;
+    width: 1.25rem;
+    text-align: center;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-item:first-of-type {
+    padding-top: 1rem;
+}
+
+.nav-item:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.nav-item ::deep a {
+    color: #d7d7d7;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+}
+
+.nav-item ::deep a.active {
+    background-color: rgba(255, 255, 255, 0.37);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        display: block;
+    }
+
+    .nav-scrollable {
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}
@@ -0,0 +1,346 @@
+@page "/cards"
+@using Model
+@inject AnalyticsService AnalyticsService
+
+<PageTitle>Chrono CCG - Card Gallery</PageTitle>
+
+<HeadContent>
+    <meta name="description" content="Browse and filter all Chrono CCG cards. Explore agents, spells, and more."/>
+</HeadContent>
+
+<div class="gallery-container">
+    <div class="gallery-header">
+        <h1>Card Gallery</h1>
+        <p class="text-secondary">Browse all @allCards.Count cards</p>
+    </div>
+
+    <div class="category-tabs">
+        <button class="tab @(categoryFilter == "" ? "active" : "")" @onclick='@(() => SetCategory(""))'>
+            <i class="bi bi-grid-3x3-gap-fill"></i> All
+        </button>
+
+        <button class="tab agent @(categoryFilter == "Agent" ? "active" : "")" @onclick='@(() => SetCategory("Agent"))'>
+            <i class="bi bi-person-fill"></i> Agents
+        </button>
+        <button class="tab agent @(categoryFilter == "Immortalized" ? "active" : "")"
+                @onclick='@(() => SetCategory("Immortalized"))'>
+            <i class="bi bi-person-fill"></i> Immortalized
+        </button>
+
+        <div class="tab link-toggle @(agentLink ? "active" : "")" @onclick="ToggleAgentLink" title="Link Agents and Immortalized cards">
+            <i class="bi bi-link-45deg"></i>
+            <span>Linked</span>
+            <span class="toggle-switch @(agentLink ? "on" : "off")"></span>
+        </div>
+
+        <div class="category-divider"></div>
+
+        <button class="tab spell @(categoryFilter == "Spell" ? "active" : "")" @onclick='@(() => SetCategory("Spell"))'>
+            <i class="bi bi-wand"></i> Spells
+        </button>
+    </div>
+
+    <div class="filter-bar">
+        <div class="search-wrapper">
+            <i class="bi bi-search search-icon"></i>
+            <input @bind="search" @bind:event="oninput" class="form-control search-input"
+                   placeholder="Search cards by name or description..."/>
+            @if (search.Length > 0)
+            {
+                <button class="search-clear" @onclick="ClearSearch"><i class="bi bi-x-lg"></i></button>
+            }
+        </div>
+        <select @bind="factionFilter" class="form-select filter-select">
+            <option value="">All Factions</option>
+            @foreach (var f in factions)
+            {
+                <option value="@f">@f</option>
+            }
+        </select>
+        <select @bind="costFilter" class="form-select filter-select">
+            <option value="">All Costs</option>
+            @for (var i = 0; i <= 13; i++)
+            {
+                <option value="@i">@i</option>
+            }
+        </select>
+        <div class="sort-group d-flex gap-1">
+            <select @bind="sortBy" class="form-select filter-select sort-select">
+                <option value="Cost">Sort by Cost</option>
+                <option value="Name">Sort by Name</option>
+                <option value="Attack">Sort by Attack</option>
+                <option value="Health">Sort by Health</option>
+                <option value="Efficiency">Sort by Efficiency</option>
+            </select>
+            <button class="btn btn-outline-secondary sort-dir-btn" @onclick="() => sortDescending = !sortDescending"
+                    title="@(sortDescending ? "Descending" : "Ascending")">
+                <i class="bi bi-sort-@(sortDescending ? "down" : "up")"></i>
+            </button>
+        </div>
+        <button class="btn @(showDetailedView ? "btn-primary" : "btn-outline-primary") view-toggle-btn"
+                @onclick="() => showDetailedView = !showDetailedView" title="Toggle Detailed View">
+            <i class="bi bi-list-ul"></i>
+        </button>
+    </div>
+
+    @if (HasActiveFilters)
+    {
+        <div class="active-filters">
+            <span class="filter-label">Filters:</span>
+            @if (categoryFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-tag-fill"></i> @categoryFilter
+                    <button @onclick="ClearCategoryFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            @if (factionFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-flag-fill"></i> @factionFilter
+                    <button @onclick="ClearFactionFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            @if (costFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-lightning-fill"></i> Cost @costFilter
+                    <button @onclick="ClearCostFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            <button class="clear-all" @onclick="ClearFilters">Clear all</button>
+        </div>
+    }
+
+    <div class="result-count">
+        <span>@filteredCards.Count() card@(filteredCards.Count() != 1 ? "s" : "") found</span>
+        @if (HasActiveFilters || search != "")
+        {
+            <span class="text-muted">out of @allCards.Count total</span>
+        }
+    </div>
+
+    @if (filteredCards.Any())
+    {
+        <div class="card-grid @(showDetailedView ? "detailed-view" : "")">
+            @{ var idx = 0; }
+            @foreach (var card in filteredCards.Where(a => a.Category is "Agent" or "Spell" or "Immortalized"))
+            {
+                <div class="card-cell @(selectedCard == card ? "selected" : "")"
+                     style="--i: @idx"
+                     @onclick="() => SelectCard(card)">
+                    <div class="card-image-wrapper">
+                        <div class="card-shimmer"></div>
+                        <img src="@card.ImagePath" alt="@card.Name" loading="lazy"
+                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23222244%22 width=%22200%22 height=%22280%22/><text fill=%22%23686888%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
+                        @if (card.IsImmortalized)
+                        {
+                            <div class="card-immortalize-badge" title="Immortalizes"><i class="bi bi-star-fill"></i>
+                            </div>
+                        }
+                    </div>
+                    @if (showDetailedView)
+                    {
+                        <div class="card-label">
+                            <div class="card-name">@card.Name</div>
+                            <div class="card-stats">
+                                @if (card.Attack.HasValue)
+                                {
+                                    <span class="stat"><i class="bi bi-crosshair"></i> @card.Attack</span>
+                                }
+                                @if (card.Health.HasValue)
+                                {
+                                    <span class="stat"><i class="bi bi-heart-fill"></i> @card.Health</span>
+                                }
+                            </div>
+                            <div class="card-description-preview">@card.Description</div>
+                            <div class="card-category-badge @card.Category?.ToLowerInvariant()">@card.Category</div>
+
+                        </div>
+                    }
+                </div>
+                idx++;
+            }
+        </div>
+    }
+    else
+    {
+        <div class="empty-state">
+            <i class="bi bi-search"></i>
+            <p>No cards match your filters.</p>
+            <button class="btn btn-outline-secondary" @onclick="ClearFilters">Reset Filters</button>
+        </div>
+    }
+</div>
+
+
+
+@if (selectedCard != null)
+{
+    <CardDialog Card="selectedCard" OnClose="CloseDetail" OnNavigate="SelectCard"/>
+}
+
+@code {
+    private List<CardData> allCards = [];
+    private IEnumerable<CardData> filteredCards => ApplyFilters();
+    private string search = "";
+    private string categoryFilter = "";
+    private string immortalFilter = "";
+    private bool agentLink = true;
+    private string factionFilter = "";
+    private string costFilter = "";
+    private string sortBy = "Cost";
+    private bool sortDescending;
+    private bool showDetailedView;
+    private CardData? selectedCard;
+    private List<string> factions = [];
+
+    private bool HasActiveFilters => categoryFilter != "" || factionFilter != "" || costFilter != "" || immortalFilter != "";
+
+    protected override void OnInitialized()
+    {
+        allCards = CardDatabase.Cards;
+        factions = allCards
+            .Select(c => c.Faction)
+            .Where(f => f != null)
+            .Distinct()
+            .OrderBy(f => f)
+            .ToList()!;
+    }
+
+    private IEnumerable<CardData> ApplyFilters()
+    {
+        var primarySet = allCards.Where(c =>
+            c.MatchesSearch(search) &&
+            (categoryFilter == "" || c.Category == categoryFilter) &&
+            (factionFilter == "" || c.Faction == factionFilter) &&
+            (costFilter == "" || c.Cost?.ToString() == costFilter)
+        );
+
+        var sortedPrimary = sortBy switch
+        {
+            "Cost" => sortDescending ? primarySet.OrderByDescending(c => c.Cost) : primarySet.OrderBy(c => c.Cost),
+            "Efficiency" => sortDescending ? primarySet.OrderByDescending(c => c.StatEfficiency) : primarySet.OrderBy(c => c.StatEfficiency),
+            "Attack" => sortDescending ? primarySet.OrderByDescending(c => c.Attack) : primarySet.OrderBy(c => c.Attack),
+            "Health" => sortDescending ? primarySet.OrderByDescending(c => c.Health) : primarySet.OrderBy(c => c.Health),
+            _ => sortDescending ? primarySet.OrderByDescending(c => c.Name) : primarySet.OrderBy(c => c.Name)
+        };
+
+        if (!agentLink)
+        {
+            return sortedPrimary;
+        }
+
+        var result = new List<CardData>();
+        var seen = new HashSet<string>();
+        foreach (var card in sortedPrimary)
+        {
+            if (seen.Contains(card.Name)) continue;
+
+            // Determine the "Chain Head" (the Agent)
+            var head = card;
+            if (card.Category == "Immortalized" && card.ImmortalizeFrom != null)
+            {
+                var source = allCards.FirstOrDefault(c => c.Name == card.ImmortalizeFrom);
+                if (source != null) head = source;
+            }
+
+            // Add the chain starting from head
+            if (!seen.Contains(head.Name))
+            {
+                result.Add(head);
+                seen.Add(head.Name);
+            }
+
+            if (head.ImmortalizeTo != null)
+            {
+                foreach (var targetName in head.ImmortalizeTo)
+                {
+                    if (seen.Contains(targetName)) continue;
+                    var linked = allCards.FirstOrDefault(c => c.Name == targetName);
+                    if (linked != null)
+                    {
+                        result.Add(linked);
+                        seen.Add(linked.Name);
+                    }
+                }
+            }
+
+            // Ensure the original card is added if it was somehow not part of the head's chain
+            if (!seen.Contains(card.Name))
+            {
+                result.Add(card);
+                seen.Add(card.Name);
+            }
+        }
+        return result;
+    }
+
+    private void SetImmortal(string imm)
+    {
+        immortalFilter = immortalFilter == imm ? "" : imm;
+    }
+
+    private void ClearImmortalFilter()
+    {
+        immortalFilter = "";
+    }
+
+    private void SetCategory(string cat)
+    {
+        categoryFilter = categoryFilter == cat ? "" : cat;
+        _ = AnalyticsService.TrackEvent("filter_category", new { category = categoryFilter });
+    }
+
+    private void ClearCategoryFilter()
+    {
+        categoryFilter = "";
+        _ = AnalyticsService.TrackEvent("filter_category", new { category = "All" });
+    }
+
+    private void ClearFactionFilter()
+    {
+        factionFilter = "";
+    }
+
+    private void ToggleAgentLink()
+    {
+        agentLink = !agentLink;
+        OnToggleAgentLink();
+    }
+
+    private void OnToggleAgentLink()
+    {
+        _ = AnalyticsService.TrackEvent("toggle_agent_link", new { enabled = agentLink });
+    }
+
+    private void ClearCostFilter()
+    {
+        costFilter = "";
+    }
+
+    private void ClearSearch()
+    {
+        search = "";
+    }
+
+    private void SelectCard(CardData card)
+    {
+        selectedCard = card;
+        _ = AnalyticsService.TrackEvent("select_item", new { item_name = card.Name, item_category = card.Category });
+    }
+
+    private void CloseDetail()
+    {
+        selectedCard = null;
+    }
+
+    private void ClearFilters()
+    {
+        search = "";
+        categoryFilter = "";
+        factionFilter = "";
+        costFilter = "";
+    }
+
+}
@@ -0,0 +1,604 @@
+.gallery-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+/* ── Header ── */
+.gallery-header {
+    margin-bottom: 1.5rem;
+}
+
+.gallery-header h1 {
+    margin-bottom: 0.25rem;
+}
+
+.gallery-header p {
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+/* ── Category Tabs ── */
+.category-tabs {
+    display: flex;
+    gap: 0.4rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.tab {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition);
+    font-family: inherit;
+}
+
+.tab:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+}
+
+.tab.active {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-color: var(--accent);
+    box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.tab.active.agent {
+    border-color: #4fc3f7;
+    box-shadow: 0 0 12px rgba(79, 195, 247, 0.3);
+}
+
+.tab.active.spell {
+    border-color: #ce93d8;
+    box-shadow: 0 0 12px rgba(206, 147, 216, 0.3);
+}
+
+.tab.active.token {
+    border-color: #ffd54f;
+    box-shadow: 0 0 12px rgba(255, 213, 79, 0.3);
+}
+
+.tab i {
+    font-size: 0.9rem;
+}
+
+.category-divider {
+    width: 1px;
+    height: 1.5rem;
+    background: var(--border);
+    margin: 0 0.6rem;
+    align-self: center;
+    opacity: 0.6;
+}
+
+.tab.link-toggle {
+    border-style: dashed;
+    gap: 0.6rem;
+    user-select: none;
+    padding-right: 0.8rem;
+    margin-left: 0.2rem;
+}
+
+.tab.link-toggle.active {
+    border-style: solid;
+    background: rgba(108, 99, 255, 0.1);
+    border-color: var(--accent);
+    color: var(--text-primary);
+}
+
+.toggle-switch {
+    width: 28px;
+    height: 16px;
+    background: var(--bg-hover);
+    border-radius: 10px;
+    position: relative;
+    transition: all 0.2s;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.toggle-switch.on {
+    background: var(--accent);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.toggle-switch::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s;
+}
+
+.toggle-switch.on::after {
+    transform: translateX(12px);
+}
+
+/* ── Filter Bar ── */
+.filter-bar {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    align-items: stretch;
+}
+
+.search-wrapper {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    z-index: 3;
+    pointer-events: none;
+    font-size: 0.85rem;
+}
+
+.search-input {
+    padding-left: 2.2rem;
+    padding-right: 2.2rem;
+    height: 100%;
+}
+
+.search-clear {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    font-size: 0.7rem;
+    z-index: 3;
+}
+
+.search-clear:hover {
+    color: var(--text-primary);
+}
+
+.filter-select {
+    width: auto;
+    min-width: 140px;
+}
+
+/* ── Active Filter Chips ── */
+.active-filters {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    font-size: 0.85rem;
+}
+
+.filter-label {
+    color: var(--text-muted);
+    font-weight: 500;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+}
+
+.filter-chip i:first-child {
+    font-size: 0.7rem;
+}
+
+.filter-chip button {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-size: 0.65rem;
+    line-height: 1;
+}
+
+.filter-chip button:hover {
+    color: var(--text-primary);
+}
+
+.clear-all {
+    background: none;
+    border: none;
+    color: var(--accent);
+    cursor: pointer;
+    font-size: 0.8rem;
+    padding: 0.25rem 0.5rem;
+    font-family: inherit;
+}
+
+.clear-all:hover {
+    text-decoration: underline;
+}
+
+/* ── Result Count ── */
+.result-count {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    display: flex;
+    gap: 0.3rem;
+}
+
+/* ── Card Grid ── */
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 1rem;
+}
+
+.card-grid.detailed-view {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+.card-grid.detailed-view .card-cell {
+    display: flex;
+    flex-direction: row;
+    height: 180px;
+    animation: none;
+}
+
+.card-grid.detailed-view .card-image-wrapper {
+    width: 130px;
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.card-grid.detailed-view .card-label {
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 0.75rem;
+    gap: 0.4rem;
+    background: var(--bg-surface);
+}
+
+.card-grid.detailed-view .card-name {
+    font-size: 1rem;
+    font-weight: 700;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.2;
+}
+
+.card-stats {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.card-stats .stat {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.card-stats .stat i {
+    font-size: 0.75rem;
+}
+
+.card-stats .stat:nth-child(1) {
+    color: #ffab40;
+}
+
+/* Attack */
+.card-stats .stat:nth-child(2) {
+    color: #f44336;
+}
+
+/* Health */
+
+.card-description-preview {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+    margin-top: 0.2rem;
+}
+
+.sort-group {
+    min-width: 200px;
+}
+
+.sort-select {
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+
+.sort-dir-btn {
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    border-left: none;
+    background: var(--bg-surface);
+}
+
+.view-toggle-btn {
+    min-width: 40px;
+    background: var(--bg-surface);
+}
+
+/* ── Card Cell ── */
+.card-cell {
+    cursor: pointer;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-surface);
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    border: 2px solid transparent;
+    animation: card-enter 0.4s ease-out both;
+    animation-delay: calc(var(--i, 0) * 25ms);
+    will-change: transform;
+}
+
+.card-cell:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 8px 30px rgba(108, 99, 255, 0.2);
+    border-color: rgba(108, 99, 255, 0.2);
+}
+
+.card-cell.selected {
+    border-color: var(--gold);
+    box-shadow: 0 0 20px var(--gold-glow);
+}
+
+.card-cell.selected:hover {
+    box-shadow: 0 8px 30px var(--gold-glow);
+}
+
+@keyframes card-enter {
+    from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* ── Card Image ── */
+.card-image-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 5 / 7;
+    overflow: hidden;
+    background: #111128;
+}
+
+.card-shimmer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2.5s infinite;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.card-image-wrapper img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    z-index: 1;
+}
+
+.card-cost-badge {
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: var(--gold);
+    font-weight: 700;
+    font-size: 0.8rem;
+    padding: 0.15rem 0.5rem;
+    border-radius: 100px;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+    z-index: 2;
+    line-height: 1.4;
+}
+
+.card-cost-badge::before {
+    content: "⚡";
+    margin-right: 0.15rem;
+}
+
+.card-immortalize-badge {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: var(--gold);
+    font-size: 0.7rem;
+    padding: 0.25rem;
+    border-radius: 50%;
+    z-index: 2;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+/* ── Card Label ── */
+.card-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.4rem 0.6rem;
+    background: var(--bg-elevated);
+    min-height: 2.4rem;
+}
+
+.card-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.card-category-badge {
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    font-weight: 600;
+    padding: 0.15rem 0.45rem;
+    border-radius: 100px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.card-category-badge.agent {
+    background: rgba(79, 195, 247, 0.15);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.card-category-badge.spell {
+    background: rgba(206, 147, 216, 0.15);
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.3);
+}
+
+.card-category-badge.token {
+    background: rgba(255, 213, 79, 0.15);
+    color: #ffd54f;
+    border-color: rgba(255, 213, 79, 0.3);
+}
+
+/* ── Empty State ── */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-muted);
+}
+
+.empty-state i {
+    font-size: 2.5rem;
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.empty-state p {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+    .gallery-container {
+        padding: 1rem;
+    }
+
+    .filter-bar {
+        flex-direction: column;
+    }
+
+    .filter-select {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .card-grid {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+        max-width: 400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        max-width: 500px;
+    }
+
+    .tab {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .card-grid, .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+        max-width: 100%;
+    }
+
+    .category-tabs {
+        gap: 0.3rem;
+    }
+
+    .tab {
+        padding: 0.35rem 0.65rem;
+        font-size: 0.75rem;
+    }
+
+    .tab i {
+        display: none;
+    }
+}
@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Shared.Services;
+using Standalone;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<Routes>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddTelerikBlazor();
+builder.Services.AddSingleton<CardRenderingService>();
+builder.Services.AddScoped<AnalyticsService>();
+
+await builder.Build().RunAsync();
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5182",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7294;http://localhost:5182",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
@@ -0,0 +1,7 @@
+<Router AppAssembly="@typeof(Routes).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }"
+        NotFoundPage="typeof(NotFound)">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
+    </Found>
+</Router>
@@ -0,0 +1,33 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+    <PropertyGroup>
+        <TargetFramework>net10.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <OverrideHtmlAssetPlaceholders>false</OverrideHtmlAssetPlaceholders>
+        <StaticWebAssetsFingerprintingEnabled>false</StaticWebAssetsFingerprintingEnabled>
+        <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
+        <RootNamespace>Standalone</RootNamespace>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js"/>
+    </ItemGroup>
+
+    <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="MudBlazor" Version="9.6.0" />
+        <PackageReference Include="Telerik.UI.for.Blazor" Version="14.0.0" PrivateAssets="none"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\Model\Model.csproj"/>
+        <ProjectReference Include="..\Shared\Shared.csproj"/>
+    </ItemGroup>
+
+    <ItemGroup>
+      <AdditionalFiles Include="Components\Layout\MainLayout.razor" />
+      <AdditionalFiles Include="Components\Layout\NavMenu.razor" />
+    </ItemGroup>
+</Project>
@@ -0,0 +1,16 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Model
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.AspNetCore.Components.WebAssembly.Http
+@using Microsoft.JSInterop
+@using Shared.Pages
+@using Shared.Services
+@using Shared.Components
+@using Standalone.Components.Layout
+@using Telerik.Blazor
+@using Telerik.Blazor.Components
+@using Telerik.DataSource
--- a/Show More
+++ b/Show More