From 083e81aa25e87a1294960935c56a6a5d778d50b5 Mon Sep 17 00:00:00 2001
From: James Kolpack <james.kolpack@gmail.com>
Date: Sun, 25 Jan 2026 21:59:31 -0500
Subject: [PATCH] Refactor PageNoteButton component to include popover for note
 content display

This commit enhances the PageNoteButton component by wrapping the MudButton in a div that manages mouse events to control the visibility of a MudPopover. The popover displays detailed note content when the button is hovered over, improving user interaction and accessibility of page notes. Additionally, the component's state management is updated to handle the new popover functionality, ensuring a seamless user experience.
---
 .../Shared/Components/PageNoteButton.razor    | 55 +++++++++++++++----
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/WebApp/Components/Shared/Components/PageNoteButton.razor b/WebApp/Components/Shared/Components/PageNoteButton.razor
index 37dffb7..e717670 100644
--- a/WebApp/Components/Shared/Components/PageNoteButton.razor
+++ b/WebApp/Components/Shared/Components/PageNoteButton.razor
@@ -3,18 +3,45 @@
 @inject IDialogService DialogService
 @implements IAsyncDisposable
 
-<MudButton StartIcon="@IconValue"
-          OnClick="OpenDialog"
-          Variant="@Variant"
-          Size="@Size"
-          Color="@ButtonColor"
-          Tooltip="@TooltipText"
-          Class="@MarkdownHelper.GetNoteColorClass(_noteId)">
-    @if (!string.IsNullOrEmpty(ButtonText))
-    {
-        @ButtonText
-    }
-</MudButton>
+<div @ref="_anchorElement"
+     @onmouseenter="@(() => { if (_hasContent) _popoverOpen = true; })"
+     @onmouseleave="@(() => _popoverOpen = false)"
+     style="display: inline-block;">
+    <MudButton StartIcon="@IconValue"
+              OnClick="OpenDialog"
+              Variant="@Variant"
+              Size="@Size"
+              Color="@ButtonColor"
+              Tooltip="@TooltipText"
+              Class="@MarkdownHelper.GetNoteColorClass(_noteId)">
+        @if (!string.IsNullOrEmpty(ButtonText))
+        {
+            @ButtonText
+        }
+    </MudButton>
+</div>
+<MudPopover @bind-Open="_popoverOpen"
+            AnchorOrigin="Origin.BottomCenter"
+            TransformOrigin="Origin.TopCenter"
+            Elevation="8"
+            Anchor="@_anchorElement">
+    <ChildContent>
+        @if (_hasContent && !string.IsNullOrWhiteSpace(_noteContent))
+        {
+            <MudPaper Elevation="0" 
+                     Class="pa-3" 
+                     Style="max-width: 500px; max-height: 400px; overflow-y: auto;"
+                     @onmouseenter="@(() => _popoverOpen = true)"
+                     @onmouseleave="@(() => _popoverOpen = false)">
+                <MudText Typo="Typo.subtitle1" Class="mb-2">@PageIdentifier</MudText>
+                <MudDivider Class="my-2" />
+                <div class="markdown-content" style="max-height: 350px; overflow-y: auto;">
+                    @((MarkupString)MarkdownHelper.ToHtml(_noteContent))
+                </div>
+            </MudPaper>
+        }
+    </ChildContent>
+</MudPopover>
 
 @code {
     [Parameter]
@@ -39,6 +66,9 @@
     private string TooltipText => Tooltip ?? $"Page notes for {PageIdentifier}";
     private bool _hasContent = false;
     private int _noteId = 0;
+    private string _noteContent = string.Empty;
+    private bool _popoverOpen = false;
+    private ElementReference _anchorElement;
     private Color ButtonColor => _hasContent ? Color.Success : (Variant == Variant.Filled ? Color.Primary : Color.Default);
     private CancellationTokenSource? _cancellationTokenSource;
     private bool _isDisposed = false;
@@ -62,6 +92,7 @@
             var note = await NotesService.GetPageNoteAsync(PageIdentifier);
             _hasContent = note != null && !string.IsNullOrWhiteSpace(note.Content);
             _noteId = note?.Id ?? 0;
+            _noteContent = note?.Content ?? string.Empty;
             
             if (!_isDisposed)
             {