fix: addressing review feedback; fixing tests and improve TagDiscoveryPanel behaviour

Author: EmanuelGF

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

@@ -65,7 +65,6 @@
                         <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>
                 }
 
@@ -76,6 +75,7 @@
         </div>
     </div>
 </nav>
+<TagDiscoveryPanel IsOpen="@_isOpen" OnClose="CloseTagDiscoveryPanel" />
 
 @code {
     private string currentUri = string.Empty;

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

@@ -1,34 +1,55 @@
+@using Microsoft.AspNetCore.Components.Web;
 @inject ITagQueryService TagQueryService
 @inject IOptions<ApplicationConfiguration> AppConfiguration
 @inject NavigationManager Navigation
 
-@if (!AppConfiguration.Value.EnableTagDiscoveryPanel || !IsOpen) { return; }
 
-<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>
+@if (AppConfiguration.Value.EnableTagDiscoveryPanel && IsOpen)
+{
+    <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="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="badge bg-secondary d-flex align-items-center gap-1"
-                  style="cursor: pointer;"
-                  @onclick="() => Navigate(tag.Name)">
-                @tag.Name
-                <span class="badge bg-light text-dark">@tag.Count</span>
-            </span>
-        }
+    <div class="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
+         style="z-index:1050; pointer-events:none;">
+
+        <div @ref="_panelRef"
+             class="bg-body border rounded shadow p-3"
+             style="max-width: 400px; max-height: 70vh; overflow-y:auto; pointer-events:auto;"
+             tabindex="0"
+             @onkeydown="HandleKeyDown">
+
+            @if (_tags.Count == 0)
+            {
+                <div class="text-muted text-center py-2">
+                    No tags available yet.
+                </div>
+            }
+            else
+            {
+                <div class="d-flex flex-wrap gap-2">
+                    @foreach (var tag in _tags)
+                    {
+                        <span class="badge bg-secondary d-flex align-items-center gap-1"
+                              style="cursor: pointer;"
+                              @onclick="() => Navigate(tag.Name)">
+                            @tag.Name
+                            <span class="badge bg-light text-dark">@tag.Count</span>
+                        </span>
+                    }
+                </div>
+            }
+        </div>
     </div>
-</div>
+}
 
 @code {
     [Parameter] public bool IsOpen { get; set; }
     [Parameter] public EventCallback OnClose { get; set; }
 
     private IReadOnlyList<TagCount> _tags = [];
+    private ElementReference _panelRef;
 
     protected override async Task OnParametersSetAsync()
     {
@@ -38,6 +59,14 @@
         }
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (IsOpen)
+        {
+            await _panelRef.FocusAsync();
+        }
+    }
+
     private async Task Close()
     {
         await OnClose.InvokeAsync();
@@ -49,4 +78,12 @@
         Navigation.NavigateTo($"/searchByTag/{encoded}");
         await Close();
     }
+
+    private async Task HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            await Close();
+        }
+    }
 }

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

@@ -1,11 +1,12 @@
-using System.Linq;
 using AngleSharp.Html.Dom;
 using LinkDotNet.Blog.TestUtilities;
 using LinkDotNet.Blog.Web.Features.Home.Components;
 using LinkDotNet.Blog.Web.Features.Services;
+using LinkDotNet.Blog.Web.Features.Services.Tags;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Options;
+using System.Linq;
 
 namespace LinkDotNet.Blog.IntegrationTests.Web.Shared;
 
@@ -14,6 +15,13 @@ public class NavMenuTests : BunitContext
     public NavMenuTests()
     {
         ComponentFactories.Add<ThemeToggler, ThemeTogglerStub>();
+
+        var tagQueryService = Substitute.For<ITagQueryService>();
+        Services.AddSingleton(tagQueryService);
+
+        Services.AddSingleton(
+            Options.Create(new ApplicationConfigurationBuilder().Build())
+        );
     }
 
     [Fact]

tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/NavMenuTests.cs

@@ -2,25 +2,40 @@
 using LinkDotNet.Blog.Infrastructure;
 using LinkDotNet.Blog.Infrastructure.Persistence;
 using LinkDotNet.Blog.TestUtilities;
+using LinkDotNet.Blog.Web;
 using LinkDotNet.Blog.Web.Features.Services.Tags;
+using Microsoft.Extensions.Caching.Memory;
+using Microsoft.Extensions.Options;
 using MongoDB.Driver;
 using NSubstitute;
 using System;
 using System.Collections.Generic;
 using System.Text;
 using System.Threading.Tasks;
+using ZiggyCreatures.Caching.Fusion;
+
 
 namespace LinkDotNet.Blog.UnitTests.Web.Features.Services.Tags;
 public sealed class TagQueryServiceTests
 {
 
     private readonly IRepository<BlogPost> repository;
     private readonly TagQueryService tagQueryService;
+    private readonly IFusionCache fusionCache;
 
     public TagQueryServiceTests()
     {
         repository = Substitute.For<IRepository<BlogPost>>();
-        tagQueryService = new TagQueryService(repository);
+
+        fusionCache = new FusionCache(
+            new FusionCacheOptions(),
+            logger: null,
+            memoryCache: new MemoryCache(new MemoryCacheOptions())
+        );
+
+        var config = Options.Create(new ApplicationConfigurationBuilder().Build());
+
+        tagQueryService = new TagQueryService(repository, fusionCache, config);
     }
 
     [Fact]