Implemented theme crud and basic theme loading

Moonlight.Frontend/UI/Admin/Views/Sys/Index.razor

@@ -13,22 +13,26 @@
 @inject NavigationManager Navigation
 @inject IAuthorizationService AuthorizationService
 
-<Tabs DefaultValue="@(Tab ?? "customization")" OnValueChanged="OnTabChanged">
+<Tabs DefaultValue="@(Tab ?? "settings")" OnValueChanged="OnTabChanged">
     <TabsList ClassName="inline-flex w-full lg:w-fit justify-start overflow-x-auto overflow-y-hidden">
-        <TabsTrigger Value="customization">
-            <PaintRollerIcon />
-            Customization
+        <TabsTrigger Value="settings">
+            <CogIcon />
+            Settings
+        </TabsTrigger>
+        <TabsTrigger Value="themes" Disabled="@(!ThemesAccess.Succeeded)">
+            <PaintRollerIcon/>
+            Themes
         </TabsTrigger>
         <TabsTrigger Value="apiKeys" Disabled="@(!ApiKeyAccess.Succeeded)">
-            <KeyIcon />
+            <KeyIcon/>
             API & API Keys
         </TabsTrigger>
         <TabsTrigger Value="diagnose">
-            <HeartPulseIcon />
+            <HeartPulseIcon/>
             Diagnose
         </TabsTrigger>
     </TabsList>
-    <TabsContent Value="customization">
+    <TabsContent Value="settings">
         <Card ClassName="mt-5">
             <CardContent>
                 <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
@@ -55,6 +59,12 @@
             <ApiKeys />
         </TabsContent>
     }
+    @if (ThemesAccess.Succeeded)
+    {
+        <TabsContent Value="themes">
+            <Moonlight.Frontend.UI.Admin.Views.Sys.Themes.Index />
+        </TabsContent>
+    }
 </Tabs>
 
 @code
@@ -66,12 +76,14 @@
     [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
 
     private AuthorizationResult ApiKeyAccess;
+    private AuthorizationResult ThemesAccess;
     
     protected override async Task OnInitializedAsync()
     {
         var authState = await AuthState;
 
         ApiKeyAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.ApiKeys.View);
+        ThemesAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.View);
     }
 
     private void OnTabChanged(string name)

Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor

@@ -0,0 +1,134 @@
+@page "/admin/system/themes/create"
+
+@using Microsoft.AspNetCore.Authorization
+@using Moonlight.Shared
+@using LucideBlazor
+@using Moonlight.Shared.Http.Requests.Themes
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Labels
+@using ShadcnBlazor.Cards
+@using ShadcnBlazor.Checkboxes
+@using ShadcnBlazor.Extras.Editors
+@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Inputs
+
+@attribute [Authorize(Policy = Permissions.Themes.Create)]
+
+@inject HttpClient HttpClient
+@inject NavigationManager Navigation
+@inject ToastService ToastService
+
+<div class="flex flex-row justify-between">
+    <div class="flex flex-col">
+        <h1 class="text-xl font-semibold">Create theme</h1>
+        <div class="text-muted-foreground">
+            Create a new theme
+        </div>
+    </div>
+    <div class="flex flex-row gap-x-1.5">
+        <Button Variant="ButtonVariant.Secondary">
+            <Slot>
+                <a href="/admin/system?tab=themes" @attributes="context">
+                    <ChevronLeftIcon/>
+                    Back
+                </a>
+            </Slot>
+        </Button>
+        <Button @onclick="SubmitAsync">
+            <CheckIcon/>
+            Continue
+        </Button>
+    </div>
+</div>
+
+<div class="mt-8">
+    <Card>
+        <CardContent>
+            <FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
+                <div class="flex flex-col gap-6">
+                    
+                    <FormValidationSummary />
+                    
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeName">Name</Label>
+                            <InputField
+                                @bind-Value="Request.Name"
+                                id="themeName"
+                                placeholder="My cool theme"/>
+                        </div>
+
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeVersion">Version</Label>
+                            <InputField
+                                @bind-Value="Request.Version"
+                                id="themeVersion"
+                                Type="text"
+                                placeholder="1.0.0"/>
+                        </div>
+                        
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeAuthor">Author</Label>
+                            <InputField
+                                @bind-Value="Request.Author"
+                                id="themeAuthor"
+                                Type="text"
+                                placeholder="Your name"/>
+                        </div>
+                        
+                        <div class="col-span-1 grid gap-2">
+                            <Label for="themeAuthor">Is Enabled</Label>
+                            <Checkbox @bind-Value="Request.IsEnabled" />
+                        </div>
+                    </div>
+                    
+                    <style>
+                        .cm-editor {
+                            max-height: 400px;
+                            min-height: 400px;
+                        }
+                    </style>
+                    
+                    <div class="grid gap-2">
+                        <Label for="themeAuthor">CSS Content</Label>
+                        <Editor @ref="Editor" Language="EditorLanguage.None" InitialValue="@Request.CssContent"/>
+                    </div>
+                </div>
+            </FormHandler>
+        </CardContent>
+    </Card>
+</div>
+
+@code
+{
+    private CreateThemeDto Request = new()
+    {
+        CssContent = "/* Define your css here */"
+    };
+
+    private FormHandler Form;
+    private Editor Editor;
+
+    private async Task SubmitAsync()
+    {
+        Request.CssContent = await Editor.GetValueAsync();
+        await Form.SubmitAsync();
+    }
+
+    private async Task OnSubmitAsync()
+    {
+        await HttpClient.PostAsJsonAsync(
+            "/api/admin/themes",
+            Request,
+            Constants.SerializerOptions
+        );
+
+        await ToastService.SuccessAsync(
+            "Theme creation",
+            $"Successfully created theme {Request.Name}"
+        );
+
+        Navigation.NavigateTo("/admin/system?tab=themes");
+    }
+}

Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Index.razor

@@ -0,0 +1,148 @@
+@using LucideBlazor
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Moonlight.Shared
+@using Moonlight.Shared.Http.Requests
+@using Moonlight.Shared.Http.Responses
+@using Moonlight.Shared.Http.Responses.Themes
+@using ShadcnBlazor.DataGrids
+@using ShadcnBlazor.Dropdowns
+@using ShadcnBlazor.Extras.AlertDialogs
+@using ShadcnBlazor.Tabels
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Extras.Toasts
+
+@inject ToastService ToastService
+@inject NavigationManager Navigation
+@inject AlertDialogService AlertDialogService
+@inject IAuthorizationService AuthorizationService
+@inject HttpClient HttpClient
+
+<div class="flex flex-row justify-between mt-5">
+    <div class="flex flex-col">
+        <h1 class="text-xl font-semibold">Themes</h1>
+        <div class="text-muted-foreground">
+            Manage themes for your instance
+        </div>
+    </div>
+    <div class="flex flex-row gap-x-1.5">
+        <Button @onclick="CreateAsync" disabled="@(!CreateAccess.Succeeded)">
+            <PlusIcon/>
+            Create
+        </Button>
+    </div>
+</div>
+
+<div class="mt-3">
+    <DataGrid @ref="Grid" TGridItem="ThemeDto" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
+        <PropertyColumn Field="k => k.Id"/>
+        <TemplateColumn Identifier="@nameof(ThemeDto.Name)" IsFilterable="true" Title="Name">
+            <CellTemplate>
+                <TableCell>
+                    <a class="text-primary flex flex-row items-center" href="#" @onclick="() => EditAsync(context)" @onclick:preventDefault>
+                        @context.Name
+                        
+                        @if (context.IsEnabled)
+                        {
+                            <span class="ms-2">
+                                <CheckIcon ClassName="size-4 text-green-400" />
+                            </span>
+                        }
+                    </a>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+        <PropertyColumn IsFilterable="true"
+                        Identifier="@nameof(ThemeDto.Version)" Field="k => k.Version"/>
+        <PropertyColumn IsFilterable="true"
+                        Identifier="@nameof(ThemeDto.Author)" Field="k => k.Author"/>
+        <TemplateColumn>
+            <CellTemplate>
+                <TableCell>
+                    <div class="flex flex-row items-center justify-end me-3">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger>
+                                <Slot Context="dropdownSlot">
+                                    <Button Size="ButtonSize.IconSm" Variant="ButtonVariant.Ghost"
+                                            @attributes="dropdownSlot">
+                                        <EllipsisIcon/>
+                                    </Button>
+                                </Slot>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent SideOffset="2">
+                                <DropdownMenuItem OnClick="() => EditAsync(context)" Disabled="@(!EditAccess.Succeeded)">
+                                    Edit
+                                    <DropdownMenuShortcut>
+                                        <PenIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem OnClick="() => DeleteAsync(context)"
+                                                  Variant="DropdownMenuItemVariant.Destructive"
+                                                  Disabled="@(!DeleteAccess.Succeeded)">
+                                    Delete
+                                    <DropdownMenuShortcut>
+                                        <TrashIcon/>
+                                    </DropdownMenuShortcut>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </TableCell>
+            </CellTemplate>
+        </TemplateColumn>
+    </DataGrid>
+</div>
+
+@code
+{
+    [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
+    
+    private DataGrid<ThemeDto> Grid;
+    
+    private AuthorizationResult EditAccess;
+    private AuthorizationResult DeleteAccess;
+    private AuthorizationResult CreateAccess;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthState;
+        
+        EditAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Edit);
+        DeleteAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Delete);
+        CreateAccess = await AuthorizationService.AuthorizeAsync(authState.User, Permissions.Themes.Create);
+    }
+
+    private async Task<DataGridResponse<ThemeDto>> LoadAsync(DataGridRequest<ThemeDto> request)
+    {
+        var query = $"?startIndex={request.StartIndex}&length={request.Length}";
+        var filterOptions = request.Filters.Count > 0 ? new FilterOptions(request.Filters) : null;
+
+        var response = await HttpClient.GetFromJsonAsync<PagedData<ThemeDto>>(
+            $"api/admin/themes{query}&filterOptions={filterOptions}",
+            Constants.SerializerOptions
+        );
+
+        return new DataGridResponse<ThemeDto>(response!.Data, response.TotalLength);
+    }
+
+    private void CreateAsync() => Navigation.NavigateTo("/admin/system/themes/create");
+
+    private void EditAsync(ThemeDto theme) => Navigation.NavigateTo($"/admin/system/themes/{theme.Id}");
+
+    private async Task DeleteAsync(ThemeDto theme)
+    {
+        await AlertDialogService.ConfirmDangerAsync(
+            $"Deletion of theme {theme.Name}",
+            "Do you really want to delete this theme? This action cannot be undone",
+            async () =>
+            {
+                var response = await HttpClient.DeleteAsync($"api/admin/themes/{theme.Id}");
+                response.EnsureSuccessStatusCode();
+
+                await ToastService.SuccessAsync("Theme deletion", $"Successfully deleted theme {theme.Name}");
+
+                await Grid.RefreshAsync();
+            }
+        );
+    }
+}

Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor

@@ -0,0 +1,147 @@
+@page "/admin/system/themes/{Id:int}"
+
+@using Microsoft.AspNetCore.Authorization
+@using Moonlight.Shared
+@using LucideBlazor
+@using Moonlight.Frontend.Mappers
+@using Moonlight.Shared.Http.Requests.Themes
+@using Moonlight.Shared.Http.Responses.Themes
+@using ShadcnBlazor.Buttons
+@using ShadcnBlazor.Labels
+@using ShadcnBlazor.Cards
+@using ShadcnBlazor.Checkboxes
+@using ShadcnBlazor.Extras.Common
+@using ShadcnBlazor.Extras.Editors
+@using ShadcnBlazor.Extras.FormHandlers
+@using ShadcnBlazor.Extras.Toasts
+@using ShadcnBlazor.Inputs
+
+@attribute [Authorize(Policy = Permissions.Themes.Edit)]
+
+@inject HttpClient HttpClient
+@inject NavigationManager Navigation
+@inject ToastService ToastService
+
+<div class="flex flex-row justify-between">
+    <div class="flex flex-col">
+        <h1 class="text-xl font-semibold">Update theme</h1>
+        <div class="text-muted-foreground">
+            Update the theme
+        </div>
+    </div>
+    <div class="flex flex-row gap-x-1.5">
+        <Button Variant="ButtonVariant.Secondary">
+            <Slot>
+                <a href="/admin/system?tab=themes" @attributes="context">
+                    <ChevronLeftIcon/>
+                    Back
+                </a>
+            </Slot>
+        </Button>
+        <Button @onclick="SubmitAsync">
+            <CheckIcon/>
+            Continue
+        </Button>
+    </div>
+</div>
+
+<div class="mt-8">
+    <Card>
+        <CardContent>
+            <LazyLoader Load="LoadAsync">
+                <FormHandler @ref="Form" OnValidSubmit="OnSubmitAsync" Model="Request">
+                    <div class="flex flex-col gap-6">
+
+                        <FormValidationSummary/>
+
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
+                            <div class="col-span-1 grid gap-2">
+                                <Label for="themeName">Name</Label>
+                                <InputField
+                                    @bind-Value="Request.Name"
+                                    id="themeName"
+                                    placeholder="My cool theme"/>
+                            </div>
+
+                            <div class="col-span-1 grid gap-2">
+                                <Label for="themeVersion">Version</Label>
+                                <InputField
+                                    @bind-Value="Request.Version"
+                                    id="themeVersion"
+                                    Type="text"
+                                    placeholder="1.0.0"/>
+                            </div>
+
+                            <div class="col-span-1 grid gap-2">
+                                <Label for="themeAuthor">Author</Label>
+                                <InputField
+                                    @bind-Value="Request.Author"
+                                    id="themeAuthor"
+                                    Type="text"
+                                    placeholder="Your name"/>
+                            </div>
+
+                            <div class="col-span-1 grid gap-2">
+                                <Label for="themeAuthor">Is Enabled</Label>
+                                <Checkbox @bind-Value="Request.IsEnabled" DefaultValue="Request.IsEnabled"/>
+                            </div>
+                        </div>
+
+                        <style>
+                            .cm-editor {
+                                max-height: 400px;
+                                min-height: 400px;
+                            }
+                        </style>
+
+                        <div class="grid gap-2">
+                            <Label for="themeAuthor">CSS Content</Label>
+                            <Editor @ref="Editor" Language="EditorLanguage.None" InitialValue="@Request.CssContent"/>
+                        </div>
+                    </div>
+                </FormHandler>
+            </LazyLoader>
+        </CardContent>
+    </Card>
+</div>
+
+@code
+{
+    [Parameter] public int Id { get; set; }
+    
+    private UpdateThemeDto Request;
+    private ThemeDto Theme;
+    
+    private FormHandler Form;
+    private Editor Editor;
+    
+    private async Task LoadAsync(LazyLoader _)
+    {
+        var theme = await HttpClient.GetFromJsonAsync<ThemeDto>($"api/admin/themes/{Id}");
+
+        Theme = theme!;
+        Request = ThemeMapper.ToUpdate(Theme);
+    }
+
+    private async Task SubmitAsync()
+    {
+        Request.CssContent = await Editor.GetValueAsync();
+        await Form.SubmitAsync();
+    }
+
+    private async Task OnSubmitAsync()
+    {
+        await HttpClient.PatchAsJsonAsync(
+            $"/api/admin/themes/{Theme.Id}",
+            Request,
+            Constants.SerializerOptions
+        );
+
+        await ToastService.SuccessAsync(
+            "Theme update",
+            $"Successfully updated theme {Request.Name}"
+        );
+
+        Navigation.NavigateTo("/admin/system?tab=themes");
+    }
+}