SharpRSS/WebSharpRSS/Shared/CategoryGuide.razor

@using WebSharpRSS.Models
@using CodeHollow.FeedReader
<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 (CategoryGuideItem catItem in Categories)
    {
        <div>
            <div @onclick="@(() => ItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
                <div class="cat-item-icon">
                    <MudIcon Class="pointer-events-none" Icon="@catItem.CategoryIcon" Size="Size.Medium"/>
                </div>
                <div class="cat-item-text">
                    <MudText Class="pointer-events-none" Typo="Typo.subtitle1">@catItem.CategoryTitle</MudText>
                </div>
            </div>
            @* Feeds *@
            @if (catItem.IsExpanded && catItem.FeedItems != null)
            {
                foreach (FeedGuideItem feedItem in catItem.FeedItems)
                {
                    <div @onclick="() => ItemClicked(feedItem)" class="feed-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(feedItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
                        <div class="feed-item-icon">
                            <MudImage ObjectFit="ObjectFit.Contain" Src="http://www.google.com/s2/favicons?domain=wikipedia.com"/>
                        </div>
                        <div class="feed-item-text">
                            <MudText Class="pointer-events-none">@feedItem.Feed.Title</MudText>
                        </div>
                    </div>
                }
            }
        </div>
    }
</div>

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

    ISelectableGuideItem? _selectedCategory;

    void ItemClicked(ISelectableGuideItem categoryItem)
    {
        categoryItem.IsExpanded = !categoryItem.IsExpanded;
        
        if (_selectedCategory != categoryItem)
        {
            if (_selectedCategory != null)
                _selectedCategory.IsSelected = false;
            _selectedCategory = categoryItem;
            _selectedCategory.IsSelected = true;
        }
        switch (categoryItem)
        {
            case CategoryGuideItem catGuideItem:
                CatItemClicked?.Invoke(catGuideItem);
                break;
            case FeedGuideItem feedGuideItem:
                FeedItemClicked?.Invoke(feedGuideItem);
                break;
        }
    }
}