From 719980cf5a226a4152a14276ffac3042dbb97e43 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Sat, 14 Mar 2026 09:56:48 -0700
Subject: [PATCH] Hide sync sidebar by default, only show during active sync

---
 webui/static/script.js | 38 +++++++++++++++++++++++++++++++-------
 webui/static/style.css |  5 +++--
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/webui/static/script.js b/webui/static/script.js
index 9196f3e5..19eec63d 100644
--- a/webui/static/script.js
+++ b/webui/static/script.js
@@ -558,6 +558,9 @@ class SequentialSyncManager {
         this.updateUI();
         updateRefreshButtonState(); // Refresh button state after completion
         showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success');
+
+        // Hide sidebar after completion
+        hideSyncSidebar();
     }
 
     cancel() {
@@ -575,6 +578,9 @@ class SequentialSyncManager {
         this.updateUI();
         updateRefreshButtonState(); // Refresh button state after cancellation
         showToast('Sequential sync cancelled', 'info');
+
+        // Hide sidebar after cancellation
+        hideSyncSidebar();
     }
 
     updateUI() {
@@ -13064,6 +13070,25 @@ function stopSyncPolling(playlistId) {
     updateRefreshButtonState();
 }
 
+// Sync sidebar visibility helpers
+function showSyncSidebar() {
+    const sidebar = document.querySelector('.sync-sidebar');
+    const contentArea = document.querySelector('.sync-content-area');
+    if (sidebar && contentArea && window.innerWidth > 1300) {
+        sidebar.style.display = '';
+        contentArea.style.gridTemplateColumns = '2.5fr 0.75fr';
+    }
+}
+
+function hideSyncSidebar() {
+    const sidebar = document.querySelector('.sync-sidebar');
+    const contentArea = document.querySelector('.sync-content-area');
+    if (sidebar && contentArea) {
+        sidebar.style.display = 'none';
+        contentArea.style.gridTemplateColumns = '1fr';
+    }
+}
+
 // Sequential Sync Functions
 function startSequentialSync() {
     // Initialize manager if needed
@@ -13096,6 +13121,9 @@ function startSequentialSync() {
 
     console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`);
 
+    // Show sidebar for sync progress
+    showSyncSidebar();
+
     // Start sequential sync
     sequentialSyncManager.start(orderedPlaylistIds);
 
@@ -22601,13 +22629,9 @@ function initializeSyncPage() {
             // Show/hide sidebar based on active tab (skip on mobile where sidebar is always hidden)
             if (syncSidebar && syncContentArea) {
                 const isMobile = window.innerWidth <= 1300;
-                if (tabId === 'spotify' && !isMobile) {
-                    syncSidebar.style.display = '';
-                    syncContentArea.style.gridTemplateColumns = '2.5fr 0.75fr';
-                } else {
-                    syncSidebar.style.display = 'none';
-                    syncContentArea.style.gridTemplateColumns = '1fr';
-                }
+                // Sidebar always hidden by default — shown only when sync is active
+                syncSidebar.style.display = 'none';
+                syncContentArea.style.gridTemplateColumns = '1fr';
             }
 
             // Auto-load mirrored playlists on first tab activation
diff --git a/webui/static/style.css b/webui/static/style.css
index 0e60ed3c..a12e336f 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -6573,8 +6573,8 @@ body {
 
 .sync-content-area {
     display: grid;
-    grid-template-columns: 2.5fr 0.75fr;
-    /* More space for main panel, smaller sidebar */
+    grid-template-columns: 1fr;
+    /* Sidebar hidden by default, shown when sync starts */
     gap: 25px;
     /* min-height: calc(90vh - 200px);  Minimum height, but allow expansion */
     height: 95%;
@@ -6612,6 +6612,7 @@ body {
 
 .sync-sidebar {
     overflow: hidden;
+    display: none;
 }
 
 /* Tab System */