add image placeholder; add dialog in listing

js/components/listing-card.js

@@ -58,9 +58,19 @@ class ListingCard extends HTMLElement {
         const priceDisplay = price ? formatPrice(parseFloat(price), currency) : '–';
         const favoriteLabel = this.isFavorite ? t('home.removeFavorite') : t('home.addFavorite');
         
+        const placeholderSvg = /* html */`
+            <svg class="placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                <polyline points="21 15 16 10 5 21"></polyline>
+            </svg>
+        `;
+        
         this.innerHTML = /* html */`
             <a href="#/listing/${escapeHTML(id)}" class="listing-link">
-                <div class="listing-image" ${image ? `style="background-image: url('${escapeHTML(image)}')"` : ''}></div>
+                <div class="listing-image" ${image ? `style="background-image: url('${escapeHTML(image)}')"` : ''}>
+                    ${!image ? placeholderSvg : ''}
+                </div>
                 <div class="listing-info">
                     <h3 class="listing-title">${escapeHTML(title)}</h3>
                     <p class="listing-price">${priceDisplay}</p>
@@ -138,6 +148,15 @@ style.textContent = /* css */`
         background: var(--color-bg-tertiary);
         background-size: cover;
         background-position: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    listing-card .listing-image .placeholder-icon {
+        width: 48px;
+        height: 48px;
+        color: var(--color-border);
     }
     
     listing-card .listing-info {