danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make auto-sync schedule modal responsive

Browse source 
Constrain Auto-Sync columns inside the modal with per-column vertical scrolling, add responsive layouts for narrower and shorter viewports, and separate schedule interval labels from next-run timing.

Also prevents unsupported mirrored sources from being scheduled into the playlist pipeline while still showing them as unavailable in the sidebar.
This commit is contained in:
Broque Thomas 2026-05-24 21:01:46 -07:00
parent 5421f3800e
commit 9a8e7d02a7
2 changed files with 173 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
webui/static/stats-automations.js
View file

@ -602,6 +602,15 @@ function autoSyncBucketLabel(hours) {
return `${hours}h`; return `${hours}h`;
} }
function autoSyncIntervalLabel(hours) {
if (hours === 168) return 'Every week';
if (hours >= 24) {
const days = hours / 24;
return `Every ${days} day${days === 1 ? '' : 's'}`;
}
return `Every ${hours} hour${hours === 1 ? '' : 's'}`;
}
function autoSyncSourceLabel(source) { function autoSyncSourceLabel(source) {
const labels = { const labels = {
spotify: 'Spotify', spotify: 'Spotify',
@ -616,6 +625,10 @@ function autoSyncSourceLabel(source) {
return labels[source] || source || 'Other'; return labels[source] || source || 'Other';
} }
function autoSyncCanSchedulePlaylist(playlist) {
return playlist && !['file', 'beatport'].includes(playlist.source || '');
}
function autoSyncIsPipelineAutomation(auto) { function autoSyncIsPipelineAutomation(auto) {
return auto && auto.action_type === 'playlist_pipeline'; return auto && auto.action_type === 'playlist_pipeline';
} }
@ -764,7 +777,9 @@ function setAutoSyncTab(tab) {
} }
function renderAutoSyncSchedulePanel(playlists, playlistSchedules) { function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
const grouped = playlists.reduce((acc, p) => { const schedulablePlaylists = playlists.filter(autoSyncCanSchedulePlaylist);
const unavailablePlaylists = playlists.filter(p => !autoSyncCanSchedulePlaylist(p));
const grouped = schedulablePlaylists.reduce((acc, p) => {
const key = p.source || 'other'; const key = p.source || 'other';
if (!acc[key]) acc[key] = []; if (!acc[key]) acc[key] = [];
acc[key].push(p); acc[key].push(p);
@ -777,7 +792,7 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
<div class="auto-sync-source-title">${_esc(autoSyncSourceLabel(source))}</div> <div class="auto-sync-source-title">${_esc(autoSyncSourceLabel(source))}</div>
${grouped[source].map(p => { ${grouped[source].map(p => {
const schedule = playlistSchedules[p.id]; const schedule = playlistSchedules[p.id];
const assigned = schedule ? autoSyncBucketLabel(schedule.hours) : 'Unscheduled'; const assigned = schedule ? autoSyncIntervalLabel(schedule.hours) : 'Unscheduled';
return ` return `
<div class="auto-sync-playlist ${schedule ? 'scheduled' : ''}" draggable="true" data-playlist-id="${p.id}" ondragstart="autoSyncDragStart(event)"> <div class="auto-sync-playlist ${schedule ? 'scheduled' : ''}" draggable="true" data-playlist-id="${p.id}" ondragstart="autoSyncDragStart(event)">
<div class="auto-sync-playlist-name">${_esc(p.name)}</div> <div class="auto-sync-playlist-name">${_esc(p.name)}</div>
@ -786,15 +801,27 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
`; `;
}).join('')} }).join('')}
</div> </div>
`).join('') : '<div class="auto-sync-empty">No mirrored playlists yet.</div>'; `).join('') : '<div class="auto-sync-empty">No refreshable mirrored playlists yet.</div>';
const unavailableHtml = unavailablePlaylists.length ? `
<div class="auto-sync-source-group auto-sync-source-group-disabled">
<div class="auto-sync-source-title">Not schedulable</div>
${unavailablePlaylists.map(p => `
<div class="auto-sync-playlist unavailable">
<div class="auto-sync-playlist-name">${_esc(p.name)}</div>
<div class="auto-sync-playlist-meta">${_esc(autoSyncSourceLabel(p.source))} &middot; refresh not supported</div>
</div>
`).join('')}
</div>
` : '';
const bucketHtml = AUTO_SYNC_BUCKETS.map(hours => { const bucketHtml = AUTO_SYNC_BUCKETS.map(hours => {
const assigned = playlists.filter(p => playlistSchedules[p.id]?.hours === hours); const assigned = schedulablePlaylists.filter(p => playlistSchedules[p.id]?.hours === hours);
return ` return `
<div class="auto-sync-column" data-hours="${hours}" ondragover="autoSyncDragOver(event)" ondrop="autoSyncDrop(event, ${hours})"> <div class="auto-sync-column" data-hours="${hours}" ondragover="autoSyncDragOver(event)" ondrop="autoSyncDrop(event, ${hours})">
<div class="auto-sync-column-head"> <div class="auto-sync-column-head">
<span>${autoSyncBucketLabel(hours)}</span> <span>${autoSyncBucketLabel(hours)}</span>
<small>${assigned.length}</small> <small>${assigned.length} playlist${assigned.length === 1 ? '' : 's'}</small>
</div> </div>
<div class="auto-sync-column-list"> <div class="auto-sync-column-list">
${assigned.length ? assigned.map(p => autoSyncScheduledCardHtml(p, playlistSchedules[p.id])).join('') : '<div class="auto-sync-drop-hint"><strong>Drop here</strong><span>Schedule playlists at this interval</span></div>'} ${assigned.length ? assigned.map(p => autoSyncScheduledCardHtml(p, playlistSchedules[p.id])).join('') : '<div class="auto-sync-drop-hint"><strong>Drop here</strong><span>Schedule playlists at this interval</span></div>'}
@ -814,7 +841,7 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
<div class="auto-sync-body"> <div class="auto-sync-body">
<aside class="auto-sync-sidebar"> <aside class="auto-sync-sidebar">
<div class="auto-sync-sidebar-title">Mirrored playlists</div> <div class="auto-sync-sidebar-title">Mirrored playlists</div>
<div class="auto-sync-source-list">${sidebarHtml}</div> <div class="auto-sync-source-list">${sidebarHtml}${unavailableHtml}</div>
</aside> </aside>
<main class="auto-sync-board">${bucketHtml}</main> <main class="auto-sync-board">${bucketHtml}</main>
</div> </div>
@ -866,11 +893,16 @@ function autoSyncAutomationCardHtml(auto, playlists) {
function autoSyncScheduledCardHtml(playlist, schedule) { function autoSyncScheduledCardHtml(playlist, schedule) {
const enabled = schedule?.enabled !== false; const enabled = schedule?.enabled !== false;
const nextLabel = schedule?.next_run ? autoSyncNextRunLabel(schedule.next_run) : '';
return ` return `
<div class="auto-sync-scheduled-card ${enabled ? '' : 'disabled'}" draggable="true" data-playlist-id="${playlist.id}" ondragstart="autoSyncDragStart(event)"> <div class="auto-sync-scheduled-card ${enabled ? '' : 'disabled'}" draggable="true" data-playlist-id="${playlist.id}" ondragstart="autoSyncDragStart(event)">
<div> <div>
<div class="auto-sync-scheduled-name">${_esc(playlist.name)}</div> <div class="auto-sync-scheduled-name">${_esc(playlist.name)}</div>
<div class="auto-sync-scheduled-meta">${_esc(autoSyncSourceLabel(playlist.source))} &middot; ${playlist.track_count || 0} tracks${schedule?.next_run ? ` &middot; ${autoSyncNextRunLabel(schedule.next_run)}` : ''}</div> <div class="auto-sync-scheduled-meta">${_esc(autoSyncSourceLabel(playlist.source))} &middot; ${playlist.track_count || 0} tracks</div>
<div class="auto-sync-scheduled-timing">
<span>${_esc(autoSyncIntervalLabel(schedule?.hours || 24))}</span>
${nextLabel ? `<small>${_esc(nextLabel)}</small>` : ''}
</div>
</div> </div>
<button onclick="event.stopPropagation(); unscheduleAutoSyncPlaylist(${playlist.id})" title="Remove this Auto-Sync schedule">&times;</button> <button onclick="event.stopPropagation(); unscheduleAutoSyncPlaylist(${playlist.id})" title="Remove this Auto-Sync schedule">&times;</button>
</div> </div>
@ -912,6 +944,10 @@ async function autoSyncDrop(event, hours) {
async function saveAutoSyncPlaylistSchedule(playlistId, hours) { async function saveAutoSyncPlaylistSchedule(playlistId, hours) {
const playlist = _autoSyncScheduleState.playlists.find(p => parseInt(p.id, 10) === parseInt(playlistId, 10)); const playlist = _autoSyncScheduleState.playlists.find(p => parseInt(p.id, 10) === parseInt(playlistId, 10));
if (!playlist) return; if (!playlist) return;
if (!autoSyncCanSchedulePlaylist(playlist)) {
showToast('That playlist source cannot be refreshed by Auto-Sync.', 'info');
return;
}
const existing = _autoSyncScheduleState.playlistSchedules[playlistId]; const existing = _autoSyncScheduleState.playlistSchedules[playlistId];
const payload = { const payload = {
name: `Auto-Sync: ${playlist.name}`, name: `Auto-Sync: ${playlist.name}`,

131
webui/static/style.css
View file

@ -11214,6 +11214,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
gap: 20px; gap: 20px;
padding: 22px 24px 18px; padding: 22px 24px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
} }
.auto-sync-eyebrow { .auto-sync-eyebrow {
@ -11260,6 +11261,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
gap: 1px; gap: 1px;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
} }
.auto-sync-summary div { .auto-sync-summary div {
@ -11289,6 +11291,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
padding: 12px 18px; padding: 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.018); background: rgba(255, 255, 255, 0.018);
flex-shrink: 0;
} }
.auto-sync-tabs button { .auto-sync-tabs button {
@ -11330,6 +11333,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
padding: 12px 18px; padding: 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(56, 189, 248, 0.035); background: rgba(56, 189, 248, 0.035);
flex-shrink: 0;
} }
.auto-sync-board-intro strong, .auto-sync-board-intro strong,
@ -11427,6 +11431,21 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border-color: rgba(34, 197, 94, 0.22); border-color: rgba(34, 197, 94, 0.22);
} }
.auto-sync-playlist.unavailable {
cursor: default;
opacity: 0.58;
}
.auto-sync-playlist.unavailable:hover {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.045);
}
.auto-sync-source-group-disabled {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.auto-sync-playlist-name, .auto-sync-playlist-name,
.auto-sync-scheduled-name { .auto-sync-scheduled-name {
color: rgba(255, 255, 255, 0.86); color: rgba(255, 255, 255, 0.86);
@ -11444,17 +11463,48 @@ body.helper-mode-active #dashboard-activity-feed:hover {
font-size: 11px; font-size: 11px;
} }
.auto-sync-scheduled-timing {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 8px;
}
.auto-sync-scheduled-timing span,
.auto-sync-scheduled-timing small {
padding: 3px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
.auto-sync-scheduled-timing span {
background: rgba(56, 189, 248, 0.14);
color: #7dd3fc;
}
.auto-sync-scheduled-timing small {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.48);
}
.auto-sync-board { .auto-sync-board {
min-width: 0; min-width: 0;
min-height: 0;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden;
padding: 18px; padding: 18px;
display: grid; display: grid;
grid-template-columns: repeat(10, minmax(185px, 1fr)); grid-template-columns: repeat(10, minmax(185px, 1fr));
grid-auto-rows: minmax(0, 1fr);
gap: 12px; gap: 12px;
} }
.auto-sync-column { .auto-sync-column {
min-height: 0; min-height: 0;
max-height: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px; border-radius: 8px;
background: rgba(255, 255, 255, 0.025); background: rgba(255, 255, 255, 0.025);
@ -11470,6 +11520,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.86); color: rgba(255, 255, 255, 0.86);
font-weight: 800; font-weight: 800;
flex-shrink: 0;
} }
.auto-sync-column-head small { .auto-sync-column-head small {
@ -11480,10 +11531,27 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-column-list { .auto-sync-column-list {
flex: 1; flex: 1;
min-height: 220px; min-height: 0;
overflow-y: auto;
padding: 10px; padding: 10px;
} }
.auto-sync-column-list::-webkit-scrollbar,
.auto-sync-board::-webkit-scrollbar,
.auto-sync-source-list::-webkit-scrollbar,
.auto-sync-automation-list::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.auto-sync-column-list::-webkit-scrollbar-thumb,
.auto-sync-board::-webkit-scrollbar-thumb,
.auto-sync-source-list::-webkit-scrollbar-thumb,
.auto-sync-automation-list::-webkit-scrollbar-thumb {
background: rgba(125, 211, 252, 0.22);
border-radius: 999px;
}
.auto-sync-drop-hint, .auto-sync-drop-hint,
.auto-sync-empty, .auto-sync-empty,
.auto-sync-loading, .auto-sync-loading,
@ -11647,6 +11715,67 @@ body.helper-mode-active #dashboard-activity-feed:hover {
text-align: center; text-align: center;
} }
@media (max-width: 1100px) {
.auto-sync-modal {
width: calc(100vw - 18px);
height: calc(100vh - 18px);
}
.auto-sync-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auto-sync-body {
grid-template-columns: 1fr;
grid-template-rows: minmax(150px, 30%) 1fr;
}
.auto-sync-sidebar {
border-right: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.auto-sync-source-list {
display: flex;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
padding: 0 12px 12px;
}
.auto-sync-source-group {
min-width: 220px;
margin-bottom: 0;
}
.auto-sync-board {
grid-template-columns: repeat(10, minmax(165px, 180px));
}
}
@media (max-height: 760px) {
.auto-sync-header {
padding: 14px 18px 12px;
}
.auto-sync-header p {
display: none;
}
.auto-sync-summary div {
padding: 9px 16px;
}
.auto-sync-tabs {
padding: 9px 14px;
}
.auto-sync-board-intro,
.auto-sync-automation-intro {
padding: 9px 14px;
}
}
/* Enhanced Progress Bar Animation */ /* Enhanced Progress Bar Animation */
.progress-bar-fill { .progress-bar-fill {
height: 100%; height: 100%;