deepdrft/DeepDrftManager/Components/Pages/Tracks/CmsGenreBrowser.razor

@using DeepDrftModels.DTOs

@if (IsLoading)
{
    <MudProgressCircular Indeterminate="true" Class="mt-4" />
}
else if (Genres.Count == 0)
{
    <MudText Typo="Typo.body1" Class="mt-4">No genres found.</MudText>
}
else
{
    <MudGrid Spacing="3" Class="mt-2">
        @foreach (var genre in Genres)
        {
            var isExpanded = ExpandedGenre == genre.Genre;
            <MudItem xs="12" sm="6" md="4">
                <MudCard Elevation="@(isExpanded ? 4 : 1)"
                         Style="cursor: pointer;"
                         @onclick="@(() => ToggleGenre(genre.Genre))">
                    <div class="@SwatchClass(isExpanded)"></div>
                    <MudCardContent>
                        <MudText Typo="Typo.h6">@genre.Genre</MudText>
                        <MudText Typo="Typo.body2" Class="mud-text-secondary">@genre.TrackCount track(s)</MudText>
                    </MudCardContent>
                </MudCard>
            </MudItem>
        }
    </MudGrid>

    @if (ExpandedGenre is not null)
    {
        <MudDivider Class="my-4" />
        <MudText Typo="Typo.h6" Class="mb-2">@ExpandedGenre</MudText>
        <CmsTrackGrid @key="ExpandedGenre" GenreFilter="ExpandedGenre" ShowAddButton="false" />
    }
}

@code {
    [Parameter] public IReadOnlyList<GenreSummaryDto> Genres { get; set; } = Array.Empty<GenreSummaryDto>();
    [Parameter] public bool IsLoading { get; set; }
    [Parameter] public string? ExpandedGenre { get; set; }
    [Parameter] public EventCallback<string?> OnExpandedGenreChanged { get; set; }

    // The view model owns the toggle (selecting the open genre collapses it), so we pass the raw
    // clicked genre rather than pre-computing the next state here — keeps the toggle logic single-sourced.
    private async Task ToggleGenre(string genre) =>
        await OnExpandedGenreChanged.InvokeAsync(genre);

    private static string SwatchClass(bool isExpanded) =>
        isExpanded ? "cms-genre-swatch cms-genre-swatch--active" : "cms-genre-swatch";
}