From 4187f9da4ede132109888bebbab3e05fb7c1a5c3 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Mon, 19 Jan 2026 10:55:34 +0100
Subject: [PATCH] Implemented frontend configuration service and dynamic theme
 reloading integration. Updated sidebar to display dynamic application name.

---
 .../wwwroot/index.html                        | 23 ++++++++++++------
 .../Models/FrontendConfiguration.cs           |  9 +++++++
 .../Services/FrontendService.cs               | 24 +++++++++++++++++++
 Moonlight.Frontend/Startup/Startup.Base.cs    |  3 +++
 .../UI/Admin/Views/Sys/Themes/Create.razor    |  4 ++++
 .../UI/Admin/Views/Sys/Themes/Update.razor    |  4 ++++
 .../UI/Shared/Partials/AppSidebar.razor       | 12 ++++++++--
 7 files changed, 70 insertions(+), 9 deletions(-)
 create mode 100644 Moonlight.Frontend/Models/FrontendConfiguration.cs
 create mode 100644 Moonlight.Frontend/Services/FrontendService.cs

diff --git a/Hosts/Moonlight.Frontend.Host/wwwroot/index.html b/Hosts/Moonlight.Frontend.Host/wwwroot/index.html
index 38cfa01e..053a3377 100644
--- a/Hosts/Moonlight.Frontend.Host/wwwroot/index.html
+++ b/Hosts/Moonlight.Frontend.Host/wwwroot/index.html
@@ -12,8 +12,9 @@
     <script type="importmap"></script>
     
     <script>
-        window.themeLoader = {
+        window.frontendConfig = {
             STYLE_TAG_ID: 'theme-variables',
+            configuration: {},
 
             applyTheme: function(cssContent) {
                 // Find or create the style tag
@@ -29,25 +30,33 @@
                 styleTag.textContent = cssContent;
             },
 
-            loadInitialThemeSync: function() {
+            reloadConfiguration: function (){
                 try {
                     const xhr = new XMLHttpRequest();
                     xhr.open('GET', '/api/frontend/config', false);
                     xhr.send(null);
 
                     if (xhr.status === 200) {
-                        const config = JSON.parse(xhr.responseText);
-                        
-                        this.applyTheme(config.themeCss);
-                        document.title = config.name;
+                        this.configuration = JSON.parse(xhr.responseText);
                     }
                 } catch (error) {
                     console.error('Failed to load initial theme:', error);
                 }
+            },
+            
+            getConfiguration: function (){
+                return this.configuration;
+            },
+
+            reload: function () {
+                this.reloadConfiguration();
+
+                document.title = this.configuration.name;
+                this.applyTheme(this.configuration.themeCss);
             }
         };
 
-        window.themeLoader.loadInitialThemeSync();
+        window.frontendConfig.reload();
     </script>
 </head>
 
diff --git a/Moonlight.Frontend/Models/FrontendConfiguration.cs b/Moonlight.Frontend/Models/FrontendConfiguration.cs
new file mode 100644
index 00000000..aa960211
--- /dev/null
+++ b/Moonlight.Frontend/Models/FrontendConfiguration.cs
@@ -0,0 +1,9 @@
+using System.Text.Json.Serialization;
+
+namespace Moonlight.Frontend.Models;
+
+public class FrontendConfiguration
+{
+    [JsonPropertyName("name")]
+    public string Name { get; set; }
+}
\ No newline at end of file
diff --git a/Moonlight.Frontend/Services/FrontendService.cs b/Moonlight.Frontend/Services/FrontendService.cs
new file mode 100644
index 00000000..268c2783
--- /dev/null
+++ b/Moonlight.Frontend/Services/FrontendService.cs
@@ -0,0 +1,24 @@
+using Microsoft.JSInterop;
+using Moonlight.Frontend.Models;
+
+namespace Moonlight.Frontend.Services;
+
+public class FrontendService
+{
+    private readonly IJSRuntime JsRuntime;
+
+    public FrontendService(IJSRuntime jsRuntime)
+    {
+        JsRuntime = jsRuntime;
+    }
+    
+    public async Task<FrontendConfiguration> GetConfigurationAsync()
+    {
+        return await JsRuntime.InvokeAsync<FrontendConfiguration>("frontendConfig.getConfiguration");
+    }
+
+    public async Task ReloadAsync()
+    {
+        await JsRuntime.InvokeVoidAsync("frontendConfig.reload");
+    }
+}
\ No newline at end of file
diff --git a/Moonlight.Frontend/Startup/Startup.Base.cs b/Moonlight.Frontend/Startup/Startup.Base.cs
index 35c542ab..ffa54244 100644
--- a/Moonlight.Frontend/Startup/Startup.Base.cs
+++ b/Moonlight.Frontend/Startup/Startup.Base.cs
@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.Extensions.DependencyInjection;
 using Moonlight.Frontend.Implementations;
 using Moonlight.Frontend.Interfaces;
+using Moonlight.Frontend.Services;
 using Moonlight.Frontend.UI;
 using ShadcnBlazor;
 using ShadcnBlazor.Extras;
@@ -22,5 +23,7 @@ public partial class Startup
         builder.Services.AddShadcnBlazorExtras();
 
         builder.Services.AddSingleton<ISidebarProvider, SidebarProvider>();
+
+        builder.Services.AddScoped<FrontendService>();
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
index f49da5ea..9f12a2e5 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Create.razor
@@ -3,6 +3,7 @@
 @using Microsoft.AspNetCore.Authorization
 @using Moonlight.Shared
 @using LucideBlazor
+@using Moonlight.Frontend.Services
 @using Moonlight.Shared.Http.Requests.Themes
 @using ShadcnBlazor.Buttons
 @using ShadcnBlazor.Labels
@@ -18,6 +19,7 @@
 @inject HttpClient HttpClient
 @inject NavigationManager Navigation
 @inject ToastService ToastService
+@inject FrontendService FrontendService
 
 <div class="flex flex-row justify-between">
     <div class="flex flex-col">
@@ -129,6 +131,8 @@
             $"Successfully created theme {Request.Name}"
         );
 
+        await FrontendService.ReloadAsync();
+
         Navigation.NavigateTo("/admin/system?tab=themes");
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
index adb6111f..2de60d7e 100644
--- a/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
+++ b/Moonlight.Frontend/UI/Admin/Views/Sys/Themes/Update.razor
@@ -4,6 +4,7 @@
 @using Moonlight.Shared
 @using LucideBlazor
 @using Moonlight.Frontend.Mappers
+@using Moonlight.Frontend.Services
 @using Moonlight.Shared.Http.Requests.Themes
 @using Moonlight.Shared.Http.Responses.Themes
 @using ShadcnBlazor.Buttons
@@ -21,6 +22,7 @@
 @inject HttpClient HttpClient
 @inject NavigationManager Navigation
 @inject ToastService ToastService
+@inject FrontendService FrontendService
 
 <div class="flex flex-row justify-between">
     <div class="flex flex-col">
@@ -142,6 +144,8 @@
             $"Successfully updated theme {Request.Name}"
         );
 
+        await FrontendService.ReloadAsync();
+
         Navigation.NavigateTo("/admin/system?tab=themes");
     }
 }
\ No newline at end of file
diff --git a/Moonlight.Frontend/UI/Shared/Partials/AppSidebar.razor b/Moonlight.Frontend/UI/Shared/Partials/AppSidebar.razor
index 2112841d..6aca26b3 100644
--- a/Moonlight.Frontend/UI/Shared/Partials/AppSidebar.razor
+++ b/Moonlight.Frontend/UI/Shared/Partials/AppSidebar.razor
@@ -1,11 +1,14 @@
-@using Microsoft.AspNetCore.Authorization
+@using System.Text.Json
+@using Microsoft.AspNetCore.Authorization
 @using Microsoft.AspNetCore.Components.Authorization
 @using Moonlight.Frontend.Interfaces
 @using Moonlight.Frontend.Models
+@using Moonlight.Frontend.Services
 @using ShadcnBlazor.Sidebars
 
 @inject NavigationManager Navigation
 @inject IAuthorizationService AuthorizationService
+@inject FrontendService FrontendService
 @inject IEnumerable<ISidebarProvider> Providers
 
 @implements IDisposable
@@ -21,7 +24,7 @@
                 <SidebarMenuButton>
                     <a href="/" class="flex flex-row items-center">
                         <img alt="Logo" src="/_content/Moonlight.Frontend/logo.svg" class="size-6"/>
-                        <span class="ms-2.5 text-lg font-semibold">Moonlight</span>
+                        <span class="ms-2.5 text-lg font-semibold">@FrontendConfiguration?.Name</span>
                     </a>
                 </SidebarMenuButton>
             </SidebarMenuItem>
@@ -74,6 +77,7 @@
     [CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
     
     private readonly List<SidebarItem> Items = new();
+    private FrontendConfiguration? FrontendConfiguration;
 
     protected override async Task OnInitializedAsync()
     {
@@ -98,6 +102,10 @@
         }
         
         Navigation.LocationChanged += OnLocationChanged;
+
+        FrontendConfiguration = await FrontendService.GetConfigurationAsync();
+
+        Console.WriteLine(JsonSerializer.Serialize(FrontendConfiguration));
     }
 
     private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)