[frontend/components] Add ConfirmDialog

Iceshrimp.Frontend/Components/ConfirmDialog.razor

@@ -0,0 +1,63 @@
+@using Iceshrimp.Assets.PhosphorIcons
+@using Iceshrimp.Frontend.Core.Services
+@using Iceshrimp.Frontend.Localization
+@using Microsoft.Extensions.Localization
+@inject GlobalComponentSvc             GlobalComponentSvc;
+@inject IJSRuntime                     Js;
+@inject IStringLocalizer<Localization> Loc;
+
+<dialog class="dialog" @ref="Dialog">
+    <div class="confirm">
+        <span class="confirm-icon"><Icon Name="@(ConfirmIcon ?? Icons.Question)" Size="3em"/></span>
+        <span>@Question</span>
+        <div class="buttons">
+            <button class="btn confirm-btn" @onclick="ConfirmAction">@(ButtonText ?? Loc["OK"])</button>
+            <button class="btn" @onclick="CancelAction">@Loc["Cancel"]</button>
+        </div>
+    </div>
+</dialog>
+
+@code {
+    private ElementReference    Dialog { get; set; }
+    private IJSObjectReference  _module = null!;
+    private EventCallback<bool> Action      { get; set; }
+    private string              Question    { get; set; } = "";
+    private IconName?           ConfirmIcon { get; set; }
+    private string?             ButtonText  { get; set; }
+
+    private async Task CloseDialog()
+    {
+        await _module.InvokeVoidAsync("closeDialog", Dialog);
+    }
+
+    public async Task Confirm(EventCallback<bool> action, string question, IconName? icon = null, string? buttonText = null)
+    {
+        Action      = action;
+        Question    = question;
+        ConfirmIcon = icon;
+        ButtonText  = buttonText;
+
+        StateHasChanged();
+
+        await _module.InvokeVoidAsync("openDialog", Dialog);
+    }
+
+    private async Task ConfirmAction()
+    {
+        await Action.InvokeAsync(true);
+        await CloseDialog();
+    }
+
+    private async Task CancelAction()
+    {
+        await Action.InvokeAsync(false);
+        await CloseDialog();
+    }
+    
+    protected override async Task OnInitializedAsync()
+    {
+        _module = await Js.InvokeAsync<IJSObjectReference>("import",
+                                                           "./Components/ConfirmDialog.razor.js");
+        GlobalComponentSvc.ConfirmDialog = this;
+    }
+}

Iceshrimp.Frontend/Components/ConfirmDialog.razor.css

@@ -0,0 +1,39 @@
+.dialog {
+    margin: auto;
+}
+
+.dialog::backdrop {
+    opacity: 50%;
+    background-color: black;
+}
+
+.confirm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    background-color: var(--background-color);
+    border-radius: 1rem;
+    margin: auto;
+    padding: 1rem;
+    width: max-content;
+    max-width: 45rem;
+    color: var(--font-color);
+    text-align: center;
+    text-wrap: wrap;
+    word-break: break-word;
+}
+
+.buttons {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.confirm-icon {
+    color: var(--notice-color);
+}
+
+.confirm-btn {
+    background: var(--accent-color);
+    color: var(--font-color);
+}

Iceshrimp.Frontend/Components/ConfirmDialog.razor.js

@@ -0,0 +1,7 @@
+export function openDialog(element) {
+    element.showModal()
+}
+
+export function closeDialog(element) {
+    element.close()
+}

Iceshrimp.Frontend/Components/GlobalComponents.razor

@@ -1,5 +1,6 @@
 <EmojiPicker />
 <BannerContainer />
+<ConfirmDialog />
 <StreamingStatus />
 @code {
 }

Iceshrimp.Frontend/Core/Services/GlobalComponentSvc.cs

@@ -6,4 +6,5 @@ public class GlobalComponentSvc
 {
     public EmojiPicker?     EmojiPicker     { get; set; }
     public BannerContainer? BannerComponent { get; set; }
+    public ConfirmDialog?   ConfirmDialog   { get; set; }
 }