From c7f2f95450e86741739019f5c2b0b0da9d7b2b3f Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Tue, 6 Jan 2026 22:53:21 -0800
Subject: [PATCH] Update to SoulSync v1.3 with YouTube engine and fixes

Bump version to 1.3 and update the version info modal to highlight the new YouTube download engine, Docker and system reliability fixes, and general improvements. Update the web UI to display v1.3 and apply minor formatting and accessibility improvements throughout index.html.
---
 web_server.py    |  84 ++---
 webui/index.html | 935 +++++++++++++++++++++++++++++------------------
 2 files changed, 610 insertions(+), 409 deletions(-)

diff --git a/web_server.py b/web_server.py
index 77312d14..f8c47016 100644
--- a/web_server.py
+++ b/web_server.py
@@ -8636,77 +8636,43 @@ def get_version_info():
     This provides the same data that the GUI version modal displays.
     """
     version_data = {
-        "version": "1.2",
+        "version": "1.3",
         "title": "What's New in SoulSync",
-        "subtitle": "Version 1.2 - Enhanced Search & Matching Engine Overhaul",
+        "subtitle": "Version 1.3 - New YouTube Engine, Docker Fixes & More",
         "sections": [
             {
-                "title": "🔍 Enhanced Search - Unified Multi-Source Discovery",
-                "description": "Powerful new search system that queries Spotify, your library, and Soulseek simultaneously with intelligent categorization",
+                "title": "📺 New YouTube Download Source",
+                "description": "Major overhaul of the YouTube download engine, making it a first-class citizen alongside Soulseek",
                 "features": [
-                    "• Unified Search - Single search across Spotify, your music library, and Soulseek in real-time",
-                    "• Smart Categorization - Results organized by Artists, Albums, and Tracks with visual indicators",
-                    "• Source Identification - Clear badges showing whether content is from Spotify, your library (DB), or both",
-                    "• Instant Actions - Stream, download, or add to wishlist directly from search results",
-                    "• Artist Deep Dive - Click any artist to view full discography, similar artists, and statistics",
-                    "• Album Preview - Expand albums to see complete track listings with metadata",
-                    "• Library Integration - Highlights tracks you already own to prevent duplicate downloads",
-                    "• Performance Optimized - Fast parallel queries with streaming results"
+                    "• First-Class Support - YouTube is now a primary download source, fully integrated into the app's core",
+                    "• Hybrid Mode - Automatically fallback to YouTube if Soulseek downloads fail (or vice-versa)",
+                    "• Reliable Downloads - Completely rewritten post-processing engine to eliminate 'file not found' errors",
+                    "• Batch Processing - YouTube downloads now support batch operations and queue management",
+                    "• High Quality - Automatic selection of highest quality audio streams (up to 320kbps opus/aac)",
+                    "• Metadata Matching - Intelligent matching of YouTube videos to correct Spotify metadata"
                 ],
-                "usage_note": "Access Enhanced Search from the main navigation - searches across all your music sources instantly!"
-            },
-            {
-                "title": "🎯 Matching Engine 2.0 - Precision & Accuracy",
-                "description": "Complete overhaul of matching algorithms to drastically reduce false positives while maintaining high match rates",
-                "features": [
-                    "• 80-90% False Positive Reduction - Down from 10%+ to 1-2% through strict matching logic",
-                    "• Intelligent Version Detection - Distinguishes between remasters (accepted) vs remixes/live versions (rejected)",
-                    "• Short Title Protection - Extra validation for common titles like 'Run', 'Love', 'Girls' to prevent wrong matches",
-                    "• Full-String Similarity - Replaced permissive substring matching with precise sequence matching",
-                    "• Rebalanced Scoring - Artist matching now weighted 40% (up from 35%), duration 15% (up from 5%)",
-                    "• Artist Name Normalization - Handles variations like 'AC/DC' vs 'AC-DC' correctly",
-                    "• Higher Confidence Thresholds - Standard: 0.63 (was 0.60), Enhanced: 0.58 (was 0.45)",
-                    "• Quality Bonus Adjustment - Reduced bonuses to prevent bad matches from passing threshold"
-                ],
-                "usage_note": "Matching engine changes apply automatically to all searches, syncs, and downloads!"
+                "usage_note": "Configure your preferred download sources in Settings > Download Settings!"
             },
+
             {
-                "title": "⭐ Wishlist Improvements",
-                "description": "Critical bug fixes and enhancements to wishlist functionality",
+                "title": "🐳 Docker & System Reliability",
+                "description": "Critical fixes for Docker environments and general system stability",
                 "features": [
-                    "• Album Cover Art Fix - Failed tracks from artist page downloads now preserve album artwork",
-                    "• Album Removal Fix - 'Remove Album' button now works correctly for tracks without Spotify IDs",
-                    "• Special Character Handling - Albums with parentheses, apostrophes work correctly (e.g., 'Live (Collector's Edition)')",
-                    "• Missing Image Placeholders - Beautiful gradient placeholders for albums without cover art",
-                    "• Granular Management - Remove individual tracks, singles, or entire albums with confidence",
-                    "• Better ID Generation - Frontend/backend album ID generation now perfectly synchronized"
+                    "• Docker Streaming Fix - Resolved issues with path resolution when streaming in Docker containers",
+                    "• Volume Mapping - Improved handling of mapped volumes and permissions",
+                    "• Settings Persistence - Fixed an issue where Spotify settings wouldn't save correctly",
+                    "• Soulseek Connection - Better connection stability and compatibility checks",
+                    "• Background Workers - More robust background task handling for long-running operations"
                 ]
             },
             {
-                "title": "🎧 Discovery Page - Your Personal Music Explorer",
-                "description": "Intelligent music discovery system that learns from your library and helps you find your next favorite tracks",
-                "features": [
-                    "• Smart Discovery Pool - Automatically populated from watchlist artists and similar artists",
-                    "• Personalized Playlists - Popular Picks, Hidden Gems, Discovery Shuffle, and more",
-                    "• Genre & Decade Playlists - Browse music by mood, style, or era",
-                    "• Seasonal Playlists - Curated collections for holidays and seasons (Christmas, Halloween, Summer, etc.)",
-                    "• Configurable Lookback Period - Control how far back to scan artist discographies (7 days to full catalog)",
-                    "• Smart Album Categorization - Accurate track count-based classification (Singles/EPs vs Albums)",
-                    "• One-Click Wishlist Integration - Add any discovered track to wishlist for automatic downloading"
-                ],
-                "usage_note": "Discovery pool automatically populates during watchlist scans. Configure lookback period in Settings!"
-            },
-            {
-                "title": "🔧 Quality of Life & Bug Fixes",
-                "description": "Additional improvements and stability enhancements",
+                "title": "🛠️ Fixes & Improvements",
+                "description": "General bug fixes and quality of life improvements",
                 "features": [
-                    "• Navigation Highlighting - Enhanced search properly highlights active navigation tabs",
-                    "• Playlist Sync Fix - Database-only fallback now correctly extracts artist names from Spotify objects",
-                    "• Improved Metadata Handling - Better album type detection using track counts",
-                    "• Enhanced Discovery Pool Management - Configurable artist scan depth with intelligent fallback",
-                    "• Better Error Handling - More informative messages and automatic recovery mechanisms",
-                    "• UI Polish - Refined modals, better button layouts, and improved visual feedback",
-                    "• Performance Optimizations - Faster database queries and more efficient data processing"
+                    "• Diacritics Support - Fixed album/artist matching for names with special characters (e.g., 'Pielea de găină')",
+                    "• Search Timing - Optimized search scheduling to prevent rate limiting",
+                    "• Library Scanning - Faster and more accurate matching against existing library tracks",
+                    "• Mobile Layout - Improved responsiveness for sidebar and modals on mobile devices"
                 ]
             }
         ]
diff --git a/webui/index.html b/webui/index.html
index 7ed669cd..3420443b 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <title>SoulSync - Music Sync & Manager</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
+
 <body>
     <div class="main-container">
         <!-- Sidebar - Always Visible -->
@@ -14,7 +16,7 @@
                 <h1 class="app-name">SoulSync</h1>
                 <p class="app-subtitle">Music Sync & Manager</p>
             </div>
-            
+
             <!-- Navigation Section -->
             <nav class="sidebar-nav">
                 <button class="nav-button active" data-page="dashboard">
@@ -46,10 +48,10 @@
                     <span class="nav-text">Settings</span>
                 </button>
             </nav>
-            
+
             <!-- Spacer -->
             <div class="sidebar-spacer"></div>
-            
+
             <!-- Media Player Section -->
             <div class="media-player" id="media-player">
                 <!-- Loading Animation -->
@@ -59,7 +61,7 @@
                     </div>
                     <div class="loading-text">0%</div>
                 </div>
-                
+
                 <!-- Header (always visible) -->
                 <div class="media-header">
                     <div class="media-info">
@@ -68,11 +70,11 @@
                     </div>
                     <button class="play-button" id="play-button" disabled>▷</button>
                 </div>
-                
+
                 <!-- Expanded Content (hidden initially) -->
                 <div class="media-expanded hidden" id="media-expanded">
                     <div class="album-name" id="album-name">Unknown Album</div>
-                    
+
                     <!-- Progress Bar and Time Display -->
                     <div class="progress-section">
                         <div class="time-display">
@@ -84,10 +86,11 @@
                             <div class="progress-track">
                                 <div class="progress-fill" id="progress-fill"></div>
                             </div>
-                            <input type="range" class="progress-bar" id="progress-bar" min="0" max="100" value="0" step="0.1">
+                            <input type="range" class="progress-bar" id="progress-bar" min="0" max="100" value="0"
+                                step="0.1">
                         </div>
                     </div>
-                    
+
                     <div class="media-controls">
                         <div class="volume-control">
                             <span class="volume-icon">🔊</span>
@@ -96,13 +99,13 @@
                         <button class="stop-button" id="stop-button" disabled>⏹</button>
                     </div>
                 </div>
-                
+
                 <!-- No Track Message -->
                 <div class="no-track-message" id="no-track-message">
                     Start playing music to see controls
                 </div>
             </div>
-            
+
             <!-- Crypto Donation Section -->
             <div class="crypto-donation">
                 <div class="donation-header">
@@ -118,18 +121,19 @@
                         <span class="donation-name">Bitcoin</span>
                         <span class="donation-address">3JVWrR...dPTqdS</span>
                     </div>
-                    <div class="donation-item" onclick="copyAddress('0x343fC48c2cd1C6332b0df9a58F86e6520a026AC5', 'Ethereum')">
+                    <div class="donation-item"
+                        onclick="copyAddress('0x343fC48c2cd1C6332b0df9a58F86e6520a026AC5', 'Ethereum')">
                         <span class="donation-name">Ethereum</span>
                         <span class="donation-address">0x343f...026AC5</span>
                     </div>
                 </div>
             </div>
-            
+
             <!-- Version Section -->
             <div class="version-section">
-                <button class="version-button" onclick="showVersionInfo()">v1.2</button>
+                <button class="version-button" onclick="showVersionInfo()">v1.3</button>
             </div>
-            
+
             <!-- Status Section -->
             <div class="status-section">
                 <h4 class="status-title">Service Status</h4>
@@ -147,7 +151,7 @@
                 </div>
             </div>
         </div>
-        
+
         <!-- Main Content Area -->
         <div class="main-content">
             <!-- Dashboard Page -->
@@ -160,7 +164,8 @@
                         </div>
                         <div class="header-spacer"></div>
                         <div class="header-actions">
-                            <button class="header-button watchlist-button" id="watchlist-button">👁️ Watchlist (0)</button>
+                            <button class="header-button watchlist-button" id="watchlist-button">👁️ Watchlist
+                                (0)</button>
                             <button class="header-button wishlist-button" id="wishlist-button">🎵 Wishlist (0)</button>
                         </div>
                     </div>
@@ -171,34 +176,40 @@
                             <div class="service-card" id="spotify-service-card">
                                 <div class="service-card-header">
                                     <span class="service-card-title">Spotify</span>
-                                    <span class="service-card-indicator disconnected" id="spotify-status-indicator">●</span>
+                                    <span class="service-card-indicator disconnected"
+                                        id="spotify-status-indicator">●</span>
                                 </div>
                                 <p class="service-card-status-text" id="spotify-status-text">Disconnected</p>
                                 <p class="service-card-response-time" id="spotify-response-time">Response: --</p>
                                 <div class="service-card-footer">
-                                    <button class="service-card-button" onclick="testDashboardConnection('spotify')">Test Connection</button>
+                                    <button class="service-card-button"
+                                        onclick="testDashboardConnection('spotify')">Test Connection</button>
                                 </div>
                             </div>
                             <div class="service-card" id="media-server-service-card">
                                 <div class="service-card-header">
                                     <span class="service-card-title" id="media-server-service-name">Server</span>
-                                    <span class="service-card-indicator disconnected" id="media-server-status-indicator">●</span>
+                                    <span class="service-card-indicator disconnected"
+                                        id="media-server-status-indicator">●</span>
                                 </div>
                                 <p class="service-card-status-text" id="media-server-status-text">Disconnected</p>
                                 <p class="service-card-response-time" id="media-server-response-time">Response: --</p>
                                 <div class="service-card-footer">
-                                    <button class="service-card-button" onclick="testDashboardConnection('server')">Test Connection</button>
+                                    <button class="service-card-button" onclick="testDashboardConnection('server')">Test
+                                        Connection</button>
                                 </div>
                             </div>
                             <div class="service-card" id="soulseek-service-card">
                                 <div class="service-card-header">
                                     <span class="service-card-title">Soulseek</span>
-                                    <span class="service-card-indicator disconnected" id="soulseek-status-indicator">●</span>
+                                    <span class="service-card-indicator disconnected"
+                                        id="soulseek-status-indicator">●</span>
                                 </div>
                                 <p class="service-card-status-text" id="soulseek-status-text">Disconnected</p>
                                 <p class="service-card-response-time" id="soulseek-response-time">Response: --</p>
                                 <div class="service-card-footer">
-                                    <button class="service-card-button" onclick="testDashboardConnection('soulseek')">Test Connection</button>
+                                    <button class="service-card-button"
+                                        onclick="testDashboardConnection('soulseek')">Test Connection</button>
                                 </div>
                             </div>
                         </div>
@@ -239,14 +250,15 @@
                             </div>
                         </div>
                     </div>
-                    
+
                     <div class="dashboard-section">
                         <h3 class="section-title">Tools & Operations</h3>
                         <div class="tools-grid">
                             <div class="tool-card" id="db-updater-card">
                                 <div class="tool-card-header">
                                     <h4 class="tool-card-title">Database Updater</h4>
-                                    <button class="tool-help-button" data-tool="db-updater" title="Learn more about this tool">?</button>
+                                    <button class="tool-help-button" data-tool="db-updater"
+                                        title="Learn more about this tool">?</button>
                                 </div>
                                 <p class="tool-card-info">Last Full Refresh: <span id="db-last-refresh">Never</span></p>
                                 <div class="tool-card-stats">
@@ -277,7 +289,7 @@
                                 <div class="tool-card-progress-section">
                                     <p class="progress-phase-label" id="db-phase-label">Idle</p>
                                     <div class="progress-bar-container">
-                                         <div class="progress-bar-fill" id="db-progress-bar" style="width: 0%;"></div>
+                                        <div class="progress-bar-fill" id="db-progress-bar" style="width: 0%;"></div>
                                     </div>
                                     <p class="progress-details-label" id="db-progress-label">0 / 0 artists (0.0%)</p>
                                 </div>
@@ -286,10 +298,12 @@
                             <div class="tool-card" id="metadata-updater-card">
                                 <div class="tool-card-header">
                                     <h4 class="tool-card-title">Metadata Updater</h4>
-                                    <button class="tool-help-button" data-tool="metadata-updater" title="Learn more about this tool">?</button>
+                                    <button class="tool-help-button" data-tool="metadata-updater"
+                                        title="Learn more about this tool">?</button>
                                 </div>
-                                <p class="metadata-updater-description tool-card-info">Updates artist photos, genres, and album art from Spotify.</p>
-                                 <div class="tool-card-controls">
+                                <p class="metadata-updater-description tool-card-info">Updates artist photos, genres,
+                                    and album art from Spotify.</p>
+                                <div class="tool-card-controls">
                                     <select id="metadata-refresh-interval">
                                         <option value="180">6 months</option>
                                         <option value="90">3 months</option>
@@ -300,19 +314,23 @@
                                     </select>
                                     <button id="metadata-update-button">Begin Update</button>
                                 </div>
-                                 <div class="tool-card-progress-section">
-                                    <p class="progress-phase-label" id="metadata-phase-label">Current Artist: Not running</p>
+                                <div class="tool-card-progress-section">
+                                    <p class="progress-phase-label" id="metadata-phase-label">Current Artist: Not
+                                        running</p>
                                     <div class="progress-bar-container">
-                                         <div class="progress-bar-fill" id="metadata-progress-bar" style="width: 0%;"></div>
+                                        <div class="progress-bar-fill" id="metadata-progress-bar" style="width: 0%;">
+                                        </div>
                                     </div>
-                                    <p class="progress-details-label" id="metadata-progress-label">0 / 0 artists (0.0%)</p>
+                                    <p class="progress-details-label" id="metadata-progress-label">0 / 0 artists (0.0%)
+                                    </p>
                                 </div>
                             </div>
 
                             <div class="tool-card" id="quality-scanner-card">
                                 <div class="tool-card-header">
                                     <h4 class="tool-card-title">Quality Scanner</h4>
-                                    <button class="tool-help-button" data-tool="quality-scanner" title="Learn more about this tool">?</button>
+                                    <button class="tool-help-button" data-tool="quality-scanner"
+                                        title="Learn more about this tool">?</button>
                                 </div>
                                 <p class="tool-card-info">Scan library for tracks below quality preferences</p>
                                 <div class="tool-card-stats">
@@ -343,16 +361,19 @@
                                 <div class="tool-card-progress-section">
                                     <p class="progress-phase-label" id="quality-phase-label">Ready to scan</p>
                                     <div class="progress-bar-container">
-                                         <div class="progress-bar-fill" id="quality-progress-bar" style="width: 0%;"></div>
+                                        <div class="progress-bar-fill" id="quality-progress-bar" style="width: 0%;">
+                                        </div>
                                     </div>
-                                    <p class="progress-details-label" id="quality-progress-label">0 / 0 tracks scanned (0.0%)</p>
+                                    <p class="progress-details-label" id="quality-progress-label">0 / 0 tracks scanned
+                                        (0.0%)</p>
                                 </div>
                             </div>
 
                             <div class="tool-card" id="duplicate-cleaner-card">
                                 <div class="tool-card-header">
                                     <h4 class="tool-card-title">Duplicate Cleaner</h4>
-                                    <button class="tool-help-button" data-tool="duplicate-cleaner" title="Learn more about this tool">?</button>
+                                    <button class="tool-help-button" data-tool="duplicate-cleaner"
+                                        title="Learn more about this tool">?</button>
                                 </div>
                                 <p class="tool-card-info">Detect and remove duplicate tracks in Transfer folder</p>
                                 <div class="tool-card-stats">
@@ -379,16 +400,19 @@
                                 <div class="tool-card-progress-section">
                                     <p class="progress-phase-label" id="duplicate-phase-label">Ready to scan</p>
                                     <div class="progress-bar-container">
-                                         <div class="progress-bar-fill" id="duplicate-progress-bar" style="width: 0%;"></div>
+                                        <div class="progress-bar-fill" id="duplicate-progress-bar" style="width: 0%;">
+                                        </div>
                                     </div>
-                                    <p class="progress-details-label" id="duplicate-progress-label">0 files scanned (0.0%)</p>
+                                    <p class="progress-details-label" id="duplicate-progress-label">0 files scanned
+                                        (0.0%)</p>
                                 </div>
                             </div>
 
                             <div class="tool-card" id="media-scan-card" style="display: none;">
                                 <div class="tool-card-header">
                                     <h4 class="tool-card-title">Media Server Scan</h4>
-                                    <button class="tool-help-button" data-tool="media-scan" title="Learn more about this tool">?</button>
+                                    <button class="tool-help-button" data-tool="media-scan"
+                                        title="Learn more about this tool">?</button>
                                 </div>
                                 <p class="tool-card-info">Manually trigger Plex media library scan for music</p>
                                 <div class="tool-card-stats">
@@ -410,9 +434,11 @@
                                 <div class="tool-card-progress-section">
                                     <p class="progress-phase-label" id="media-scan-phase-label">Ready to scan</p>
                                     <div class="progress-bar-container">
-                                         <div class="progress-bar-fill" id="media-scan-progress-bar" style="width: 0%;"></div>
+                                        <div class="progress-bar-fill" id="media-scan-progress-bar" style="width: 0%;">
+                                        </div>
                                     </div>
-                                    <p class="progress-details-label" id="media-scan-progress-label">Waiting for scan request</p>
+                                    <p class="progress-details-label" id="media-scan-progress-label">Waiting for scan
+                                        request</p>
                                 </div>
                             </div>
                         </div>
@@ -433,13 +459,14 @@
                     </div>
                 </div>
             </div>
-            
+
             <!-- Main container for the Sync page -->
             <div class="page" id="sync-page">
                 <!-- Header -->
                 <div class="sync-header">
                     <h2 class="sync-title">Playlist Sync</h2>
-                    <p class="sync-subtitle">Synchronize your Spotify, Tidal, and YouTube playlists with your media server</p>
+                    <p class="sync-subtitle">Synchronize your Spotify, Tidal, and YouTube playlists with your media
+                        server</p>
                 </div>
 
                 <!-- Main two-column content area -->
@@ -486,7 +513,8 @@
                         <!-- YouTube Tab Content -->
                         <div class="sync-tab-content" id="youtube-tab-content">
                             <div class="youtube-input-section">
-                                <input type="text" id="youtube-url-input" placeholder="Paste YouTube Music Playlist URL...">
+                                <input type="text" id="youtube-url-input"
+                                    placeholder="Paste YouTube Music Playlist URL...">
                                 <button id="youtube-parse-btn">Parse Playlist</button>
                             </div>
                             <div class="playlist-scroll-container" id="youtube-playlist-container">
@@ -511,7 +539,7 @@
 
                             <!-- Browse Charts Tab Content -->
                             <div class="beatport-tab-content" id="beatport-browse-content">
-                                
+
 
                                 <div class="beatport-navigation">
                                     <!-- New Homepage Main View -->
@@ -549,7 +577,8 @@
                                         <div class="homepage-main-charts-section">
                                             <h3 class="section-title">📊 Main Charts</h3>
                                             <div class="genre-chart-types-grid">
-                                                <div class="genre-chart-type-card" data-chart-type="top-10" data-chart-endpoint="/api/beatport/top-100">
+                                                <div class="genre-chart-type-card" data-chart-type="top-10"
+                                                    data-chart-endpoint="/api/beatport/top-100">
                                                     <div class="chart-type-icon">🔥</div>
                                                     <div class="chart-type-info">
                                                         <h3>Beatport Top 10</h3>
@@ -557,7 +586,8 @@
                                                         <span class="track-count">10 tracks</span>
                                                     </div>
                                                 </div>
-                                                <div class="genre-chart-type-card" data-chart-type="top-100" data-chart-endpoint="/api/beatport/top-100">
+                                                <div class="genre-chart-type-card" data-chart-type="top-100"
+                                                    data-chart-endpoint="/api/beatport/top-100">
                                                     <div class="chart-type-icon">💯</div>
                                                     <div class="chart-type-info">
                                                         <h3>Beatport Top 100</h3>
@@ -572,7 +602,8 @@
                                         <div class="homepage-releases-section">
                                             <h3 class="section-title">🎵 Releases</h3>
                                             <div class="genre-chart-types-grid">
-                                                <div class="genre-chart-type-card" data-chart-type="releases-top-10" data-chart-endpoint="/api/beatport/homepage/top-10-releases">
+                                                <div class="genre-chart-type-card" data-chart-type="releases-top-10"
+                                                    data-chart-endpoint="/api/beatport/homepage/top-10-releases">
                                                     <div class="chart-type-icon">🆕</div>
                                                     <div class="chart-type-info">
                                                         <h3>Top 10 Releases</h3>
@@ -580,7 +611,8 @@
                                                         <span class="track-count">10 releases</span>
                                                     </div>
                                                 </div>
-                                                <div class="genre-chart-type-card" data-chart-type="releases-top-100" data-chart-endpoint="/api/beatport/top-100-releases">
+                                                <div class="genre-chart-type-card" data-chart-type="releases-top-100"
+                                                    data-chart-endpoint="/api/beatport/top-100-releases">
                                                     <div class="chart-type-icon">📊</div>
                                                     <div class="chart-type-info">
                                                         <h3>Top 100 Releases</h3>
@@ -588,7 +620,8 @@
                                                         <span class="track-count">100 releases</span>
                                                     </div>
                                                 </div>
-                                                <div class="genre-chart-type-card" data-chart-type="latest-releases" data-chart-endpoint="/api/beatport/homepage/new-releases">
+                                                <div class="genre-chart-type-card" data-chart-type="latest-releases"
+                                                    data-chart-endpoint="/api/beatport/homepage/new-releases">
                                                     <div class="chart-type-icon">🕒</div>
                                                     <div class="chart-type-info">
                                                         <h3>Latest Releases</h3>
@@ -603,7 +636,8 @@
                                         <div class="homepage-hype-section">
                                             <h3 class="section-title">🔥 Hype</h3>
                                             <div class="genre-chart-types-grid">
-                                                <div class="genre-chart-type-card" data-chart-type="hype-top-10" data-chart-endpoint="/api/beatport/hype-top-100">
+                                                <div class="genre-chart-type-card" data-chart-type="hype-top-10"
+                                                    data-chart-endpoint="/api/beatport/hype-top-100">
                                                     <div class="chart-type-icon">🚀</div>
                                                     <div class="chart-type-info">
                                                         <h3>Hype Top 10</h3>
@@ -611,7 +645,8 @@
                                                         <span class="track-count">10 tracks</span>
                                                     </div>
                                                 </div>
-                                                <div class="genre-chart-type-card" data-chart-type="hype-top-100" data-chart-endpoint="/api/beatport/hype-top-100">
+                                                <div class="genre-chart-type-card" data-chart-type="hype-top-100"
+                                                    data-chart-endpoint="/api/beatport/hype-top-100">
                                                     <div class="chart-type-icon">🔥</div>
                                                     <div class="chart-type-info">
                                                         <h3>Hype Top 100</h3>
@@ -619,7 +654,8 @@
                                                         <span class="track-count">100 tracks</span>
                                                     </div>
                                                 </div>
-                                                <div class="genre-chart-type-card" data-chart-type="hype-picks" data-chart-endpoint="/api/beatport/homepage/hype-picks">
+                                                <div class="genre-chart-type-card" data-chart-type="hype-picks"
+                                                    data-chart-endpoint="/api/beatport/homepage/hype-picks">
                                                     <div class="chart-type-icon">⚡</div>
                                                     <div class="chart-type-info">
                                                         <h3>Hype Picks</h3>
@@ -669,7 +705,8 @@
                                                 <h3>House</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="tech-house" data-genre-id="11">
+                                            <div class="beatport-genre-item" data-genre-slug="tech-house"
+                                                data-genre-id="11">
                                                 <div class="genre-icon">🔧</div>
                                                 <h3>Tech House</h3>
                                                 <span class="genre-track-count">Top 100</span>
@@ -679,7 +716,8 @@
                                                 <h3>Techno</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="deep-house" data-genre-id="12">
+                                            <div class="beatport-genre-item" data-genre-slug="deep-house"
+                                                data-genre-id="12">
                                                 <div class="genre-icon">🌊</div>
                                                 <h3>Deep House</h3>
                                                 <span class="genre-track-count">Top 100</span>
@@ -689,37 +727,44 @@
                                                 <h3>Trance</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="drum-and-bass" data-genre-id="1">
+                                            <div class="beatport-genre-item" data-genre-slug="drum-and-bass"
+                                                data-genre-id="1">
                                                 <div class="genre-icon">🥁</div>
                                                 <h3>Drum & Bass</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="dubstep" data-genre-id="18">
+                                            <div class="beatport-genre-item" data-genre-slug="dubstep"
+                                                data-genre-id="18">
                                                 <div class="genre-icon">🎵</div>
                                                 <h3>Dubstep</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="progressive-house" data-genre-id="15">
+                                            <div class="beatport-genre-item" data-genre-slug="progressive-house"
+                                                data-genre-id="15">
                                                 <div class="genre-icon">📈</div>
                                                 <h3>Progressive House</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="melodic-house-and-techno" data-genre-id="90">
+                                            <div class="beatport-genre-item" data-genre-slug="melodic-house-and-techno"
+                                                data-genre-id="90">
                                                 <div class="genre-icon">🎼</div>
                                                 <h3>Melodic House & Techno</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="afro-house" data-genre-id="89">
+                                            <div class="beatport-genre-item" data-genre-slug="afro-house"
+                                                data-genre-id="89">
                                                 <div class="genre-icon">🌍</div>
                                                 <h3>Afro House</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="minimal" data-genre-id="14">
+                                            <div class="beatport-genre-item" data-genre-slug="minimal"
+                                                data-genre-id="14">
                                                 <div class="genre-icon">⚫</div>
                                                 <h3>Minimal</h3>
                                                 <span class="genre-track-count">Top 100</span>
                                             </div>
-                                            <div class="beatport-genre-item" data-genre-slug="nu-disco" data-genre-id="50">
+                                            <div class="beatport-genre-item" data-genre-slug="nu-disco"
+                                                data-genre-id="50">
                                                 <div class="genre-icon">✨</div>
                                                 <h3>Nu Disco</h3>
                                                 <span class="genre-track-count">Top 100</span>
@@ -730,13 +775,16 @@
                                     <!-- Genre Detail Sub-View -->
                                     <div class="beatport-sub-view" id="beatport-genre-detail-view">
                                         <div class="beatport-breadcrumb">
-                                            <button class="breadcrumb-back" id="genre-detail-back">← Back to Genre Explorer</button>
-                                            <span class="breadcrumb-path" id="genre-detail-breadcrumb">Browse Charts > Genre Explorer > Loading...</span>
+                                            <button class="breadcrumb-back" id="genre-detail-back">← Back to Genre
+                                                Explorer</button>
+                                            <span class="breadcrumb-path" id="genre-detail-breadcrumb">Browse Charts >
+                                                Genre Explorer > Loading...</span>
                                         </div>
                                         <div class="genre-detail-header">
                                             <div class="genre-detail-info">
                                                 <h2 id="genre-detail-title">Loading Genre...</h2>
-                                                <p id="genre-detail-description">Explore all chart types for this genre</p>
+                                                <p id="genre-detail-description">Explore all chart types for this genre
+                                                </p>
                                             </div>
                                         </div>
                                         <!-- Main Chart Types Section -->
@@ -860,13 +908,16 @@
                                     <!-- Genre Charts List Sub-View -->
                                     <div class="beatport-sub-view" id="beatport-genre-charts-list-view">
                                         <div class="beatport-breadcrumb">
-                                            <button class="breadcrumb-back" id="genre-charts-list-back">← Back to Genre Charts</button>
-                                            <span class="breadcrumb-path" id="genre-charts-list-breadcrumb">Browse Charts > Genre Explorer > Genre Charts > New Charts</span>
+                                            <button class="breadcrumb-back" id="genre-charts-list-back">← Back to Genre
+                                                Charts</button>
+                                            <span class="breadcrumb-path" id="genre-charts-list-breadcrumb">Browse
+                                                Charts > Genre Explorer > Genre Charts > New Charts</span>
                                         </div>
                                         <div class="genre-charts-list-header">
                                             <div class="genre-charts-list-info">
                                                 <h2 id="genre-charts-list-title">Loading Charts...</h2>
-                                                <p id="genre-charts-list-description">Browse all available chart collections for this genre</p>
+                                                <p id="genre-charts-list-description">Browse all available chart
+                                                    collections for this genre</p>
                                             </div>
                                         </div>
                                         <div class="genre-charts-list-container">
@@ -890,7 +941,8 @@
                                     <button class="refresh-button beatport" id="beatport-clear-btn">🗑️ Clear</button>
                                 </div>
                                 <div class="playlist-scroll-container" id="beatport-playlist-container">
-                                    <div class="playlist-placeholder">Your created Beatport playlists will appear here.</div>
+                                    <div class="playlist-placeholder">Your created Beatport playlists will appear here.
+                                    </div>
                                 </div>
                             </div>
 
@@ -910,8 +962,10 @@
 
                                         <!-- Slider Navigation -->
                                         <div class="beatport-rebuild-slider-nav">
-                                            <button class="beatport-rebuild-nav-btn beatport-rebuild-prev-btn" id="beatport-rebuild-prev-btn">‹</button>
-                                            <button class="beatport-rebuild-nav-btn beatport-rebuild-next-btn" id="beatport-rebuild-next-btn">›</button>
+                                            <button class="beatport-rebuild-nav-btn beatport-rebuild-prev-btn"
+                                                id="beatport-rebuild-prev-btn">‹</button>
+                                            <button class="beatport-rebuild-nav-btn beatport-rebuild-next-btn"
+                                                id="beatport-rebuild-next-btn">›</button>
                                         </div>
 
                                         <!-- Slider Indicators -->
@@ -943,7 +997,8 @@
                                 <div class="beatport-top10-section">
                                     <div class="beatport-top10-header">
                                         <h2 class="beatport-top10-title">🏆 Top 10 Lists</h2>
-                                        <p class="beatport-top10-subtitle">Current trending tracks from Beatport charts</p>
+                                        <p class="beatport-top10-subtitle">Current trending tracks from Beatport charts
+                                        </p>
                                     </div>
 
                                     <div class="beatport-top10-container">
@@ -951,7 +1006,8 @@
                                         <div class="beatport-top10-list" id="beatport-top10-list">
                                             <div class="beatport-top10-list-header">
                                                 <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
-                                                <p class="beatport-top10-list-subtitle">Most popular tracks on Beatport</p>
+                                                <p class="beatport-top10-list-subtitle">Most popular tracks on Beatport
+                                                </p>
                                             </div>
                                             <div class="beatport-top10-tracks" id="beatport-top10-tracks">
                                                 <!-- Loading placeholder -->
@@ -968,7 +1024,8 @@
                                         <div class="beatport-hype10-list" id="beatport-hype10-list">
                                             <div class="beatport-hype10-list-header">
                                                 <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
-                                                <p class="beatport-hype10-list-subtitle">Editor's hottest trending picks</p>
+                                                <p class="beatport-hype10-list-subtitle">Editor's hottest trending picks
+                                                </p>
                                             </div>
                                             <div class="beatport-hype10-tracks" id="beatport-hype10-tracks">
                                                 <!-- Loading placeholder -->
@@ -987,7 +1044,8 @@
                                 <div class="beatport-releases-top10-section">
                                     <div class="beatport-releases-top10-header">
                                         <h2 class="beatport-releases-top10-title">💿 Top 10 Releases</h2>
-                                        <p class="beatport-releases-top10-subtitle">Most popular albums and EPs on Beatport</p>
+                                        <p class="beatport-releases-top10-subtitle">Most popular albums and EPs on
+                                            Beatport</p>
                                     </div>
 
                                     <div class="beatport-releases-top10-container">
@@ -1012,7 +1070,8 @@
 
                                     <div class="beatport-releases-slider-container">
                                         <div class="beatport-releases-slider" id="beatport-releases-slider">
-                                            <div class="beatport-releases-slider-track" id="beatport-releases-slider-track">
+                                            <div class="beatport-releases-slider-track"
+                                                id="beatport-releases-slider-track">
                                                 <!-- Loading placeholder -->
                                                 <div class="beatport-releases-loading">
                                                     <div class="beatport-releases-loading-content">
@@ -1024,12 +1083,15 @@
 
                                             <!-- Slider Navigation -->
                                             <div class="beatport-releases-slider-nav">
-                                                <button class="beatport-releases-nav-btn beatport-releases-prev-btn" id="beatport-releases-prev-btn">‹</button>
-                                                <button class="beatport-releases-nav-btn beatport-releases-next-btn" id="beatport-releases-next-btn">›</button>
+                                                <button class="beatport-releases-nav-btn beatport-releases-prev-btn"
+                                                    id="beatport-releases-prev-btn">‹</button>
+                                                <button class="beatport-releases-nav-btn beatport-releases-next-btn"
+                                                    id="beatport-releases-next-btn">›</button>
                                             </div>
 
                                             <!-- Slider Indicators -->
-                                            <div class="beatport-releases-slider-indicators" id="beatport-releases-slider-indicators">
+                                            <div class="beatport-releases-slider-indicators"
+                                                id="beatport-releases-slider-indicators">
                                                 <!-- Indicators will be dynamically generated -->
                                             </div>
                                         </div>
@@ -1040,12 +1102,14 @@
                                 <div class="beatport-hype-picks-section">
                                     <div class="beatport-hype-picks-header">
                                         <h2 class="beatport-hype-picks-title">🔥 Hype Picks</h2>
-                                        <p class="beatport-hype-picks-subtitle">Editor selected trending tracks from Beatport</p>
+                                        <p class="beatport-hype-picks-subtitle">Editor selected trending tracks from
+                                            Beatport</p>
                                     </div>
 
                                     <div class="beatport-hype-picks-slider-container">
                                         <div class="beatport-hype-picks-slider" id="beatport-hype-picks-slider">
-                                            <div class="beatport-hype-picks-slider-track" id="beatport-hype-picks-slider-track">
+                                            <div class="beatport-hype-picks-slider-track"
+                                                id="beatport-hype-picks-slider-track">
                                                 <!-- Loading placeholder -->
                                                 <div class="beatport-hype-picks-loading">
                                                     <div class="beatport-hype-picks-loading-content">
@@ -1057,12 +1121,15 @@
 
                                             <!-- Slider Navigation -->
                                             <div class="beatport-hype-picks-slider-nav">
-                                                <button class="beatport-hype-picks-nav-btn beatport-hype-picks-prev-btn" id="beatport-hype-picks-prev-btn">‹</button>
-                                                <button class="beatport-hype-picks-nav-btn beatport-hype-picks-next-btn" id="beatport-hype-picks-next-btn">›</button>
+                                                <button class="beatport-hype-picks-nav-btn beatport-hype-picks-prev-btn"
+                                                    id="beatport-hype-picks-prev-btn">‹</button>
+                                                <button class="beatport-hype-picks-nav-btn beatport-hype-picks-next-btn"
+                                                    id="beatport-hype-picks-next-btn">›</button>
                                             </div>
 
                                             <!-- Slider Indicators -->
-                                            <div class="beatport-hype-picks-slider-indicators" id="beatport-hype-picks-slider-indicators">
+                                            <div class="beatport-hype-picks-slider-indicators"
+                                                id="beatport-hype-picks-slider-indicators">
                                                 <!-- Indicators will be dynamically generated -->
                                             </div>
                                         </div>
@@ -1073,7 +1140,8 @@
                                 <div class="beatport-charts-section">
                                     <div class="beatport-charts-header">
                                         <h2 class="beatport-charts-title">🔥 Featured Charts</h2>
-                                        <p class="beatport-charts-subtitle">Top chart collections from Beatport creators</p>
+                                        <p class="beatport-charts-subtitle">Top chart collections from Beatport creators
+                                        </p>
                                     </div>
 
                                     <div class="beatport-charts-slider-container">
@@ -1090,12 +1158,15 @@
 
                                             <!-- Slider Navigation -->
                                             <div class="beatport-charts-slider-nav">
-                                                <button class="beatport-charts-nav-btn beatport-charts-prev-btn" id="beatport-charts-prev-btn">‹</button>
-                                                <button class="beatport-charts-nav-btn beatport-charts-next-btn" id="beatport-charts-next-btn">›</button>
+                                                <button class="beatport-charts-nav-btn beatport-charts-prev-btn"
+                                                    id="beatport-charts-prev-btn">‹</button>
+                                                <button class="beatport-charts-nav-btn beatport-charts-next-btn"
+                                                    id="beatport-charts-next-btn">›</button>
                                             </div>
 
                                             <!-- Slider Indicators -->
-                                            <div class="beatport-charts-slider-indicators" id="beatport-charts-slider-indicators">
+                                            <div class="beatport-charts-slider-indicators"
+                                                id="beatport-charts-slider-indicators">
                                                 <!-- Indicators will be dynamically generated -->
                                             </div>
                                         </div>
@@ -1123,12 +1194,15 @@
 
                                             <!-- Slider Navigation -->
                                             <div class="beatport-dj-slider-nav">
-                                                <button class="beatport-dj-nav-btn beatport-dj-prev-btn" id="beatport-dj-prev-btn">‹</button>
-                                                <button class="beatport-dj-nav-btn beatport-dj-next-btn" id="beatport-dj-next-btn">›</button>
+                                                <button class="beatport-dj-nav-btn beatport-dj-prev-btn"
+                                                    id="beatport-dj-prev-btn">‹</button>
+                                                <button class="beatport-dj-nav-btn beatport-dj-next-btn"
+                                                    id="beatport-dj-next-btn">›</button>
                                             </div>
 
                                             <!-- Slider Indicators -->
-                                            <div class="beatport-dj-slider-indicators" id="beatport-dj-slider-indicators">
+                                            <div class="beatport-dj-slider-indicators"
+                                                id="beatport-dj-slider-indicators">
                                                 <!-- Indicators will be dynamically generated -->
                                             </div>
                                         </div>
@@ -1156,7 +1230,7 @@
                     </div>
                 </div>
             </div>
-            
+
             <!-- Downloads Page -->
             <div class="page" id="downloads-page">
                 <!-- 
@@ -1164,12 +1238,12 @@
                 creating the two-panel layout for the page.
                 -->
                 <div class="downloads-content">
-                    
+
                     <!-- ======================================================= -->
                     <!-- == LEFT PANEL: Search, Filters, and Results          == -->
                     <!-- ======================================================= -->
                     <div class="downloads-main-panel">
-                        
+
                         <!-- Header: Replicates create_elegant_header() -->
                         <div class="downloads-header">
                             <div class="downloads-header-content">
@@ -1177,7 +1251,8 @@
                                     <h2 class="downloads-title">🎵 Music Downloads</h2>
                                     <p class="downloads-subtitle">Search, discover, and download high-quality music</p>
                                 </div>
-                                <button id="toggle-download-manager-btn" class="toggle-manager-btn" title="Toggle Download Manager">
+                                <button id="toggle-download-manager-btn" class="toggle-manager-btn"
+                                    title="Toggle Download Manager">
                                     <span class="toggle-icon">›</span>
                                 </button>
                             </div>
@@ -1202,80 +1277,100 @@
                         <div id="basic-search-section" class="search-section">
                             <!-- Search Bar: Replicates create_elegant_search_bar() -->
                             <div class="search-bar-container">
-                            <input type="text" id="downloads-search-input" placeholder="Search for music... (e.g., 'Virtual Mage', 'Queen Bohemian Rhapsody')">
-                            <button id="downloads-cancel-btn" class="hidden">✕ Cancel</button>
-                            <button id="downloads-search-btn">🔍 Search</button>
-                        </div>
-
-                       
-                        <div id="filters-container" class="filters-container hidden">
-                            <div class="filter-toggle-header">
-                                <button id="filter-toggle-btn" class="filter-toggle-btn">⏷ Filters</button>
-                            </div>
-
-                            <div id="filter-content" class="filter-content hidden">
-                                <!-- Filter by Type -->
-                                <div class="filter-group">
-                                    <label class="filter-label">Type:</label>
-                                    <button class="filter-btn active" data-filter-type="type" data-value="all">All</button>
-                                    <button class="filter-btn" data-filter-type="type" data-value="album">Albums</button>
-                                    <button class="filter-btn" data-filter-type="type" data-value="track">Singles</button>
-                                </div>
-
-                                <!-- Filter by Format -->
-                                <div class="filter-group">
-                                    <label class="filter-label">Format:</label>
-                                    <button class="filter-btn active" data-filter-type="format" data-value="all">All</button>
-                                    <button class="filter-btn" data-filter-type="format" data-value="flac">FLAC</button>
-                                    <button class="filter-btn" data-filter-type="format" data-value="mp3">MP3</button>
-                                    <!-- Added missing format buttons -->
-                                    <button class="filter-btn" data-filter-type="format" data-value="ogg">OGG</button>
-                                    <button class="filter-btn" data-filter-type="format" data-value="aac">AAC</button>
-                                    <button class="filter-btn" data-filter-type="format" data-value="wma">WMA</button>
-                                </div>
-
-                                <!-- Sort Controls -->
-                                <div class="filter-group">
-                                    <label class="filter-label">Sort by:</label>
-                                    <button id="sort-order-btn" class="filter-btn sort-order-btn" data-order="desc">↓</button>
-                                    <!-- Added all sort options from the GUI -->
-                                    <button class="filter-btn active" data-filter-type="sort" data-value="relevance">Relevance</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="quality_score">Quality</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="size">Size</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="title">Name</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="username">Uploader</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="bitrate">Bitrate</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="duration">Duration</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="availability">Available</button>
-                                    <button class="filter-btn" data-filter-type="sort" data-value="upload_speed">Speed</button>
+                                <input type="text" id="downloads-search-input"
+                                    placeholder="Search for music... (e.g., 'Virtual Mage', 'Queen Bohemian Rhapsody')">
+                                <button id="downloads-cancel-btn" class="hidden">✕ Cancel</button>
+                                <button id="downloads-search-btn">🔍 Search</button>
+                            </div>
+
+
+                            <div id="filters-container" class="filters-container hidden">
+                                <div class="filter-toggle-header">
+                                    <button id="filter-toggle-btn" class="filter-toggle-btn">⏷ Filters</button>
+                                </div>
+
+                                <div id="filter-content" class="filter-content hidden">
+                                    <!-- Filter by Type -->
+                                    <div class="filter-group">
+                                        <label class="filter-label">Type:</label>
+                                        <button class="filter-btn active" data-filter-type="type"
+                                            data-value="all">All</button>
+                                        <button class="filter-btn" data-filter-type="type"
+                                            data-value="album">Albums</button>
+                                        <button class="filter-btn" data-filter-type="type"
+                                            data-value="track">Singles</button>
+                                    </div>
+
+                                    <!-- Filter by Format -->
+                                    <div class="filter-group">
+                                        <label class="filter-label">Format:</label>
+                                        <button class="filter-btn active" data-filter-type="format"
+                                            data-value="all">All</button>
+                                        <button class="filter-btn" data-filter-type="format"
+                                            data-value="flac">FLAC</button>
+                                        <button class="filter-btn" data-filter-type="format"
+                                            data-value="mp3">MP3</button>
+                                        <!-- Added missing format buttons -->
+                                        <button class="filter-btn" data-filter-type="format"
+                                            data-value="ogg">OGG</button>
+                                        <button class="filter-btn" data-filter-type="format"
+                                            data-value="aac">AAC</button>
+                                        <button class="filter-btn" data-filter-type="format"
+                                            data-value="wma">WMA</button>
+                                    </div>
+
+                                    <!-- Sort Controls -->
+                                    <div class="filter-group">
+                                        <label class="filter-label">Sort by:</label>
+                                        <button id="sort-order-btn" class="filter-btn sort-order-btn"
+                                            data-order="desc">↓</button>
+                                        <!-- Added all sort options from the GUI -->
+                                        <button class="filter-btn active" data-filter-type="sort"
+                                            data-value="relevance">Relevance</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="quality_score">Quality</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="size">Size</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="title">Name</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="username">Uploader</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="bitrate">Bitrate</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="duration">Duration</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="availability">Available</button>
+                                        <button class="filter-btn" data-filter-type="sort"
+                                            data-value="upload_speed">Speed</button>
+                                    </div>
+                                </div>
+                            </div>
+
+
+                            <!-- Search Status Bar -->
+                            <div class="search-status-container">
+                                <div class="spinner-animation hidden"></div>
+                                <p id="search-status-text">Ready to search • Enter artist, song, or album name</p>
+                                <div class="dots-animation hidden"></div>
+                            </div>
+
+                            <!-- Search Results Area: Replicates the QScrollArea -->
+                            <div class="search-results-container">
+                                <div class="search-results-header">
+                                    <h3>Search Results</h3>
                                 </div>
-                            </div>
-                        </div>
-
-
-                        <!-- Search Status Bar -->
-                        <div class="search-status-container">
-                            <div class="spinner-animation hidden"></div>
-                            <p id="search-status-text">Ready to search • Enter artist, song, or album name</p>
-                            <div class="dots-animation hidden"></div>
-                        </div>
-
-                        <!-- Search Results Area: Replicates the QScrollArea -->
-                        <div class="search-results-container">
-                            <div class="search-results-header">
-                                <h3>Search Results</h3>
-                            </div>
-                            <div class="search-results-scroll-area" id="search-results-area">
-                                <!-- 
+                                <div class="search-results-scroll-area" id="search-results-area">
+                                    <!-- 
                                 The placeholder search results have been removed.
                                 This area will now be populated by JavaScript based on API responses.
                                 -->
-                                <div class="search-results-placeholder">
-                                    <p>Your search results will appear here.</p>
+                                    <div class="search-results-placeholder">
+                                        <p>Your search results will appear here.</p>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        </div>
                         <!-- End Basic Search Section -->
 
                         <!-- Enhanced Search Section (New) -->
@@ -1285,7 +1380,8 @@
                                 <div class="enhanced-search-bar-container">
                                     <div class="enhanced-search-wrapper">
                                         <div class="enhanced-search-icon">✨</div>
-                                        <input type="text" id="enhanced-search-input" placeholder="Search for artists, albums, or tracks...">
+                                        <input type="text" id="enhanced-search-input"
+                                            placeholder="Search for artists, albums, or tracks...">
                                         <button id="enhanced-cancel-btn" class="enhanced-cancel-btn hidden">✕</button>
                                     </div>
                                     <button id="enhanced-search-btn" class="enhanced-search-btn">
@@ -1315,21 +1411,25 @@
                                             <!-- Artists Container (Side by Side) -->
                                             <div class="enh-artists-wrapper">
                                                 <!-- DB Artists -->
-                                                <div id="enh-db-artists-section" class="enh-dropdown-section enh-artist-section hidden">
+                                                <div id="enh-db-artists-section"
+                                                    class="enh-dropdown-section enh-artist-section hidden">
                                                     <div class="enh-section-header">
                                                         <span class="enh-section-icon">📚</span>
                                                         <h4 class="enh-section-title">In Your Library</h4>
-                                                        <span class="enh-section-count" id="enh-db-artists-count">0</span>
+                                                        <span class="enh-section-count"
+                                                            id="enh-db-artists-count">0</span>
                                                     </div>
                                                     <div class="enh-compact-list" id="enh-db-artists-list"></div>
                                                 </div>
 
                                                 <!-- Spotify Artists -->
-                                                <div id="enh-spotify-artists-section" class="enh-dropdown-section enh-artist-section hidden">
+                                                <div id="enh-spotify-artists-section"
+                                                    class="enh-dropdown-section enh-artist-section hidden">
                                                     <div class="enh-section-header">
                                                         <span class="enh-section-icon">🎤</span>
                                                         <h4 class="enh-section-title">Artists</h4>
-                                                        <span class="enh-section-count" id="enh-spotify-artists-count">0</span>
+                                                        <span class="enh-section-count"
+                                                            id="enh-spotify-artists-count">0</span>
                                                     </div>
                                                     <div class="enh-compact-list" id="enh-spotify-artists-list"></div>
                                                 </div>
@@ -1379,7 +1479,7 @@
                     <!-- == RIGHT PANEL: Controls and Download Queue          == -->
                     <!-- ======================================================= -->
                     <div class="downloads-side-panel">
-                        
+
                         <!-- Controls Panel: Replicates create_collapsible_controls_panel() -->
                         <div class="controls-panel">
                             <h3 class="controls-panel__header">Download Manager</h3>
@@ -1399,12 +1499,12 @@
                                 <button class="tab-btn" data-tab="finished-queue">Finished (0)</button>
                             </div>
                             <div class="download-manager__content">
-                                
+
                                 <!-- Active Queue -->
                                 <div class="download-queue active" id="active-queue">
                                     <div class="download-queue__empty-message">No active downloads.</div>
                                 </div>
-                                
+
                                 <!-- Finished Queue -->
                                 <div class="download-queue" id="finished-queue">
                                     <div class="download-queue__empty-message">No finished downloads.</div>
@@ -1422,23 +1522,22 @@
                     <div class="artists-search-container">
                         <div class="artists-welcome-section">
                             <h2 class="artists-welcome-title">🎵 Discover Artists</h2>
-                            <p class="artists-welcome-subtitle">Search for your favorite artists and explore their complete discography</p>
+                            <p class="artists-welcome-subtitle">Search for your favorite artists and explore their
+                                complete discography</p>
                         </div>
-                        
+
                         <div class="artists-search-input-container">
-                            <input type="text" 
-                                   id="artists-search-input" 
-                                   class="artists-search-input" 
-                                   placeholder="Search for an artist...">
+                            <input type="text" id="artists-search-input" class="artists-search-input"
+                                placeholder="Search for an artist...">
                             <div class="artists-search-icon">🔍</div>
                         </div>
-                        
+
                         <div class="artists-search-status" id="artists-search-status">
                             Start typing to search for artists
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Search Results State -->
                 <div class="artists-results-state hidden" id="artists-results-state">
                     <div class="artists-results-header">
@@ -1446,15 +1545,13 @@
                             <span class="back-icon">←</span>
                             <span>Back to Search</span>
                         </button>
-                        
+
                         <div class="artists-search-header">
-                            <input type="text" 
-                                   id="artists-header-search-input" 
-                                   class="artists-header-search-input" 
-                                   placeholder="Search for an artist...">
+                            <input type="text" id="artists-header-search-input" class="artists-header-search-input"
+                                placeholder="Search for an artist...">
                         </div>
                     </div>
-                    
+
                     <div class="artists-results-content">
                         <div class="artists-results-title">Search Results</div>
                         <div class="artists-cards-container" id="artists-cards-container">
@@ -1462,7 +1559,7 @@
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Artist Detail State -->
                 <div class="artist-detail-state hidden" id="artist-detail-state">
                     <div class="artist-detail-header">
@@ -1471,7 +1568,7 @@
                                 <span class="back-icon">←</span>
                                 <span>Back to Results</span>
                             </button>
-                            
+
                             <div class="artist-detail-info">
                                 <div class="artist-detail-image" id="search-artist-detail-image"></div>
                                 <div class="artist-detail-text">
@@ -1480,13 +1577,13 @@
                                 </div>
                             </div>
                         </div>
-                        
+
                         <button class="artist-detail-watchlist-btn" id="artist-detail-watchlist-btn">
                             <span class="watchlist-icon">👁️</span>
                             <span class="watchlist-text">Add to Watchlist</span>
                         </button>
                     </div>
-                    
+
                     <div class="artist-detail-content">
                         <div class="artist-detail-tabs">
                             <button class="artist-tab active" data-tab="albums" id="albums-tab">
@@ -1498,7 +1595,7 @@
                                 <span>Singles & EPs</span>
                             </button>
                         </div>
-                        
+
                         <div class="artist-detail-discography">
                             <div class="tab-content active" id="albums-content">
                                 <div class="album-cards-container" id="album-cards-container">
@@ -1561,10 +1658,8 @@
                     <!-- Search and Filters -->
                     <div class="library-controls">
                         <div class="library-search-container">
-                            <input type="text"
-                                   id="library-search-input"
-                                   class="library-search-input"
-                                   placeholder="Search artists...">
+                            <input type="text" id="library-search-input" class="library-search-input"
+                                placeholder="Search artists...">
                             <div class="library-search-icon">🔍</div>
                         </div>
 
@@ -1672,7 +1767,8 @@
                                     </div>
                                     <div class="completion-section">
                                         <div class="completion-bar">
-                                            <div class="completion-fill" id="albums-completion-fill" style="width: 0%"></div>
+                                            <div class="completion-fill" id="albums-completion-fill" style="width: 0%">
+                                            </div>
                                         </div>
                                         <span class="completion-text" id="albums-completion-text">0%</span>
                                     </div>
@@ -1685,7 +1781,8 @@
                                     </div>
                                     <div class="completion-section">
                                         <div class="completion-bar">
-                                            <div class="completion-fill" id="eps-completion-fill" style="width: 0%"></div>
+                                            <div class="completion-fill" id="eps-completion-fill" style="width: 0%">
+                                            </div>
                                         </div>
                                         <span class="completion-text" id="eps-completion-text">0%</span>
                                     </div>
@@ -1698,7 +1795,8 @@
                                     </div>
                                     <div class="completion-section">
                                         <div class="completion-bar">
-                                            <div class="completion-fill" id="singles-completion-fill" style="width: 0%"></div>
+                                            <div class="completion-fill" id="singles-completion-fill" style="width: 0%">
+                                            </div>
                                         </div>
                                         <span class="completion-text" id="singles-completion-text">0%</span>
                                     </div>
@@ -1719,7 +1817,8 @@
                     <div class="artist-detail-error hidden" id="artist-detail-error">
                         <div class="error-icon">⚠️</div>
                         <h3>Failed to load artist details</h3>
-                        <p id="artist-detail-error-message">An error occurred while loading the artist's discography.</p>
+                        <p id="artist-detail-error-message">An error occurred while loading the artist's discography.
+                        </p>
                         <button class="retry-btn" id="artist-detail-retry-btn">Retry</button>
                     </div>
 
@@ -1783,30 +1882,36 @@
                         <div class="discover-hero-overlay"></div>
 
                         <!-- Navigation Arrows -->
-                        <button class="discover-hero-nav discover-hero-nav-prev" onclick="navigateDiscoverHero(-1)" aria-label="Previous artist">
+                        <button class="discover-hero-nav discover-hero-nav-prev" onclick="navigateDiscoverHero(-1)"
+                            aria-label="Previous artist">
                             <span>‹</span>
                         </button>
-                        <button class="discover-hero-nav discover-hero-nav-next" onclick="navigateDiscoverHero(1)" aria-label="Next artist">
+                        <button class="discover-hero-nav discover-hero-nav-next" onclick="navigateDiscoverHero(1)"
+                            aria-label="Next artist">
                             <span>›</span>
                         </button>
 
                         <!-- Discover Page Help Button -->
-                        <button class="tool-help-button discover-page-help-button" data-tool="discover-page" title="Learn about the Discover page">?</button>
+                        <button class="tool-help-button discover-page-help-button" data-tool="discover-page"
+                            title="Learn about the Discover page">?</button>
 
                         <div class="discover-hero-content">
                             <div class="discover-hero-info">
                                 <div class="discover-hero-label">FEATURED ARTIST</div>
                                 <h1 class="discover-hero-title" id="discover-hero-title">Loading...</h1>
-                                <p class="discover-hero-subtitle" id="discover-hero-subtitle">Discover new music tailored to your taste</p>
+                                <p class="discover-hero-subtitle" id="discover-hero-subtitle">Discover new music
+                                    tailored to your taste</p>
                                 <div class="discover-hero-meta" id="discover-hero-meta">
                                     <!-- Popularity and genres will be populated here -->
                                 </div>
                                 <div class="discover-hero-actions">
-                                    <button class="discover-hero-button secondary" id="discover-hero-discography" onclick="viewDiscoverHeroDiscography()">
+                                    <button class="discover-hero-button secondary" id="discover-hero-discography"
+                                        onclick="viewDiscoverHeroDiscography()">
                                         <span class="button-icon">📀</span>
                                         <span class="button-text">View Discography</span>
                                     </button>
-                                    <button class="discover-hero-button primary watchlist-toggle-btn" id="discover-hero-add" onclick="toggleDiscoverHeroWatchlist(event)">
+                                    <button class="discover-hero-button primary watchlist-toggle-btn"
+                                        id="discover-hero-add" onclick="toggleDiscoverHeroWatchlist(event)">
                                         <span class="watchlist-icon">👁️</span>
                                         <span class="watchlist-text">Add to Watchlist</span>
                                     </button>
@@ -1852,14 +1957,19 @@
                         <div class="discover-section-header">
                             <div>
                                 <h2 class="discover-section-title" id="seasonal-playlist-title">Seasonal Mix</h2>
-                                <p class="discover-section-subtitle" id="seasonal-playlist-subtitle">Curated seasonal playlist</p>
+                                <p class="discover-section-subtitle" id="seasonal-playlist-subtitle">Curated seasonal
+                                    playlist</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('seasonal_playlist', 'Seasonal Mix')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('seasonal_playlist', 'Seasonal Mix')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="seasonal-playlist-sync-btn" onclick="startDiscoverPlaylistSync('seasonal_playlist', 'Seasonal Mix')" title="Sync to media server">
+                                <button class="action-button primary" id="seasonal-playlist-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('seasonal_playlist', 'Seasonal Mix')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -1873,10 +1983,12 @@
                                     <span>Syncing to media server...</span>
                                 </div>
                                 <div class="sync-status-stats">
-                                    <span class="sync-stat">✓ <span id="seasonal-playlist-sync-completed">0</span></span>
+                                    <span class="sync-stat">✓ <span
+                                            id="seasonal-playlist-sync-completed">0</span></span>
                                     <span class="sync-stat">⏳ <span id="seasonal-playlist-sync-pending">0</span></span>
                                     <span class="sync-stat">✗ <span id="seasonal-playlist-sync-failed">0</span></span>
-                                    <span class="sync-stat">(<span id="seasonal-playlist-sync-percentage">0</span>%)</span>
+                                    <span class="sync-stat">(<span
+                                            id="seasonal-playlist-sync-percentage">0</span>%)</span>
                                 </div>
                             </div>
                         </div>
@@ -1915,11 +2027,15 @@
                                 <p class="discover-section-subtitle">New drops from recent releases</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('release_radar', 'Fresh Tape')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('release_radar', 'Fresh Tape')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="release-radar-sync-btn" onclick="startDiscoverPlaylistSync('release_radar', 'Fresh Tape')" title="Sync to media server">
+                                <button class="action-button primary" id="release-radar-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('release_radar', 'Fresh Tape')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -1959,11 +2075,15 @@
                                 <p class="discover-section-subtitle">Curated from your collection</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('discovery_weekly', 'The Archives')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('discovery_weekly', 'The Archives')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="discovery-weekly-sync-btn" onclick="startDiscoverPlaylistSync('discovery_weekly', 'The Archives')" title="Sync to media server">
+                                <button class="action-button primary" id="discovery-weekly-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('discovery_weekly', 'The Archives')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -1982,7 +2102,8 @@
                                     <span class="sync-stat">✓ <span id="discovery-weekly-sync-matched">0</span></span>
                                     <span class="sync-separator">/</span>
                                     <span class="sync-stat">✗ <span id="discovery-weekly-sync-failed">0</span></span>
-                                    <span class="sync-stat">(<span id="discovery-weekly-sync-percentage">0</span>%)</span>
+                                    <span class="sync-stat">(<span
+                                            id="discovery-weekly-sync-percentage">0</span>%)</span>
                                 </div>
                             </div>
                         </div>
@@ -2003,11 +2124,15 @@
                                 <p class="discover-section-subtitle">Trending tracks from new discoveries</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('popular_picks', 'Popular Picks')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('popular_picks', 'Popular Picks')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="popular-picks-sync-btn" onclick="startDiscoverPlaylistSync('popular_picks', 'Popular Picks')" title="Sync to media server">
+                                <button class="action-button primary" id="popular-picks-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('popular_picks', 'Popular Picks')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -2041,11 +2166,15 @@
                                 <p class="discover-section-subtitle">Underground discoveries waiting for you</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('hidden_gems', 'Hidden Gems')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('hidden_gems', 'Hidden Gems')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="hidden-gems-sync-btn" onclick="startDiscoverPlaylistSync('hidden_gems', 'Hidden Gems')" title="Sync to media server">
+                                <button class="action-button primary" id="hidden-gems-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('hidden_gems', 'Hidden Gems')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -2098,14 +2227,19 @@
                         <div class="discover-section-header">
                             <div>
                                 <h2 class="discover-section-title">🔀 Discovery Shuffle</h2>
-                                <p class="discover-section-subtitle">Random tracks from your discovery pool - different every time</p>
+                                <p class="discover-section-subtitle">Random tracks from your discovery pool - different
+                                    every time</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('discovery_shuffle', 'Discovery Shuffle')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('discovery_shuffle', 'Discovery Shuffle')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="discovery-shuffle-sync-btn" onclick="startDiscoverPlaylistSync('discovery_shuffle', 'Discovery Shuffle')" title="Sync to media server">
+                                <button class="action-button primary" id="discovery-shuffle-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('discovery_shuffle', 'Discovery Shuffle')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -2119,10 +2253,12 @@
                                     <span>Syncing to media server...</span>
                                 </div>
                                 <div class="sync-status-stats">
-                                    <span class="sync-stat">✓ <span id="discovery-shuffle-sync-completed">0</span></span>
+                                    <span class="sync-stat">✓ <span
+                                            id="discovery-shuffle-sync-completed">0</span></span>
                                     <span class="sync-stat">⏳ <span id="discovery-shuffle-sync-pending">0</span></span>
                                     <span class="sync-stat">✗ <span id="discovery-shuffle-sync-failed">0</span></span>
-                                    <span class="sync-stat">(<span id="discovery-shuffle-sync-percentage">0</span>%)</span>
+                                    <span class="sync-stat">(<span
+                                            id="discovery-shuffle-sync-percentage">0</span>%)</span>
                                 </div>
                             </div>
                         </div>
@@ -2139,11 +2275,15 @@
                                 <p class="discover-section-subtitle">Your reliable go-to tracks</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDiscoverPlaylist('familiar_favorites', 'Familiar Favorites')" title="Download missing tracks">
+                                <button class="action-button secondary"
+                                    onclick="openDownloadModalForDiscoverPlaylist('familiar_favorites', 'Familiar Favorites')"
+                                    title="Download missing tracks">
                                     <span class="button-icon">↓</span>
                                     <span class="button-text">Download</span>
                                 </button>
-                                <button class="action-button primary" id="familiar-favorites-sync-btn" onclick="startDiscoverPlaylistSync('familiar_favorites', 'Familiar Favorites')" title="Sync to media server">
+                                <button class="action-button primary" id="familiar-favorites-sync-btn"
+                                    onclick="startDiscoverPlaylistSync('familiar_favorites', 'Familiar Favorites')"
+                                    title="Sync to media server">
                                     <span class="button-icon">⟳</span>
                                     <span class="button-text">Sync</span>
                                 </button>
@@ -2157,10 +2297,12 @@
                                     <span>Syncing to media server...</span>
                                 </div>
                                 <div class="sync-status-stats">
-                                    <span class="sync-stat">✓ <span id="familiar-favorites-sync-completed">0</span></span>
+                                    <span class="sync-stat">✓ <span
+                                            id="familiar-favorites-sync-completed">0</span></span>
                                     <span class="sync-stat">⏳ <span id="familiar-favorites-sync-pending">0</span></span>
                                     <span class="sync-stat">✗ <span id="familiar-favorites-sync-failed">0</span></span>
-                                    <span class="sync-stat">(<span id="familiar-favorites-sync-percentage">0</span>%)</span>
+                                    <span class="sync-stat">(<span
+                                            id="familiar-favorites-sync-percentage">0</span>%)</span>
                                 </div>
                             </div>
                         </div>
@@ -2178,12 +2320,9 @@
                         <div class="build-playlist-container">
                             <!-- Artist Search -->
                             <div class="build-playlist-search-section">
-                                <input
-                                    type="text"
-                                    id="build-playlist-search"
+                                <input type="text" id="build-playlist-search"
                                     placeholder="Search for artists (1-5 artists)..."
-                                    oninput="searchBuildPlaylistArtists()"
-                                />
+                                    oninput="searchBuildPlaylistArtists()" />
                                 <div id="build-playlist-search-results" class="build-playlist-search-results"></div>
                             </div>
 
@@ -2191,19 +2330,15 @@
                             <div class="build-playlist-selected-section">
                                 <h3>Selected Artists:</h3>
                                 <div id="build-playlist-selected-artists" class="build-playlist-selected-artists">
-                                    <div class="build-playlist-no-selection">No artists selected. Search and select 1-5 artists.</div>
+                                    <div class="build-playlist-no-selection">No artists selected. Search and select 1-5
+                                        artists.</div>
                                 </div>
                             </div>
 
                             <!-- Generate Button -->
                             <div class="build-playlist-actions">
-                                <button
-                                    id="build-playlist-generate-btn"
-                                    class="build-playlist-generate-btn"
-                                    onclick="generateBuildPlaylist()"
-                                    disabled
-                                    style="opacity: 0.5;"
-                                >
+                                <button id="build-playlist-generate-btn" class="build-playlist-generate-btn"
+                                    onclick="generateBuildPlaylist()" disabled style="opacity: 0.5;">
                                     Generate Playlist (50 tracks)
                                 </button>
                                 <div id="build-playlist-loading" class="build-playlist-loading" style="display: none;">
@@ -2217,15 +2352,21 @@
                                 <!-- Playlist Header with Actions -->
                                 <div class="discover-section-header" style="margin-top: 20px;">
                                     <div>
-                                        <h3 id="build-playlist-results-title" style="margin: 0; color: #fff; font-size: 18px;">Generated Playlist</h3>
-                                        <p id="build-playlist-results-subtitle" style="margin: 4px 0 0 0; color: #999; font-size: 13px;"></p>
+                                        <h3 id="build-playlist-results-title"
+                                            style="margin: 0; color: #fff; font-size: 18px;">Generated Playlist</h3>
+                                        <p id="build-playlist-results-subtitle"
+                                            style="margin: 4px 0 0 0; color: #999; font-size: 13px;"></p>
                                     </div>
                                     <div class="discover-section-actions">
-                                        <button class="action-button secondary" onclick="openDownloadModalForBuildPlaylist()" title="Download missing tracks">
+                                        <button class="action-button secondary"
+                                            onclick="openDownloadModalForBuildPlaylist()"
+                                            title="Download missing tracks">
                                             <span class="button-icon">↓</span>
                                             <span class="button-text">Download</span>
                                         </button>
-                                        <button class="action-button primary" id="build-playlist-sync-btn" onclick="startDiscoverPlaylistSync('build_playlist', 'Custom Playlist')" title="Sync to media server">
+                                        <button class="action-button primary" id="build-playlist-sync-btn"
+                                            onclick="startDiscoverPlaylistSync('build_playlist', 'Custom Playlist')"
+                                            title="Sync to media server">
                                             <span class="button-icon">⟳</span>
                                             <span class="button-text">Sync</span>
                                         </button>
@@ -2233,17 +2374,22 @@
                                 </div>
 
                                 <!-- Sync Status Display -->
-                                <div class="discover-sync-status" id="build-playlist-sync-status" style="display: none;">
+                                <div class="discover-sync-status" id="build-playlist-sync-status"
+                                    style="display: none;">
                                     <div class="sync-status-content">
                                         <div class="sync-status-label">
                                             <span class="sync-icon">⟳</span>
                                             <span>Syncing to media server...</span>
                                         </div>
                                         <div class="sync-status-stats">
-                                            <span class="sync-stat">✓ <span id="build-playlist-sync-completed">0</span></span>
-                                            <span class="sync-stat">⏳ <span id="build-playlist-sync-pending">0</span></span>
-                                            <span class="sync-stat">✗ <span id="build-playlist-sync-failed">0</span></span>
-                                            <span class="sync-stat">(<span id="build-playlist-sync-percentage">0</span>%)</span>
+                                            <span class="sync-stat">✓ <span
+                                                    id="build-playlist-sync-completed">0</span></span>
+                                            <span class="sync-stat">⏳ <span
+                                                    id="build-playlist-sync-pending">0</span></span>
+                                            <span class="sync-stat">✗ <span
+                                                    id="build-playlist-sync-failed">0</span></span>
+                                            <span class="sync-stat">(<span
+                                                    id="build-playlist-sync-percentage">0</span>%)</span>
                                         </div>
                                     </div>
                                 </div>
@@ -2267,7 +2413,9 @@
                                 <p class="discover-section-subtitle">Playlists from ListenBrainz</p>
                             </div>
                             <div class="discover-section-actions">
-                                <button class="action-button primary" id="listenbrainz-refresh-btn" onclick="refreshListenBrainzPlaylists()" title="Refresh playlists from ListenBrainz">
+                                <button class="action-button primary" id="listenbrainz-refresh-btn"
+                                    onclick="refreshListenBrainzPlaylists()"
+                                    title="Refresh playlists from ListenBrainz">
                                     <span class="button-icon">🔄</span>
                                     <span class="button-text">Refresh</span>
                                 </button>
@@ -2276,7 +2424,10 @@
 
                         <!-- ListenBrainz Tabs -->
                         <div class="listenbrainz-tabs" id="listenbrainz-tabs">
-                            <div class="discover-loading"><div class="loading-spinner"></div><p>Loading playlists...</p></div>
+                            <div class="discover-loading">
+                                <div class="loading-spinner"></div>
+                                <p>Loading playlists...</p>
+                            </div>
                         </div>
 
                         <!-- ListenBrainz Tab Content -->
@@ -2294,7 +2445,10 @@
 
                         <!-- Decade Tabs (will be populated dynamically) -->
                         <div class="decade-tabs" id="decade-tabs">
-                            <div class="discover-loading"><div class="loading-spinner"></div><p>Loading decades...</p></div>
+                            <div class="discover-loading">
+                                <div class="loading-spinner"></div>
+                                <p>Loading decades...</p>
+                            </div>
                         </div>
 
                         <!-- Decade Tab Contents (will be populated dynamically) -->
@@ -2310,7 +2464,10 @@
 
                         <!-- Genre Tabs (will be populated dynamically) -->
                         <div class="genre-tabs" id="genre-tabs">
-                            <div class="discover-loading"><div class="loading-spinner"></div><p>Loading genres...</p></div>
+                            <div class="discover-loading">
+                                <div class="loading-spinner"></div>
+                                <p>Loading genres...</p>
+                            </div>
                         </div>
 
                         <!-- Genre Tab Contents (will be populated dynamically) -->
@@ -2323,7 +2480,8 @@
             <div class="page" id="settings-page">
                 <div class="page-header">
                     <h2>Settings</h2>
-                    <button class="save-button" onclick="document.getElementById('save-settings').click()">💾 Save Settings</button>
+                    <button class="save-button" onclick="document.getElementById('save-settings').click()">💾 Save
+                        Settings</button>
                 </div>
                 <div class="settings-content">
                     <!-- Two Column Layout -->
@@ -2333,7 +2491,7 @@
                             <!-- API Configuration -->
                             <div class="settings-group">
                                 <h3>API Configuration</h3>
-                                
+
                                 <!-- Spotify Settings -->
                                 <div class="api-service-frame">
                                     <h4 class="service-title spotify-title">Spotify</h4>
@@ -2343,22 +2501,27 @@
                                     </div>
                                     <div class="form-group">
                                         <label>Client Secret:</label>
-                                        <input type="password" id="spotify-client-secret" placeholder="Spotify Client Secret">
+                                        <input type="password" id="spotify-client-secret"
+                                            placeholder="Spotify Client Secret">
                                     </div>
                                     <div class="form-group">
                                         <label>Redirect URI:</label>
-                                        <input type="text" id="spotify-redirect-uri" placeholder="http://127.0.0.1:8888/callback">
+                                        <input type="text" id="spotify-redirect-uri"
+                                            placeholder="http://127.0.0.1:8888/callback">
                                     </div>
                                     <div class="callback-info">
                                         <div class="callback-label">Current Redirect URI:</div>
-                                        <div class="callback-url" id="spotify-callback-display">http://127.0.0.1:8888/callback</div>
-                                        <div class="callback-help">Add this URL to your Spotify app's 'Redirect URIs' in the Spotify Developer Dashboard</div>
+                                        <div class="callback-url" id="spotify-callback-display">
+                                            http://127.0.0.1:8888/callback</div>
+                                        <div class="callback-help">Add this URL to your Spotify app's 'Redirect URIs' in
+                                            the Spotify Developer Dashboard</div>
                                     </div>
                                     <div class="form-actions">
-                                        <button class="auth-button" onclick="authenticateSpotify()">🔐 Authenticate</button>
+                                        <button class="auth-button" onclick="authenticateSpotify()">🔐
+                                            Authenticate</button>
                                     </div>
                                 </div>
-                                
+
                                 <!-- Tidal Settings -->
                                 <div class="api-service-frame">
                                     <h4 class="service-title tidal-title">Tidal</h4>
@@ -2368,22 +2531,26 @@
                                     </div>
                                     <div class="form-group">
                                         <label>Client Secret:</label>
-                                        <input type="password" id="tidal-client-secret" placeholder="Tidal Client Secret">
+                                        <input type="password" id="tidal-client-secret"
+                                            placeholder="Tidal Client Secret">
                                     </div>
                                     <div class="form-group">
                                         <label>Redirect URI:</label>
-                                        <input type="text" id="tidal-redirect-uri" placeholder="http://127.0.0.1:8889/tidal/callback">
+                                        <input type="text" id="tidal-redirect-uri"
+                                            placeholder="http://127.0.0.1:8889/tidal/callback">
                                     </div>
                                     <div class="callback-info">
                                         <div class="callback-label">Current Redirect URI:</div>
-                                        <div class="callback-url" id="tidal-callback-display">http://127.0.0.1:8889/tidal/callback</div>
+                                        <div class="callback-url" id="tidal-callback-display">
+                                            http://127.0.0.1:8889/tidal/callback</div>
                                         <div class="callback-help">Add this URL to your Tidal app configuration</div>
                                     </div>
                                     <div class="form-actions">
-                                        <button class="auth-button" onclick="authenticateTidal()">🔐 Authenticate</button>
+                                        <button class="auth-button" onclick="authenticateTidal()">🔐
+                                            Authenticate</button>
                                     </div>
                                 </div>
-                                
+
                                 <!-- Soulseek Settings -->
                                 <div class="api-service-frame">
                                     <h4 class="service-title soulseek-title">Soulseek</h4>
@@ -2391,7 +2558,8 @@
                                         <label>slskd URL:</label>
                                         <div class="path-input-group">
                                             <input type="url" id="soulseek-url" placeholder="http://localhost:5030">
-                                            <button class="detect-button" onclick="autoDetectSlskd()">Auto-detect</button>
+                                            <button class="detect-button"
+                                                onclick="autoDetectSlskd()">Auto-detect</button>
                                         </div>
                                     </div>
                                     <div class="form-group">
@@ -2400,13 +2568,17 @@
                                     </div>
                                     <div class="form-group">
                                         <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 for tracks (15-300 seconds)</small>
+                                        <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
+                                            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 for late results (5-60 seconds)</small>
+                                        <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
+                                            for late results (5-60 seconds)</small>
                                     </div>
                                 </div>
 
@@ -2415,40 +2587,52 @@
                                     <h4 class="service-title listenbrainz-title">ListenBrainz</h4>
                                     <div class="form-group">
                                         <label>User Token:</label>
-                                        <input type="password" id="listenbrainz-token" placeholder="ListenBrainz User Token">
+                                        <input type="password" id="listenbrainz-token"
+                                            placeholder="ListenBrainz User Token">
                                     </div>
                                     <div class="callback-info">
-                                        <div class="callback-help">Get your token from <a href="https://listenbrainz.org/profile/" target="_blank" style="color: #eb743b;">ListenBrainz Settings</a></div>
+                                        <div class="callback-help">Get your token from <a
+                                                href="https://listenbrainz.org/profile/" target="_blank"
+                                                style="color: #eb743b;">ListenBrainz Settings</a></div>
                                     </div>
                                 </div>
 
                                 <!-- Test Connection Buttons -->
                                 <div class="api-test-buttons">
-                                    <button class="test-button" onclick="testConnection('spotify')">Test Spotify</button>
+                                    <button class="test-button" onclick="testConnection('spotify')">Test
+                                        Spotify</button>
                                     <button class="test-button" onclick="testConnection('tidal')">Test Tidal</button>
-                                    <button class="test-button" onclick="testConnection('soulseek')">Test Soulseek</button>
-                                    <button class="test-button" onclick="testConnection('listenbrainz')">Test ListenBrainz</button>
+                                    <button class="test-button" onclick="testConnection('soulseek')">Test
+                                        Soulseek</button>
+                                    <button class="test-button" onclick="testConnection('listenbrainz')">Test
+                                        ListenBrainz</button>
                                 </div>
                             </div>
-                            
+
                             <!-- Server Connections -->
                             <div class="settings-group">
                                 <h3>Server Connections</h3>
-                                
+
                                 <!-- Server Toggle Buttons -->
                                 <div class="server-toggle-container">
-                                    <button class="server-toggle-btn active" id="plex-toggle" onclick="toggleServer('plex')">
-                                        <img src="https://www.plex.tv/wp-content/themes/plex/assets/img/plex-logo.svg" alt="Plex" class="server-logo">
+                                    <button class="server-toggle-btn active" id="plex-toggle"
+                                        onclick="toggleServer('plex')">
+                                        <img src="https://www.plex.tv/wp-content/themes/plex/assets/img/plex-logo.svg"
+                                            alt="Plex" class="server-logo">
                                     </button>
-                                    <button class="server-toggle-btn" id="jellyfin-toggle" onclick="toggleServer('jellyfin')">
-                                        <img src="https://jellyfin.org/images/logo.svg" alt="Jellyfin" class="server-logo">
+                                    <button class="server-toggle-btn" id="jellyfin-toggle"
+                                        onclick="toggleServer('jellyfin')">
+                                        <img src="https://jellyfin.org/images/logo.svg" alt="Jellyfin"
+                                            class="server-logo">
                                     </button>
-                                    <button class="server-toggle-btn" id="navidrome-toggle" onclick="toggleServer('navidrome')">
-                                        <img src="https://tweakers.net/ext/i/2007323764.png" alt="Navidrome" class="server-logo">
+                                    <button class="server-toggle-btn" id="navidrome-toggle"
+                                        onclick="toggleServer('navidrome')">
+                                        <img src="https://tweakers.net/ext/i/2007323764.png" alt="Navidrome"
+                                            class="server-logo">
                                         Navidrome
                                     </button>
                                 </div>
-                                
+
                                 <!-- Plex Settings -->
                                 <div class="server-config-container" id="plex-container">
                                     <div class="form-group">
@@ -2473,7 +2657,7 @@
                                         <button class="test-button" onclick="testConnection('plex')">Test</button>
                                     </div>
                                 </div>
-                                
+
                                 <!-- Jellyfin Settings -->
                                 <div class="server-config-container hidden" id="jellyfin-container">
                                     <div class="form-group">
@@ -2485,11 +2669,13 @@
                                         <input type="password" id="jellyfin-api-key" placeholder="Jellyfin API Key">
                                     </div>
                                     <div class="form-actions">
-                                        <button class="detect-button" onclick="autoDetectJellyfin()">Auto-detect</button>
+                                        <button class="detect-button"
+                                            onclick="autoDetectJellyfin()">Auto-detect</button>
                                         <button class="test-button" onclick="testConnection('jellyfin')">Test</button>
                                     </div>
 
-                                    <div class="form-group" id="jellyfin-library-selector-container" style="display: none;">
+                                    <div class="form-group" id="jellyfin-library-selector-container"
+                                        style="display: none;">
                                         <label>Music Library</label>
                                         <select id="jellyfin-music-library" onchange="selectJellyfinLibrary()">
                                             <option value="">Select Library</option>
@@ -2513,18 +2699,20 @@
                                         <input type="password" id="navidrome-password" placeholder="Password">
                                     </div>
                                     <div class="form-actions">
-                                        <button class="detect-button" onclick="autoDetectNavidrome()">Auto-detect</button>
+                                        <button class="detect-button"
+                                            onclick="autoDetectNavidrome()">Auto-detect</button>
                                         <button class="test-button" onclick="testConnection('navidrome')">Test</button>
                                     </div>
                                 </div>
 
                                 <!-- Server Test Button -->
                                 <div class="server-test-section">
-                                    <button class="test-button server-test-btn" onclick="testConnection('server')">Test Server</button>
+                                    <button class="test-button server-test-btn" onclick="testConnection('server')">Test
+                                        Server</button>
                                 </div>
                             </div>
                         </div>
-                        
+
                         <!-- Right Column - Download Settings, Database, Metadata, Logging -->
                         <div class="settings-right-column">
                             <!-- Download Settings -->
@@ -2538,7 +2726,7 @@
                                         <button class="browse-button" onclick="browsePath('download')">Browse</button>
                                     </div>
                                 </div>
-                                
+
                                 <div class="form-group">
                                     <label>Matched Transfer Dir (Plex Music Dir?):</label>
                                     <div class="path-input-group">
@@ -2549,13 +2737,15 @@
 
                                 <div class="form-group">
                                     <label>Download Source:</label>
-                                    <select id="download-source-mode" class="form-select" onchange="updateDownloadSourceUI()">
+                                    <select id="download-source-mode" class="form-select"
+                                        onchange="updateDownloadSourceUI()">
                                         <option value="soulseek">Soulseek Only</option>
                                         <option value="youtube">YouTube Only</option>
                                         <option value="hybrid">Hybrid (Try both with fallback)</option>
                                     </select>
                                     <div class="setting-help-text">
-                                        Choose where to download music from. Hybrid mode tries primary source first, then falls back to secondary if it fails.
+                                        Choose where to download music from. Hybrid mode tries primary source first,
+                                        then falls back to secondary if it fails.
                                     </div>
                                 </div>
 
@@ -2574,9 +2764,11 @@
 
                                     <div class="form-group">
                                         <label>YouTube Min Confidence:</label>
-                                        <input type="number" id="youtube-min-confidence" min="0.5" max="1.0" step="0.05" value="0.65" placeholder="0.65">
+                                        <input type="number" id="youtube-min-confidence" min="0.5" max="1.0" step="0.05"
+                                            value="0.65" placeholder="0.65">
                                         <div class="setting-help-text">
-                                            Minimum match confidence for YouTube downloads (0.5-1.0). Higher = stricter matching.
+                                            Minimum match confidence for YouTube downloads (0.5-1.0). Higher = stricter
+                                            matching.
                                         </div>
                                     </div>
                                 </div>
@@ -2590,7 +2782,8 @@
                                         <option value="ERROR">ERROR (Critical Only)</option>
                                     </select>
                                     <div class="setting-help-text">
-                                        Controls the level of detail in application logs. DEBUG shows all details, INFO shows general operations, WARNING and ERROR show only issues.
+                                        Controls the level of detail in application logs. DEBUG shows all details, INFO
+                                        shows general operations, WARNING and ERROR show only issues.
                                     </div>
                                 </div>
                             </div>
@@ -2609,7 +2802,8 @@
                                         <option value="all">Entire discography</option>
                                     </select>
                                     <div class="setting-help-text">
-                                        Controls how far back to scan when adding new artists or refreshing discovery pool.
+                                        Controls how far back to scan when adding new artists or refreshing discovery
+                                        pool.
                                         Once scanned, artists are kept updated with new releases only.
                                     </div>
                                 </div>
@@ -2623,13 +2817,16 @@
                                 <div class="quality-presets">
                                     <label>Quick Presets:</label>
                                     <div class="preset-buttons">
-                                        <button class="preset-button" onclick="applyQualityPreset('audiophile')" title="FLAC only, strict size constraints">
+                                        <button class="preset-button" onclick="applyQualityPreset('audiophile')"
+                                            title="FLAC only, strict size constraints">
                                             🎧 Audiophile
                                         </button>
-                                        <button class="preset-button active" onclick="applyQualityPreset('balanced')" title="FLAC preferred, MP3 fallback">
+                                        <button class="preset-button active" onclick="applyQualityPreset('balanced')"
+                                            title="FLAC preferred, MP3 fallback">
                                             ⚖️ Balanced
                                         </button>
-                                        <button class="preset-button" onclick="applyQualityPreset('space_saver')" title="MP3 preferred, smaller sizes">
+                                        <button class="preset-button" onclick="applyQualityPreset('space_saver')"
+                                            title="MP3 preferred, smaller sizes">
                                             💾 Space Saver
                                         </button>
                                     </div>
@@ -2639,7 +2836,8 @@
                                 <div class="quality-tier">
                                     <div class="quality-tier-header">
                                         <label class="checkbox-label">
-                                            <input type="checkbox" id="quality-flac-enabled" checked onchange="toggleQuality('flac')">
+                                            <input type="checkbox" id="quality-flac-enabled" checked
+                                                onchange="toggleQuality('flac')">
                                             <span class="quality-tier-name">FLAC (Lossless)</span>
                                         </label>
                                         <span class="quality-tier-priority" id="priority-flac">Priority: 1</span>
@@ -2648,8 +2846,12 @@
                                         <div class="slider-group">
                                             <label>File Size Range:</label>
                                             <div class="dual-slider-container">
-                                                <input type="range" class="range-slider range-slider-min" id="flac-min" min="0" max="200" value="0" step="5" oninput="updateQualityRange('flac')">
-                                                <input type="range" class="range-slider range-slider-max" id="flac-max" min="0" max="200" value="150" step="5" oninput="updateQualityRange('flac')">
+                                                <input type="range" class="range-slider range-slider-min" id="flac-min"
+                                                    min="0" max="200" value="0" step="5"
+                                                    oninput="updateQualityRange('flac')">
+                                                <input type="range" class="range-slider range-slider-max" id="flac-max"
+                                                    min="0" max="200" value="150" step="5"
+                                                    oninput="updateQualityRange('flac')">
                                                 <div class="range-slider-track"></div>
                                             </div>
                                             <div class="slider-values">
@@ -2665,7 +2867,8 @@
                                 <div class="quality-tier">
                                     <div class="quality-tier-header">
                                         <label class="checkbox-label">
-                                            <input type="checkbox" id="quality-mp3_320-enabled" checked onchange="toggleQuality('mp3_320')">
+                                            <input type="checkbox" id="quality-mp3_320-enabled" checked
+                                                onchange="toggleQuality('mp3_320')">
                                             <span class="quality-tier-name">MP3 320 kbps</span>
                                         </label>
                                         <span class="quality-tier-priority" id="priority-mp3_320">Priority: 2</span>
@@ -2674,8 +2877,12 @@
                                         <div class="slider-group">
                                             <label>File Size Range:</label>
                                             <div class="dual-slider-container">
-                                                <input type="range" class="range-slider range-slider-min" id="mp3_320-min" min="0" max="50" value="0" step="1" oninput="updateQualityRange('mp3_320')">
-                                                <input type="range" class="range-slider range-slider-max" id="mp3_320-max" min="0" max="50" value="20" step="1" oninput="updateQualityRange('mp3_320')">
+                                                <input type="range" class="range-slider range-slider-min"
+                                                    id="mp3_320-min" min="0" max="50" value="0" step="1"
+                                                    oninput="updateQualityRange('mp3_320')">
+                                                <input type="range" class="range-slider range-slider-max"
+                                                    id="mp3_320-max" min="0" max="50" value="20" step="1"
+                                                    oninput="updateQualityRange('mp3_320')">
                                                 <div class="range-slider-track"></div>
                                             </div>
                                             <div class="slider-values">
@@ -2691,7 +2898,8 @@
                                 <div class="quality-tier">
                                     <div class="quality-tier-header">
                                         <label class="checkbox-label">
-                                            <input type="checkbox" id="quality-mp3_256-enabled" checked onchange="toggleQuality('mp3_256')">
+                                            <input type="checkbox" id="quality-mp3_256-enabled" checked
+                                                onchange="toggleQuality('mp3_256')">
                                             <span class="quality-tier-name">MP3 256 kbps</span>
                                         </label>
                                         <span class="quality-tier-priority" id="priority-mp3_256">Priority: 3</span>
@@ -2700,8 +2908,12 @@
                                         <div class="slider-group">
                                             <label>File Size Range:</label>
                                             <div class="dual-slider-container">
-                                                <input type="range" class="range-slider range-slider-min" id="mp3_256-min" min="0" max="40" value="0" step="1" oninput="updateQualityRange('mp3_256')">
-                                                <input type="range" class="range-slider range-slider-max" id="mp3_256-max" min="0" max="40" value="15" step="1" oninput="updateQualityRange('mp3_256')">
+                                                <input type="range" class="range-slider range-slider-min"
+                                                    id="mp3_256-min" min="0" max="40" value="0" step="1"
+                                                    oninput="updateQualityRange('mp3_256')">
+                                                <input type="range" class="range-slider range-slider-max"
+                                                    id="mp3_256-max" min="0" max="40" value="15" step="1"
+                                                    oninput="updateQualityRange('mp3_256')">
                                                 <div class="range-slider-track"></div>
                                             </div>
                                             <div class="slider-values">
@@ -2717,7 +2929,8 @@
                                 <div class="quality-tier">
                                     <div class="quality-tier-header">
                                         <label class="checkbox-label">
-                                            <input type="checkbox" id="quality-mp3_192-enabled" onchange="toggleQuality('mp3_192')">
+                                            <input type="checkbox" id="quality-mp3_192-enabled"
+                                                onchange="toggleQuality('mp3_192')">
                                             <span class="quality-tier-name">MP3 192 kbps</span>
                                         </label>
                                         <span class="quality-tier-priority" id="priority-mp3_192">Priority: 4</span>
@@ -2726,8 +2939,12 @@
                                         <div class="slider-group">
                                             <label>File Size Range:</label>
                                             <div class="dual-slider-container">
-                                                <input type="range" class="range-slider range-slider-min" id="mp3_192-min" min="0" max="30" value="0" step="1" oninput="updateQualityRange('mp3_192')">
-                                                <input type="range" class="range-slider range-slider-max" id="mp3_192-max" min="0" max="30" value="12" step="1" oninput="updateQualityRange('mp3_192')">
+                                                <input type="range" class="range-slider range-slider-min"
+                                                    id="mp3_192-min" min="0" max="30" value="0" step="1"
+                                                    oninput="updateQualityRange('mp3_192')">
+                                                <input type="range" class="range-slider range-slider-max"
+                                                    id="mp3_192-max" min="0" max="30" value="12" step="1"
+                                                    oninput="updateQualityRange('mp3_192')">
                                                 <div class="range-slider-track"></div>
                                             </div>
                                             <div class="slider-values">
@@ -2748,8 +2965,10 @@
                                 </div>
 
                                 <div class="help-text">
-                                    <strong>How it works:</strong> Downloads try each enabled quality in priority order (1 = highest).
-                                    File size constraints filter out outliers - MAX limits catch fake files (500MB "FLACs"), MIN limits (optional) can enforce minimum quality.
+                                    <strong>How it works:</strong> Downloads try each enabled quality in priority order
+                                    (1 = highest).
+                                    File size constraints filter out outliers - MAX limits catch fake files (500MB
+                                    "FLACs"), MIN limits (optional) can enforce minimum quality.
                                     Set MIN to 0 to accept all file sizes (recommended for most users).
                                 </div>
                             </div>
@@ -2760,7 +2979,7 @@
                             <!-- Database Settings -->
                             <div class="settings-group">
                                 <h3>Database Settings</h3>
-                                
+
                                 <div class="form-group">
                                     <label>Concurrent Workers:</label>
                                     <select id="max-workers">
@@ -2774,10 +2993,11 @@
                                         <option value="10">10</option>
                                     </select>
                                 </div>
-                                
-                                <div class="help-text">Number of parallel threads for database updates. Higher values = faster updates but more server load.</div>
+
+                                <div class="help-text">Number of parallel threads for database updates. Higher values =
+                                    faster updates but more server load.</div>
                             </div>
-                            
+
                             <!-- Metadata Enhancement Settings -->
                             <div class="settings-group">
                                 <h3>🎵 Metadata Enhancement</h3>
@@ -2815,24 +3035,29 @@
 
                                 <div class="form-group">
                                     <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, $album, $title, $track, $year</small>
+                                    <input type="text" id="template-album-path"
+                                        placeholder="$albumartist/$albumartist - $album/$track - $title">
+                                    <small style="color: #888;">Variables: $albumartist, $artist, $album, $title,
+                                        $track, $year</small>
                                 </div>
 
                                 <div class="form-group">
                                     <label>Single Path Template:</label>
-                                    <input type="text" id="template-single-path" placeholder="$artist/$artist - $title/$title">
+                                    <input type="text" id="template-single-path"
+                                        placeholder="$artist/$artist - $title/$title">
                                     <small style="color: #888;">Variables: $artist, $title, $album, $year</small>
                                 </div>
 
                                 <div class="form-group">
                                     <label>Playlist Path Template:</label>
-                                    <input type="text" id="template-playlist-path" placeholder="$playlist/$artist - $title">
+                                    <input type="text" id="template-playlist-path"
+                                        placeholder="$playlist/$artist - $title">
                                     <small style="color: #888;">Variables: $playlist, $artist, $title, $year</small>
                                 </div>
 
                                 <div class="form-group">
-                                    <button class="test-button" onclick="resetFileOrganizationTemplates()" style="background: #666;">
+                                    <button class="test-button" onclick="resetFileOrganizationTemplates()"
+                                        style="background: #666;">
                                         🔄 Reset to Defaults
                                     </button>
                                     <small style="color: #888; display: block; margin-top: 8px;">
@@ -2844,7 +3069,7 @@
                             <!-- Playlist Sync Settings -->
                             <div class="settings-group">
                                 <h3>Playlist Sync Settings</h3>
-                                
+
                                 <div class="form-group">
                                     <label class="checkbox-label">
                                         <input type="checkbox" id="create-backup" checked>
@@ -2852,16 +3077,16 @@
                                     </label>
                                 </div>
                             </div>
-                            
+
                             <!-- Logging Information (Read-only) -->
                             <div class="settings-group">
                                 <h3>Logging Information</h3>
-                                
+
                                 <div class="form-group">
                                     <label>Log Level:</label>
                                     <div class="readonly-field" id="log-level-display">DEBUG</div>
                                 </div>
-                                
+
                                 <div class="form-group">
                                     <label>Log Path:</label>
                                     <div class="readonly-field" id="log-path-display">logs/app.log</div>
@@ -2869,7 +3094,7 @@
                             </div>
                         </div>
                     </div>
-                    
+
                     <!-- Save Button -->
                     <div class="settings-actions">
                         <button class="save-button" id="save-settings">💾 Save Settings</button>
@@ -2878,19 +3103,19 @@
             </div>
         </div>
     </div>
-    
+
     <!-- Loading Overlay -->
     <div class="loading-overlay hidden" id="loading-overlay">
         <div class="loading-spinner"></div>
         <div class="loading-message">Processing...</div>
     </div>
-    
+
     <!-- Toast Notifications -->
     <div class="toast-container" id="toast-container"></div>
-    
+
     <!-- Hidden HTML5 Audio Player for Streaming -->
     <audio id="audio-player" style="display: none;"></audio>
-    
+
     <!-- Matched Download Modal -->
     <div class="modal-overlay hidden" id="matching-modal-overlay">
         <div class="matching-modal" id="matching-modal">
@@ -2898,7 +3123,7 @@
                 <h2 id="matching-modal-title">Match Download to Spotify</h2>
                 <button class="matching-modal-close" onclick="closeMatchingModal()">✕</button>
             </div>
-            
+
             <div class="matching-modal-content">
                 <!-- Artist Selection Stage -->
                 <div id="artist-selection-stage" class="selection-stage">
@@ -2906,51 +3131,55 @@
                         <h3 id="artist-stage-title">Step 1: Select the correct Artist</h3>
                         <p class="stage-subtitle">Choose the artist that best matches your download</p>
                     </div>
-                    
+
                     <div class="suggestions-section">
                         <h4 class="suggestions-title">Top Suggestions</h4>
                         <div class="suggestions-container" id="artist-suggestions">
                             <!-- Artist suggestion cards will be populated here -->
                         </div>
                     </div>
-                    
+
                     <div class="manual-search-section">
                         <h4 class="suggestions-title">Or, Search Manually</h4>
-                        <input type="text" id="artist-search-input" class="search-input" placeholder="Search for an artist...">
+                        <input type="text" id="artist-search-input" class="search-input"
+                            placeholder="Search for an artist...">
                         <div class="suggestions-container" id="artist-manual-results">
                             <!-- Manual search results will be populated here -->
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Album Selection Stage (for album downloads) -->
                 <div id="album-selection-stage" class="selection-stage hidden">
                     <div class="stage-header">
                         <h3 id="album-stage-title">Step 2: Select the correct Album</h3>
-                        <p class="stage-subtitle">Choose the album that best matches your download for <span id="selected-artist-name"></span></p>
+                        <p class="stage-subtitle">Choose the album that best matches your download for <span
+                                id="selected-artist-name"></span></p>
                     </div>
-                    
+
                     <div class="suggestions-section">
                         <h4 class="suggestions-title">Top Suggestions</h4>
                         <div class="suggestions-container" id="album-suggestions">
                             <!-- Album suggestion cards will be populated here -->
                         </div>
                     </div>
-                    
+
                     <div class="manual-search-section">
                         <h4 class="suggestions-title">Or, Search Manually</h4>
-                        <input type="text" id="album-search-input" class="search-input" placeholder="Search for an album...">
+                        <input type="text" id="album-search-input" class="search-input"
+                            placeholder="Search for an album...">
                         <div class="suggestions-container" id="album-manual-results">
                             <!-- Manual search results will be populated here -->
                         </div>
                     </div>
                 </div>
             </div>
-            
+
             <div class="matching-modal-actions">
                 <button id="skip-matching-btn" class="modal-button modal-button--secondary">Skip Matching</button>
                 <button id="cancel-match-btn" class="modal-button modal-button--cancel">Cancel</button>
-                <button id="confirm-match-btn" class="modal-button modal-button--primary" disabled>Confirm Selection</button>
+                <button id="confirm-match-btn" class="modal-button modal-button--primary" disabled>Confirm
+                    Selection</button>
             </div>
         </div>
     </div>
@@ -2964,14 +3193,14 @@
                 <h2 class="version-modal-title">What's New in SoulSync</h2>
                 <div class="version-modal-subtitle">Version 1.2 - Enhanced Search & Matching Engine Overhaul</div>
             </div>
-            
+
             <!-- Content Area with Scroll -->
             <div class="version-modal-content">
                 <div class="version-content-container" id="version-content-container">
                     <!-- Content will be populated by JavaScript -->
                 </div>
             </div>
-            
+
             <!-- Footer -->
             <div class="version-modal-footer">
                 <button class="version-modal-close" onclick="closeVersionModal()">Close</button>
@@ -2996,7 +3225,8 @@
                     <div class="wishlist-track-list-container">
                         <div class="wishlist-track-list-header">
                             <h3>Tracks to Add to Wishlist</h3>
-                            <p class="wishlist-track-list-subtitle">All tracks from this release will be added to your wishlist</p>
+                            <p class="wishlist-track-list-subtitle">All tracks from this release will be added to your
+                                wishlist</p>
                         </div>
 
                         <div class="wishlist-track-list" id="wishlist-track-list">
@@ -3007,7 +3237,8 @@
 
                 <div class="add-to-wishlist-modal-footer">
                     <div class="wishlist-modal-actions">
-                        <button class="wishlist-modal-btn wishlist-modal-btn-secondary" onclick="closeAddToWishlistModal()">
+                        <button class="wishlist-modal-btn wishlist-modal-btn-secondary"
+                            onclick="closeAddToWishlistModal()">
                             Close
                         </button>
                         <button class="wishlist-modal-btn wishlist-modal-btn-primary" id="confirm-add-to-wishlist-btn">
@@ -3064,7 +3295,8 @@
                                     <div class="config-option-icon">🎶</div>
                                     <div class="config-option-text">
                                         <span class="config-option-title">Singles</span>
-                                        <span class="config-option-description">Single tracks and 2-3 track releases</span>
+                                        <span class="config-option-description">Single tracks and 2-3 track
+                                            releases</span>
                                     </div>
                                 </div>
                             </label>
@@ -3074,7 +3306,8 @@
 
                 <div class="watchlist-artist-config-footer">
                     <div class="config-modal-actions">
-                        <button class="config-modal-btn config-modal-btn-secondary" onclick="closeWatchlistArtistConfigModal()">
+                        <button class="config-modal-btn config-modal-btn-secondary"
+                            onclick="closeWatchlistArtistConfigModal()">
                             Cancel
                         </button>
                         <button class="config-modal-btn config-modal-btn-primary" id="save-artist-config-btn">
@@ -3099,7 +3332,8 @@
             <div class="genre-browser-modal-content">
                 <div class="genre-browser-search-section">
                     <div class="genre-browser-search-container">
-                        <input type="text" class="genre-browser-search-input" placeholder="Search genres..." id="genre-browser-search">
+                        <input type="text" class="genre-browser-search-input" placeholder="Search genres..."
+                            id="genre-browser-search">
                         <span class="genre-browser-search-icon">🔍</span>
                     </div>
                 </div>
@@ -3144,4 +3378,5 @@
 
     <script src="{{ url_for('static', filename='script.js') }}"></script>
 </body>
+
 </html>
\ No newline at end of file