Show build snippet on build list view (Closes #1330) (#1340)

Author: AlexMacocian

Daybreak/Views/BuildListView.razor

@@ -1,19 +1,19 @@
-<div class="build-list-container">
+<div class="build-list-container" @onmouseenter="this.ViewModel.CloseSnippet">
     <div class="title-bar-additional-btns-left">
         <button class="title-bar-btn" @onclick="this.ViewModel.CreateNewSingleBuild" title="Create build">
             <FluentIcon Value="new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.PersonAdd()" />
         </button>
     </div>
     <div class="stretch-container backdrop-panel">
-        <div class="header-section">
-            <div class="search-container">
+        <div class="header-section" @onmouseenter="this.ViewModel.CloseSnippet">
+            <div class="search-container" @onmouseenter="this.ViewModel.CloseSnippet">
                 <DebouncedTextField Style="width: 50vw; max-width: 600px; font-size: var(--font-size-medium);"
                                     Placeholder="Search builds..."
                                     OnSearch="@this.ViewModel.SearchTermChanged" />
             </div>
         </div>
 
-        <div class="content-section">
+        <div class="content-section" @onmouseenter="this.ViewModel.CloseSnippet">
             @if (this.ViewModel.IsLoading)
             {
                 <div class="loading-overlay">
@@ -22,14 +22,18 @@
                 </div>
             }
 
-            <div class="build-list-wrapper" style="@(ViewModel.IsLoading ? "opacity: 0.3; pointer-events: none;" : "")">
+            <div @onmouseenter="this.ViewModel.CloseSnippet" 
+                class="build-list-wrapper" style="@(ViewModel.IsLoading ? "opacity: 0.3; pointer-events: none;" : "")">
                 @if (this.ViewModel.BuildEntries.Any())
                 {
                     <Virtualize Items="@this.ViewModel.BuildEntries"
                                 Context="entry"
                                 ItemSize="75">
                         <ItemContent>
-                            <div class="build-item" tabindex="0" @onclick="@(() => this.ViewModel.BuildClicked(entry))">
+                            <div class="build-item" tabindex="0" 
+                                 @onclick="() => this.ViewModel.BuildClicked(entry)"
+                                 @onmouseenter="(e) => this.ViewModel.OpenSnippet(entry, e)"
+                                 @onmousemove="(e) => this.ViewModel.MouseMoveBuildEntry(e)">
                                 <div class="build-info">
                                     @if (entry.PrimaryProfession is not null)
                                     {
@@ -50,7 +54,7 @@
                                 {
                                     <div class="build-toolbox-marker">Toolbox build</div>
                                 }
-                                <div class="build-actions" @onclick="@(() => this.ViewModel.DeleteBuild(entry))" @onclick:stopPropagation="true">
+                                <div class="build-actions" @onclick="@(() => this.ViewModel.DeleteBuild(entry))" @onclick:stopPropagation="true" @onmouseenter="this.ViewModel.CloseSnippet">
                                     <FluentButton Appearance="Appearance.Stealth"
                                                   IconOnly="true">
                                         <FluentIcon Value="@(new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.Delete())" />
@@ -59,6 +63,12 @@
                             </div>
                         </ItemContent>
                     </Virtualize>
+                    @if (this.ViewModel.ShowSnippet && this.ViewModel.HoveredEntry is not null && this.ViewModel.SnippetPosition.HasValue)
+                    {
+                        <div class="build-snippet-overlay" style="top: @(this.ViewModel.SnippetPosition.Value.Y)px; left: @(this.ViewModel.SnippetPosition.Value.X)px;">
+                            <BuildSnippet BuildEntry="this.ViewModel.HoveredEntry.BuildEntry" />
+                        </div>
+                    }
                 }
                 else if (!this.ViewModel.IsLoading)
                 {

Daybreak/Views/BuildListView.razor.cs

@@ -1,29 +1,51 @@
 using Daybreak.Models;
+using Daybreak.Shared.Extensions;
 using Daybreak.Shared.Models.Builds;
 using Daybreak.Shared.Models.Guildwars;
 using Daybreak.Shared.Services.BuildTemplates;
 using Daybreak.Shared.Services.Toolbox;
 using Daybreak.Shared.Utils;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
 using System.Core.Extensions;
+using System.Drawing;
 using System.Extensions;
 using TrailBlazr.Services;
 using TrailBlazr.ViewModels;
 
 namespace Daybreak.Views;
-public sealed class BuildListViewModel(
-    IViewManager viewManager,
-    IBuildTemplateManager buildTemplateManager,
-    IToolboxService toolboxService)
+public sealed class BuildListViewModel
     : ViewModelBase<BuildListViewModel, BuildListView>
 {
-    private readonly IViewManager viewManager = viewManager.ThrowIfNull();
-    private readonly IBuildTemplateManager buildTemplateManager = buildTemplateManager.ThrowIfNull();
-    private readonly IToolboxService toolboxService = toolboxService.ThrowIfNull();
+    private readonly DotNetObjectReference<BuildListViewModel> dotNetObjectReference;
+    private readonly IViewManager viewManager;
+    private readonly IBuildTemplateManager buildTemplateManager;
+    private readonly IJSRuntime jsRuntime;
+    private readonly IToolboxService toolboxService;
 
     private readonly List<BuildListEntry> buildEntryCache = [];
 
+    public BuildListViewModel(
+        IViewManager viewManager,
+        IBuildTemplateManager buildTemplateManager,
+        IJSRuntime jsRuntime,
+        IToolboxService toolboxService)
+    {
+        this.dotNetObjectReference = DotNetObjectReference.Create(this);
+        this.viewManager = viewManager;
+        this.buildTemplateManager = buildTemplateManager;
+        this.jsRuntime = jsRuntime;
+        this.toolboxService = toolboxService;
+    }
+
     public List<BuildListEntry> BuildEntries { get; } = [];
 
+    public BuildListEntry? HoveredEntry { get; private set; }
+
+    public Point? SnippetPosition { get; private set; }
+
+    public bool ShowSnippet { get; private set; }
+
     public bool IsLoading
     {
         get;
@@ -86,6 +108,7 @@ public void SearchTermChanged(string searchTerm)
 
     public void BuildClicked(BuildListEntry buildListEntry)
     {
+        this.CloseSnippet();
         this.viewManager.ShowView<BuildRoutingView>((nameof(BuildRoutingView.BuildName), buildListEntry.BuildEntry.Name ?? string.Empty));
     }
 
@@ -112,6 +135,37 @@ public void CreateNewTeamBuild()
         this.viewManager.ShowView<BuildRoutingView>((nameof(BuildRoutingView.BuildName), build.Name ?? string.Empty));
     }
 
+    public async void OpenSnippet(BuildListEntry buildListEntry, MouseEventArgs e)
+    {
+        this.ShowSnippet = false;
+        this.HoveredEntry = buildListEntry;
+        this.SnippetPosition = new Point((int)e.ClientX, (int)e.ClientY);
+        await this.jsRuntime.HoverDelayStart(this.dotNetObjectReference, nameof(this.HoverComplete));
+    }
+
+    public async void CloseSnippet()
+    {
+        this.HoveredEntry = default;
+        this.ShowSnippet = false;
+        await this.jsRuntime.HoverDelayStop();
+    }
+
+    public async void MouseMoveBuildEntry(MouseEventArgs e)
+    {
+        if (!this.ShowSnippet)
+        {
+            this.SnippetPosition = new Point((int)e.ClientX, (int)e.ClientY);
+        }
+    }
+
+
+    [JSInvokable]
+    public void HoverComplete()
+    {
+        this.ShowSnippet = true;
+        this.RefreshView();
+    }
+
     private async ValueTask SearchByTerm(string term, CancellationToken cancellationToken)
     {
         if (string.IsNullOrWhiteSpace(term))

Daybreak/Views/BuildListView.razor.css

@@ -127,4 +127,11 @@
         width: 100%;
         height: 100%;
         object-fit: contain;
-    }
+    }
+
+.build-snippet-overlay {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    z-index: 1000;
+}