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.

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)
             {