From b19c1ae8cc140de44e01060866e24564b5e9b073 Mon Sep 17 00:00:00 2001 From: Broque Thomas <26755000+Nezreka@users.noreply.github.com> Date: Wed, 27 May 2026 20:23:12 -0700 Subject: [PATCH] Auto-Sync sidebar: brand logo on each source-group header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The sidebar source-group headers (Spotify / Tidal / Qobuz / Deezer / YouTube / Last.fm Radio / ListenBrainz / iTunes Link / SoulSync Discovery / Spotify Link) only showed the source name in caps — the dashboard equalizer + connections panels both render the actual brand logo, so the sidebar reading as text-only felt disconnected. Added a small (18px) circular brand-logo chip to the left of each source-group title, sourced from the same URLs the dashboard equalizer avatars use. Dark glass backdrop + accent ring + drop-shadow on the logo so the chip stays legible against either light or dark marks; brightness(0) invert(1) applied to Tidal / Qobuz / iTunes-Link so their dark-foreground marks render as white silhouettes against the disc (same recipe the equalizer overrides use). Last.fm's square avatar PNG clips to a circle via object-fit: cover. Sources without a publicly available logo (Beatport, file imports) fall through to no-chip — the swap hides the broken image so the header still renders cleanly. --- webui/static/auto-sync.js | 39 +++++++++++++++++++++++++++++-- webui/static/style.css | 48 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 2 deletions(-) diff --git a/webui/static/auto-sync.js b/webui/static/auto-sync.js index 2ffaf8fc..2b16e7e7 100644 --- a/webui/static/auto-sync.js +++ b/webui/static/auto-sync.js @@ -161,6 +161,35 @@ function autoSyncSourceLabel(source) { return labels[source] || source || 'Other'; } +// Per-source logo URLs for the sidebar source-group headers and +// anywhere else a small branded chip helps disambiguate the source. +// Same URLs the dashboard equalizer / header-action orbs reference +// so the visual language stays consistent. Sources without a +// readily available logo (``beatport``, ``file``) fall through to +// no-image; the source-icon element drops to display:none via +// the ```` swap so the header renders cleanly without +// a broken-image placeholder. +const _AUTO_SYNC_SOURCE_LOGOS = { + spotify: 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png', + spotify_public: 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png', + tidal: 'https://www.svgrepo.com/show/519734/tidal.svg', + youtube: 'https://www.svgrepo.com/show/13671/youtube.svg', + deezer: 'https://cdn.brandfetch.io/idEUKgCNtu/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1758260798610', + qobuz: 'https://www.svgrepo.com/show/504778/qobuz.svg', + itunes_link: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/ITunes_logo.svg/960px-ITunes_logo.svg.png', + lastfm: 'https://www.last.fm/static/images/lastfm_avatar_twitter.52a5d69a85ac.png', + listenbrainz: 'https://listenbrainz.org/static/img/listenbrainz-logo-no-text.svg', + soulsync_discovery: '/static/favicon.png', +}; + +function autoSyncSourceIconHtml(source) { + const src = _AUTO_SYNC_SOURCE_LOGOS[source]; + if (!src) return ''; + return ``; +} + function autoSyncCanSchedulePlaylist(playlist) { if (!playlist) return false; const src = playlist.source || ''; @@ -407,7 +436,10 @@ function renderAutoSyncSchedulePanel(playlists, playlistSchedules) { const sidebarHtml = sourceKeys.length ? sourceKeys.map(source => `
- ${_esc(autoSyncSourceLabel(source))} + + ${autoSyncSourceIconHtml(source)} + ${_esc(autoSyncSourceLabel(source))} +