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

Show toast hint when toggling a disconnected source on Your Albums

Browse source 
The Your Albums sources modal silently bailed on toggle clicks for
disconnected sources — toggle did nothing, no feedback, users had no
way to know why. Surfaced when users tried to enable Discogs without
having set a Discogs token first; same UX gap existed for the other
sources too but went unreported because most users have Spotify
connected by default.

Added per-source hint messages so the toast tells users exactly
where to set up credentials. Bonus: subtitle update after save now
includes 'discogs' in the source-name map (was undefined before,
fell through to lowercase 'discogs' in the rendered text).

Affects only the Your Albums sources modal — toggle behavior
unchanged for connected sources.
This commit is contained in:
Broque Thomas 2026-05-03 21:44:56 -07:00
parent 4b23bee4a9
commit 09cea9f013
1 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
webui/static/discover.js
View file

@ -1213,14 +1213,36 @@ async function openYourAlbumsSourcesModal() {
window._yaaSourcesState = state; window._yaaSourcesState = state;
} }
// Source-id → human label + setup hint shown when user tries to enable
// a disconnected source. Without this, the toggle silently bailed and
// users saw no feedback — just a non-responsive switch.
const _YAA_DISCONNECTED_HINTS = {
spotify: 'Spotify not connected — log in at Settings → Connections first',
tidal: 'Tidal not connected — set up Tidal in Settings → Connections first',
deezer: 'Deezer not connected — log in or set ARL token at Settings → Connections first',
discogs: 'Discogs not connected — paste your personal access token at Settings → Connections first',
};
function _yaaShowDisconnectedHint(id) {
const msg = _YAA_DISCONNECTED_HINTS[id]
|| `${id} not connected — set it up in Settings → Connections first`;
if (typeof showToast === 'function') showToast(msg, 'warning');
}
function _yaaSourceRowClick(id) { function _yaaSourceRowClick(id) {
const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`); const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
if (row && row.classList.contains('disconnected')) return; if (row && row.classList.contains('disconnected')) {
_yaaShowDisconnectedHint(id);
return;
}
_yaaSourceToggle(id); _yaaSourceToggle(id);
} }
function _yaaSourceToggle(id) { function _yaaSourceToggle(id) {
const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`); const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
if (row && row.classList.contains('disconnected')) return; if (row && row.classList.contains('disconnected')) {
_yaaShowDisconnectedHint(id);
return;
}
window._yaaSourcesState[id] = !window._yaaSourcesState[id]; window._yaaSourcesState[id] = !window._yaaSourcesState[id];
const btn = document.getElementById(`yaa-toggle-${id}`); const btn = document.getElementById(`yaa-toggle-${id}`);
if (btn) btn.classList.toggle('on', window._yaaSourcesState[id]); if (btn) btn.classList.toggle('on', window._yaaSourcesState[id]);
@ -1237,7 +1259,7 @@ async function _yaaSourcesSave() {
if (resp.ok) { if (resp.ok) {
document.getElementById('ya-albums-sources-modal-overlay')?.remove(); document.getElementById('ya-albums-sources-modal-overlay')?.remove();
showToast('Sources saved — refresh to apply', 'success'); showToast('Sources saved — refresh to apply', 'success');
const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer' }; const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', discogs: 'Discogs' };
const subtitle = document.getElementById('your-albums-subtitle'); const subtitle = document.getElementById('your-albums-subtitle');
if (subtitle) { if (subtitle) {
const names = enabledArr.map(s => sourceNames[s] || s).join(' and '); const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');