From 669f59db15f411df58aa575712273d6864193098 Mon Sep 17 00:00:00 2001
From: Thomas Gander <thomas@silverhat.ca>
Date: Mon, 26 Jan 2026 08:15:53 -0700
Subject: [PATCH] Managed to move js styling to css file and inject it during
 load.

---
 Jellyfin.Plugin.MediaCleaner/Pages/home.css   | 27 ++++++++
 Jellyfin.Plugin.MediaCleaner/Pages/home.html  |  2 +-
 .../Pages/media_cleaner_table.js              | 67 ++++++++-----------
 Jellyfin.Plugin.MediaCleaner/Plugin.cs        |  5 ++
 4 files changed, 62 insertions(+), 39 deletions(-)
 create mode 100644 Jellyfin.Plugin.MediaCleaner/Pages/home.css

diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.css b/Jellyfin.Plugin.MediaCleaner/Pages/home.css
new file mode 100644
index 0000000..9409dd8
--- /dev/null
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.css
@@ -0,0 +1,27 @@
+table {
+    border: 1px solid;
+    border-collapse: collapse;
+}
+
+td, th {
+    border: 1px solid;
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+}
+
+.links {
+    background-color: #0f0f0f;
+    border: 1px solid;
+    padding: 0.8rem 1.8rem;
+    font-size: 1.2rem;
+    color: #ffffff;
+    text-decoration: none;
+    cursor: pointer;
+    line-height: inherit;
+    vertical-align: baseline;
+    transition: background-color 0.3s ease;
+}
+
+.links:hover {
+  background-color: #2a2a2a;
+}
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/home.html b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
index 1bd9e08..2e439f3 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
@@ -4,7 +4,7 @@
 		<div class="content-primary">
             <div id="loading">Loading...</div>
             <div id="page" style="visibility: hidden;">
-                <button class="links" data-target="#configurationpage?name=Settings">Settings</button>
+                <button class="links" data-target="configurationpage?name=Settings">Settings</button>
                 <h2>Media Cleaner</h2>
 
                 <h3 id="moviesTitle"></h3>
diff --git a/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js b/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
index 6a8a6a2..10995f5 100644
--- a/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/media_cleaner_table.js
@@ -88,52 +88,30 @@ document.addEventListener('pageshow', async () => {
         }
     };
 
-    const styleTables = () => {
-        const tables = document.querySelectorAll("table");
-        const cells = document.querySelectorAll("th, td");
+    // const styleTables = () => {
+    //     const tables = document.querySelectorAll("table");
+    //     const cells = document.querySelectorAll("th, td");
 
-        tables.forEach(table => {
-            table.style.border = "1px solid";
-            table.style.borderCollapse = "collapse";
-        })
+    //     tables.forEach(table => {
+    //         table.style.border = "1px solid";
+    //         table.style.borderCollapse = "collapse";
+    //     })
 
-        cells.forEach(cell => {
-            cell.style.border = "1px solid";
-            cell.style.padding = "0.5rem 0.75rem";
-            cell.style.textAlign = "left"
-        });
-    };
+    //     cells.forEach(cell => {
+    //         cell.style.border = "1px solid";
+    //         cell.style.padding = "0.5rem 0.75rem";
+    //         cell.style.textAlign = "left"
+    //     });
+    // };
 
-    const styleLinks = () => {
+    const addClickHandlersToLinks = () => {
         const linkbtns = document.querySelectorAll("button.links")
         linkbtns.forEach(btn => {
-            btn.style.background = "#0f0f0f";
-            btn.style.border = '1px solid';
-            btn.style.padding = '0.8rem 1.8rem';
-            btn.style.fontSize = "1.2rem"
-            btn.style.color = "white";
-            btn.style.textDecoration = 'none';
-            btn.style.cursor = 'pointer';
-            btn.style.lineHeight = 'inherit';
-            btn.style.verticalAlign = 'baseline';
-            btn.style.transition = 'background 0.3s ease';
-
-            const hoverBg = '#2a2a2a';
-            const normalBg = btn.style.background;
-
             btn.addEventListener("click", () => {
                 const target = btn.dataset.target;
                 if (!target) return;
                 window.location.hash = target;
             })
-
-            btn.addEventListener('mouseenter', () => {
-                btn.style.background = hoverBg;
-            });
-
-            btn.addEventListener('mouseleave', () => {
-                btn.style.background = normalBg;
-            });
         })
     }
 
@@ -146,6 +124,19 @@ document.addEventListener('pageshow', async () => {
         loadingElement.style.visibility = "hidden";
     }
 
+    const fetchCss = async () => {
+        const response = await fetch('/web/configurationpage?name=home.css')
+
+        if(!response.ok){
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const css = await response.text();
+        const styles = document.createElement('style');
+        styles.textContent = css;
+        document.head.appendChild(styles);
+    }
+
     moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
     seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();
 
@@ -153,7 +144,7 @@ document.addEventListener('pageshow', async () => {
     var moviesInfo = await getMediaCleanerMovieInfo();
     var seriesInfo = await getMediaCleanerSeriesInfo();
     populateTables();
-    styleTables();
-    styleLinks();
+    addClickHandlersToLinks();
     showElements();
+    fetchCss();
 });
diff --git a/Jellyfin.Plugin.MediaCleaner/Plugin.cs b/Jellyfin.Plugin.MediaCleaner/Plugin.cs
index 5e4271d..14bbe7e 100644
--- a/Jellyfin.Plugin.MediaCleaner/Plugin.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Plugin.cs
@@ -59,6 +59,11 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
             {
                 Name = "media_cleaner_table.js",
                 EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.media_cleaner_table.js", GetType().Namespace),
+            },
+            new PluginPageInfo
+            {
+                Name = "home.css",
+                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.css", GetType().Namespace),
             }
         ];
     }