From 41799268997bc72bc17e5cd2449be69fcf610352 Mon Sep 17 00:00:00 2001
From: Broque Thomas <26755000+Nezreka@users.noreply.github.com>
Date: Fri, 22 May 2026 08:34:42 -0700
Subject: [PATCH] Fix missing album placeholder asset path

Update Import Music album and queue artwork fallbacks to use the shipped /static/placeholder-album.png asset instead of the nonexistent /static/placeholder.png path.

Replace the remaining static UI fallback to the missing placeholder path and add a regression test that fails if static JS references it again.
---
 tests/webui/test_assets.py        | 16 ++++++++++++++++
 webui/static/discover.js          |  2 +-
 webui/static/stats-automations.js | 10 +++++-----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/tests/webui/test_assets.py b/tests/webui/test_assets.py
index 21660899..8c6a921d 100644
--- a/tests/webui/test_assets.py
+++ b/tests/webui/test_assets.py
@@ -4,6 +4,7 @@ from __future__ import annotations
 
 import json
 import os
+from pathlib import Path
 import time
 
 import pytest
@@ -94,3 +95,18 @@ def test_load_webui_vite_manifest_reloads_when_file_changes(tmp_path):
 
     second = load_webui_vite_manifest(manifest_path)
     assert second["src/app/main.tsx"]["file"] == "assets/two.js"
+
+
+def test_static_ui_uses_existing_album_placeholder_asset():
+    repo_root = Path(__file__).resolve().parents[2]
+    static_dir = repo_root / "webui" / "static"
+
+    assert (static_dir / "placeholder-album.png").exists()
+    assert not (static_dir / "placeholder.png").exists()
+
+    stale_refs = []
+    for path in static_dir.glob("*.js"):
+        if "/static/placeholder.png" in path.read_text(encoding="utf-8"):
+            stale_refs.append(path.name)
+
+    assert stale_refs == []
diff --git a/webui/static/discover.js b/webui/static/discover.js
index e1d05c12..b5303e5d 100644
--- a/webui/static/discover.js
+++ b/webui/static/discover.js
@@ -6841,7 +6841,7 @@ function _renderByltTrackCard(t) {
     return `
         <div class="discover-card">
             <div class="discover-card-image">
-                ${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.src='/static/placeholder.png'">` : '<div class="discover-card-placeholder">🎵</div>'}
+                ${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.src='/static/placeholder-album.png'">` : '<div class="discover-card-placeholder">🎵</div>'}
             </div>
             <div class="discover-card-title">${_esc(t.name)}</div>
             <div class="discover-card-artist">${_esc(t.artist)}</div>
diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js
index 100f4a55..6ed96413 100644
--- a/webui/static/stats-automations.js
+++ b/webui/static/stats-automations.js
@@ -1248,7 +1248,7 @@ function _renderSuggestionCard(a) {
         id: a.id, name: a.name || '', artist: a.artist || '', source: a.source || '',
     };
     return `<div class="import-page-album-card" onclick="importPageSelectAlbum('${_escAttr(a.id)}')">
-        <img src="${a.image_url || '/static/placeholder.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
+        <img src="${a.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
         <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
         <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
         <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
@@ -1282,7 +1282,7 @@ async function importPageSearchAlbum() {
             };
             return `
             <div class="import-page-album-card" onclick="importPageSelectAlbum('${_escAttr(a.id)}')">
-                <img src="${a.image_url || '/static/placeholder.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
+                <img src="${a.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
                 <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
                 <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
                 <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
@@ -1341,7 +1341,7 @@ async function importPageSelectAlbum(albumId) {
         // Render hero
         const album = data.album;
         document.getElementById('import-page-album-hero').innerHTML = `
-            <img src="${album.image_url || '/static/placeholder.png'}" alt="${_escAttr(album.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
+            <img src="${album.image_url || '/static/placeholder-album.png'}" alt="${_escAttr(album.name)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
             <div class="import-page-album-hero-info">
                 <div class="import-page-album-hero-title">${_esc(album.name)}</div>
                 <div class="import-page-album-hero-artist">${_esc(album.artist)}</div>
@@ -1761,7 +1761,7 @@ async function importPageSearchSingleTrack(fileIdx, query) {
             const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
             return `
                 <div class="import-page-single-result-item" onclick="importPageSelectSingleMatch(${fileIdx}, ${tIdx})">
-                    ${t.image_url ? `<img class="import-page-single-result-img" src="${t.image_url}" onerror="this.src='/static/placeholder.png'">` : ''}
+                    ${t.image_url ? `<img class="import-page-single-result-img" src="${t.image_url}" onerror="this.src='/static/placeholder-album.png'">` : ''}
                     <div class="import-page-single-result-info">
                         <div class="import-page-single-result-name">${_esc(t.name)} - ${_esc(t.artist)}</div>
                         <div class="import-page-single-result-detail">${_esc(t.album)}${dur ? ' · ' + dur : ''}</div>
@@ -1923,7 +1923,7 @@ function _importQueueRender() {
         return `
             <div class="import-page-queue-item">
                 ${j.imageUrl
-                ? `<img class="import-page-queue-art" src="${j.imageUrl}" onerror="this.src='/static/placeholder.png'">`
+                ? `<img class="import-page-queue-art" src="${j.imageUrl}" onerror="this.src='/static/placeholder-album.png'">`
                 : `<div class="import-page-queue-art" style="background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,0.3);">&#9834;</div>`}
                 <div class="import-page-queue-info">
                     <div class="import-page-queue-name">${_esc(j.label)}</div>