From 353bda10df2f8248d2e449d633a043253c70b666 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Mon, 16 Feb 2026 17:29:41 +0100
Subject: [PATCH] Enhance configuration page: add section titles and improve
 input handling for seasonal themes

---
 .../Configuration/configPage.html             | 54 +++++++++++--------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
index 576947b..68bcb82 100644
--- a/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
+++ b/Jellyfin.Plugin.Seasonals/Configuration/configPage.html
@@ -36,6 +36,7 @@
                 <form id="SeasonalsConfigForm">
                     <!-- BASIC Tab -->
                     <div id="seasonals-basic" class="seasonals-tab-content">
+                        <h2 class="sectionTitle">Main Plugin Settings</h2>
                         <div class="checkboxContainer checkboxContainer-withDescription">
                             <label class="emby-checkbox-label">
                                 <input id="SeasonalsIsEnabled" name="SeasonalsIsEnabled" type="checkbox" is="emby-checkbox" />
@@ -104,9 +105,10 @@
 
                     <!-- Advanced Tab -->
                     <div id="seasonals-advanced" class="seasonals-tab-content" style="display: none;">
-                         <p>Configure specific settings for each seasonal theme below.</p>
-                         <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
-                         <details>
+                        <h2 class="sectionTitle">Configure specific settings for each seasonal theme</h2>
+                        <!-- <p>Configure specific settings for each seasonal theme below.</p> -->
+                        <p>All symbol count settings add this number in addition to the standard 12 symbols (if additional symbols is enabled).</p>
+                        <details>
                             <summary>Autumn</summary>
                             <div class="checkboxContainer checkboxContainer-withDescription">
                                 <label class="emby-checkbox-label">
@@ -636,10 +638,10 @@
                 border-bottom: 2px solid #00a4dc !important;
             }
 
-            /* Disabled options in selects */
+            /* Disabled options in selects
             select option:disabled {
                 color: #a3a3a3 !important;
-            }
+            } */
         </style>
         <script>
             function showSeasonalsTab(tabId, btn) {
@@ -672,7 +674,7 @@
                     var startMonth = data ? (data.StartMonth !== undefined ? data.StartMonth : (data.startMonth !== undefined ? data.startMonth : 1)) : 1;
                     var endDay = data ? (data.EndDay !== undefined ? data.EndDay : (data.endDay !== undefined ? data.endDay : 1)) : 1;
                     var endMonth = data ? (data.EndMonth !== undefined ? data.EndMonth : (data.endMonth !== undefined ? data.endMonth : 1)) : 1;
-                    var theme = data ? (data.Theme || data.theme || 'snowflakes') : 'snowflakes';
+                    var theme = data ? (data.Theme || data.theme || 'none') : 'none';
 
                     div.innerHTML = `
                          <div class="seasonal-rule-header">
@@ -686,44 +688,44 @@
                          <div class="seasonal-rule-content">
                             <div class="inputContainer" style="margin:0;">
                                 <label class="inputLabel">Name</label>
-                                <input is="emby-input" class="rule-name" value="${name}" onchange="this.closest('.seasonal-rule').querySelector('.rule-title').innerText = this.value" />
+                                <input is="emby-input" class="rule-name" onchange="this.closest('.seasonal-rule').querySelector('.rule-title').innerText = this.value" />
                             </div>
                             <div class="date-range-group">
                                 <div class="inputContainer" style="margin:0;">
                                     <label class="inputLabel">Start Day</label>
-                                    <input is="emby-input" type="number" class="rule-start-day" value="${startDay}" min="1" max="31" />
+                                    <input is="emby-input" type="number" class="rule-start-day" min="1" max="31" />
                                 </div>
                                 <div class="inputContainer" style="margin:0;">
                                     <label class="inputLabel">Month</label>
-                                    <input is="emby-input" type="number" class="rule-start-month" value="${startMonth}" min="1" max="12" />
+                                    <input is="emby-input" type="number" class="rule-start-month" min="1" max="12" />
                                 </div>
                             </div>
                             
                             <div class="date-range-group">
                                 <div class="inputContainer" style="margin:0;">
                                     <label class="inputLabel">End Day</label>
-                                    <input is="emby-input" type="number" class="rule-end-day" value="${endDay}" min="1" max="31" />
+                                    <input is="emby-input" type="number" class="rule-end-day" min="1" max="31" />
                                 </div>
                                 <div class="inputContainer" style="margin:0;">
                                     <label class="inputLabel">Month</label>
-                                    <input is="emby-input" type="number" class="rule-end-month" value="${endMonth}" min="1" max="12" />
+                                    <input is="emby-input" type="number" class="rule-end-month" min="1" max="12" />
                                 </div>
                             </div>
 
                             <div class="selectContainer" style="margin:0;">
                                 <label class="selectLabel">Theme</label>
                                 <select is="emby-select" class="rule-theme" style="width: 100%;">
-                                    <option value="none" ${theme === 'none' ? 'selected' : ''}>None</option>
-                                    <option value="snowflakes" ${theme === 'snowflakes' ? 'selected' : ''}>Snowflakes</option>
-                                    <option value="snowfall" ${theme === 'snowfall' ? 'selected' : ''}>Snowfall</option>
-                                    <option value="snowstorm" ${theme === 'snowstorm' ? 'selected' : ''}>Snowstorm</option>
-                                    <option value="fireworks" ${theme === 'fireworks' ? 'selected' : ''}>Fireworks</option>
-                                    <option value="halloween" ${theme === 'halloween' ? 'selected' : ''}>Halloween</option>
-                                    <option value="hearts" ${theme === 'hearts' ? 'selected' : ''}>Hearts</option>
-                                    <option value="christmas" ${theme === 'christmas' ? 'selected' : ''}>Christmas</option>
-                                    <option value="santa" ${theme === 'santa' ? 'selected' : ''}>Santa</option>
-                                    <option value="autumn" ${theme === 'autumn' ? 'selected' : ''}>Autumn</option>
-                                    <option value="easter" ${theme === 'easter' ? 'selected' : ''}>Easter</option>
+                                    <option value="none">None</option>
+                                    <option value="snowflakes">Snowflakes</option>
+                                    <option value="snowfall">Snowfall</option>
+                                    <option value="snowstorm">Snowstorm</option>
+                                    <option value="fireworks">Fireworks</option>
+                                    <option value="halloween">Halloween</option>
+                                    <option value="hearts">Hearts</option>
+                                    <option value="christmas">Christmas</option>
+                                    <option value="santa">Santa</option>
+                                    <option value="autumn">Autumn</option>
+                                    <option value="easter">Easter</option>
                                 </select>
                             </div>
                          </div>
@@ -731,6 +733,14 @@
 
                     container.appendChild(div);
 
+                    // Set values programmatically to ensure they are correctly populated
+                    div.querySelector('.rule-name').value = name;
+                    div.querySelector('.rule-start-day').value = startDay;
+                    div.querySelector('.rule-start-month').value = startMonth;
+                    div.querySelector('.rule-end-day').value = endDay;
+                    div.querySelector('.rule-end-month').value = endMonth;
+                    div.querySelector('.rule-theme').value = theme;
+
                     // Bind events
                     div.querySelector('.btn-remove').addEventListener('click', function() {
                         div.remove();