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

Standardize auto-sync modal cards

Browse source 
Bring Auto-Sync automation and run-history cards closer to the Automations page pattern with status dots, flow chips, compact metadata, and denser run preview details.
This commit is contained in:
Broque Thomas 2026-05-25 08:19:05 -07:00
parent 119e8f1599
commit 60b346aa33
2 changed files with 133 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
webui/static/auto-sync.js
View file

@ -469,13 +469,27 @@ function autoSyncHistoryEntryHtml(entry, index = 0) {
return `
<article class="auto-sync-history-entry">
<div class="auto-sync-history-row" onclick="autoSyncToggleHistoryEntry('${entryId}')">
<span class="auto-sync-history-status ${_escAttr(status)}">${_esc(autoSyncHistoryStatusLabel(status))}</span>
<span class="auto-sync-card-status-dot ${autoSyncHistoryStatusClass(status)}"></span>
<div class="auto-sync-history-main">
<strong>${_esc(playlistName)}</strong>
<div class="auto-sync-history-title-row">
<strong>${_esc(playlistName)}</strong>
<span class="auto-sync-history-status ${_escAttr(status)}">${_esc(autoSyncHistoryStatusLabel(status))}</span>
</div>
<div class="auto-sync-card-flow">
<span class="flow-trigger">${_esc(entry.trigger_source || 'pipeline')}</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Refresh</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Discover</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-notify">Sync + wishlist</span>
</div>
<small>${_esc(summary)}</small>
<div class="auto-sync-history-preview">
${autoSyncHistoryPreviewPill('Tracks', before.track_count, after.track_count, trackDelta)}
${autoSyncHistoryPreviewPill('Discovered', before.discovered_count, after.discovered_count, discoveredDelta)}
${autoSyncHistoryPreviewPill('Wishlisted', before.wishlisted_count, after.wishlisted_count, wishlistDelta)}
${autoSyncHistoryPreviewPill('Library', before.in_library_count, after.in_library_count, libraryDelta)}
</div>
</div>
<div class="auto-sync-history-meta">
@ -552,6 +566,12 @@ function autoSyncHistoryStatusLabel(status) {
return status || 'Run';
}
function autoSyncHistoryStatusClass(status) {
if (status === 'completed' || status === 'finished') return 'enabled';
if (status === 'error' || status === 'skipped') return 'disabled';
return 'enabled';
}
function autoSyncDurationLabel(seconds) {
const total = Math.max(0, Math.round(parseFloat(seconds) || 0));
if (total < 60) return `${total}s`;
@ -600,15 +620,24 @@ function autoSyncAutomationCardHtml(auto, playlists) {
const trigger = _autoFormatTrigger(auto.trigger_type, auto.trigger_config || {});
const enabled = auto.enabled !== false && auto.enabled !== 0;
const next = auto.next_run ? autoSyncNextRunLabel(auto.next_run) : 'not scheduled';
const sourceLabel = playlist ? autoSyncSourceLabel(playlist.source) : (cfg.all === true || cfg.all === 'true' ? 'All sources' : 'Pipeline');
return `
<div class="auto-sync-automation-card">
<span class="auto-sync-card-status-dot ${enabled ? 'enabled' : 'disabled'}"></span>
<div class="auto-sync-automation-main">
<div class="auto-sync-automation-title-row">
<span class="auto-sync-status ${enabled ? 'enabled' : 'disabled'}">${enabled ? 'Enabled' : 'Disabled'}</span>
<strong>${_esc(auto.name || 'Playlist Pipeline')}</strong>
</div>
<div class="auto-sync-card-flow">
<span class="flow-trigger">${_esc(trigger)}</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-action">Playlist pipeline</span>
<span class="flow-arrow">&rarr;</span>
<span class="flow-notify">Refresh + sync</span>
</div>
<div class="auto-sync-automation-meta">
<span>${_esc(trigger)}</span>
<span class="auto-sync-status ${enabled ? 'enabled' : 'disabled'}">${enabled ? 'Enabled' : 'Disabled'}</span>
<span>${_esc(sourceLabel)}</span>
<span>${_esc(target)}</span>
<span>${_esc(next)}</span>
</div>

143
webui/static/style.css
View file

@ -11927,16 +11927,17 @@ body.helper-mode-active #dashboard-activity-feed:hover {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
gap: 12px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
background: rgba(22, 22, 22, 0.95);
overflow: hidden;
}
.auto-sync-automation-card:hover {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.055);
border-color: rgba(var(--accent-rgb), 0.2);
background: rgba(28, 28, 28, 0.98);
}
.auto-sync-automation-main {
@ -11953,12 +11954,66 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-automation-title-row strong {
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-size: 13px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auto-sync-card-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.auto-sync-card-status-dot.enabled {
background: #4ade80;
box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}
.auto-sync-card-status-dot.disabled {
background: #555;
}
.auto-sync-card-flow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 5px;
}
.auto-sync-card-flow .flow-trigger,
.auto-sync-card-flow .flow-action,
.auto-sync-card-flow .flow-notify {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
}
.auto-sync-card-flow .flow-trigger {
background: rgba(var(--accent-rgb), 0.12);
color: rgb(var(--accent-light-rgb));
}
.auto-sync-card-flow .flow-action {
background: rgba(88, 101, 242, 0.12);
color: #7289da;
}
.auto-sync-card-flow .flow-notify {
background: rgba(250, 204, 21, 0.1);
color: #fbbf24;
}
.auto-sync-card-flow .flow-arrow {
color: rgba(255, 255, 255, 0.25);
font-size: 12px;
}
.auto-sync-status {
padding: 3px 7px;
border-radius: 999px;
@ -11982,15 +12037,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
margin-top: 7px;
}
.auto-sync-automation-meta span {
padding: 4px 8px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.48);
font-size: 11px;
padding: 3px 7px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
color: rgba(255, 255, 255, 0.42);
font-size: 10px;
font-weight: 700;
}
.auto-sync-automation-lock {
@ -12025,13 +12081,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
.auto-sync-history-entry {
display: block;
min-height: 84px;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
rgba(255, 255, 255, 0.035);
background: rgba(22, 22, 22, 0.95);
overflow: hidden;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
box-shadow: none;
}
.auto-sync-history-entry:empty {
@ -12048,21 +12102,18 @@ body.helper-mode-active #dashboard-activity-feed:hover {
}
.auto-sync-history-entry:hover {
border-color: rgba(var(--accent-rgb), 0.3);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.075), rgba(255, 255, 255, 0.028)),
rgba(255, 255, 255, 0.04);
border-color: rgba(var(--accent-rgb), 0.2);
background: rgba(28, 28, 28, 0.98);
}
.auto-sync-history-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 84px;
padding: 15px 16px;
gap: 12px;
min-height: 96px;
padding: 13px 14px;
cursor: pointer;
background: rgba(255, 255, 255, 0.018);
}
.auto-sync-history-status {
@ -12095,25 +12146,32 @@ body.helper-mode-active #dashboard-activity-feed:hover {
min-width: 0;
}
.auto-sync-history-main strong,
.auto-sync-history-main small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
.auto-sync-history-title-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.auto-sync-history-main strong {
.auto-sync-history-title-row strong {
min-width: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auto-sync-history-main small {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
@ -12121,17 +12179,16 @@ body.helper-mode-active #dashboard-activity-feed:hover {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 9px;
margin-top: 7px;
}
.auto-sync-history-preview span {
padding: 4px 7px;
border-radius: 6px;
background: rgba(var(--accent-rgb), 0.1);
border: 1px solid rgba(var(--accent-rgb), 0.16);
color: rgb(var(--accent-light-rgb));
padding: 3px 7px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.045);
color: rgba(255, 255, 255, 0.42);
font-size: 10px;
font-weight: 800;
font-weight: 700;
}
.auto-sync-history-meta {