Updated styling for the configuration page

Moved styles to a global.css stylesheet. Also added basic validation with a transition
Refactor of plugin structure to make more sense compared to the default template
2026-02-16 17:47:26 -07:00 · 2026-02-16 16:08:12 -07:00 · 2026-02-16 14:08:15 -07:00 · 2026-02-14 16:18:11 -07:00 · 2026-02-14 16:01:06 -07:00
15 changed files with 287 additions and 194 deletions
--- a/Jellyfin.Plugin.MediaCleaner/Configuration/PluginConfiguration.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Configuration/PluginConfiguration.cs
@@ -3,25 +3,28 @@ using System.Collections.ObjectModel;
 using MediaBrowser.Controller.Entities;
 using MediaBrowser.Model.Plugins;

-namespace Jellyfin.Plugin.MediaCleaner.Configuration;
+namespace Jellyfin.Plugin.MediaCleaner;

 /// <summary>
 /// Plugin configuration.
 /// </summary>
-public class PluginConfiguration : BasePluginConfiguration
+public class Configuration : BasePluginConfiguration
 {
    /// <summary>
-    /// Initializes a new instance of the <see cref="PluginConfiguration"/> class.
+    /// Gets or sets the http and port address for your Radarr instance.
    /// </summary>
-    public PluginConfiguration()
-    {
-    }
+    public string RadarrAddress { get; set; } = string.Empty;

    /// <summary>
    /// Gets or sets the api for your Radarr instance.
    /// </summary>
    public string RadarrAPIKey { get; set; } = string.Empty;

+    /// <summary>
+    /// Gets or sets the http and port address for your Sonarr instance.
+    /// </summary>
+    public string SonarrAddress { get; set; } = string.Empty;
+
    /// <summary>
    /// Gets or sets the api for your Sonarr instance.
    /// </summary>
--- a/Jellyfin.Plugin.MediaCleaner/Configuration/settings.html
+++ b/Jellyfin.Plugin.MediaCleaner/Configuration/settings.html
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <title>Media Cleaner</title>
-</head>
-<body>
-    <div id="MediaCleanerConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox">
-        <div data-role="content">
-            <div class="content-primary">
-                <form id="MediaCleanerConfigForm">
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
-                        <input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
-                        <div class="fieldDescription">The api key used by your radarr instance</div>
-                    </div>
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
-                        <input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
-                        <div class="fieldDescription">The api key used by your sonarr instance</div>
-                    </div>
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="StaleMediaCutoff">Stale Media Cutoff</label>
-                        <input id="StaleMediaCutoff" name="StaleMediaCutoff" type="number" is="emby-input" style="width: 20%;"/>
-                        <div class="fieldDescription">How many days to wait before marking files as stale</div>
-                    </div>
-                    <div class="checkboxContainer checkboxContainer-withDescription">
-                        <label class="emby-checkbox-label">
-                            <input id="DebugMode" name="DebugMode" type="checkbox" is="emby-checkbox" />
-                            <span>Debug Mode</span>
-                        </label>
-                    </div>
-                    <!-- <div class="selectContainer">
-                        <label class="selectLabel" for="Options">Several Options</label>
-                        <select is="emby-select" id="Options" name="Options" class="emby-select-withcolor emby-select">
-                            <option id="optOneOption" value="OneOption">One Option</option>
-                            <option id="optAnotherOption" value="AnotherOption">Another Option</option>
-                        </select>
-                    </div>
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="AnInteger">An Integer</label>
-                        <input id="AnInteger" name="AnInteger" type="number" is="emby-input" min="0" />
-                        <div class="fieldDescription">A Description</div>
-                    </div>
-                    <div class="checkboxContainer checkboxContainer-withDescription">
-                        <label class="emby-checkbox-label">
-                            <input id="TrueFalseSetting" name="TrueFalseCheckBox" type="checkbox" is="emby-checkbox" />
-                            <span>A Checkbox</span>
-                        </label>
-                    </div>
-                    <div class="inputContainer">
-                        <label class="inputLabel inputLabelUnfocused" for="AString">A String</label>
-                        <input id="AString" name="AString" type="text" is="emby-input" />
-                        <div class="fieldDescription">Another Description</div>
-                    </div> -->
-                    <div>
-                        <button is="emby-button" type="submit" class="raised button-submit block emby-button">
-                            <span>Save</span>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <script type="text/javascript">
-            var MediaCleanerConfig = {
-                pluginUniqueId: 'fef007a8-3e8f-4aa8-a22e-486a387f4192'
-            };
-
-            document.querySelector('#MediaCleanerConfigPage')
-                .addEventListener('pageshow', function() {
-                    Dashboard.showLoadingMsg();
-                    ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
-                        // document.querySelector('#Options').value = config.Options;
-                        // document.querySelector('#AnInteger').value = config.AnInteger;
-                        // document.querySelector('#TrueFalseSetting').checked = config.TrueFalseSetting;
-                        // document.querySelector('#AString').value = config.AString;
-                        document.querySelector('#RadarrAPIKey').value = config.RadarrAPIKey;
-                        document.querySelector('#SonarrAPIKey').value = config.SonarrAPIKey;
-                        document.querySelector('#StaleMediaCutoff').value = config.StaleMediaCutoff;
-                        document.querySelector('#DebugMode').checked = config.DebugMode;
-                        Dashboard.hideLoadingMsg();
-                    });
-                });
-
-            document.querySelector('#MediaCleanerConfigForm')
-                .addEventListener('submit', function(e) {
-                Dashboard.showLoadingMsg();
-                ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
-                    // config.Options = document.querySelector('#Options').value;
-                    // config.AnInteger = document.querySelector('#AnInteger').value;
-                    // config.TrueFalseSetting = document.querySelector('#TrueFalseSetting').checked;
-                    // config.AString = document.querySelector('#AString').value;
-                    config.RadarrAPIKey = document.querySelector('#RadarrAPIKey').value;
-                    config.SonarrAPIKey = document.querySelector('#SonarrAPIKey').value;
-                    config.StaleMediaCutoff = document.querySelector('#StaleMediaCutoff').value;
-                    config.DebugMode = document.querySelector('#DebugMode').checked;
-                    ApiClient.updatePluginConfiguration(MediaCleanerConfig.pluginUniqueId, config).then(function (result) {
-                        Dashboard.processPluginConfigurationUpdateResult(result);
-                    });
-                });
-
-                e.preventDefault();
-                return false;
-            });
-        </script>
-    </div>
-</body>
-</html>
--- a/Jellyfin.Plugin.MediaCleaner/Controllers/StateController.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Controllers/StateController.cs
@@ -2,7 +2,6 @@ using Jellyfin.Plugin.MediaCleaner.Data;
 using Jellyfin.Plugin.MediaCleaner;
 using Jellyfin.Plugin.MediaCleaner.Models;
 using Microsoft.AspNetCore.Mvc;
-using Jellyfin.Plugin.MediaCleaner.Configuration;

 namespace Jellyfin.Plugin.MediaCleaner.Controllers;

@@ -10,7 +9,7 @@ namespace Jellyfin.Plugin.MediaCleaner.Controllers;
 public class StateController(MediaCleanerState state) : Controller
 {
    private readonly MediaCleanerState _state = state;
-    private static PluginConfiguration Configuration =>
+    private static Configuration Configuration =>
            Plugin.Instance!.Configuration;

    [HttpGet("getSeriesInfo")]
--- a/Jellyfin.Plugin.MediaCleaner/Helpers/LoggingHelper.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Helpers/LoggingHelper.cs
@@ -1,12 +1,5 @@
 using System;
-using System.Collections.Generic;
-using System.Collections.ObjectModel;
 using System.Diagnostics.CodeAnalysis;
-using System.Runtime.CompilerServices;
-using Jellyfin.Plugin.MediaCleaner.Configuration;
-using Jellyfin.Plugin.MediaCleaner.Models;
-using Jellyfin.Plugin.MediaCleaner.ScheduledTasks;
-using MediaBrowser.Controller.Entities;
 using Microsoft.Extensions.Logging;

 namespace Jellyfin.Plugin.MediaCleaner.Helpers;
@@ -30,6 +23,6 @@ public class LoggingHelper(ILogger logger)
        _logger.LogInformation(message, args);
    }

-    private static PluginConfiguration Configuration =>
+    private static Configuration Configuration =>
        Plugin.Instance!.Configuration;
 }
--- a/Jellyfin.Plugin.MediaCleaner/Helpers/MovieHelper.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Helpers/MovieHelper.cs
@@ -1,8 +1,6 @@
 using System;
 using System.Linq;
-using System.Threading;
 using Jellyfin.Database.Implementations.Entities;
-using Jellyfin.Plugin.MediaCleaner.Configuration;
 using MediaBrowser.Controller.Entities;
 using Microsoft.Extensions.Logging;

@@ -12,7 +10,7 @@ public class MovieHelper(ILogger logger)
 {
    private readonly LoggingHelper _loggingHelper = new(logger);

-    private static PluginConfiguration Configuration =>
+    private static Configuration Configuration =>
        Plugin.Instance!.Configuration;

    public bool IsMovieStale(BaseItem movie)
--- a/Jellyfin.Plugin.MediaCleaner/Helpers/SeriesHelper.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Helpers/SeriesHelper.cs
@@ -1,10 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
-using System.Threading;
 using Jellyfin.Database.Implementations.Entities;
-using Jellyfin.Database.Implementations.Entities.Libraries;
-using Jellyfin.Plugin.MediaCleaner.Configuration;
 using MediaBrowser.Controller.Entities;
 using Microsoft.Extensions.Logging;

@@ -15,7 +12,7 @@ public class SeriesHelper(ILogger logger)
 {
    private readonly LoggingHelper _loggingHelper = new(logger);

-    private static PluginConfiguration Configuration =>
+    private static Configuration Configuration =>
        Plugin.Instance!.Configuration;

    private List<BaseItem> ProcessEpisodes(IReadOnlyCollection<BaseItem> episodes)
--- a/Jellyfin.Plugin.MediaCleaner/Jellyfin.Plugin.MediaCleaner.csproj
+++ b/Jellyfin.Plugin.MediaCleaner/Jellyfin.Plugin.MediaCleaner.csproj
@@ -20,8 +20,6 @@
  </ItemGroup>

  <ItemGroup>
-    <None Remove="Configuration\settings.html" />
-    <EmbeddedResource Include="Configuration\settings.html" />
    <None Remove="Pages\*" />
    <EmbeddedResource Include="Pages\*" />
  </ItemGroup>
--- a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.html
@@ -0,0 +1,74 @@
+<div id="MediaCleanerConfigPage" data-role="page" class="page type-interior pluginConfigurationPage" data-require="emby-input,emby-button,emby-select,emby-checkbox" data-controller="__plugin/configuration.js">
+    <div data-role="content">
+        <div class="content-primary">
+            <link rel="stylesheet" href="/web/configurationpage?name=global.css" />
+            <form id="MediaCleanerConfigForm">
+                <h2>Media Cleaner Configuration</h2>
+
+                <h3>Management Configuration</h3>
+
+                <div class="inlineContainer">
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="RadarrAPIKey">Radarr API Key</label>
+                        <input id="RadarrAPIKey" name="RadarrAPIKey" type="text" is="emby-input" />
+                        <div class="fieldDescription">The api key used by your radarr instance</div>
+                    </div>
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="RadarrAddress">Radarr Address (http:port)</label>
+                        <input id="RadarrAddress" name="RadarrAddress" type="text" is="emby-input" />
+                        <div class="fieldDescription">The address and port of your radarr instance.</div>
+                    </div>
+                    <div class="inputContainer">
+                        <button id="RadarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
+                            <span>Test</span>
+                        </button>
+                        <div class="validation" id="RadarrConnectionValidation" hidden>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="inlineContainer">
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="SonarrAPIKey">Sonarr API Key</label>
+                        <input id="SonarrAPIKey" name="SonarrAPIKey" type="text" is="emby-input" />
+                        <div class="fieldDescription">The api key used by your sonarr instance</div>
+                    </div>
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="SonarrAddress">Sonarr Address (http:port)</label>
+                        <input id="SonarrAddress" name="SonarrAddress" type="text" is="emby-input" />
+                        <div class="fieldDescription">The address and port of your sonarr instance.</div>
+                    </div>
+                    <div class="inputContainer">
+                        <button id="SonarrTestConnectionButton" is="emby-button" type="button" class="raised button-submit block emby-button">
+                            <span>Test</span>
+                        </button>
+                        <div class="validation" id="SonarrConnectionValidation" hidden>
+                        </div>
+                    </div>
+                </div>
+
+                <h3>General Settings</h3>
+                <div class="inlineContainer">
+                    <div class="inputContainer">
+                        <label class="inputLabel inputLabelUnfocused" for="StaleMediaCutoff">Stale Media Cutoff</label>
+                        <input id="StaleMediaCutoff" class="medium-width" name="StaleMediaCutoff" type="number" is="emby-input"/>
+                        <div class="fieldDescription">How many days to wait before marking files as stale</div>
+                    </div>
+
+                    <div class="checkboxContainer checkboxContainer-withDescription">
+                        <label class="emby-checkbox-label">
+                            <input id="DebugMode" name="DebugMode" type="checkbox" is="emby-checkbox" />
+                            <span>Debug Mode</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block emby-button">
+                        <span>Save</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
--- a/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/configuration.js
@@ -0,0 +1,93 @@
+var MediaCleanerConfig = {
+    pluginUniqueId: 'fef007a8-3e8f-4aa8-a22e-486a387f4192'
+};
+
+const testConnectionSonarr = () => {
+    var apiKeyElement = document.getElementById('SonarrAPIKey');
+    var addressElement = document.getElementById('SonarrAddress');
+    var validationElement = document.getElementById('SonarrConnectionValidation');
+
+    validateConnection(apiKeyElement, addressElement, validationElement);
+}
+
+const testConnectionRadarr = () => {
+    var apiKeyElement = document.getElementById('RadarrAPIKey');
+    var addressElement = document.getElementById('RadarrAddress');
+    var validationElement = document.getElementById('RadarrConnectionValidation');
+
+    validateConnection(apiKeyElement, addressElement, validationElement);
+}
+
+const validateConnection = (apiKeyElement, addressElement, validationElement) => {
+    // Refactor this to a method called show element?
+    validationElement.removeAttribute('hidden');
+    validationElement.style.opacity = '1';
+    console.log("Api Key: ", apiKeyElement.value);
+    console.log("Address: ", addressElement.value);
+
+    var success = false;
+
+    if(success){
+        validationElement.style.color = 'Green';
+        validationElement.innerText = "Success!"
+    }
+    else {
+        validationElement.style.color = 'Red';
+        validationElement.innerText = "Failed!"
+    }
+
+    setTimeout(() => startFadeOut(validationElement, 50), 1000);
+}
+
+const startFadeOut = (element, interval = 100) => {
+  const timer = setInterval(() => {
+    let currentOpacity = parseFloat(getComputedStyle(element).opacity);
+    if (isNaN(currentOpacity)) currentOpacity = 1;
+    if (currentOpacity > 0) {
+      currentOpacity = Math.max(0, currentOpacity - 0.05);
+      element.style.opacity = currentOpacity.toString();
+    } else {
+      clearInterval(timer);
+      element.setAttribute('hidden', '');
+    }
+  }, interval);
+};
+
+document.querySelector('#RadarrTestConnectionButton')
+    .addEventListener('click', testConnectionRadarr);
+
+document.querySelector('#SonarrTestConnectionButton')
+    .addEventListener('click', testConnectionSonarr);
+
+document.querySelector('#MediaCleanerConfigPage')
+    .addEventListener('pageshow', function() {
+        Dashboard.showLoadingMsg();
+        ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
+            document.querySelector('#RadarrAPIKey').value = config.RadarrAPIKey;
+            document.querySelector('#RadarrAddress').value = config.RadarrAddress;
+            document.querySelector('#SonarrAPIKey').value = config.SonarrAPIKey;
+            document.querySelector('#SonarrAddress').value = config.SonarrAddress;
+            document.querySelector('#StaleMediaCutoff').value = config.StaleMediaCutoff;
+            document.querySelector('#DebugMode').checked = config.DebugMode;
+            Dashboard.hideLoadingMsg();
+        });
+    });
+
+document.querySelector('#MediaCleanerConfigForm')
+    .addEventListener('submit', function(e) {
+    Dashboard.showLoadingMsg();
+    ApiClient.getPluginConfiguration(MediaCleanerConfig.pluginUniqueId).then(function (config) {
+        config.RadarrAPIKey = document.querySelector('#RadarrAPIKey').value;
+        config.RadarrAddress = document.querySelector('#RadarrAddress').value;
+        config.SonarrAPIKey = document.querySelector('#SonarrAPIKey').value;
+        config.SonarrAddress = document.querySelector('#SonarrAddress').value;
+        config.StaleMediaCutoff = document.querySelector('#StaleMediaCutoff').value;
+        config.DebugMode = document.querySelector('#DebugMode').checked;
+        ApiClient.updatePluginConfiguration(MediaCleanerConfig.pluginUniqueId, config).then(function (result) {
+            Dashboard.processPluginConfigurationUpdateResult(result);
+        });
+    });
+
+    e.preventDefault();
+    return false;
+});
--- a/Jellyfin.Plugin.MediaCleaner/Pages/global.css
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/global.css
@@ -0,0 +1,71 @@
+.content-primary > * {
+    box-sizing: border-box;
+}
+
+.inlineContainer {
+    display: inline-flex;
+    margin-bottom: 1.8em;
+    flex-direction: column;
+    /* Would be nice to figure out why 50% doesn't work. */
+    width: 49%;
+}
+
+.inlineContainer > * {
+    padding: 0 0.5rem;
+}
+
+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;
+}
+
+.actions-cell {
+    text-align: center;
+}
+
+.validation {
+  border: 1px solid;
+  border-radius: 0.25rem;
+  margin-top: 1rem;
+  padding: 1rem;
+  opacity: 1;
+}
+
+.max-width{
+    width: 100%;
+}
+
+.medium-width {
+    width: 50%;
+}
+
+.small-width {
+    width: 20%;
+}
+
+.xsmall-width {
+    width: 10%;
+}
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.css
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.css
@@ -1,31 +0,0 @@
-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;
-}
-
-.actions-cell {
-    text-align: center;
-}
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.html
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.html
@@ -2,10 +2,10 @@
     data-controller="__plugin/home.js">
 	<div data-role="content">
 		<div class="content-primary">
-            <link rel="stylesheet" href="/web/configurationpage?name=home.css" />
+            <link rel="stylesheet" href="/web/configurationpage?name=global.css" />
            <div id="loading">Loading...</div>
            <div id="homepage" style="visibility: hidden;">
-                <button class="links" data-target="configurationpage?name=Settings">Settings</button>
+                <button class="links" data-target="configurationpage?name=Configuration">Configuration</button>
                <h2>Media Cleaner</h2>

                <h3 id="moviesTitle"></h3>
--- a/Jellyfin.Plugin.MediaCleaner/Pages/home.js
+++ b/Jellyfin.Plugin.MediaCleaner/Pages/home.js
@@ -62,6 +62,28 @@ const getMediaCleanerMoviesTitle = async () => {
    return response.json();
 };

+const selectedMovies = new Set();
+const selectedTvShows = new Set();
+
+const createCheckbox = (mediaInfo = {}, state = []) => {
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.dataset.mediaInfo = JSON.stringify(mediaInfo) || '';
+
+  checkbox.addEventListener('change', (e) => {
+    const mediaInfo = checkbox.dataset.mediaInfo || '(no info)';
+    if (checkbox.checked) {
+      state.add(mediaInfo);
+    } else {
+      state.delete(mediaInfo);
+    }
+    // Update UI or state — use console.log for debugging
+    console.log('selected:', Array.from(state));
+  });
+
+  return checkbox;
+};
+
 const populateTables = async () => {
    var moviesInfo = await getMediaCleanerMovieInfo();
    var seriesInfo = await getMediaCleanerSeriesInfo();
@@ -78,9 +100,7 @@ const populateTables = async () => {
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = moviesInfo[i].Name;
-            // Will need to be enabled once radarr and sonarr integration is enabled.
-            // Maybe change this to an element to remove hard coding.
-            cell2.innerHTML = "<input type=\"checkbox\" disabled />";
+            cell2.appendChild(createCheckbox(moviesInfo[i], selectedMovies));
            cell2.className = "actions-cell";
        }
    }
@@ -100,9 +120,7 @@ const populateTables = async () => {
            var cell3 = row.insertCell(2);
            cell1.innerHTML = seriesInfo[i].Name;
            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
-            // Will need to be enabled once radarr and sonarr integration is enabled.
-            // Maybe change this to an element to remove hard coding.
-            cell3.innerHTML = "<input type=\"checkbox\" disabled />";
+            cell3.appendChild(createCheckbox(seriesInfo[i], selectedTvShows));
            cell3.className = "actions-cell";
        }
    }
--- a/Jellyfin.Plugin.MediaCleaner/Plugin.cs
+++ b/Jellyfin.Plugin.MediaCleaner/Plugin.cs
@@ -1,21 +1,17 @@
 using System;
 using System.Collections.Generic;
 using System.Globalization;
-using Jellyfin.Plugin.MediaCleaner.Configuration;
-using Jellyfin.Plugin.MediaCleaner.Data;
 using MediaBrowser.Common.Configuration;
 using MediaBrowser.Common.Plugins;
-using MediaBrowser.Controller.Entities;
 using MediaBrowser.Model.Plugins;
 using MediaBrowser.Model.Serialization;
-using Microsoft.Extensions.DependencyInjection;

 namespace Jellyfin.Plugin.MediaCleaner;

 /// <summary>
 /// The main plugin.
 /// </summary>
-public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
+public class Plugin : BasePlugin<Configuration>, IHasWebPages
 {
    /// <summary>
    /// Initializes a new instance of the <see cref="Plugin"/> class.
@@ -46,8 +42,13 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
        [
            new PluginPageInfo
            {
-                Name = "Settings",
-                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Configuration.settings.html", GetType().Namespace),
+                Name = "configuration.js",
+                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.configuration.js", GetType().Namespace),
+            },
+            new PluginPageInfo
+            {
+                Name = "Configuration",
+                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.configuration.html", GetType().Namespace),
            },
            new PluginPageInfo
            {
@@ -62,8 +63,8 @@ public class Plugin : BasePlugin<PluginConfiguration>, IHasWebPages
            },
            new PluginPageInfo
            {
-                Name = "home.css",
-                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.home.css", GetType().Namespace),
+                Name = "global.css",
+                EmbeddedResourcePath = string.Format(CultureInfo.InvariantCulture, "{0}.Pages.global.css", GetType().Namespace),
            }
        ];
    }
--- a/Jellyfin.Plugin.MediaCleaner/StaleMediaScanner.cs
+++ b/Jellyfin.Plugin.MediaCleaner/StaleMediaScanner.cs
@@ -1,25 +1,12 @@
 using System;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.Data.Common;
-using System.Diagnostics;
 using System.Linq;
-using System.Net;
-using System.Reflection.Metadata.Ecma335;
-using System.Threading;
 using System.Threading.Tasks;
 using Jellyfin.Data.Enums;
-using Jellyfin.Database.Implementations.Entities;
-using Jellyfin.Database.Implementations.Entities.Libraries;
-using Jellyfin.Plugin.MediaCleaner.Configuration;
 using Jellyfin.Plugin.MediaCleaner.Helpers;
-using Jellyfin.Plugin.MediaCleaner;
 using Jellyfin.Plugin.MediaCleaner.Models;
 using MediaBrowser.Controller.Entities;
 using MediaBrowser.Controller.Library;
-using MediaBrowser.Model.Tasks;
-using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Logging;

 namespace Jellyfin.Plugin.MediaCleaner;
Author	SHA1	Message	Date
Thomas Gander	9348b33ed6	Updated styling for the configuration page	2026-02-16 17:47:26 -07:00
Thomas Gander	462a2beea1	Moved styles to a global.css stylesheet. Also added basic validation with a transition	2026-02-16 16:08:12 -07:00
Thomas Gander	a720bba7a7	Refactor of plugin structure to make more sense compared to the default template	2026-02-16 14:08:15 -07:00
Thomas Gander	61e868bfa2	Added settings for radarr and sonarr addresses	2026-02-14 16:18:11 -07:00
Thomas Gander	bc7c95af08	Added basic state with selections	2026-02-14 16:01:06 -07:00