MilkyShots/MilkStream.Client/Components/Shared/ModalFrame.razor

@inject Microsoft.JSInterop.IJSRuntime JSRuntime
@implements IAsyncDisposable

@if (Show)
{
        <div class="modal-overlay" @onclick="() => OnClose.InvokeAsync()">
        <div class="@ContentClass" @onclick:stopPropagation="true">
            <div class="modal-header bg-gradient-surface">
                <h5>@HeaderActions @Title</h5>
                <button class="btn-close" @onclick="() => OnClose.InvokeAsync()"></button>
            </div>
            <div class="modal-body">
                @Body
            </div>
            @if (Footer is not null)
            {
                <div class="modal-footer">
                    @Footer
                </div>
            }
        </div>
    </div>
}

@code {
    /// <summary>
    /// Gets or sets the modal title.
    /// </summary>
    [Parameter] public string Title { get; set; } = "";

    /// <summary>
    /// Gets or sets whether the modal is visible.
    /// </summary>
    [Parameter] public bool Show { get; set; }

    /// <summary>
    /// Gets or sets the modal size. "normal" (500px max) or "lg" (800px max).
    /// </summary>
    [Parameter] public string Size { get; set; } = "normal";

    /// <summary>
    /// Gets or sets the body content.
    /// </summary>
    [Parameter] public RenderFragment? Body { get; set; }

    /// <summary>
    /// Gets or sets the footer content (Cancel/Save buttons etc.).
    /// </summary>
    [Parameter] public RenderFragment? Footer { get; set; }

    /// <summary>
    /// Gets or sets optional header actions rendered before the close button.
    /// </summary>
    [Parameter] public RenderFragment? HeaderActions { get; set; }

    /// <summary>
    /// Gets or sets the callback invoked when the modal is dismissed (overlay click or close button).
    /// </summary>
    [Parameter] public EventCallback OnClose { get; set; }

    string ContentClass => Size == "lg" ? "modal-content modal-content-lg" : "modal-content";

    bool _prevShow;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (Show != _prevShow)
        {
            _prevShow = Show;
            if (Show)
                await JSRuntime.InvokeVoidAsync("masonryObserver.lockBodyScroll");
            else
                await JSRuntime.InvokeVoidAsync("masonryObserver.unlockBodyScroll");
        }
    }

    /// <inheritdoc />
    public async ValueTask DisposeAsync()
    {
        if (_prevShow)
            await JSRuntime.InvokeVoidAsync("masonryObserver.unlockBodyScroll");
    }
}