feat: init new config dialog

CaddyManager/Components/Pages/CaddyfileEditor/CaddyfileEditor.razor

@@ -4,9 +4,15 @@
 
 <MudDialog>
     <DialogContent>
+        @if (IsNew)
+        {
+            <MudTextField @bind-Value="FileName" Label="File name" Variant="Variant.Outlined"
+                          Style="margin-bottom: 16px;"
+                          ShrinkLabel="true"></MudTextField>
+        }
+        <MudText Typo="Typo.caption" Style="padding-left: 8px; padding-bottom: 4px;">File content</MudText>
         <StandaloneCodeEditor ConstructionOptions="@EditorConstructionOptions"
                               CssClass="caddy-file-editor"></StandaloneCodeEditor>
-        <MudDivider/>
     </DialogContent>
     <DialogActions>
         <MudButton OnClick="Cancel">Cancel</MudButton>

CaddyManager/Components/Pages/CaddyfileEditor/CaddyfileEditor.razor.cs

@@ -12,6 +12,11 @@ public partial class CaddyfileEditor : ComponentBase
     [CascadingParameter]
     private IMudDialogInstance MudDialog { get; set; } = null!;
     
+    /// <summary>
+    /// Determines if the Caddy configuration file is new
+    /// </summary>
+    private bool IsNew => string.IsNullOrWhiteSpace(FileName);
+    
     [Parameter]
     public string FileName { get; set; } = string.Empty;
 
@@ -27,8 +32,9 @@ public partial class CaddyfileEditor : ComponentBase
         return new StandaloneEditorConstructionOptions
         {
             AutomaticLayout = true,
-            Language = "plaintext",
+            Language = "graphql",
             Value = _caddyConfigurationContent,
+            Theme = "vs-dark",
         };
     }
 

CaddyManager/Components/Pages/ReverseProxies/ReverseProxiesPage.razor

@@ -2,11 +2,14 @@
 @attribute [StreamRendering]
 @using CaddyManager.Contracts.Caddy
 @inject ICaddyService CaddyService
+@inject IDialogService DialogService
 
 <PageTitle>Reverse proxy configurations</PageTitle>
 
 <MudContainer Class="d-flex flex-row flex-grow-1 gap-4">
-    <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add">New...</MudButton>
+    <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add"
+               OnClick="NewReverseProxy">New...
+    </MudButton>
     <MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.Delete"
                Disabled="@(_selectedCaddyConfigurations.Count <= 0)">Delete
     </MudButton>

CaddyManager/Components/Pages/ReverseProxies/ReverseProxiesPage.razor.cs

@@ -1,6 +1,9 @@
+using Microsoft.AspNetCore.Components;
+using MudBlazor;
+
 namespace CaddyManager.Components.Pages.ReverseProxies;
 
-public partial class ReverseProxiesPage
+public partial class ReverseProxiesPage : ComponentBase
 {
     private List<string> _availableCaddyConfigurations = [];
     private IReadOnlyCollection<string> _selectedCaddyConfigurations = [];
@@ -10,4 +13,21 @@ public partial class ReverseProxiesPage
         _availableCaddyConfigurations = CaddyService.GetExistingCaddyConfigurations();
         return base.OnInitializedAsync();
     }
+
+    /// <summary>
+    /// Method to help open the dialog to create a new reverse proxy configuration
+    /// </summary>
+    /// <returns></returns>
+    private Task NewReverseProxy()
+    {
+        return DialogService.ShowAsync<CaddyfileEditor.CaddyfileEditor>("New configuration",
+            options: new DialogOptions
+            {
+                FullWidth = true,
+                MaxWidth = MaxWidth.Medium,
+            }, parameters: new DialogParameters
+            {
+                { "FileName", string.Empty }
+            });
+    }
 }