fix: address review feedback

Author: EmanuelGF

docs/Setup/Configuration.md

@@ -67,7 +67,8 @@ The appsettings.json file has a lot of options to customize the content of the b
 		"ContainerName": "",
 		"CdnEndpoint": ""
 	},
-	"UseMultiAuthorMode": false
+	"UseMultiAuthorMode": false,
+	"EnableTagDiscoveryPanel": true
 }
 ```
 
@@ -113,3 +114,4 @@ The appsettings.json file has a lot of options to customize the content of the b
 | ContainerName                                 | string         | The container name for the image storage provider                                                                                                                                |
 | CdnEndpoint                                   | string         | Optional CDN endpoint to use for uploaded images. If set, the blog will return this URL instead of the storage account URL for uploaded assets.                                  |
 | UseMultiAuthorMode                            | boolean        | The default value is `false`. If set to `true` then author name will be associated with blog posts at the time of creation. This author name will be fetched from the identity provider's `name` or `nickname` or `preferred_username` claim property. |
+| EnableTagDiscoveryPanel                       | boolean        | The default value is `true`. Enables the Tag Discovery Panel, which helps users discover topics by browsing popular tags.                                                        |

src/LinkDotNet.Blog.Web/ApplicationConfiguration.cs

@@ -29,6 +29,4 @@ public sealed record ApplicationConfiguration
     public bool UseMultiAuthorMode { get; init; }
 
     public bool EnableTagDiscoveryPanel { get; set; }
-
-    public bool ShowTagsWithCountInTagDiscovery { get; set; }
 }

src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor

@@ -61,9 +61,10 @@
 
                 @if (Configuration.Value.EnableTagDiscoveryPanel)
                 {
-                    <li class="nav-item d-flex align-items-center">
-                        <a class="tag-discovery-btn" @onclick="ToggleTagDiscoveryPanel"
-                            title="Discover new topics"> &#xE936; </a>
+                    <li class="nav-item d-flex align-items-center me-lg-2 mb-2 mb-lg-0">
+                        <a class="nav-link d-flex align-items-center justify-content-center" @onclick="ToggleTagDiscoveryPanel"
+                           style="font-family: 'icons'; font-weight: 900; cursor: pointer;"
+                           title="Discover new topics"> &#xE936; </a>
                         <TagDiscoveryPanel IsOpen="@_isOpen" OnClose="CloseTagDiscoveryPanel" />
                     </li>
                 }

src/LinkDotNet.Blog.Web/Features/Services/Tags/TagQueryService.cs

@@ -1,40 +1,49 @@
-using Azure.Storage.Blobs.Models;
 using LinkDotNet.Blog.Domain;
 using LinkDotNet.Blog.Infrastructure.Persistence;
+using Microsoft.Extensions.Options;
+using Raven.Client.Documents.Operations.AI;
 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using ZiggyCreatures.Caching.Fusion;
 
 namespace LinkDotNet.Blog.Web.Features.Services.Tags;
 
-public sealed class TagQueryService(IRepository<BlogPost> blogPostRepository) : ITagQueryService
+public sealed class TagQueryService(
+    IRepository<BlogPost> blogPostRepository,
+    IFusionCache fusionCache,
+    IOptions<ApplicationConfiguration> appConfiguration) : ITagQueryService
 {
+    private const string TagCacheKey = "TagUsageList";
+
     public async Task<IReadOnlyList<TagCount>> GetAllOrderedByUsageAsync()
+    {
+        return await fusionCache.GetOrSetAsync(
+        TagCacheKey,
+        async _ => await LoadTagsAsync(),
+        options =>
+        {
+            options.SetDuration(TimeSpan.FromMinutes(
+                appConfiguration.Value.FirstPageCacheDurationInMinutes));
+        });
+    }
+
+    private async Task<IReadOnlyList<TagCount>> LoadTagsAsync()
     {
         var posts = await blogPostRepository.GetAllAsync();
 
         var tagCounts = posts
-            // Flatten the collection of tag lists into a single sequence.
             .SelectMany(p => p.Tags ?? Enumerable.Empty<string>())
-
-            // Defensive guard against invalid tag values.
             .Where(tag => !string.IsNullOrEmpty(tag))
-
             .GroupBy(tag => tag.Trim())
-
-            // Transform each group into a TagCount DTO.
-            // group.Key = tag name
-            // group.Count() = number of occurrences
             .Select(group => new TagCount(
                 group.Key,
                 group.Count()))
-
-            // Sort descending by usage count (most popular first).
             .OrderByDescending(tc => tc.Count)
             .ThenBy(tc => tc.Name)
             .ToList();
-
         return tagCounts;
     }
+
 }

src/LinkDotNet.Blog.Web/Features/TagDiscovery/TagDiscoveryPanel.razor

@@ -4,19 +4,21 @@
 
 @if (!AppConfiguration.Value.EnableTagDiscoveryPanel || !IsOpen) { return; }
 
-<div class="tag-overlay" @onclick="Close"></div>
+<div class="position-fixed top-0 start-0 w-100 h-100 bg-dark bg-opacity-25"
+     style="z-index:1040; backdrop-filter: blur(2px);"
+     @onclick="Close">
+</div>
 
-<div class="tag-panel">
-    <div class="tag-discovery-container">
+<div class="position-fixed top-50 start-50 translate-middle bg-body border rounded shadow p-3"
+     style="max-width: 400px; max-height: 70vh; overflow-y:auto; z-index:1050;">
+    <div class="d-flex flex-wrap gap-2">
         @foreach (var tag in _tags)
         {
-            <span class="tag-badge" @onclick="() => Navigate(tag.Name)">
+            <span class="badge bg-secondary d-flex align-items-center gap-1"
+                  style="cursor: pointer;"
+                  @onclick="() => Navigate(tag.Name)">
                 @tag.Name
-
-                @if (AppConfiguration.Value.ShowTagsWithCountInTagDiscovery)
-                {
-                    <span class="tag-count">@tag.Count</span>
-                }
+                <span class="badge bg-light text-dark">@tag.Count</span>
             </span>
         }
     </div>
@@ -30,7 +32,7 @@
 
     protected override async Task OnParametersSetAsync()
     {
-        if (IsOpen && _tags.Count == 0)
+        if (IsOpen)
         {
             _tags = await TagQueryService.GetAllOrderedByUsageAsync();
         }

src/LinkDotNet.Blog.Web/appsettings.json

@@ -50,6 +50,5 @@
 	"ShowSimilarPosts": true,
 	"ShowBuildInformation": true,
 	"UseMultiAuthorMode": false,
-	"EnableTagDiscoveryPanel": true,
-	"ShowTagsWithCountInTagDiscovery": true
+	"EnableTagDiscoveryPanel": true
 }

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -645,17 +645,6 @@ code {
 	object-fit: cover;
 }
 
-.tag-discovery-btn {
-	font-family: 'icons';
-	font-weight: 900;
-	content: "\e936";
-	cursor: pointer;
-	padding: 6px;
-	margin: 6px;
-	text-decoration: none;
-	color: var(--bs-navbar-color);
-}
-
 @media only screen and (max-width: 700px) {
 	.blog-outer-box .blog-container {
 		width: 90%;

tests/LinkDotNet.Blog.UnitTests/Web/Features/Services/Tags/TagQueryServiceTests.cs

@@ -1,6 +1,7 @@
 using LinkDotNet.Blog.Domain;
 using LinkDotNet.Blog.Infrastructure;
 using LinkDotNet.Blog.Infrastructure.Persistence;
+using LinkDotNet.Blog.TestUtilities;
 using LinkDotNet.Blog.Web.Features.Services.Tags;
 using MongoDB.Driver;
 using NSubstitute;
@@ -42,9 +43,9 @@ public async Task AggregatesAndSortsTagsByUsage()
         // Arrange
         var posts = new List<BlogPost>
         {
-            CreatePost(["CSharp", "Blazor", "DotNet"]),
-            CreatePost(["CSharp", "Blazor"]),
-            CreatePost(["CSharp"])
+            new BlogPostBuilder().WithTags("CSharp", "Blazor", "DotNet").Build(),
+            new BlogPostBuilder().WithTags("CSharp", "Blazor").Build(),
+            new BlogPostBuilder().WithTags("CSharp").Build(),
         };
 
         repository.GetAllAsync()
@@ -72,8 +73,8 @@ public async Task ShouldIgnoreNullOrWhitespaceTags()
         // Arrange
         var posts = new List<BlogPost>
         {
-            CreatePost(["CSharp", " "]),
-            CreatePost(null!)
+            new BlogPostBuilder().WithTags("CSharp", " ").Build(),
+            new BlogPostBuilder().Build(),
         };
 
         repository.GetAllAsync()
@@ -94,8 +95,8 @@ public async Task ShouldSortAlphabeticallyWhenCountsAreEqual()
         // Arrange
         var posts = new List<BlogPost>
         {
-            CreatePost(["CSharp"]),
-            CreatePost(["Blazor"])
+            new BlogPostBuilder().WithTags("CSharp").Build(),
+            new BlogPostBuilder().WithTags("Blazor").Build(),
         };
 
         repository.GetAllAsync()
@@ -109,19 +110,6 @@ public async Task ShouldSortAlphabeticallyWhenCountsAreEqual()
         result[1].Name.ShouldBe("CSharp");
     }
 
-    private static BlogPost CreatePost(List<string> tags)
-    {
-        var unique = Guid.NewGuid().ToString("N");
-
-        return BlogPost.Create(
-            $"Post-{unique}",
-            $"Slug-{unique}",
-            $"Excerpt-{unique}",
-            "#",
-            false,
-            tags: tags);
-    }
-
     private static PagedList<BlogPost> CreatePagedList(List<BlogPost> posts)
     {
         return new PagedList<BlogPost>(