From e9a17976870de0295736e7f022914c0478cda193 Mon Sep 17 00:00:00 2001
From: Broque Thomas <batmanesignal@gmail.com>
Date: Fri, 2 Jan 2026 11:20:22 -0800
Subject: [PATCH] Add toggle button for download manager panel

Introduces a toggle button in the downloads header to show or hide the download manager side panel. The toggle state is persisted in localStorage, and responsive styles are added for better usability on small screens. Updates HTML structure, JavaScript initialization, and CSS for the new toggle functionality and improved mobile experience.
---
 webui/index.html       |  11 +-
 webui/static/script.js |  40 ++++-
 webui/static/style.css | 329 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 374 insertions(+), 6 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 53b1d3f7..12d2a86a 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -1172,8 +1172,15 @@
                         
                         <!-- Header: Replicates create_elegant_header() -->
                         <div class="downloads-header">
-                            <h2 class="downloads-title">🎵 Music Downloads</h2>
-                            <p class="downloads-subtitle">Search, discover, and download high-quality music</p>
+                            <div class="downloads-header-content">
+                                <div class="downloads-header-text">
+                                    <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">
+                                    <span class="toggle-icon">›</span>
+                                </button>
+                            </div>
                         </div>
 
                         <!-- Search Mode Toggle -->
diff --git a/webui/static/script.js b/webui/static/script.js
index c2716788..4e4ae003 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -296,13 +296,14 @@ const API = {
 
 document.addEventListener('DOMContentLoaded', function() {
     console.log('SoulSync WebUI initializing...');
-    
+
     // Initialize components
     initializeNavigation();
     initializeMediaPlayer();
     initializeDonationWidget();
     initializeSyncPage();
     initializeWatchlist();
+    initializeDownloadManagerToggle();
 
     // Initialize Beatport rebuild slider if it's the active tab by default
     const activeRebuildTab = document.querySelector('.beatport-tab-button.active[data-beatport-tab="rebuild"]');
@@ -363,16 +364,47 @@ function initializeWatchlist() {
     if (watchlistButton) {
         watchlistButton.addEventListener('click', showWatchlistModal);
     }
-    
+
     // Update watchlist count initially
     updateWatchlistButtonCount();
-    
+
     // Update count every 30 seconds
     setInterval(updateWatchlistButtonCount, 30000);
-    
+
     console.log('Watchlist system initialized');
 }
 
+function initializeDownloadManagerToggle() {
+    const toggleButton = document.getElementById('toggle-download-manager-btn');
+    const downloadsContent = document.querySelector('.downloads-content');
+
+    if (!toggleButton || !downloadsContent) {
+        console.log('Download manager toggle not found on this page');
+        return;
+    }
+
+    // Load saved state from localStorage
+    const isHidden = localStorage.getItem('downloadManagerHidden') === 'true';
+    if (isHidden) {
+        downloadsContent.classList.add('manager-hidden');
+    }
+
+    // Add click handler
+    toggleButton.addEventListener('click', () => {
+        const isCurrentlyHidden = downloadsContent.classList.contains('manager-hidden');
+
+        if (isCurrentlyHidden) {
+            downloadsContent.classList.remove('manager-hidden');
+            localStorage.setItem('downloadManagerHidden', 'false');
+        } else {
+            downloadsContent.classList.add('manager-hidden');
+            localStorage.setItem('downloadManagerHidden', 'true');
+        }
+    });
+
+    console.log('Download manager toggle initialized');
+}
+
 function navigateToPage(pageId) {
     if (pageId === currentPage) return;
 
diff --git a/webui/static/style.css b/webui/static/style.css
index 69082d42..1f41e03c 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -1846,6 +1846,18 @@ body {
 .downloads-header {
     padding: 16px 0;
 }
+
+.downloads-header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 20px;
+}
+
+.downloads-header-text {
+    flex: 1;
+}
+
 .downloads-header .downloads-title {
     font-family: 'Segoe UI', sans-serif;
     font-size: 28px;
@@ -1861,6 +1873,113 @@ body {
     margin-top: 4px;
 }
 
+/* Toggle Download Manager Button */
+.toggle-manager-btn {
+    background: linear-gradient(135deg,
+        rgba(35, 35, 35, 0.8) 0%,
+        rgba(25, 25, 25, 0.9) 100%);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    flex-shrink: 0;
+    box-shadow:
+        0 4px 12px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.toggle-manager-btn:hover {
+    background: linear-gradient(135deg,
+        rgba(45, 45, 45, 0.9) 0%,
+        rgba(35, 35, 35, 0.95) 100%);
+    border-color: rgba(29, 185, 84, 0.4);
+    transform: scale(1.05);
+    box-shadow:
+        0 6px 16px rgba(0, 0, 0, 0.4),
+        0 0 20px rgba(29, 185, 84, 0.2),
+        inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+.toggle-manager-btn:active {
+    transform: scale(0.95);
+}
+
+.toggle-icon {
+    font-size: 20px;
+    font-weight: 600;
+    color: #ffffff;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    line-height: 1;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* When manager is hidden, rotate the icon */
+.downloads-content.manager-hidden .toggle-icon {
+    transform: rotate(180deg);
+}
+
+/* Hide side panel when toggled */
+.downloads-content.manager-hidden {
+    grid-template-columns: 1fr; /* Only show main panel */
+}
+
+.downloads-content.manager-hidden .downloads-side-panel {
+    display: none;
+}
+
+/* Responsive: Mobile adjustments for toggle button */
+@media (max-width: 768px) {
+    .downloads-header-content {
+        gap: 12px;
+    }
+
+    .toggle-manager-btn {
+        width: 40px;
+        height: 40px;
+    }
+
+    .toggle-icon {
+        font-size: 20px;
+    }
+
+    .downloads-header .downloads-title {
+        font-size: 24px;
+    }
+
+    .downloads-header .downloads-subtitle {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .downloads-header-content {
+        gap: 10px;
+    }
+
+    .toggle-manager-btn {
+        width: 36px;
+        height: 36px;
+    }
+
+    .toggle-icon {
+        font-size: 18px;
+    }
+
+    .downloads-header .downloads-title {
+        font-size: 20px;
+    }
+
+    .downloads-header .downloads-subtitle {
+        font-size: 11px;
+    }
+}
+
 /* Search Bar: Replicates create_elegant_search_bar() */
 .search-bar-container {
     background: linear-gradient(to bottom, rgba(50, 50, 50, 0.8), rgba(40, 40, 40, 0.9));
@@ -9299,6 +9418,85 @@ body {
     }
 }
 
+/* Small height screens (below 800px height) - Better scrollability */
+@media (max-height: 800px) {
+    .download-missing-modal-content {
+        height: 95vh;
+        max-height: 95vh;
+    }
+
+    .download-dashboard-stats {
+        padding: 16px;
+        gap: 16px;
+    }
+
+    .download-progress-section {
+        padding: 16px;
+    }
+
+    .download-tracks-section {
+        min-height: 300px; /* Ensure tracks list is always usable */
+    }
+
+    .download-tracks-table-container {
+        min-height: 200px; /* Ensure at least 200px for the table */
+    }
+}
+
+/* Very small height screens (below 600px height) - Compact mode */
+@media (max-height: 600px) {
+    .download-missing-modal-content {
+        height: 98vh;
+        max-height: 98vh;
+    }
+
+    .download-missing-modal-hero {
+        min-height: auto;
+        padding: 12px 20px;
+    }
+
+    .download-dashboard-stats {
+        padding: 12px;
+        gap: 12px;
+        grid-template-columns: repeat(2, 1fr); /* 2 columns on very small heights */
+    }
+
+    .dashboard-stat-number {
+        font-size: 24px;
+    }
+
+    .dashboard-stat-label {
+        font-size: 11px;
+    }
+
+    .download-progress-section {
+        padding: 12px;
+        gap: 10px;
+    }
+
+    .progress-label {
+        font-size: 13px;
+    }
+
+    .download-tracks-section {
+        min-height: 250px; /* Smaller but still usable */
+    }
+
+    .download-tracks-table-container {
+        min-height: 150px;
+    }
+
+    .download-tracks-table th,
+    .download-tracks-table td {
+        padding: 8px 10px;
+        font-size: 12px;
+    }
+
+    .download-missing-modal-footer {
+        padding: 12px 20px;
+    }
+}
+
 /* Legacy title styling - now handled by hero section */
 .download-missing-modal-title {
     color: #ffffff;
@@ -19162,6 +19360,137 @@ body {
     .enhanced-dropdown-content {
         padding: 12px 16px;
     }
+
+    /* Adjust search bar for mobile */
+    .enhanced-search-bar-container {
+        flex-direction: column;
+        padding: 16px;
+        gap: 12px;
+    }
+
+    .enhanced-search-btn {
+        width: 100%;
+        justify-content: center;
+        padding: 12px 20px;
+    }
+
+    #enhanced-search-input {
+        font-size: 14px;
+    }
+
+    /* Better spacing for search results */
+    .enhanced-search-results-container {
+        padding: 16px;
+    }
+
+    .enhanced-results-header {
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+    }
+}
+
+/* Very small screens (mobile portrait) */
+@media (max-width: 480px) {
+    .enhanced-search-bar-container {
+        padding: 12px;
+    }
+
+    .enhanced-search-wrapper {
+        padding: 0 12px;
+    }
+
+    #enhanced-search-input {
+        font-size: 13px;
+        padding: 12px 0;
+    }
+
+    .enhanced-search-icon {
+        font-size: 18px;
+        margin-right: 8px;
+    }
+
+    .enhanced-search-btn {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+
+    .btn-icon {
+        font-size: 14px;
+    }
+
+    /* Compact dropdown on mobile */
+    .enhanced-dropdown {
+        max-height: min(60vh, 500px);
+    }
+
+    .enhanced-dropdown-content {
+        max-height: min(60vh, 500px);
+        padding: 10px 12px;
+    }
+
+    /* Better album/track results on mobile */
+    .album-result-item {
+        margin-bottom: 8px;
+    }
+
+    .album-item__header {
+        padding: 12px;
+        gap: 12px;
+    }
+
+    .album-item__icon {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+    }
+
+    .album-item__title {
+        font-size: 11px;
+    }
+
+    .album-item__details {
+        font-size: 9px;
+    }
+
+    .album-action-btn {
+        height: 32px;
+        width: 140px;
+        font-size: 11px;
+    }
+
+    .track-item {
+        margin: 2px 12px 6px 50px;
+        padding: 6px 10px;
+    }
+
+    .track-item__title {
+        font-size: 10px;
+    }
+
+    .track-item__details {
+        font-size: 8px;
+    }
+
+    .track-item .action-btn {
+        width: 28px;
+        height: 28px;
+        font-size: 11px;
+    }
+
+    /* Search results area */
+    .enhanced-search-results-container {
+        padding: 12px;
+    }
+
+    .search-results-scroll-area {
+        padding-right: 3px;
+    }
+
+    .search-result-item {
+        padding: 12px;
+        border-radius: 14px;
+    }
 }
 
 .enhanced-dropdown-content::-webkit-scrollbar {