Reorganize note dialog buttons (issue #133)

src/NoteBookmark.BlazorApp.Tests/Helpers/NoteDialogTestWrapper.razor

@@ -0,0 +1,25 @@
+@using NoteBookmark.SharedUI.Components.Shared
+@using NoteBookmark.Domain
+@using Microsoft.FluentUI.AspNetCore.Components
+
+<FluentDialog @ref="dialogRef">
+    <NoteDialog Content="@Content" Title="@Title" OnClose="@HandleClose" />
+</FluentDialog>
+
+@code {
+    [Parameter]
+    public Note? Content { get; set; }
+
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public EventCallback<NoteDialogResult> OnClose { get; set; }
+
+    private FluentDialog? dialogRef;
+
+    private async Task HandleClose(NoteDialogResult result)
+    {
+        await OnClose.InvokeAsync(result);
+    }
+}

src/NoteBookmark.BlazorApp.Tests/Tests/NoteDialogTests.cs

@@ -13,6 +13,7 @@ namespace NoteBookmark.BlazorApp.Tests.Tests;
 ///
 /// NoteDialog now uses EventCallback<NoteDialogResult> instead of Dialog.CloseAsync(),
 /// removing the FluentDialog cascade dependency and enabling unit tests.
+/// Tests use NoteDialogTestWrapper to provide the required FluentDialog cascading parameter.
 /// </summary>
 public sealed class NoteDialogTests : BunitContext
 {
@@ -26,7 +27,7 @@ public void NoteDialog_CreateMode_RendersFormFields()
     {
         var note = new Note { PostId = "post-1" };
 
-        var cut = Render<NoteDialog>(p => p
+        var cut = Render<NoteDialogTestWrapper>(p => p
             .Add(x => x.Content, note)
             .Add(x => x.Title, "Add a note"));
 
@@ -38,32 +39,36 @@ public void NoteDialog_CreateMode_ShowsSaveAndCancelButtons()
     {
         var note = new Note { PostId = "post-1" };
 
-        var cut = Render<NoteDialog>(p => p
+        var cut = Render<NoteDialogTestWrapper>(p => p
             .Add(x => x.Content, note)
             .Add(x => x.Title, "Add a note"));
 
-        cut.Markup.Should().Contain("Save");
-        cut.Markup.Should().Contain("Cancel");
+        var markup = cut.Markup;
+        markup.Should().Contain("Save");
+        markup.Should().Contain("Cancel");
     }
 
     [Fact]
     public void NoteDialog_EditMode_ShowsDeleteButton()
     {
         var note = new Note { PostId = "post-1", RowKey = "existing-row-key" };
 
-        var cut = Render<NoteDialog>(p => p
+        var cut = Render<NoteDialogTestWrapper>(p => p
             .Add(x => x.Content, note)
             .Add(x => x.Title, "Edit note"));
 
-        cut.Markup.Should().Contain("Delete");
+        var markup = cut.Markup;
+        markup.Should().Contain("Delete");
+        markup.Should().Contain("Save");
+        markup.Should().Contain("Cancel");
     }
 
     [Fact]
     public void NoteDialog_ExistingTags_DisplaysAsBadges()
     {
         var note = new Note { PostId = "post-1", Tags = "csharp, blazor" };
 
-        var cut = Render<NoteDialog>(p => p
+        var cut = Render<NoteDialogTestWrapper>(p => p
             .Add(x => x.Content, note)
             .Add(x => x.Title, "Add a note"));
 
@@ -76,7 +81,7 @@ public void NoteDialog_CategorySelect_ContainsCategoriesFromDomain()
     {
         var note = new Note { PostId = "post-1" };
 
-        var cut = Render<NoteDialog>(p => p
+        var cut = Render<NoteDialogTestWrapper>(p => p
             .Add(x => x.Content, note)
             .Add(x => x.Title, "Add a note"));
 

src/NoteBookmark.SharedUI/Components/Pages/Posts.razor

@@ -95,7 +95,8 @@
             Title = "Add a note",
             PreventDismissOnOverlayClick = true,
             PreventScroll = true,
-
+            PrimaryAction = "Save",
+            SecondaryAction = "Cancel"
         });
 
         var result = await dialog.Result;

src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor

@@ -4,15 +4,6 @@
 
 @rendermode InteractiveServer
 
-<!-- Header -->
-<div class="note-dialog-header">
-    <FluentStack VerticalAlignment="VerticalAlignment.Center">
-        <FluentIcon Value="@(new Icons.Regular.Size24.WindowApps())" />
-        <FluentLabel Typo="Typography.PaneHeader">
-            @(Dialog?.Instance?.Parameters?.Title ?? Title)
-        </FluentLabel>
-    </FluentStack>
-</div>
 
 <!-- Body -->
 <div class="note-dialog-body">
@@ -62,26 +53,18 @@
     </EditForm>
 </div>
 
-<!-- Footer -->
-<div class="note-dialog-footer">
-    <FluentButton Appearance="Appearance.Accent"
-                  Disabled="@(!_note.Validate())"
-                  OnClick="@SaveAsync">
-        Save
-    </FluentButton>
-    <FluentButton Appearance="Appearance.Neutral"
-                  OnClick="@CancelAsync">
-        Cancel
-    </FluentButton>
+<FluentDialogFooter>
     @if (_isEditMode)
-    {
-        <FluentButton Appearance="Appearance.Accent"
-                      Color="Color.Danger"
-                      OnClick="@DeleteAsync">
-            Delete
-        </FluentButton>
-    }
-</div>
+        {
+            <FluentButton Appearance="Appearance.Accent" Color="Color.Danger" OnClick="@DeleteAsync">Delete</FluentButton>
+        }
+    <FluentSpacer />
+
+    <FluentButton   Appearance="Appearance.Accent"
+                    OnClick="@SaveAsync"
+                    Disabled="@(!_note.Validate())">Save</FluentButton>
+    <FluentButton Appearance="Appearance.Neutral" OnClick="@CancelAsync">Cancel</FluentButton>
+</FluentDialogFooter>
 
 @code {
     [Parameter]

src/NoteBookmark.SharedUI/Components/Shared/NoteDialog.razor.css

@@ -0,0 +1,20 @@
+::deep .note-dialog-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 0;
+    gap: 8px;
+}
+
+::deep .note-dialog-footer-left {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+::deep .note-dialog-footer-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 0 0 auto;
+}