Updated mooncore styles. Adjusted theme editor and theme loading. Changed versions Upgraded mooncore.blazor.flyonui. Made moonlight flyonui/daisyui compatible

Moonlight.Client/UI/App.razor

@@ -1,4 +1,4 @@
-@using Moonlight.Client.UI.Layouts
+@using Moonlight.Client.UI.Shell
 @using Moonlight.Client.Services
 @using Moonlight.Client.UI.Partials
 

Moonlight.Client/UI/Components/ThemeEditor.razor

@@ -7,11 +7,6 @@
             <span>Base Colors</span>
         </div>
 
-        <div class="flex flex-row items-center">
-            <ColorSelector @bind-Value="Theme.ColorBackground"/>
-            <span class="ms-2.5">Background</span>
-        </div>
-
         <div class="flex flex-row items-center">
             <ColorSelector @bind-Value="Theme.ColorBaseContent"/>
             <span class="ms-2.5">Base Content</span>
@@ -22,21 +17,11 @@
             <span class="ms-2.5">Base 100</span>
         </div>
 
-        <div class="flex flex-row items-center">
-            <ColorSelector @bind-Value="Theme.ColorBase150"/>
-            <span class="ms-2.5">Base 150</span>
-        </div>
-
         <div class="flex flex-row items-center">
             <ColorSelector @bind-Value="Theme.ColorBase200"/>
             <span class="ms-2.5">Base 200</span>
         </div>
 
-        <div class="flex flex-row items-center">
-            <ColorSelector @bind-Value="Theme.ColorBase250"/>
-            <span class="ms-2.5">Base 250</span>
-        </div>
-
         <div class="flex flex-row items-center">
             <ColorSelector @bind-Value="Theme.ColorBase300"/>
             <span class="ms-2.5">Base 300</span>
@@ -78,6 +63,15 @@
                 <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorAccentContent"/>
                 <span class="ms-2.5">Accent Content</span>
             </div>
+            
+            <div class="col-span-1 flex flex-row items-center">
+                <ColorSelector @bind-Value="Theme.ColorNeutral"/>
+                <span class="ms-2.5">Neutral</span>
+            </div>
+            <div class="col-span-1 flex flex-row items-center">
+                <ColorSelector Icon="icon-type" @bind-Value="Theme.ColorNeutralContent"/>
+                <span class="ms-2.5">Neutral Content</span>
+            </div>
 
             <div class="col-span-1 flex flex-row items-center">
                 <ColorSelector @bind-Value="Theme.ColorInfo"/>

Moonlight.Client/UI/Shell/AppHeader.razor

@@ -0,0 +1,30 @@
+@using MoonCore.Blazor.FlyonUi.Drawers
+
+@inject DrawerService DrawerService
+
+<nav class="navbar grow-0 bg-base-100 p-2">
+    <div class="w-full md:flex md:items-center md:gap-2">
+        <div class="flex items-center justify-between">
+            <div class="navbar-start items-center justify-between max-md:w-full">
+                <button @onclick="LaunchSidebarAsync" class="btn btn-square btn-text text-base-content md:hidden!">
+                    <i class="icon-menu text-xl"></i>
+                </button>
+            </div>
+        </div>
+        <div id="default-navbar-collapse" class="md:navbar-end collapse hidden grow basis-full max-md:w-full" >
+            <div class="avatar p-1">
+                <div class="size-8.5 rounded-full">
+                    <img src="/_content/Moonlight.Client/img/pfp_placeholder.png" alt="Avatar" />
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>
+
+@code
+{
+    private async Task LaunchSidebarAsync()
+    {
+        await DrawerService.LaunchAsync<SidebarDrawer>(unfocusHide: true);
+    }
+}

Moonlight.Client/UI/Shell/MainLayout.razor

@@ -0,0 +1,22 @@
+@using MoonCore.Blazor.FlyonUi.Drawers
+@using MoonCore.Blazor.FlyonUi.Modals
+@using MoonCore.Blazor.FlyonUi.Toasts
+
+@inherits LayoutComponentBase
+
+<div class="flex flex-row h-screen">
+    <aside class="drawer hidden md:flex shadow-none relative max-w-64 h-full"
+           role="dialog" tabindex="-1">
+        <SidebarComponent />
+    </aside>
+    <div class="w-full h-full flex flex-col">
+        <AppHeader />
+        <div class="flex-1 min-h-0 p-8 overflow-y-auto">
+            @Body
+            
+            <ToastLauncher />
+            <ModalLauncher />
+            <DrawerLauncher />
+        </div>
+    </div>
+</div>

Moonlight.Client/UI/Shell/SidebarComponent.razor

@@ -0,0 +1,151 @@
+@using System.Security.Claims
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Moonlight.Client.Interfaces
+@using Moonlight.Client.Models
+
+@inherits MoonCore.Blazor.FlyonUi.Drawers.DrawerBase
+
+@inject NavigationManager Navigation
+@inject IEnumerable<ISidebarItemProvider> SidebarItemProviders
+@inject IAuthorizationService AuthorizationService
+
+@implements IDisposable
+
+@{
+    var url = new Uri(Navigation.Uri);
+}
+
+<div class="drawer-header">
+    <div class="flex items-center gap-3">
+        <div class="avatar">
+            <img src="/_content/Moonlight.Client/svg/logo.svg" alt="Logo" class="!w-8"/>
+        </div>
+        <h3 class="drawer-title text-xl font-semibold">Moonlight v2.1</h3>
+    </div>
+</div>
+<div class="drawer-body !px-2.5">
+    <ul class="menu menu-sm p-0 bg-transparent">
+        @foreach (var group in Items)
+        {
+            if (!string.IsNullOrEmpty(group.Key))
+            {
+                <li>
+                    <div class="divider">@group.Key</div>
+                </li>
+            }
+
+            foreach (var item in group.Value)
+            {
+                var isActive = item.RequiresExactMatch
+                    ? url.LocalPath == item.Path
+                    : url.LocalPath.StartsWith(item.Path);
+
+                <li>
+                    <a href="@item.Path" class="@(isActive ? "menu-active" : "")">
+                        <i class="@item.Icon text-lg"></i>
+                        @item.Name
+                    </a>
+                </li>
+            }
+        }
+    </ul>
+</div>
+<div class="drawer-footer !p-2.5">
+    <div
+        class="flex w-full justify-between items-center px-2 py-2.5 gap-6 rounded-lg text-left text-base/6 font-medium sm:py-2 sm:text-sm/5 text-base-content">
+        <div class="flex min-w-0 items-center gap-3">
+            <span class="inline-grid shrink-0 align-middle">
+                <img class="h-8 rounded-full"
+                     src="/_content/Moonlight.Client/img/pfp_placeholder.png"
+                     alt=""/>
+            </span>
+            <div class="min-w-0">
+                <div class="block truncate text-sm/5 font-medium text-base-content">
+                    @Username
+                </div>
+                <div class="block truncate text-xs/5 font-normal text-base-content/40">
+                    @Email
+                </div>
+            </div>
+        </div>
+        <a href="#" @onclick:preventDefault @onclick="LogoutAsync" class="flex items-center">
+            <i class="icon-log-out text-lg"></i>
+        </a>
+    </div>
+</div>
+
+@code
+{
+    [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
+ 
+    private Dictionary<string, SidebarItem[]> Items = new();
+
+    private string Username;
+    private string Email;
+    private ClaimsPrincipal Identity;
+    
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthState;
+        
+        Identity = authState.User;
+        Username = Identity.FindFirst(ClaimTypes.Name)!.Value;
+        Email = Identity.FindFirst(ClaimTypes.Email)!.Value;
+        
+        var sidebarItems = new List<SidebarItem>();
+
+        foreach (var provider in SidebarItemProviders)
+            provider.ModifySidebar(sidebarItems);
+
+        var itemsToRemove = new List<SidebarItem>();
+        
+        foreach (var sidebarItem in sidebarItems)
+        {
+            if(string.IsNullOrEmpty(sidebarItem.Policy))
+                continue;
+
+            var authResult = await AuthorizationService.AuthorizeAsync(Identity, sidebarItem.Policy);
+            
+            if(authResult.Succeeded)
+                continue;
+            
+            itemsToRemove.Add(sidebarItem);
+        }
+
+        foreach (var sidebarItem in itemsToRemove)
+            sidebarItems.Remove(sidebarItem);
+
+        Items = sidebarItems
+            .GroupBy(x => x.Group ?? "")
+            .OrderByDescending(x => string.IsNullOrEmpty(x.Key))
+            .ToDictionary(x => x.Key, x => x.OrderBy(y => y.Priority).ToArray());
+        
+        Navigation.LocationChanged += OnNavigated;
+    }
+
+    private async void OnNavigated(object? sender, LocationChangedEventArgs e)
+    {
+        // No async void without try catch to prevent hard app crashes when async task fails
+        
+        try
+        {
+            await InvokeAsync(StateHasChanged);
+        }
+        catch (Exception)
+        {
+            // ignored
+        }
+    }
+
+    private Task LogoutAsync()
+    {
+        Navigation.NavigateTo("/api/auth/logout", true);
+        return Task.CompletedTask;
+    }
+
+    public void Dispose()
+    {
+        Navigation.LocationChanged -= OnNavigated;
+    }
+}

Moonlight.Client/UI/Shell/SidebarDrawer.razor

@@ -0,0 +1,31 @@
+@inherits MoonCore.Blazor.FlyonUi.Drawers.DrawerBase
+
+@inject NavigationManager Navigation
+
+@implements IDisposable
+
+<SidebarComponent />
+
+@code
+{
+    protected override void OnInitialized()
+    {
+        Navigation.LocationChanged += OnLocationChanged;
+    }
+
+    private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
+    {
+        try
+        {
+            await CloseAsync();
+        }
+        catch (Exception)
+        {
+            // Ignored
+        }
+    }
+
+    public void Dispose()
+    {
+    }
+}

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

@@ -68,12 +68,8 @@
     {
         return new ApplicationTheme()
         {
-            ColorBackground = "#0c0f18",
-
             ColorBase100 = "#1e2b47",
-            ColorBase150 = "#1a2640",
             ColorBase200 = "#101a2e",
-            ColorBase250 = "#0f1729",
             ColorBase300 = "#0c1221",
 
             ColorBaseContent = "#dde5f5",