SharpRSS/WebSharpRSS/Shared/CategoryGuide.razor

@using CodeHollow.FeedReader
@using SharpRss.Models
@using ToolQit
@using ToolQit.Containers
@using ToolQit.Extensions
<style>
    .cat-item {
        background: var(--background-color);
        tab-index: 0;
        width: 100%;
        display: flex;
        position: relative;
        box-sizing: border-box;
        text-align: start;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 12px;
        justify-content: flex-start;
        text-decoration: none;
    }
    .cat-item:hover {
        background: var(--hover-bg-color);
    }
    .cat-item-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .cat-item-icon {
        display: inline-flex;
        min-width: 56px;
        flex-shrink: 0;
    }
    
    .feed-item {
        background: var(--background-color);
        tab-index: 0;
        width: 100%;
        display: flex;
        position: relative;
        box-sizing: border-box;
        text-align: start;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 30px;
        justify-content: flex-start;
        text-decoration: none;
    }
    .feed-item:hover {
        background: var(--hover-bg-color);
    }
    .feed-item-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .feed-item-icon {
        display: inline-flex;
        min-width: 56px;
        flex-shrink: 0;
    }
    
</style>

<div>
    <MudText>@HeaderText</MudText>
    @foreach (CategoryModel guideCategory in Categories)
    {
        <div>
            <div @onclick="@(() => ItemClicked(guideCategory))" class="cat-item mud-ripple" style="--hover-bg-color: @Colors.Blue.Accent1; --background-color: @(guideCategory.IsSelected ? Colors.Blue.Accent2 : "transparent")">
                <div class="cat-item-icon">
                    <MudIcon Class="pointer-events-none" Icon="@Icons.Material.Filled.RssFeed" Size="Size.Medium"/>
                </div>
                <div class="cat-item-text">
                    <MudText Class="pointer-events-none" Typo="Typo.subtitle1">@guideCategory.Name</MudText>
                </div>
            </div>
            @* Feeds *@
            @if (guideCategory.IsExpanded && guideCategory.Feeds != null)
            {
                foreach (FeedModel feed in guideCategory.Feeds)
                {
                    if (feed == null || feed.Base == null) continue;
                    <div @onclick="() => ItemClicked(feed)" class="feed-item mud-ripple" style="--hover-bg-color: @Colors.Blue.Accent1; --background-color: @(feed.IsSelected ? Colors.Blue.Accent2 : "transparent")">
                        <div class="feed-item-icon">
                            @*@if (!guideFeed.FaviconUrl.IsNullEmptyWhiteSpace())
                                {
                                    <MudImage ObjectFit="ObjectFit.ScaleDown" Src="@guideFeed.FaviconUrl"/>
                                }
                                else
                                {
                                    <MudIcon Icon="@Icons.Material.Filled.RssFeed" Size="Size.Medium"/>
                                }*@
                            <MudIcon Icon="@Icons.Material.Filled.RssFeed" Size="Size.Medium"/>
                        </div>
                        <div class="feed-item-text">
                            <MudText Class="pointer-events-none">@feed.Base.Title</MudText>
                        </div>
                    </div>
                }
            }
        </div>
    }
</div>

@code {
    [Parameter]
    public string HeaderText { get; set; }
    [Parameter]
    public HashSet<CategoryModel> Categories { get; set; } = new HashSet<CategoryModel>();
    [Parameter]
    public Action<CategoryModel>? CatItemClicked { get; set; }
    [Parameter]
    public Action<FeedModel>? FeedItemClicked { get; set; }
    
    IGuideItem? _selectedItem;

    void ItemClicked(IGuideItem categoryItem)
    {
        categoryItem.IsExpanded = !categoryItem.IsExpanded;
        
        if (_selectedItem != categoryItem)
        {
            if (_selectedItem != null)
                _selectedItem.IsSelected = false;
            _selectedItem = categoryItem;
            _selectedItem.IsSelected = true;
        }
        switch (categoryItem)
        {
            case CategoryModel catGuideItem:
                CatItemClicked?.Invoke(catGuideItem);
                break;
            case FeedModel feedGuideItem:
                FeedItemClicked?.Invoke(feedGuideItem);
                break;
        }
    }
}