From 4dfefc70dfa67b6d1b41a9901cbe0cd9a63e5247 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Fri, 13 Mar 2026 16:29:02 -0700
Subject: [PATCH] =?UTF-8?q?Polish=20settings=20page=20styling=20=E2=80=94?=
 =?UTF-8?q?=20premium=20header,=20toggle=20switches,=20refined=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webui/index.html       |  37 +++++----
 webui/static/script.js |   1 +
 webui/static/style.css | 176 +++++++++++++++++++++++++++++------------
 3 files changed, 148 insertions(+), 66 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 662df1d7..bb6a7a4f 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -3284,10 +3284,15 @@
 
             <!-- Settings Page -->
             <div class="page" id="settings-page">
-                <div class="page-header">
-                    <h2><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
-                    <button class="save-button" onclick="document.getElementById('save-settings').click()">💾 Save
-                        Settings</button>
+                <div class="dashboard-header">
+                    <div class="header-text">
+                        <h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
+                        <p class="header-subtitle">Configure services, downloads, and preferences</p>
+                    </div>
+                    <div class="header-spacer"></div>
+                    <div class="header-actions">
+                        <button class="save-button" onclick="document.getElementById('save-settings').click()">Save Settings</button>
+                    </div>
                 </div>
                 <div class="settings-content">
                     <!-- Two Column Layout -->
@@ -3559,7 +3564,7 @@
                                         <label>API Timeout (seconds):</label>
                                         <input type="number" id="jellyfin-timeout" placeholder="120" min="15"
                                             max="300" value="120">
-                                        <small style="color: #888; display: block; margin-top: 5px;">Timeout for
+                                        <small class="settings-hint">Timeout for
                                             bulk API requests during database sync (15-300s). Increase if your
                                             Jellyfin server is slow to respond.</small>
                                     </div>
@@ -3716,14 +3721,14 @@
                                         <label>Search Timeout (seconds):</label>
                                         <input type="number" id="soulseek-search-timeout" placeholder="60" min="15"
                                             max="300" value="60">
-                                        <small style="color: #888; display: block; margin-top: 5px;">How long to search
+                                        <small class="settings-hint">How long to search
                                             for tracks (15-300 seconds)</small>
                                     </div>
                                     <div class="form-group">
                                         <label>Search Timeout Buffer (seconds):</label>
                                         <input type="number" id="soulseek-search-timeout-buffer" placeholder="15"
                                             min="5" max="60" value="15">
-                                        <small style="color: #888; display: block; margin-top: 5px;">Extra time to wait
+                                        <small class="settings-hint">Extra time to wait
                                             for late results (5-60 seconds)</small>
                                     </div>
                                     <div class="form-actions" style="margin-top: 8px;">
@@ -4033,7 +4038,7 @@
                                     <label>Album Path Template:</label>
                                     <input type="text" id="template-album-path"
                                         placeholder="$albumartist/$albumartist - $album/$track - $title">
-                                    <small style="color: #888;">Variables: $albumartist, $artist, $artistletter, $album, $title,
+                                    <small class="settings-hint">Variables: $albumartist, $artist, $artistletter, $album, $title,
                                         $track, $disc, $year, $quality (filename only)</small>
                                 </div>
 
@@ -4041,14 +4046,14 @@
                                     <label>Single Path Template:</label>
                                     <input type="text" id="template-single-path"
                                         placeholder="$artist/$artist - $title/$title">
-                                    <small style="color: #888;">Variables: $artist, $artistletter, $title, $album, $year, $quality (filename only)</small>
+                                    <small class="settings-hint">Variables: $artist, $artistletter, $title, $album, $year, $quality (filename only)</small>
                                 </div>
 
                                 <div class="form-group">
                                     <label>Playlist Path Template:</label>
                                     <input type="text" id="template-playlist-path"
                                         placeholder="$playlist/$artist - $title">
-                                    <small style="color: #888;">Variables: $playlist, $artist, $artistletter, $title, $year, $quality (filename only)</small>
+                                    <small class="settings-hint">Variables: $playlist, $artist, $artistletter, $title, $year, $quality (filename only)</small>
                                 </div>
 
                                 <div class="form-group">
@@ -4057,7 +4062,7 @@
                                         <option value="Disc">Disc (e.g., Disc 1/)</option>
                                         <option value="CD">CD (e.g., CD 1/)</option>
                                     </select>
-                                    <small style="color: #888;">Label used for auto-created disc subfolders on multi-disc albums.</small>
+                                    <small class="settings-hint">Label used for auto-created disc subfolders on multi-disc albums.</small>
                                 </div>
 
                                 <div class="form-group">
@@ -4065,7 +4070,7 @@
                                         style="background: #666;">
                                         🔄 Reset to Defaults
                                     </button>
-                                    <small style="color: #888; display: block; margin-top: 8px;">
+                                    <small class="settings-hint">
                                         Restores original path structure. Your downloads will be organized like before.
                                     </small>
                                 </div>
@@ -4177,7 +4182,7 @@
                                         </select>
                                         <div class="accent-preview-swatch" id="accent-preview-swatch"></div>
                                     </div>
-                                    <small style="color: #888;">Changes the accent color across the entire UI</small>
+                                    <small class="settings-hint">Changes the accent color across the entire UI</small>
                                 </div>
                                 <div class="form-group" id="custom-color-group" style="display:none;">
                                     <label>Custom Color:</label>
@@ -4193,14 +4198,14 @@
                                         <option value="equalizer">Equalizer</option>
                                         <option value="none">None</option>
                                     </select>
-                                    <small style="color: #888;">Audio-reactive visualizer on the sidebar edge when music is playing</small>
+                                    <small class="settings-hint">Audio-reactive visualizer on the sidebar edge when music is playing</small>
                                 </div>
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="particles-enabled" checked>
                                         Background Particles
                                     </label>
-                                    <small style="color: #888;">Animated particle effects behind each page. Disable to reduce GPU usage.</small>
+                                    <small class="settings-hint">Animated particle effects behind each page. Disable to reduce GPU usage.</small>
                                 </div>
                             </div>
 
@@ -4340,7 +4345,7 @@
 
                     <!-- Save Button -->
                     <div class="settings-actions">
-                        <button class="save-button" id="save-settings">💾 Save Settings</button>
+                        <button class="save-button" id="save-settings">Save Settings</button>
                     </div>
                 </div>
             </div>
diff --git a/webui/static/script.js b/webui/static/script.js
index 71e3d755..78ef96ac 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -751,6 +751,7 @@ function initAccentColorListeners() {
     if (particlesCheckbox) {
         particlesCheckbox.addEventListener('change', () => {
             applyParticlesSetting(particlesCheckbox.checked);
+            // Server save handled by the global debouncedAutoSaveSettings listener on all checkboxes
         });
     }
 }
diff --git a/webui/static/style.css b/webui/static/style.css
index 97bb92fb..597638a6 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -1634,12 +1634,13 @@ body {
     width: 100%;
     display: flex;
     flex-direction: column;
+    padding: 0 4px;
 }
 
 .settings-columns {
     display: flex;
-    gap: 24px;
-    margin-bottom: 32px;
+    gap: 20px;
+    margin-bottom: 24px;
 }
 
 .settings-left-column,
@@ -1649,7 +1650,7 @@ body {
     min-width: 380px;
     display: flex;
     flex-direction: column;
-    gap: 18px;
+    gap: 16px;
 }
 
 /* Glassmorphic cards */
@@ -1679,57 +1680,63 @@ body {
 
 .settings-group:hover {
     border-color: rgba(255, 255, 255, 0.12);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--accent-rgb), 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.07);
-    transform: translateY(-1px);
+    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 16px rgba(var(--accent-rgb), 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.07);
 }
 
 .settings-group h3 {
     font-family: 'SF Pro Display', -apple-system, sans-serif;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 700;
-    color: #ffffff;
+    color: rgba(255, 255, 255, 0.95);
     margin-bottom: 14px;
-    margin-top: 8px;
+    margin-top: 6px;
     padding-left: 10px;
     padding-right: 5px;
     padding-bottom: 10px;
-    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
     position: relative;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 }
 
 .settings-group h3::after {
     content: '';
     position: absolute;
-    bottom: -2px;
+    bottom: -1px;
     left: 10px;
-    width: 50px;
-    height: 2px;
+    width: 40px;
+    height: 1px;
     background: linear-gradient(90deg,
-            rgba(var(--accent-rgb), 0.8) 0%,
+            rgba(var(--accent-rgb), 0.7) 0%,
             transparent 100%);
 }
 
 /* API Service Frames - upgraded inner cards */
 .api-service-frame {
-    background: linear-gradient(135deg, rgba(40, 40, 40, 0.5), rgba(25, 25, 25, 0.7));
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 10px;
     padding: 12px 14px 14px 14px;
-    margin-bottom: 12px;
+    margin-bottom: 10px;
     transition: all 0.2s ease;
 }
 
 .api-service-frame:hover {
     border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.03);
 }
 
 .service-title {
     font-family: 'SF Pro Text', -apple-system, sans-serif;
-    font-size: 12px;
+    font-size: 11px;
     font-weight: 700;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     margin-top: 0;
-    letter-spacing: 0.2px;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
 }
 
 .spotify-title {
@@ -1876,6 +1883,17 @@ body {
     margin-bottom: 12px;
 }
 
+.form-group small,
+.settings-group small,
+.settings-hint {
+    display: block;
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.35);
+    line-height: 1.4;
+    margin-top: 5px;
+    padding-left: 1px;
+}
+
 .form-group {
     option {
         color: black;
@@ -1889,45 +1907,54 @@ body {
 .form-group label {
     display: block;
     font-size: 11px;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.8);
-    margin-bottom: 4px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 5px;
+    letter-spacing: 0.2px;
 }
 
-.form-group input,
+.form-group input:not([type="checkbox"]):not([type="color"]),
 .form-group select {
     width: 100%;
-    padding: 8px 12px;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
+    padding: 9px 12px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
     color: #ffffff;
     font-size: 12px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.25s ease;
+}
+
+.form-group input:not([type="checkbox"]):hover,
+.form-group select:hover {
+    border-color: rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.06);
 }
 
-.form-group input:focus,
+.form-group input:not([type="checkbox"]):not([type="color"]):focus,
 .form-group select:focus {
     outline: none;
-    border-color: rgba(var(--accent-rgb), 0.6);
-    background: rgba(var(--accent-rgb), 0.05);
-    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 16px rgba(var(--accent-rgb), 0.08);
+    border-color: rgba(var(--accent-rgb), 0.5);
+    background: rgba(var(--accent-rgb), 0.06);
+    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1), 0 0 12px rgba(var(--accent-rgb), 0.06);
 }
 
-.form-group input::placeholder {
-    color: rgba(255, 255, 255, 0.3);
+.form-group input:not([type="checkbox"])::placeholder {
+    color: rgba(255, 255, 255, 0.25);
 }
 
-/* Checkbox Styling */
+/* Checkbox Styling — toggle switch */
 .checkbox-label {
     display: flex !important;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     cursor: pointer;
     font-size: 12px !important;
+    font-weight: 500;
     margin-bottom: 0 !important;
-    padding: 4px 0;
+    padding: 6px 0;
     transition: color 0.2s ease;
+    color: rgba(255, 255, 255, 0.8);
 }
 
 .checkbox-label:hover {
@@ -1935,11 +1962,43 @@ body {
 }
 
 .checkbox-label input[type="checkbox"] {
-    width: 16px !important;
-    height: 16px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 34px !important;
+    height: 18px !important;
+    min-height: 0 !important;
     margin: 0 !important;
-    accent-color: rgb(var(--accent-light-rgb));
+    padding: 0 !important;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 18px;
     cursor: pointer;
+    position: relative;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+}
+
+.checkbox-label input[type="checkbox"]::before {
+    content: '';
+    position: absolute;
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    top: 2px;
+    background: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: all 0.3s ease;
+}
+
+.checkbox-label input[type="checkbox"]:checked {
+    background: rgba(var(--accent-rgb), 0.5);
+    border-color: rgba(var(--accent-rgb), 0.5);
+}
+
+.checkbox-label input[type="checkbox"]:checked::before {
+    transform: translateX(16px);
+    background: rgb(var(--accent-light-rgb));
 }
 
 /* Accent Color Selector */
@@ -2033,9 +2092,19 @@ body {
     font-size: 11px;
     font-weight: 600;
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border: none;
+    transition: all 0.2s ease;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     white-space: nowrap;
+    background: rgba(255, 255, 255, 0.06);
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.test-button:hover,
+.detect-button:hover {
+    background: rgba(var(--accent-rgb), 0.15);
+    border-color: rgba(var(--accent-rgb), 0.3);
+    color: rgb(var(--accent-light-rgb));
+    transform: translateY(-1px);
 }
 
 /* ===== QUALITY PROFILE STYLES ===== */
@@ -2325,21 +2394,28 @@ body {
 /* Save Button - gradient with glow */
 .save-button {
     background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
-    border: none;
-    border-radius: 16px;
+    border: 1.5px solid rgba(255, 255, 255, 0.15);
+    border-radius: 12px;
     color: #000000;
     font-size: 14px;
     font-weight: 700;
-    padding: 12px 32px;
+    padding: 10px 28px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
+    box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
+    letter-spacing: 0.3px;
+    backdrop-filter: blur(12px);
+    position: relative;
 }
 
 .save-button:hover {
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), #22e968);
-    transform: translateY(-1px);
-    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.4);
+    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
+    transform: translateY(-2px);
+    box-shadow: 0 6px 28px rgba(var(--accent-rgb), 0.5), 0 3px 10px rgba(0, 0, 0, 0.25);
+}
+
+.save-button:active {
+    transform: translateY(0) scale(0.97);
 }
 
 .settings-actions {