From 51b5469e8590075951244b25dbd1a8d233369e3d Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Tue, 10 Mar 2026 13:12:50 -0700
Subject: [PATCH] Add page icons & gradient shimmer to all page headers

---
 webui/index.html       |  18 +++---
 webui/static/style.css | 122 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 118 insertions(+), 22 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 311e4525..2cc91205 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -238,7 +238,7 @@
                 <div class="dashboard-container">
                     <div class="dashboard-header">
                         <div class="header-text">
-                            <h2 class="header-title">System Dashboard</h2>
+                            <h2 class="header-title"><img src="/static/dashboard.png" class="page-header-icon" alt=""><span>System Dashboard</span></h2>
                             <p class="header-subtitle">Monitor your music system health and manage operations</p>
                         </div>
                         <div class="header-spacer"></div>
@@ -837,7 +837,7 @@
             <div class="page" id="sync-page">
                 <!-- Header -->
                 <div class="sync-header">
-                    <h2 class="sync-title">Playlist Sync</h2>
+                    <h2 class="sync-title"><img src="/static/sync.png" class="page-header-icon" alt=""><span>Playlist Sync</span></h2>
                     <p class="sync-subtitle">Synchronize your Spotify, Tidal, and YouTube playlists with your media
                         server</p>
                 </div>
@@ -1728,7 +1728,7 @@
                         <div class="downloads-header">
                             <div class="downloads-header-content">
                                 <div class="downloads-header-text">
-                                    <h2 class="downloads-title">🎵 Music Downloads</h2>
+                                    <h2 class="downloads-title"><img src="/static/search.png" class="page-header-icon" alt=""><span>Music Downloads</span></h2>
                                     <p class="downloads-subtitle">Search, discover, and download high-quality music</p>
                                 </div>
                                 <button id="toggle-download-manager-btn" class="toggle-manager-btn"
@@ -2017,7 +2017,7 @@
                 <div class="artists-search-state" id="artists-search-state">
                     <div class="artists-search-container">
                         <div class="artists-welcome-section">
-                            <h2 class="artists-welcome-title">🎵 Discover Artists</h2>
+                            <h2 class="artists-welcome-title"><img src="/static/discover.png" class="page-header-icon" alt=""><span>Discover Artists</span></h2>
                             <p class="artists-welcome-subtitle">Search for your favorite artists and explore their
                                 complete discography</p>
                         </div>
@@ -2141,7 +2141,7 @@
                     <div class="automations-container">
                         <div class="dashboard-header">
                             <div class="header-text">
-                                <h2 class="header-title">Automations</h2>
+                                <h2 class="header-title"><img src="/static/automation.png" class="page-header-icon" alt=""><span>Automations</span></h2>
                                 <p class="header-subtitle">Configure scheduled tasks and automated workflows</p>
                             </div>
                             <div class="header-spacer"></div>
@@ -2183,7 +2183,7 @@
                     <!-- Header -->
                     <div class="library-header">
                         <div class="library-header-content">
-                            <h2 class="library-title">📚 Music Library</h2>
+                            <h2 class="library-title"><img src="/static/library.png" class="page-header-icon" alt=""><span>Music Library</span></h2>
                             <p class="library-subtitle">Browse your complete music collection</p>
                         </div>
                         <div class="library-stats" id="library-stats">
@@ -3132,7 +3132,7 @@
             <!-- Settings Page -->
             <div class="page" id="settings-page">
                 <div class="page-header">
-                    <h2>Settings</h2>
+                    <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>
@@ -4125,7 +4125,7 @@
             <!-- Hydrabase Page (Dev Mode Only) -->
             <div class="page" id="hydrabase-page">
                 <div class="page-header">
-                    <h2><img src="/static/hydrabase.png?v=1" class="hydrabase-icon" style="width: 72px; height: 72px;"> Hydrabase</h2>
+                    <h2><img src="/static/hydrabase.png?v=1" class="page-header-icon" alt=""><span>Hydrabase</span></h2>
                     <div style="display: flex; align-items: center; gap: 12px;">
                         <span id="hydra-connection-status" style="color: #888; font-size: 13px;">Disconnected</span>
                         <button class="test-button" id="hydra-connect-btn" onclick="hydrabaseToggleConnection()">Connect</button>
@@ -4226,7 +4226,7 @@
             <!-- Header with staging info -->
             <div class="import-page-header">
                 <div class="import-page-title-row">
-                    <h1 class="import-page-title">Import Music</h1>
+                    <h1 class="import-page-title"><img src="/static/import.png" class="page-header-icon" alt=""><span>Import Music</span></h1>
                     <button class="import-page-refresh-btn" onclick="importPageRefreshStaging()" title="Re-scan staging folder">
                         <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M13.65 2.35A8 8 0 1 0 16 8h-2a6 6 0 1 1-1.76-4.24L10 6h6V0l-2.35 2.35z"/></svg>
                         Refresh
diff --git a/webui/static/style.css b/webui/static/style.css
index 50ec5923..a91a7fd1 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -1305,12 +1305,23 @@ body {
 }
 
 .page-header h2 {
-    font-family: 'SF Pro Display', -apple-system, sans-serif;
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 28px;
     font-weight: 700;
-    color: #ffffff;
     margin: 0;
-    letter-spacing: -0.5px;
+    letter-spacing: -0.3px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.page-header h2 > span {
+    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
 /* Dashboard Page Styling */
@@ -2512,11 +2523,22 @@ body {
 }
 
 .downloads-header .downloads-title {
-    font-family: 'Segoe UI', sans-serif;
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
     font-size: 28px;
     font-weight: 700;
-    color: #ffffff;
-    letter-spacing: 1px;
+    letter-spacing: -0.3px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.downloads-header .downloads-title > span {
+    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
 .downloads-header .downloads-subtitle {
@@ -5154,25 +5176,53 @@ body {
     gap: 5px;
 }
 
+/* Page header icon — shown beside all page titles */
+.page-header-icon {
+    width: 88px;
+    height: 88px;
+    object-fit: contain;
+    flex-shrink: 0;
+    filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
+    transition: transform 0.3s ease, filter 0.3s ease;
+}
+
+.page-header-icon:hover {
+    transform: scale(1.08) rotate(-3deg);
+    filter: drop-shadow(0 4px 14px rgba(var(--accent-rgb), 0.5));
+}
+
 .header-title {
     font-size: 30px;
     font-weight: 700;
     margin: 0 0 4px 0;
     line-height: 1.2;
     letter-spacing: -0.5px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.header-title > span {
     background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
     background-size: 200% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    animation: dashboard-title-shimmer 6s ease-in-out infinite;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
-@keyframes dashboard-title-shimmer {
+@keyframes page-title-shimmer {
     0%, 100% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
 }
 
+@media (max-width: 768px) {
+    .page-header-icon {
+        width: 56px;
+        height: 56px;
+    }
+}
+
 .header-subtitle {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.5);
@@ -6068,7 +6118,19 @@ body {
 .sync-title {
     font-size: 28px;
     font-weight: 700;
-    color: #ffffff;
+    letter-spacing: -0.3px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.sync-title > span {
+    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
 .sync-subtitle {
@@ -13967,9 +14029,21 @@ body {
 .artists-welcome-title {
     font-size: 36px;
     font-weight: 700;
-    color: #ffffff;
     margin-bottom: 12px;
     font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+    letter-spacing: -0.3px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.artists-welcome-title > span {
+    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
 .artists-welcome-subtitle {
@@ -15797,12 +15871,21 @@ body {
 .library-title {
     font-size: 28px;
     font-weight: 700;
-    color: #ffffff;
     margin: 0 0 8px 0;
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
+    letter-spacing: -0.3px;
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.library-title > span {
+    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
+    background-size: 200% 100%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
 .library-subtitle {
@@ -28533,8 +28616,21 @@ body {
 .import-page-title {
     font-size: 28px;
     font-weight: 700;
-    color: #fff;
     margin: 0;
+    letter-spacing: -0.3px;
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.import-page-title > span {
+    background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 50%, rgb(var(--accent-rgb)) 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: page-title-shimmer 6s ease-in-out infinite;
 }
 
 .import-page-refresh-btn {