Hide sync sidebar by default, only show during active sync

This commit is contained in:
Broque Thomas 2026-03-14 09:56:48 -07:00
parent 363b3d0922
commit 719980cf5a
2 changed files with 34 additions and 9 deletions

View file

@ -558,6 +558,9 @@ class SequentialSyncManager {
this.updateUI(); this.updateUI();
updateRefreshButtonState(); // Refresh button state after completion updateRefreshButtonState(); // Refresh button state after completion
showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success'); showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success');
// Hide sidebar after completion
hideSyncSidebar();
} }
cancel() { cancel() {
@ -575,6 +578,9 @@ class SequentialSyncManager {
this.updateUI(); this.updateUI();
updateRefreshButtonState(); // Refresh button state after cancellation updateRefreshButtonState(); // Refresh button state after cancellation
showToast('Sequential sync cancelled', 'info'); showToast('Sequential sync cancelled', 'info');
// Hide sidebar after cancellation
hideSyncSidebar();
} }
updateUI() { updateUI() {
@ -13064,6 +13070,25 @@ function stopSyncPolling(playlistId) {
updateRefreshButtonState(); 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 // Sequential Sync Functions
function startSequentialSync() { function startSequentialSync() {
// Initialize manager if needed // Initialize manager if needed
@ -13096,6 +13121,9 @@ function startSequentialSync() {
console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`); console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`);
// Show sidebar for sync progress
showSyncSidebar();
// Start sequential sync // Start sequential sync
sequentialSyncManager.start(orderedPlaylistIds); sequentialSyncManager.start(orderedPlaylistIds);
@ -22601,13 +22629,9 @@ function initializeSyncPage() {
// Show/hide sidebar based on active tab (skip on mobile where sidebar is always hidden) // Show/hide sidebar based on active tab (skip on mobile where sidebar is always hidden)
if (syncSidebar && syncContentArea) { if (syncSidebar && syncContentArea) {
const isMobile = window.innerWidth <= 1300; const isMobile = window.innerWidth <= 1300;
if (tabId === 'spotify' && !isMobile) { // Sidebar always hidden by default — shown only when sync is active
syncSidebar.style.display = ''; syncSidebar.style.display = 'none';
syncContentArea.style.gridTemplateColumns = '2.5fr 0.75fr'; syncContentArea.style.gridTemplateColumns = '1fr';
} else {
syncSidebar.style.display = 'none';
syncContentArea.style.gridTemplateColumns = '1fr';
}
} }
// Auto-load mirrored playlists on first tab activation // Auto-load mirrored playlists on first tab activation

View file

@ -6573,8 +6573,8 @@ body {
.sync-content-area { .sync-content-area {
display: grid; display: grid;
grid-template-columns: 2.5fr 0.75fr; grid-template-columns: 1fr;
/* More space for main panel, smaller sidebar */ /* Sidebar hidden by default, shown when sync starts */
gap: 25px; gap: 25px;
/* min-height: calc(90vh - 200px); Minimum height, but allow expansion */ /* min-height: calc(90vh - 200px); Minimum height, but allow expansion */
height: 95%; height: 95%;
@ -6612,6 +6612,7 @@ body {
.sync-sidebar { .sync-sidebar {
overflow: hidden; overflow: hidden;
display: none;
} }
/* Tab System */ /* Tab System */