Renamed theme tab to customisation tab. Added basic theme crud

Moonlight.ApiServer/Http/Controllers/Admin/Sys/Customisation/ThemesController.cs

@@ -10,21 +10,21 @@ using Moonlight.ApiServer.Mappers;
 using Moonlight.Shared.Http.Requests.Admin.Sys.Theme;
 using Moonlight.Shared.Http.Responses.Admin;
 
-namespace Moonlight.ApiServer.Http.Controllers.Admin.Sys;
+namespace Moonlight.ApiServer.Http.Controllers.Admin.Sys.Customisation;
 
 [ApiController]
-[Route("api/admin/system/theme")]
-public class ThemeController : Controller
+[Route("api/admin/system/customisation/themes")]
+public class ThemesController : Controller
 {
     private readonly DatabaseRepository<Theme> ThemeRepository;
 
-    public ThemeController(DatabaseRepository<Theme> themeRepository)
+    public ThemesController(DatabaseRepository<Theme> themeRepository)
     {
         ThemeRepository = themeRepository;
     }
 
     [HttpGet]
-    [Authorize(Policy = "permissions:admin.system.theme.read")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.read")]
     public async Task<PagedData<ThemeResponse>> Get(
         [FromQuery] [Range(0, int.MaxValue)] int page,
         [FromQuery] [Range(1, 100)] int pageSize
@@ -53,7 +53,7 @@ public class ThemeController : Controller
     }
 
     [HttpGet("{id:int}")]
-    [Authorize(Policy = "permissions:admin.system.theme.read")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.read")]
     public async Task<ThemeResponse> GetSingle([FromRoute] int id)
     {
         var theme = await ThemeRepository
@@ -67,7 +67,7 @@ public class ThemeController : Controller
     }
 
     [HttpPost]
-    [Authorize(Policy = "permissions:admin.system.theme.write")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.write")]
     public async Task<ThemeResponse> Create([FromBody] CreateThemeRequest request)
     {
         var theme = ThemeMapper.ToTheme(request);
@@ -78,7 +78,7 @@ public class ThemeController : Controller
     }
 
     [HttpPatch("{id:int}")]
-    [Authorize(Policy = "permissions:admin.system.theme.write")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.write")]
     public async Task<ThemeResponse> Update([FromRoute] int id, [FromBody] UpdateThemeRequest request)
     {
         var theme = await ThemeRepository
@@ -112,8 +112,8 @@ public class ThemeController : Controller
         return ThemeMapper.ToResponse(theme);
     }
 
-    [HttpPost("{id:int}")]
-    [Authorize(Policy = "permissions:admin.system.theme.write")]
+    [HttpDelete("{id:int}")]
+    [Authorize(Policy = "permissions:admin.system.customisation.themes.write")]
     public async Task Delete([FromRoute] int id)
     {
         var theme = await ThemeRepository

Moonlight.Client/Services/ThemeService.cs

@@ -1,25 +1,56 @@
 using MoonCore.Attributes;
+using MoonCore.Helpers;
+using MoonCore.Models;
+using Moonlight.Shared.Http.Requests.Admin.Sys.Theme;
+using Moonlight.Shared.Http.Responses.Admin;
 using Moonlight.Shared.Misc;
 
 namespace Moonlight.Client.Services;
 
-[Singleton]
+[Scoped]
 public class ThemeService
 {
-    public event Func<Task> OnRefresh;
-    
-    public Dictionary<string, string> Variables { get; private set; } = new();
-    
-    public ThemeService(FrontendConfiguration configuration)
+    private readonly HttpApiClient ApiClient;
+
+    public ThemeService(HttpApiClient apiClient)
     {
-        // Load theme variables into the cache
-        foreach (var themeVariable in configuration.Theme.Variables)
-            Variables[themeVariable.Key] = themeVariable.Value;
+        ApiClient = apiClient;
     }
 
-    public async Task Refresh()
+    public async Task<PagedData<ThemeResponse>> Get(int page, int pageSize)
     {
-        if (OnRefresh != null)
-            await OnRefresh.Invoke();
+        return await ApiClient.GetJson<PagedData<ThemeResponse>>(
+            $"api/admin/system/customisation/themes?page={page}&pageSize={pageSize}"
+        );
+    }
+
+    public async Task<ThemeResponse> Get(int id)
+    {
+        return await ApiClient.GetJson<ThemeResponse>(
+            $"api/admin/system/customisation/themes/{id}"
+        );
+    }
+
+    public async Task<ThemeResponse> Create(CreateThemeRequest request)
+    {
+        return await ApiClient.PostJson<ThemeResponse>(
+            "api/admin/system/customisation/themes",
+            request
+        );
+    }
+
+    public async Task<ThemeResponse> Update(int id, UpdateThemeRequest request)
+    {
+        return await ApiClient.PatchJson<ThemeResponse>(
+            $"api/admin/system/customisation/themes/{id}",
+            request
+        );
+    }
+
+    public async Task Delete(int id)
+    {
+        await ApiClient.Delete(
+            $"api/admin/system/customisation/themes/{id}"
+        );
     }
 }

Moonlight.Client/UI/Components/ThemeEditor.razor

@@ -1,47 +1,39 @@
-@page "/admin/system/theme"
-
-@using Microsoft.AspNetCore.Authorization
-@using Moonlight.Client.UI.Components
 @using Moonlight.Shared.Misc
 
-@attribute [Authorize(Policy = "permissions:admin.system.theme")]
-
-<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
-
-<div class="mt-5 grid grid-cols-3 gap-3">
+<div class="grid grid-cols-3 gap-3">
     <div class="col-span-1 flex flex-col gap-3">
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBackground"/>
+            <ColorSelector @bind-Value="Theme.ColorBackground"/>
             <span class="ms-1">Background</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBaseContent"/>
+            <ColorSelector @bind-Value="Theme.ColorBaseContent"/>
             <span class="ms-1">Base Content</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase100"/>
+            <ColorSelector @bind-Value="Theme.ColorBase100"/>
             <span class="ms-1">Base 100</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase150"/>
+            <ColorSelector @bind-Value="Theme.ColorBase150"/>
             <span class="ms-1">Base 150</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase200"/>
+            <ColorSelector @bind-Value="Theme.ColorBase200"/>
             <span class="ms-1">Base 200</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase250"/>
+            <ColorSelector @bind-Value="Theme.ColorBase250"/>
             <span class="ms-1">Base 250</span>
         </div>
 
         <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-            <ColorSelector @bind-Value="ThemeData.ColorBase300"/>
+            <ColorSelector @bind-Value="Theme.ColorBase300"/>
             <span class="ms-1">Base 300</span>
         </div>
     </div>
@@ -49,84 +41,84 @@
     <div class="col-span-2 grid grid-cols-2 gap-3">
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorPrimary"/>
+                <ColorSelector @bind-Value="Theme.ColorPrimary"/>
                 <span class="ms-1">Primary</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorPrimaryContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorPrimaryContent"/>
                 <span class="ms-1">Primary Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorSecondary"/>
+                <ColorSelector @bind-Value="Theme.ColorSecondary"/>
                 <span class="ms-1">Secondary</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSecondaryContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSecondaryContent"/>
                 <span class="ms-1">Secondary Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorAccent"/>
+                <ColorSelector @bind-Value="Theme.ColorAccent"/>
                 <span class="ms-1">Accent</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorAccentContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
                 <span class="ms-1">Accent Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorInfo"/>
+                <ColorSelector @bind-Value="Theme.ColorInfo"/>
                 <span class="ms-1">Info</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorInfoContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorInfoContent"/>
                 <span class="ms-1">Info Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorSuccess"/>
+                <ColorSelector @bind-Value="Theme.ColorSuccess"/>
                 <span class="ms-1">Success</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorSuccessContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorSuccessContent"/>
                 <span class="ms-1">Success Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorWarning"/>
+                <ColorSelector @bind-Value="Theme.ColorWarning"/>
                 <span class="ms-1">Warning</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorWarningContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorWarningContent"/>
                 <span class="ms-1">Warning Content</span>
             </div>
         </div>
 
         <div class="col-span-1 flex flex-col gap-y-3">
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector @bind-Value="ThemeData.ColorError"/>
+                <ColorSelector @bind-Value="Theme.ColorError"/>
                 <span class="ms-1">Error</span>
             </div>
 
             <div class="card card-body flex-row grow-0 items-center p-1.5 text-base-content">
-                <ColorSelector Icon="icon-type" @bind-Value="ThemeData.ColorErrorContent"/>
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorErrorContent"/>
                 <span class="ms-1">Error Content</span>
             </div>
         </div>
@@ -134,64 +126,7 @@
 </div>
 
 
-
 @code
 {
-    private ApplicationTheme ThemeData;
-
-    protected override void OnInitialized()
-    {
-        ThemeData = CreateDefault();
-    }
-
-    private ApplicationTheme CreateDefault()
-    {
-        return new ApplicationTheme()
-        {
-            ColorBackground = "#0c0f18",
-
-            ColorBase100 = "#1e2b47",
-            ColorBase150 = "#1a2640",
-            ColorBase200 = "#101a2e",
-            ColorBase250 = "#0f1729",
-            ColorBase300 = "#0c1221",
-
-            ColorBaseContent = "#dde5f5",
-
-            ColorPrimary = "#4f39f6",
-            ColorPrimaryContent = "#dde5f5",
-
-            ColorSecondary = "#354052",
-            ColorSecondaryContent = "#dde5f5",
-
-            ColorAccent = "#ad46ff",
-            ColorAccentContent = "#dde5f5",
-
-            ColorNeutral = "#dde5f5",
-            ColorNeutralContent = "#09090b",
-
-            ColorInfo = "#155dfc",
-            ColorInfoContent = "#dde5f5",
-
-            ColorSuccess = "#00a63e",
-            ColorSuccessContent = "#dde5f5",
-
-            ColorWarning = "#ffba00",
-            ColorWarningContent = "#dde5f5",
-
-            ColorError = "#ec003f",
-            ColorErrorContent = "#dde5f5",
-
-            RadiusSelector = 0.25f,
-            RadiusField = 0.5f,
-            RadiusBox = 0.5f,
-
-            SizeSelector = 0.25f,
-            SizeField = 0.25f,
-
-            Border = 1f,
-            Depth = 0f,
-            Noise = 0f
-        };
-    }
-}
+    [Parameter] public ApplicationTheme Theme { get; set; }
+}

Moonlight.Client/UI/Components/ThemeLoader.razor

@@ -1,43 +0,0 @@
-@using Moonlight.Client.Services
-
-@inject ThemeService ThemeService
-
-@implements IDisposable
-
-<style>
-    :root {
-        @Css
-    }
-</style>
-
-@code
-{
-    private string Css = "";
-
-    protected override void OnInitialized()
-    {
-        GenerateCss();
-        
-        ThemeService.OnRefresh += OnRefresh;
-    }
-
-    private async Task OnRefresh()
-    {
-        GenerateCss();
-        
-        await InvokeAsync(StateHasChanged);
-    }
-
-    private void GenerateCss()
-    {
-        Css = "";
-
-        foreach (var variable in ThemeService.Variables)
-            Css += $"--color-{variable.Key}: {variable.Value};\n";
-    }
-
-    public void Dispose()
-    {
-        ThemeService.OnRefresh -= OnRefresh;
-    }
-}

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Index.razor

@@ -0,0 +1,103 @@
+@page "/admin/system/customisation"
+
+@using Microsoft.AspNetCore.Authorization
+@using MoonCore.Blazor.FlyonUi.DataTables
+@using MoonCore.Models
+@using Moonlight.Client.Services
+@using Moonlight.Shared.Http.Responses.Admin
+
+@attribute [Authorize(Policy = "permissions:admin.system.theme")]
+
+@inject ThemeService ThemeService
+@inject AlertService AlertService
+@inject ToastService ToastService
+
+<NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
+
+<div class="mt-5 flex justify-between">
+    <span class="text-lg font-semibold">Themes</span>
+    <div>
+        <label for="import-theme" class="btn btn-info me-1">
+            <i class="icon-file-up"></i>
+            Import
+        </label>
+        <InputFile id="import-theme" class="hidden" />
+        <a href="/admin/system/customisation/themes/create" class="btn btn-primary">Create</a>
+    </div>
+</div>
+
+<div class="mt-2.5">
+    <DataTable TItem="ThemeResponse">
+        <Configuration>
+            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Id)" Name="Id"/>
+            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Name)" Name="Name">
+                <ColumnTemplate>
+                    <div class="flex items-center">
+                        @context.Name
+                        
+                        @if (context.IsEnabled)
+                        {
+                            <i class="icon-check text-success ms-2"></i>
+                        }
+                    </div>
+                </ColumnTemplate>
+            </DataTableColumn>
+            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Author)" Name="Author"/>
+            <DataTableColumn TItem="ThemeResponse" Field="@(x => x.Version)" Name="Version"/>
+            <DataTableColumn TItem="ThemeResponse">
+                <ColumnTemplate>
+                    <div class="flex justify-end">
+                        @if (!string.IsNullOrEmpty(context.DonateUrl))
+                        {
+                            <a href="@context.DonateUrl" target="_blank" class="flex items-center mr-2 sm:mr-3">
+                                <i class="text-accent icon-heart me-1"></i>
+                                <span class="text-accent">Donate</span>
+                            </a>
+                        }
+                        
+                        @if (!string.IsNullOrEmpty(context.UpdateUrl))
+                        {
+                            <a href="#" class="flex items-center mr-2 sm:mr-3">
+                                <i class="text-info icon-refresh-cw me-1"></i>
+                                <span class="text-info">Update</span>
+                            </a>
+                        }
+                        
+                        <a href="/admin/system/customisation/themes/@(context.Id)" class="mr-2 sm:mr-3">
+                            <i class="icon-pencil text-primary"></i>
+                        </a>
+
+                        <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault>
+                            <i class="icon-trash text-error"></i>
+                        </a>
+                    </div>
+                </ColumnTemplate>
+            </DataTableColumn>
+            <Pagination TItem="ThemeResponse" PageSize="10" ItemSource="LoadItems"/>
+        </Configuration>
+    </DataTable>
+</div>
+
+
+@code
+{
+    private DataTable<ThemeResponse> Table;
+    
+    private async Task<IPagedData<ThemeResponse>> LoadItems(PaginationOptions options)
+        => await ThemeService.Get(options.Page, options.PerPage);
+
+    private async Task Delete(ThemeResponse response)
+    {
+        await AlertService.ConfirmDanger(
+            "Theme deletion",
+            $"Do you really want to delete the theme: {response.Name}",
+            async () =>
+            {
+                await ThemeService.Delete(response.Id);
+
+                await ToastService.Success("Successfully deleted theme");
+                await Table.Refresh();
+            }
+        );
+    }
+}

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor

@@ -0,0 +1,116 @@
+@page "/admin/system/customisation/themes/create"
+
+@using Moonlight.Client.Services
+@using Moonlight.Shared.Misc
+@using Moonlight.Client.UI.Components
+@using Moonlight.Shared.Http.Requests.Admin.Sys.Theme
+
+@inject ThemeService ThemeService
+@inject ToastService ToastService
+@inject NavigationManager NavigationManager
+
+<PageHeader Title="Create theme">
+    <a href="/admin/system/customisation" class="btn btn-secondary">
+        <i class="icon-chevron-left"></i>
+        Back
+    </a>
+    <WButton OnClick="_ => Form.Submit()" CssClasses="btn btn-primary">
+        <i class="icon-check"></i>
+        Create
+    </WButton>
+</PageHeader>
+
+<HandleForm @ref="Form" Model="Request" OnValidSubmit="OnValidSubmit">
+    <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 mb-5 mt-5">
+        <div class="sm:col-span-2">
+            <label class="block text-sm font-medium leading-6 text-base-content">Name</label>
+            <div class="mt-2">
+                <input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
+            </div>
+        </div>
+        <div class="sm:col-span-2">
+            <label class="block text-sm font-medium leading-6 text-base-content">Author</label>
+            <div class="mt-2">
+                <input @bind="Request.Author" type="text" autocomplete="off" class="input w-full">
+            </div>
+        </div>
+        <div class="sm:col-span-2">
+            <label class="block text-sm font-medium leading-6 text-base-content">Version</label>
+            <div class="mt-2">
+                <input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
+            </div>
+        </div>
+    </div>
+    
+    <ThemeEditor Theme="Request.Content"/>
+</HandleForm>
+
+@code
+{
+    private HandleForm Form;
+    private CreateThemeRequest Request = new();
+
+    protected override void OnInitialized()
+    {
+        Request.Content = CreateDefault();
+    }
+    
+    private async Task OnValidSubmit()
+    {
+        await ThemeService.Create(Request);
+        await ToastService.Success("Successfully created theme");
+        
+        NavigationManager.NavigateTo("/admin/system/customisation");
+    }
+    
+    private ApplicationTheme CreateDefault()
+    {
+        return new ApplicationTheme()
+        {
+            ColorBackground = "#0c0f18",
+
+            ColorBase100 = "#1e2b47",
+            ColorBase150 = "#1a2640",
+            ColorBase200 = "#101a2e",
+            ColorBase250 = "#0f1729",
+            ColorBase300 = "#0c1221",
+
+            ColorBaseContent = "#dde5f5",
+
+            ColorPrimary = "#4f39f6",
+            ColorPrimaryContent = "#dde5f5",
+
+            ColorSecondary = "#354052",
+            ColorSecondaryContent = "#dde5f5",
+
+            ColorAccent = "#ad46ff",
+            ColorAccentContent = "#dde5f5",
+
+            ColorNeutral = "#dde5f5",
+            ColorNeutralContent = "#09090b",
+
+            ColorInfo = "#155dfc",
+            ColorInfoContent = "#dde5f5",
+
+            ColorSuccess = "#00a63e",
+            ColorSuccessContent = "#dde5f5",
+
+            ColorWarning = "#ffba00",
+            ColorWarningContent = "#dde5f5",
+
+            ColorError = "#ec003f",
+            ColorErrorContent = "#dde5f5",
+
+            RadiusSelector = 0.25f,
+            RadiusField = 0.5f,
+            RadiusBox = 0.5f,
+
+            SizeSelector = 0.25f,
+            SizeField = 0.25f,
+
+            Border = 1f,
+            Depth = 0f,
+            Noise = 0f
+        };
+    }
+}

Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Update.razor

@@ -0,0 +1,103 @@
+@page "/admin/system/customisation/themes/{id:int}"
+
+@using Moonlight.Client.Services
+@using Moonlight.Shared.Http.Requests.Admin.Sys.Theme
+@using Moonlight.Shared.Http.Responses.Admin
+@using Moonlight.Client.UI.Components
+
+@inject ThemeService ThemeService
+@inject ToastService ToastService
+@inject NavigationManager Navigation
+
+<LazyLoader Load="Load">
+    <PageHeader Title="@($"Update {Request.Name}")">
+        <a href="/admin/system/customisation" class="btn btn-secondary">
+            <i class="icon-chevron-left"></i>
+            Back
+        </a>
+        <WButton OnClick="_ => Form.Submit()" CssClasses="btn btn-primary">
+            <i class="icon-check"></i>
+            Update
+        </WButton>
+    </PageHeader>    
+    
+    <HandleForm @ref="Form" Model="Request" OnValidSubmit="OnValidSubmit">
+        <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6 mb-5 mt-5">
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-base-content">Enable</label>
+                <div class="mt-2">
+                    <div class="flex items-center gap-1">
+                        <input @bind="Request.IsEnabled" type="checkbox" class="switch" />
+                    </div>
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-base-content">Name</label>
+                <div class="mt-2">
+                    <input @bind="Request.Name" type="text" autocomplete="off" class="input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-base-content">Author</label>
+                <div class="mt-2">
+                    <input @bind="Request.Author" type="text" autocomplete="off" class="input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-base-content">Version</label>
+                <div class="mt-2">
+                    <input @bind="Request.Version" type="text" autocomplete="off" class="input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-base-content">Donate URL</label>
+                <div class="mt-2">
+                    <input @bind="Request.DonateUrl" type="text" autocomplete="off" class="input w-full">
+                </div>
+            </div>
+            <div class="sm:col-span-2">
+                <label class="block text-sm font-medium leading-6 text-base-content">Update URL</label>
+                <div class="mt-2">
+                    <input @bind="Request.UpdateUrl" type="text" autocomplete="off" class="input w-full">
+                </div>
+            </div>
+        </div>
+    
+        <ThemeEditor Theme="Request.Content"/>
+    </HandleForm>
+</LazyLoader>
+
+@code
+{
+    [Parameter] public int Id { get; set; }
+
+    private ThemeResponse Response;
+    private UpdateThemeRequest Request;
+
+    private HandleForm Form;
+    
+    private async Task Load(LazyLoader _)
+    {
+        Response = await ThemeService.Get(Id);
+
+        Request = new()
+        {
+            Content = Response.Content,
+            Author = Response.Author,
+            Name = Response.Name,
+            Version = Response.Version,
+            DonateUrl = Response.DonateUrl,
+            IsEnabled = Response.IsEnabled,
+            UpdateUrl = Response.UpdateUrl
+        };
+    }
+    
+    private async Task OnValidSubmit()
+    {
+        await ThemeService.Update(Id, Request);
+        
+        await ToastService.Success("Successfully updated theme");
+        Navigation.NavigateTo("/admin/system/customisation");
+    }
+}
+

Moonlight.Client/UI/Views/Admin/Users/Index.razor

@@ -27,13 +27,12 @@
         <DataTableColumn TItem="UserResponse">
             <ColumnTemplate>
                 <div class="flex justify-end">
-                    <a href="/admin/users/@(context.Id)" class="text-primary mr-2 sm:mr-3">
-                        <i class="icon-pencil text-base"></i>
+                    <a href="/admin/users/@(context.Id)" class="mr-2 sm:mr-3">
+                        <i class="icon-pencil text-primary"></i>
                     </a>
 
-                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault
-                       class="text-error">
-                        <i class="icon-trash  text-base"></i>
+                    <a href="#" @onclick="() => Delete(context)" @onclick:preventDefault>
+                        <i class="icon-trash text-error"></i>
                     </a>
                 </div>
             </ColumnTemplate>

Moonlight.Client/UiConstants.cs

@@ -4,12 +4,12 @@ public static class UiConstants
 {
     public static readonly string[] AdminNavNames =
     [
-        "Overview", "Theme", "Files", "Hangfire", "Advanced", "Diagnose"
+        "Overview", "Customisation", "Files", "Hangfire", "Advanced", "Diagnose"
     ];
 
     public static readonly string[] AdminNavLinks =
     [
-        "/admin/system", "/admin/system/theme", "/admin/system/files", "/admin/system/hangfire",
+        "/admin/system", "/admin/system/customisation", "/admin/system/files", "/admin/system/hangfire",
         "/admin/system/advanced", "/admin/system/diagnose"
     ];
 }

Moonlight.Shared/Http/Requests/Admin/Sys/Theme/CreateThemeRequest.cs

@@ -16,6 +16,6 @@ public class CreateThemeRequest
     
     public string? UpdateUrl { get; set; }
     public string? DonateUrl { get; set; }
-    
-    public ApplicationTheme Content { get; set; }
+
+    public ApplicationTheme Content { get; set; } = new();
 }