Added initial voice work edit logic (set favorite / delete) on Api and UI layers.

2026-05-07 00:07:20 -04:00
parent 2bd7e3b970
commit 9c9e33ebec
14 changed files with 291 additions and 57 deletions
--- a/JSMR.Api/Startup/WebApplicationExtensions.cs
+++ b/JSMR.Api/Startup/WebApplicationExtensions.cs
@@ -5,6 +5,8 @@ using JSMR.Application.Tags.Commands.SetEnglishName;
 using JSMR.Application.Tags.Commands.UpdateTagStatus;
 using JSMR.Application.Tags.Queries.Search;
 using JSMR.Application.Users;
+using JSMR.Application.VoiceWorks.Commands.Delete;
+using JSMR.Application.VoiceWorks.Commands.SetFavorite;
 using JSMR.Application.VoiceWorks.Queries.Search;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Authentication.Cookies;
@@ -59,6 +61,7 @@ public static class WebApplicationExtensions
        app.MapGet("/health", () => Results.Ok(new { status = "ok" }));

        app.MapSearchEndpoints();
+        app.MapVoiceWorkCommandEndpoints();
        app.MapTagCommandEndpoints();
        app.MapCreatorCommandEndpoints();
        app.MapAuthenticationEndpoints();
@@ -110,6 +113,27 @@ public static class WebApplicationExtensions
        });
    }

+    private static void MapVoiceWorkCommandEndpoints(this WebApplication app)
+    {
+        app.MapPost("/api/voicework/set-favorite", async (
+            SetVoiceWorkFavoriteRequest request,
+            SetVoiceWorkFavoriteHandler handler,
+            CancellationToken ct) =>
+        {
+            var result = await handler.HandleAsync(request, ct);
+            return Results.Ok(result);
+        });
+
+        app.MapPost("/api/voicework/delete", async (
+            DeleteVoiceWorkRequest request,
+            DeleteVoiceWorkHandler handler,
+            CancellationToken ct) =>
+        {
+            var result = await handler.HandleAsync(request, ct);
+            return Results.Ok(result);
+        });
+    }
+
    private static void MapTagCommandEndpoints(this WebApplication app)
    {
        app.MapPost("/api/tags/update-status", async (
--- a/JSMR.Application/DI/ApplicationServiceCollectionExtensions.cs
+++ b/JSMR.Application/DI/ApplicationServiceCollectionExtensions.cs
@@ -5,6 +5,8 @@ using JSMR.Application.Scanning;
 using JSMR.Application.Tags.Commands.SetEnglishName;
 using JSMR.Application.Tags.Commands.UpdateTagStatus;
 using JSMR.Application.Tags.Queries.Search;
+using JSMR.Application.VoiceWorks.Commands.Delete;
+using JSMR.Application.VoiceWorks.Commands.SetFavorite;
 using JSMR.Application.VoiceWorks.Queries.Search;
 using Microsoft.Extensions.DependencyInjection;

@@ -18,6 +20,9 @@ public static class ApplicationServiceCollectionExtensions
        services.AddScoped<SearchCirclesHandler>();

        services.AddScoped<SearchVoiceWorksHandler>();
+        services.AddScoped<SetVoiceWorkFavoriteHandler>();
+        services.AddScoped<DeleteVoiceWorkHandler>();
+
        services.AddScoped<ScanVoiceWorksHandler>();

        services.AddScoped<SearchTagsHandler>();
--- a/JSMR.Application/VoiceWorks/Commands/Delete/DeleteVoiceWorkHandler.cs
+++ b/JSMR.Application/VoiceWorks/Commands/Delete/DeleteVoiceWorkHandler.cs
@@ -2,7 +2,7 @@

 namespace JSMR.Application.VoiceWorks.Commands.Delete;

-public sealed class DeleteVoiceWorkFavoriteHandler(IVoiceWorkWriter writer)
+public sealed class DeleteVoiceWorkHandler(IVoiceWorkWriter writer)
 {
    public async Task<DeleteVoiceWorkResponse> HandleAsync(DeleteVoiceWorkRequest request, CancellationToken cancellationToken = default)
    {
--- a/JSMR.Application/VoiceWorks/Queries/Search/VoiceWorkSearchResult.cs
+++ b/JSMR.Application/VoiceWorks/Queries/Search/VoiceWorkSearchResult.cs
@@ -4,29 +4,29 @@ namespace JSMR.Application.VoiceWorks.Queries.Search;

 public record VoiceWorkSearchResult
 {
-    public int VoiceWorkId { get; init; }
-    public required string ProductId { get; init; }
-    public string? OriginalProductId { get; init; }
-    public string? Description { get; init; }
-    public required string ProductName { get; init; }
-    public required string ProductUrl { get; init; }
-    public bool HasImage { get; init; }
-    public required string Maker { get; init; }
-    public required string MakerId { get; init; }
-    public DateTime? ExpectedDate { get; init; }
-    public DateTime? SalesDate { get; init; }
-    public DateTime? PlannedReleaseDate { get; init; }
-    public int? Downloads { get; init; }
-    public int? WishlistCount { get; init; }
-    public byte? StarRating { get; init; }
-    public int? Votes { get; init; }
-    public bool HasTrial { get; init; }
-    public bool HasChobit { get; init; }
-    public AgeRating Rating { get; init; }
-    public bool Favorite { get; init; }
-    public byte Status { get; init; }
-    public byte SubtitleLanguage { get; init; }
-    public bool? IsValid { get; init; }
+    public int VoiceWorkId { get; set; }
+    public required string ProductId { get; set; }
+    public string? OriginalProductId { get; set; }
+    public string? Description { get; set; }
+    public required string ProductName { get; set; }
+    public required string ProductUrl { get; set; }
+    public bool HasImage { get; set; }
+    public required string Maker { get; set; }
+    public required string MakerId { get; set; }
+    public DateTime? ExpectedDate { get; set; }
+    public DateTime? SalesDate { get; set; }
+    public DateTime? PlannedReleaseDate { get; set; }
+    public int? Downloads { get; set; }
+    public int? WishlistCount { get; set; }
+    public byte? StarRating { get; set; }
+    public int? Votes { get; set; }
+    public bool HasTrial { get; set; }
+    public bool HasChobit { get; set; }
+    public AgeRating Rating { get; set; }
+    public bool Favorite { get; set; }
+    public byte Status { get; set; }
+    public byte SubtitleLanguage { get; set; }
+    public bool? IsValid { get; set; }
    public required VoiceWorkCircleItem Circle { get; set; }
    public VoiceWorkCircleItem? OriginalCircle { get; set; }
    public VoiceWorkTagItem[] Tags { get; set; } = [];
--- a/JSMR.UI.Blazor/Components/Chip.razor
+++ b/JSMR.UI.Blazor/Components/Chip.razor
@@ -11,7 +11,10 @@
                  UseCurrentColor>
            </Icon>
        }
-        <span>@ChildContent</span>
+        @if (ChildContent is not null)
+        {
+            <span>@ChildContent</span>
+        }
    </div>
 }
 else
@@ -26,7 +29,10 @@ else
                UseCurrentColor>
            </Icon>
        }
-        <span>@ChildContent</span>
+        @if (ChildContent is not null)
+        {
+            <span>@ChildContent</span>
+        }
    </a>
 }

@@ -62,6 +68,12 @@ else
    [Parameter]
    public EventCallback Click { get; set; }

+    [Parameter]
+    public bool IsClickable { get; set; }
+
+    [Parameter]
+    public bool ThickBorder { get; set; }
+
    private string GetClasses()
    {
        string color = Color.ToString().ToLower();
@@ -72,6 +84,17 @@ else
            $"color-{color}"
        ];

+        // Experimental
+        if (ChildContent is null)
+        {
+            classNames.Add("j-chip-icon-only");
+        }
+
+        if (ThickBorder)
+        {
+            classNames.Add("j-chip-thick-border");
+        }
+
        switch (Varient)
        {
            case ElementVarient.Filled:
@@ -99,7 +122,7 @@ else
            classNames.Add($"varient-tint");
        }

-        if (Click.HasDelegate || string.IsNullOrWhiteSpace(Url) == false)
+        if (Click.HasDelegate || string.IsNullOrWhiteSpace(Url) == false || IsClickable)
        {
            classNames.Add("is-clickable");
        }
--- a/JSMR.UI.Blazor/Components/JProduct.razor
+++ b/JSMR.UI.Blazor/Components/JProduct.razor
@@ -1,4 +1,6 @@
-@using JSMR.Application.VoiceWorks.Queries.Search
+@using AntDesign
+@using JSMR.Application.VoiceWorks.Commands.SetFavorite
+@using JSMR.Application.VoiceWorks.Queries.Search
@using JSMR.Domain.Enums
@using JSMR.UI.Blazor.Components.Chips
@using JSMR.UI.Blazor.Enums
@@ -7,6 +9,10 @@
@using System.Globalization
@using Microsoft.AspNetCore.WebUtilities

+@inject VoiceWorksClient Client
+@inject MessageService MessageService
+@inject ModalService ModalService
+
 <div class=@GetCardClasses(Product)>
    <div class="j-voice-work-image-container">
        <JImage OverlayClass="j-voice-work-image-overlay" ImageClass="j-voice-work-image" Source="@ImageUrlProvider.GetImageUrl(Product, "main")" FallbackSource="@ImageUrlProvider.GetImageUrl(Product, "main", "webp")"></JImage>
@@ -16,12 +22,6 @@
            <a href="@Product.ProductUrl" target="_blank">@Product.ProductName</a>
        </div>
        <BitStack Horizontal="true" Gap="0.5em" AutoHeight Wrap>
-            @* <MudChip T="string"
-                         Href=@($"https://www.dlsite.com/maniax/circle/profile/=/maker_id/{Product.MakerId}.html")
-                         Target="_blank"
-                         Variant="MudBlazor.Variant.Filled"
-                         Icon="@Icons.Material.Outlined.Circle">@Product.Maker</MudChip> *@
-            @* <CircleChip Circle="@Product.Circle"></CircleChip> *@
            <Chip Graphic="Graphic.Circle" Varient="ElementVarient.Outlined" Color="ColorVarient.Secondary" Url=@($"https://www.dlsite.com/maniax/circle/profile/=/maker_id/{Product.MakerId}.html")>@Product.Maker</Chip>

            @if (Product.OriginalCircle is not null)
@@ -31,12 +31,6 @@

            @foreach (var creator in Product.Creators)
            {
-                @* <MudChip T="string"
-                             Href=@($"https://www.dlsite.com/maniax/fsr/=/keyword_creater/{creator.Name}")
-                             Target="_blank"
-                             Variant="MudBlazor.Variant.Filled"
-                             Icon="@Icons.Material.Filled.Person">@creator.Name</MudChip> *@
-                @* <CreatorChip Creator="@creator"></CreatorChip> *@
                <Chip Graphic="Graphic.Person" Varient="ElementVarient.Outlined" IconVarient="IconVarient.Fill" Color="ColorVarient.Secondary" Url=@($"https://www.dlsite.com/maniax/fsr/=/keyword_creater/{creator.Name}")>@creator.Name</Chip>
            }
        </BitStack>
@@ -70,16 +64,9 @@
        <div class="j-tags">
            @foreach (var tag in Product.Tags)
            {
-                @*  <div class="j-tag">@tag.Name</div> *@
                <ProductTag Tag="tag"></ProductTag>
            }
        </div>
-        @*  <div class="j-tags">
-            @foreach (var tag in Product.Tags)
-            {
-                <TagChip Tag="tag"></TagChip>
-            }
-        </div> *@
    </div>
    <div class="j-voice-work-info">
        <div class="j-release-date-container">
@@ -102,20 +89,45 @@
        <BitStack Horizontal="true" Gap="0.5rem" VerticalAlign="BitAlignment.End" HorizontalAlign="BitAlignment.End">
            @if (Product.IsValid != true)
            {
-                <ProductIndicator Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Color="ColorVarient.Orange" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+                @* <ProductIndicator Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Color="ColorVarient.Orange" BackgroundColor="ColorVarient.Black"></ProductIndicator> *@
+                <Chip Graphic="Graphic.Warning" IconVarient="IconVarient.Fill" Varient="ElementVarient.Outlined" Color="ColorVarient.Orange" ThickBorder></Chip>
            }
            @if (Product.OriginalProductId is not null)
            {
-                <ProductIndicator Graphic="Graphic.Translate" Color="ColorVarient.Primary" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+                @* <ProductIndicator Graphic="Graphic.Translate" Color="ColorVarient.Primary" BackgroundColor="ColorVarient.Black"></ProductIndicator> *@
+                <Chip Graphic="Graphic.Translate" Varient="ElementVarient.Outlined" Color="ColorVarient.Primary" ThickBorder></Chip>
            }
            @if (Product.Favorite)
            {
-                <ProductIndicator Graphic="Graphic.Star" Color="ColorVarient.Pink" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+                @*  <ProductIndicator Graphic="Graphic.Star" Color="ColorVarient.Pink" BackgroundColor="ColorVarient.Black"></ProductIndicator> *@
+                <Chip Graphic="Graphic.Star" Varient="ElementVarient.Outlined" Color="ColorVarient.Pink" ThickBorder></Chip>
            }
            @if (Product.HasTrial || Product.HasChobit)
            {
-                <ProductIndicator Graphic="Graphic.Headphones" Color="ColorVarient.Blue" BackgroundColor="ColorVarient.Black"></ProductIndicator>
+                @* <ProductIndicator Graphic="Graphic.Headphones" Color="ColorVarient.Blue" BackgroundColor="ColorVarient.Black"></ProductIndicator> *@
+                <Chip Graphic="Graphic.Headphones" Varient="ElementVarient.Outlined" Color="ColorVarient.Blue" ThickBorder></Chip>
            }
+            <Dropdown Trigger="@([Trigger.Click])">
+                <Overlay>
+                    <Menu Selectable="false">
+                        @if (!Product.Favorite)
+                        {
+                            <MenuItem OnClick="(e) => SetFavorite(true)">Add to Favorites</MenuItem>
+                        }
+                        @if (Product.Favorite)
+                        {
+                            <MenuItem OnClick="(e) => SetFavorite(false)">Remove from Favorites</MenuItem>
+                        }
+                        @if (Product.IsValid != true)
+                        {
+                            <MenuItem OnClick="(e) => Delete()">Delete</MenuItem>
+                        }
+                    </Menu>
+                </Overlay>
+                <ChildContent>
+                    <Chip Graphic="Graphic.Pencil" Varient="ElementVarient.Outlined" Color="ColorVarient.Surface" IsClickable ThickBorder></Chip>
+                </ChildContent>
+            </Dropdown>
        </BitStack>
    </div>
 </div>
@@ -194,4 +206,43 @@
            default: return code;
        }
    }
+
+    private async Task SetFavorite(bool value)
+    {
+        SetVoiceWorkFavoriteRequest request = new(
+            VoiceWorkId: Product.VoiceWorkId,
+            IsFavorite: value
+        );
+
+        SetVoiceWorkFavoriteResponse? response = await Client.SetVoiceWorkFavoriteeAsync(request);
+
+        if (response is not null)
+        {
+            Product.Favorite = response.IsFavorite;
+        }
+
+        //await InvokeAsync(StateHasChanged);
+
+        MessageConfig messageConfig = new()
+        {
+            Content = $"Product '{Product.ProductName}' has been {(Product.Favorite ? "added to your favorites" : "removed from your favorites")}.",
+            Type = MessageType.Success
+        };
+
+        _ = MessageService.OpenAsync(messageConfig);
+    }
+
+    private async Task Delete()
+    {
+        RenderFragment icon = @<AntDesign.Icon Type="@IconType.Outline.ExclamationCircle" />;
+
+        AntDesign.ConfirmOptions options = new()
+        {
+            Title = "Are you sure you want to delete the following product?",
+            Icon = icon,
+            Content = Product.ProductName
+        };
+
+        await ModalService.ConfirmAsync(options);
+    }
 }
--- a/JSMR.UI.Blazor/Enums/Graphic.cs
+++ b/JSMR.UI.Blazor/Enums/Graphic.cs
@@ -21,5 +21,6 @@ public enum Graphic
    Age,
    Calendar,
    Download,
-    Microphone
+    Microphone,
+    Pencil
 }
--- a/JSMR.UI.Blazor/Services/VoiceWorksClient.cs
+++ b/JSMR.UI.Blazor/Services/VoiceWorksClient.cs
@@ -4,6 +4,8 @@ using JSMR.Application.Creators.Queries.Search;
 using JSMR.Application.Tags.Commands.SetEnglishName;
 using JSMR.Application.Tags.Commands.UpdateTagStatus;
 using JSMR.Application.Tags.Queries.Search;
+using JSMR.Application.VoiceWorks.Commands.Delete;
+using JSMR.Application.VoiceWorks.Commands.SetFavorite;
 using JSMR.Application.VoiceWorks.Queries.Search;
 using System.Net.Http.Json;
 using System.Text.Json;
@@ -45,6 +47,18 @@ public class VoiceWorksClient(HttpClient http)
        return await resp.Content.ReadFromJsonAsync<SearchTagsResponse>(JsonOptions, cancellationToken: ct);
    }

+    public async Task<SetVoiceWorkFavoriteResponse?> SetVoiceWorkFavoriteeAsync(SetVoiceWorkFavoriteRequest request, CancellationToken ct = default)
+    {
+        using var resp = await http.PostAsJsonAsync("/api/voicework/set-favorite", request, ct);
+        return await resp.Content.ReadFromJsonAsync<SetVoiceWorkFavoriteResponse>(JsonOptions, cancellationToken: ct);
+    }
+
+    public async Task<DeleteVoiceWorkResponse?> DeleteVoiceWorkAsync(DeleteVoiceWorkRequest request, CancellationToken ct = default)
+    {
+        using var resp = await http.PostAsJsonAsync("/api/voicework/delete", request, ct);
+        return await resp.Content.ReadFromJsonAsync<DeleteVoiceWorkResponse>(JsonOptions, cancellationToken: ct);
+    }
+
    public async Task<UpdateTagStatusResponse?> UpdateTagStatusAsync(UpdateTagStatusRequest request, CancellationToken ct = default)
    {
        using var resp = await http.PostAsJsonAsync("/api/tags/update-status", request, ct);
--- a/JSMR.UI.Blazor/wwwroot/css/ant-design.css
+++ b/JSMR.UI.Blazor/wwwroot/css/ant-design.css
@@ -0,0 +1,48 @@
+/* Modals */
+.ant-modal-content {
+    background-color: var(--ant-modal-content-bg);
+    border-radius: var(--ant-border-radius-lg);
+    border-width: 1px;
+    border-style: solid;
+    border-top-color: rgb(83, 99, 109);
+    border-left-color: rgb(72, 88, 99);
+    border-right-color: rgb(72, 88, 99);
+    border-bottom-color: rgb(63, 78, 88);
+}
+
+.ant-modal-confirm-title {
+    color: var(--ant-modal-title-color);
+    text-shadow: 1px 1px 2px black;
+}
+
+.ant-modal-confirm-body .ant-modal-confirm-content {
+    color: var(--ant-color-text);
+}
+
+/* Buttons */
+.ant-btn {
+    font-weight: var(--ant-button-font-weight);
+    border: var(--ant-btn-border-width) var(--ant-btn-border-style) var(--ant-btn-border-color);
+    color: var(--ant-btn-text-color);
+    background-color: var(--ant-btn-bg-color);
+}
+
+/* 
+    --ant-button-font-weight: 400;
+    --ant-button-icon-gap: 8px;
+    --ant-button-padding-inline: 15px;
+    --ant-button-default-border-color: rgba(180, 200, 214, 0.25);
+    --ant-button-content-font-size: 14px;
+    --ant-btn-color-base: var(--ant-button-default-border-color);
+    --ant-btn-text-color: var(--ant-button-default-color);
+    --ant-btn-text-color-hover: var(--ant-button-default-hover-color);
+    --ant-btn-shadow: var(--ant-button-default-shadow);
+    --ant-btn-border-color: var(--ant-btn-color-base);
+    --ant-btn-border-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-border-color-active: var(--ant-btn-color-active);
+    --ant-btn-bg-color: var(--ant-btn-bg-color-container);
+    --ant-btn-text-color: var(--ant-btn-color-base);
+    --ant-btn-text-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-text-color-active: var(--ant-btn-color-active);
+
+*/
--- a/JSMR.UI.Blazor/wwwroot/css/app.css
+++ b/JSMR.UI.Blazor/wwwroot/css/app.css
@@ -669,11 +669,21 @@ code {
    border: 1px solid transparent;
 }

-    .j-chip.is-clickable {
-        cursor: pointer;
-        user-select: none;
-        transition: background .2s linear, color .2s linear, border-color .2s linear, filter .2s linear;
-    }
+.j-chip-icon-only {
+    padding: .75em;
+    border-radius: 2em;
+}
+
+.j-chip-thick-border,
+.j-chip.varient-outlined.j-chip-thick-border {
+    border-width: 2px;
+}
+
+.j-chip.is-clickable {
+    cursor: pointer;
+    user-select: none;
+    transition: background .2s linear, color .2s linear, border-color .2s linear, filter .2s linear;
+}

        .j-chip.is-clickable:hover {
            filter: brightness(1.2);
@@ -770,6 +780,10 @@ code {
        --chip-fg-rgb: var(--rgb-on-yellow, 255 255 255);
    }

+.j-chip.color-orange {
+    --chip-rgb: var(--rgb-orange);
+}
+
    .j-chip.color-pink {
        color: rgb(var(--chip-fg-rgb));
        --chip-rgb: var(--rgb-pink);
@@ -955,6 +969,14 @@ code {
    mask-image: url("../svg/microphone-fill.svg");
 }

+.j-icon-pencil {
+    mask-image: url("../svg/pencil.svg");
+}
+
+.j-icon-pencil-fill {
+    mask-image: url("../svg/pencil-fill.svg");
+}
+
 .j-icon-2 {
    background-repeat: no-repeat;
    background-position: center;
--- a/JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
+++ b/JSMR.UI.Blazor/wwwroot/css/theme-frozen.css
@@ -48,6 +48,7 @@
    --rgb-blue: 115 196 255;
    --rgb-yellow: 255 224 115;
    --rgb-on-yellow: 0 0 0;
+    --rgb-orange: 255 167 115;
    --rgb-pink: 224 104 148;
    --rgb-on-pink: 255 255 255;
    --rgb-red: 224 104 104;
@@ -74,6 +75,44 @@
    --surface-container-outline-high: rgb(83, 99, 109);
    --surface-container-outline: rgb(72, 88, 99);
    --surface-container-outline-low: rgb(63, 78, 88);
+    /* Ant Design - Modals */
+    --ant-color-text: #b4c8d6;
+    --ant-modal-content-bg: #273f50;
+    --ant-modal-title-color: #b4c8d6;
+    /* Ant Design - Buttons */
+    /* Button Part I */
+    --ant-btn-text-color: var(--ant-button-default-color);
+    --ant-btn-text-color-hover: var(--ant-button-default-hover-color);
+    --ant-btn-text-color-active: var(--ant-button-default-active-color);
+    --ant-btn-bg-color-container: var(--ant-button-default-bg);
+    --ant-btn-bg-color-hover: var(--ant-button-default-hover-bg);
+    --ant-btn-bg-color-active: var(--ant-button-default-active-bg);
+    /* Part II */
+    --ant-button-default-bg: #1e3545;
+    --ant-button-default-border-color: rgba(180, 200, 214, 0.25);
+    --ant-button-font-weight: 400;
+    --ant-button-icon-gap: 8px;
+    --ant-button-padding-inline: 15px;
+    --ant-button-content-font-size: 14px;
+    --ant-border-radius-lg: 16px;
+    --ant-button-font-weight: 400;
+    --ant-btn-border-width: var(--ant-line-width);
+    --ant-btn-border-color: #000;
+    --ant-btn-border-color-hover: var(--ant-btn-border-color);
+    --ant-btn-border-color-active: var(--ant-btn-border-color);
+    --ant-btn-border-color-disabled: var(--ant-btn-border-color);
+    --ant-btn-border-style: solid;
+    --ant-btn-text-color: #000;
+    --ant-btn-text-color-hover: var(--ant-btn-text-color);
+    --ant-btn-text-color-active: var(--ant-btn-text-color);
+    --ant-btn-text-color-disabled: var(--ant-btn-text-color);
+    --ant-btn-border-color: var(--ant-btn-color-base);
+    --ant-btn-border-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-border-color-active: var(--ant-btn-color-active);
+    --ant-btn-bg-color: var(--ant-btn-bg-color-container);
+    --ant-btn-text-color: var(--ant-btn-color-base);
+    --ant-btn-text-color-hover: var(--ant-btn-color-hover);
+    --ant-btn-text-color-active: var(--ant-btn-color-active);
 }

 /*
--- a/JSMR.UI.Blazor/wwwroot/index.html
+++ b/JSMR.UI.Blazor/wwwroot/index.html
@@ -24,6 +24,7 @@
    <link rel="stylesheet" href="css/radzen.css" />
    <link href="_content/Bit.BlazorUI/styles/bit.blazorui.css" rel="stylesheet" />
    <link href="_content/AntDesign/css/ant-design-blazor.dark.css" rel="stylesheet" />
+    <link rel="stylesheet" href="css/ant-design.css" />
    <link rel="stylesheet" href="css/bit-blazor.css" />
    <link rel="stylesheet" href="css/font.css" />
    <link rel="stylesheet" href="css/app.css" />
--- a/JSMR.UI.Blazor/wwwroot/svg/pencil-fill.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/pencil-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+	<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"/>
+</svg>
--- a/JSMR.UI.Blazor/wwwroot/svg/pencil.svg
+++ b/JSMR.UI.Blazor/wwwroot/svg/pencil.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
+	<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
+</svg>