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`;
}
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) {
const labels = {
spotify: 'Spotify',
@ -616,6 +625,10 @@ function autoSyncSourceLabel(source) {
return labels[source] || source || 'Other';
}
function autoSyncCanSchedulePlaylist(playlist) {
return playlist && !['file', 'beatport'].includes(playlist.source || '');
}
function autoSyncIsPipelineAutomation(auto) {
return auto && auto.action_type === 'playlist_pipeline';
}
@ -764,7 +777,9 @@ function setAutoSyncTab(tab) {
}
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';
if (!acc[key]) acc[key] = [];
acc[key].push(p);
@ -777,7 +792,7 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
<div class="auto-sync-source-title">${_esc(autoSyncSourceLabel(source))}</div>
${grouped[source].map(p => {
const schedule = playlistSchedules[p.id];
const assigned = schedule ? autoSyncBucketLabel(schedule.hours) : 'Unscheduled';
const assigned = schedule ? autoSyncIntervalLabel(schedule.hours) : 'Unscheduled';
return `
<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>
@ -786,15 +801,27 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
`;
}).join('')}
</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 assigned = playlists.filter(p => playlistSchedules[p.id]?.hours === hours);
const assigned = schedulablePlaylists.filter(p => playlistSchedules[p.id]?.hours === hours);
return `
<div class="auto-sync-column" data-hours="${hours}" ondragover="autoSyncDragOver(event)" ondrop="autoSyncDrop(event, ${hours})">
<div class="auto-sync-column-head">
<span>${autoSyncBucketLabel(hours)}</span>
<small>${assigned.length}</small>
<small>${assigned.length} playlist${assigned.length === 1 ? '' : 's'}</small>
</div>
<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>'}
@ -814,7 +841,7 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) {
<div class="auto-sync-body">
<aside class="auto-sync-sidebar">
<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>
<main class="auto-sync-board">${bucketHtml}</main>
</div>
@ -866,11 +893,16 @@ function autoSyncAutomationCardHtml(auto, playlists) {
function autoSyncScheduledCardHtml(playlist, schedule) {
const enabled = schedule?.enabled !== false;
const nextLabel = schedule?.next_run ? autoSyncNextRunLabel(schedule.next_run) : '';
return `
<div class="auto-sync-scheduled-card ${enabled ? '' : 'disabled'}" draggable="true" data-playlist-id="${playlist.id}" ondragstart="autoSyncDragStart(event)">
<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>
<button onclick="event.stopPropagation(); unscheduleAutoSyncPlaylist(${playlist.id})" title="Remove this Auto-Sync schedule">&times;</button>
</div>
@ -912,6 +944,10 @@ async function autoSyncDrop(event, hours) {
async function saveAutoSyncPlaylistSchedule(playlistId, hours) {
const playlist = _autoSyncScheduleState.playlists.find(p => parseInt(p.id, 10) === parseInt(playlistId, 10));
if (!playlist) return;
if (!autoSyncCanSchedulePlaylist(playlist)) {
showToast('That playlist source cannot be refreshed by Auto-Sync.', 'info');
return;
}
const existing = _autoSyncScheduleState.playlistSchedules[playlistId];
const payload = {
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;
padding: 22px 24px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.auto-sync-eyebrow {
@ -11260,6 +11261,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
gap: 1px;
background: rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.auto-sync-summary div {
@ -11289,6 +11291,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
padding: 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.018);
flex-shrink: 0;
}
.auto-sync-tabs button {
@ -11330,6 +11333,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
padding: 12px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(56, 189, 248, 0.035);
flex-shrink: 0;
}
.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);
}
.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-scheduled-name {
color: rgba(255, 255, 255, 0.86);
@ -11444,17 +11463,48 @@ body.helper-mode-active #dashboard-activity-feed:hover {
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 {
min-width: 0;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
padding: 18px;
display: grid;
grid-template-columns: repeat(10, minmax(185px, 1fr));
grid-auto-rows: minmax(0, 1fr);
gap: 12px;
}
.auto-sync-column {
min-height: 0;
max-height: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
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);
color: rgba(255, 255, 255, 0.86);
font-weight: 800;
flex-shrink: 0;
}
.auto-sync-column-head small {
@ -11480,10 +11531,27 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-column-list {
flex: 1;
min-height: 220px;
min-height: 0;
overflow-y: auto;
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-empty,
.auto-sync-loading,
@ -11647,6 +11715,67 @@ body.helper-mode-active #dashboard-activity-feed:hover {
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 */
.progress-bar-fill {
height: 100%;