From 8e7e84de5cdfb34d99b9aa7adbf8bbe6da747520 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Sun, 11 May 2025 20:41:57 +0200
Subject: [PATCH] Adjust theme preview message to include theme & mode

---
 .../src/main/frontend/components/theming/ThemeSelector.tsx  | 5 ++++-
 gameyfin/src/main/frontend/util/utils.ts                    | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/gameyfin/src/main/frontend/components/theming/ThemeSelector.tsx b/gameyfin/src/main/frontend/components/theming/ThemeSelector.tsx
index 52919a7..5f46679 100644
--- a/gameyfin/src/main/frontend/components/theming/ThemeSelector.tsx
+++ b/gameyfin/src/main/frontend/components/theming/ThemeSelector.tsx
@@ -5,6 +5,7 @@ import {themes} from "Frontend/theming/themes";
 import {Theme} from "Frontend/theming/theme";
 import ThemePreview from "Frontend/components/theming/ThemePreview";
 import {UserPreferencesEndpoint} from "Frontend/generated/endpoints";
+import {toTitleCase} from "Frontend/util/utils";
 
 export function ThemeSelector() {
 
@@ -56,7 +57,9 @@ export function ThemeSelector() {
                     )))
                 }
             </div>
-            <p className="text-2xl font-semibold mt-8">Preview</p>
+            <p className="text-2xl font-semibold mt-8">Preview for theme
+                "{toTitleCase(theme!.replaceAll("-", " "))}"
+            </p>
             <Divider/>
             <div className="flex flex-row gap-8 items-baseline">
                 <div className="flex flex-row gap-4">
diff --git a/gameyfin/src/main/frontend/util/utils.ts b/gameyfin/src/main/frontend/util/utils.ts
index f96747c..83e4f39 100644
--- a/gameyfin/src/main/frontend/util/utils.ts
+++ b/gameyfin/src/main/frontend/util/utils.ts
@@ -24,6 +24,12 @@ export function roleToRoleName(role: string) {
     return role.charAt(0).toUpperCase() + role.slice(1);
 }
 
+export function toTitleCase(str: string) {
+    return str.toLowerCase().split(' ').map((word: string) => {
+        return (word.charAt(0).toUpperCase() + word.slice(1));
+    }).join(' ');
+}
+
 export function roleToColor(role: string) {
     switch (role) {
         case "ROLE_SUPERADMIN":