designer-studio: add dead-thumbnail error-swap to its pattern search too

816457289ab4999d2cc0504c94827f0214ca9ef8 · 2026-06-01 17:23:11 -0700 · Steve Abrams

Mirror the generator fix on /designer-studio's #search-results: data-hex on the <img> + a capture-phase 'error' listener that swaps any failing image for its dominant-hex swatch. The shared /api/studio/search server fix already resolves most thumbs; this is the client safety net so the studio page never shows a broken-image icon either. Verified headless: 0 broken images, 0 page errors.

Files touched

M server.js

Diff

commit 816457289ab4999d2cc0504c94827f0214ca9ef8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 1 17:23:11 2026 -0700

    designer-studio: add dead-thumbnail error-swap to its pattern search too
    
    Mirror the generator fix on /designer-studio's #search-results: data-hex on the <img> + a capture-phase 'error' listener that swaps any failing image for its dominant-hex swatch. The shared /api/studio/search server fix already resolves most thumbs; this is the client safety net so the studio page never shows a broken-image icon either. Verified headless: 0 broken images, 0 page errors.
---
 server.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 51afac9..95321a0 100644
--- a/server.js
+++ b/server.js
@@ -23654,7 +23654,7 @@ async function doSearch(){
     var label = (r.title||'').slice(0,40);
     var meta = (r.artist||r.subsource||'') + (r.dominant_hex ? ' · '+r.dominant_hex : '');
     return '<div onclick="addSearch('+JSON.stringify(r).replace(/"/g,'&quot;')+')" style="cursor:pointer;border:1px solid #eee;border-radius:4px;padding:4px;background:#fff;transition:transform .15s" onmouseover="this.style.transform=\\'scale(1.03)\\'" onmouseout="this.style.transform=\\'\\'">'+
-      (thumb?'<img src="'+thumb+'" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px" loading="lazy">':'<div style="aspect-ratio:1;background:#'+((r.dominant_hex||'#888').replace('#',''))+'"></div>')+
+      (thumb?'<img src="'+thumb+'" data-hex="#'+((r.dominant_hex||'#888').replace('#',''))+'" style="width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px" loading="lazy">':'<div style="aspect-ratio:1;background:#'+((r.dominant_hex||'#888').replace('#',''))+'"></div>')+
       '<div style="font-size:10px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="'+label+'">'+label+'</div>'+
       '<div style="font-size:9px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+meta+'</div>'+
       '</div>';
@@ -23676,6 +23676,16 @@ window.addSearch = function(r){
 
 document.getElementById('btn-search').addEventListener('click', doSearch);
 document.getElementById('search-q').addEventListener('keydown', function(e){ if (e.key==='Enter') doSearch(); });
+// Dead-thumbnail safety net (same as the generator): a result whose image 404s
+// swaps to its dominant-hex swatch instead of a broken icon. Capture phase
+// because 'error' events don't bubble.
+document.getElementById('search-results').addEventListener('error', function(e){
+  var img = e.target;
+  if (!img || img.tagName !== 'IMG') return;
+  var div = document.createElement('div');
+  div.style.cssText = 'width:100%;aspect-ratio:1;border-radius:3px;background:'+(img.getAttribute('data-hex')||'#888');
+  img.replaceWith(div);
+}, true);
 
 document.getElementById('upload-input').addEventListener('change', async function(e){
   var f = e.target.files[0]; if (!f) return;

← d919742 me/saved: add sort dropdown (default Recently saved) + densi · back to Wallco Ai · theme-variants: admin theme stepper (slug-based) + drag-reor 957c89c →