From 493d20820a123eb0825e2e0ebae9f56099c914d7 Mon Sep 17 00:00:00 2001
From: Max <51083570+DRdrProfessor@users.noreply.github.com>
Date: Thu, 4 May 2023 20:59:25 +0200
Subject: [PATCH] Fixed side bar UI.

---
 WebSharpRSS/Models/CategoryGuideItem.cs    |   4 +-
 WebSharpRSS/Models/FeedGuideItem.cs        |  15 +++
 WebSharpRSS/Models/FeedTreeItem.cs         |  14 ---
 WebSharpRSS/Models/ISelectableGuideItem.cs |   8 ++
 WebSharpRSS/Shared/CategoryGuide.razor     | 101 +++++++++++++--------
 5 files changed, 86 insertions(+), 56 deletions(-)
 create mode 100644 WebSharpRSS/Models/FeedGuideItem.cs
 delete mode 100644 WebSharpRSS/Models/FeedTreeItem.cs
 create mode 100644 WebSharpRSS/Models/ISelectableGuideItem.cs

diff --git a/WebSharpRSS/Models/CategoryGuideItem.cs b/WebSharpRSS/Models/CategoryGuideItem.cs
index a812feb..46553b4 100644
--- a/WebSharpRSS/Models/CategoryGuideItem.cs
+++ b/WebSharpRSS/Models/CategoryGuideItem.cs
@@ -3,7 +3,7 @@ using CodeHollow.FeedReader;
 
 namespace WebSharpRSS.Models
 {
-    public class CategoryGuideItem
+    public class CategoryGuideItem : ISelectableGuideItem
     {
         public string CategoryTitle { get; set; }
         public string CategoryIcon { get; set; }
@@ -17,6 +17,6 @@ namespace WebSharpRSS.Models
 
         public bool IsExpanded { get; set; }
         public bool IsSelected { get; set; }
-        public HashSet<Feed> Feeds { get; set; } = new HashSet<Feed>() { FeedReader.ReadAsync("http://fedoramagazine.org/feed/").Result };
+        public HashSet<FeedGuideItem> FeedItems { get; set; } = new HashSet<FeedGuideItem>() { new FeedGuideItem(FeedReader.ReadAsync("http://fedoramagazine.org/feed/").Result) };
     }
 }
\ No newline at end of file
diff --git a/WebSharpRSS/Models/FeedGuideItem.cs b/WebSharpRSS/Models/FeedGuideItem.cs
new file mode 100644
index 0000000..e9fda25
--- /dev/null
+++ b/WebSharpRSS/Models/FeedGuideItem.cs
@@ -0,0 +1,15 @@
+using CodeHollow.FeedReader;
+
+namespace WebSharpRSS.Models
+{
+    public class FeedGuideItem : ISelectableGuideItem
+    {
+        public FeedGuideItem(Feed feed)
+        {
+            Feed = feed;
+        }
+        public readonly Feed Feed;
+        public bool IsSelected { get; set; }
+        public bool IsExpanded { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/WebSharpRSS/Models/FeedTreeItem.cs b/WebSharpRSS/Models/FeedTreeItem.cs
deleted file mode 100644
index b539dfd..0000000
--- a/WebSharpRSS/Models/FeedTreeItem.cs
+++ /dev/null
@@ -1,14 +0,0 @@
-using System.Collections.Generic;
-using CodeHollow.FeedReader;
-
-namespace WebSharpRSS.Models
-{
-    public class FeedTreeItem
-    {
-        public FeedTreeItem(Feed feed)
-        {
-            _feed = feed;
-        }
-        private readonly Feed _feed;
-    }
-}
\ No newline at end of file
diff --git a/WebSharpRSS/Models/ISelectableGuideItem.cs b/WebSharpRSS/Models/ISelectableGuideItem.cs
new file mode 100644
index 0000000..03542d7
--- /dev/null
+++ b/WebSharpRSS/Models/ISelectableGuideItem.cs
@@ -0,0 +1,8 @@
+namespace WebSharpRSS.Models
+{
+    public interface ISelectableGuideItem
+    {
+        public bool IsSelected { get; set; }
+        public bool IsExpanded { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/WebSharpRSS/Shared/CategoryGuide.razor b/WebSharpRSS/Shared/CategoryGuide.razor
index 58d4339..addc367 100644
--- a/WebSharpRSS/Shared/CategoryGuide.razor
+++ b/WebSharpRSS/Shared/CategoryGuide.razor
@@ -2,39 +2,61 @@
 @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;
-    justify-content: flex-start;
-    text-decoration: none;
+        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);
+        background: var(--hover-bg-color);
     }
     .cat-item-text {
-    flex: 1 1 auto;
-    min-width: 0;
+        flex: 1 1 auto;
+        min-width: 0;
     }
     .cat-item-icon {
-    display: inline-flex;
-    min-width: 56px;
-    flex-shrink: 0;
+        display: inline-flex;
+        min-width: 56px;
+        flex-shrink: 0;
     }
     
     .feed-item {
-    background: var(--background-color);
-    tab-index: 1;
+        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);
+        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>
@@ -42,8 +64,7 @@
     @foreach (CategoryGuideItem catItem in Categories)
     {
         <div>
-            <div @onclick="@(() => CatItemClicked(catItem))" class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor; --background-color: @(catItem.IsSelected ? catItem.CategoryHexColor : "transparent")">
-                @*<MudListItem Icon="@catItem.CategoryIcon">@catItem.CategoryTitle</MudListItem>*@
+            <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>
@@ -52,15 +73,16 @@
                 </div>
             </div>
             @* Feeds *@
-            @if (catItem.IsExpanded && catItem.Feeds != null)
+            @if (catItem.IsExpanded && catItem.FeedItems != null)
             {
-                foreach (Feed feed in catItem.Feeds)
+                foreach (FeedGuideItem feedItem in catItem.FeedItems)
                 {
-                    <div class="cat-item mud-ripple" style="--hover-bg-color: @catItem.CategoryHexColor">
-                        @* Items *@
-                        <div @onclick="() => FeedItemClicked(feed)">
-                            @* Image *@
-                            <MudText Class="pointer-events-none">@feed.Title</MudText>
+                    <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>
                 }
@@ -76,10 +98,12 @@
     public HashSet<CategoryGuideItem> Categories { get; set; } = new HashSet<CategoryGuideItem>();
     [Parameter]
     public Action<CategoryGuideItem> HandleCat { get; set; }
+    [Parameter]
+    public Action<FeedGuideItem> FeedItemClicked { get; set; }
 
-    CategoryGuideItem? _selectedCategory;
+    ISelectableGuideItem? _selectedCategory;
 
-    void CatItemClicked(CategoryGuideItem categoryItem)
+    void ItemClicked(ISelectableGuideItem categoryItem)
     {
         categoryItem.IsExpanded = !categoryItem.IsExpanded;
         
@@ -90,13 +114,10 @@
             _selectedCategory = categoryItem;
             _selectedCategory.IsSelected = true;
         }
-        //TODO: Handle click!
-        HandleCat(categoryItem);
+        // Handle the click.
+        if (categoryItem is CategoryGuideItem catGuideItem)
+            HandleCat(catGuideItem);
+        /*if (categoryItem is FeedGuideItem feedGuideItem)
+            FeedItemClicked(feedGuideItem);*/
     }
-
-    void FeedItemClicked(Feed feed)
-    {
-        
-    }
-
 }
\ No newline at end of file