Daybreak/Daybreak.Core/Views/SettingsSynchronizationView.razor

<div class="container">
    <div class="title-bar-additional-btns-left">
        <button class="title-bar-btn" @onclick="this.ViewModel.SaveChanges" title="Backup options to remote">
            <FluentIcon Value="new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.Save()" />
        </button>
        <button class="title-bar-btn" @onclick="this.ViewModel.UndoChanges" title="Restore options from remote">
            <FluentIcon Value="new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.ArrowUndo()" />
        </button>
    </div>
    <div class="stretch-container backdrop-panel">
        @if (this.ViewModel.Loading)
        {
            <div class="loading-container">
                <SpinnerWidget IsLoading="true" />
            </div>
        }
        else
        {
            <div class="diff-container">
                <div class="diff-panels">
                    <div class="diff-panel">
                        <div class="panel-header">
                            <FluentIcon Value="new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.Desktop()" />
                            <h4>Local Settings</h4>
                        </div>
                        <div class="diff-content">
                            @if (this.ViewModel.SideBySideDiff?.OldText.Lines is not null)
                            {
                                @foreach (var line in this.ViewModel.SideBySideDiff.OldText.Lines)
                                {
                                    (var lineClass, var symbol) = this.GetLineClassAndSymbol(line.Type);
                                    <div class="diff-line @lineClass">
                                        <div class="diff-line-left">
                                            <span class="line-number">@line.Position</span>
                                            <span class="line-symbol">@symbol</span>
                                        </div>
                                        <span class="line-content">@line.Text</span>
                                    </div>
                                }
                            }
                        </div>
                    </div>

                    <div class="diff-panel">
                        <div class="panel-header">
                            <FluentIcon Value="new Microsoft.FluentUI.AspNetCore.Components.Icons.Regular.Size16.Cloud()" />
                            <h4>Remote Settings</h4>
                        </div>
                        <div class="diff-content">
                            @if (this.ViewModel.SideBySideDiff?.NewText.Lines is not null)
                            {
                                @foreach (var line in this.ViewModel.SideBySideDiff.NewText.Lines)
                                {
                                    (var lineClass, var symbol) = this.GetLineClassAndSymbol(line.Type);
                                    <div class="diff-line @lineClass">
                                        <div class="diff-line-left">
                                            <span class="line-number">@line.Position</span>
                                            <span class="line-symbol">@symbol</span>
                                        </div>
                                        <span class="line-content">@line.Text</span>
                                    </div>
                                }
                            }
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

@page "/synchronization/settings"
@using DiffPlex.DiffBuilder.Model
@inherits ViewBase<SettingsSynchronizationView, SettingsSynchronizationViewModel>

@code{
    private (string, string) GetLineClassAndSymbol(ChangeType changeType)
    {
        return changeType switch
        {
            DiffPlex.DiffBuilder.Model.ChangeType.Deleted => ("line-deleted", "-"),
            DiffPlex.DiffBuilder.Model.ChangeType.Modified => ("line-modified", "~"),
            DiffPlex.DiffBuilder.Model.ChangeType.Imaginary => ("line-imaginary", ""),
            DiffPlex.DiffBuilder.Model.ChangeType.Inserted => ("line-inserted", "+"),
            _ => ("line-unchanged", "")
        };
    }
}