fix(db): comprehensive symbol recovery + safety fixes

src/components/map/map-view.tsx

@@ -1670,13 +1670,56 @@ export function MapView({
           inner.style.transform = `rotate(${rotation}deg)`
           inner.style.transition = 'transform 0.1s'
 
-          if (imgSrc) {
-            inner.style.backgroundImage = `url("${imgSrc}")`
+          // Try primary image source, with fallback chain for broken/deleted icons
+          const applyImage = (src: string) => {
+            inner.style.backgroundImage = `url("${src}")`
             inner.style.backgroundSize = 'contain'
             inner.style.backgroundRepeat = 'no-repeat'
             inner.style.backgroundPosition = 'center'
           }
 
+          if (imgSrc) {
+            applyImage(imgSrc)
+            // If image fails to load (404 from deleted icon), try fallback
+            const testImg = new Image()
+            testImg.onload = () => {} // OK
+            testImg.onerror = () => {
+              // Fallback 1: Try API endpoint with iconId
+              if (iconId) {
+                const fallbackUrl = `/api/icons/${iconId}/image`
+                if (fallbackUrl !== imgSrc) {
+                  const test2 = new Image()
+                  test2.onload = () => applyImage(fallbackUrl)
+                  test2.onerror = () => {
+                    // Fallback 2: Show broken symbol indicator
+                    inner.style.backgroundImage = 'none'
+                    inner.style.display = 'flex'
+                    inner.style.alignItems = 'center'
+                    inner.style.justifyContent = 'center'
+                    inner.style.border = '2px dashed #ef4444'
+                    inner.style.borderRadius = '4px'
+                    inner.style.backgroundColor = 'rgba(239,68,68,0.1)'
+                    inner.innerHTML = '<span style="font-size:10px;color:#ef4444;text-align:center">⚠️</span>'
+                  }
+                  test2.src = fallbackUrl
+                } else {
+                  inner.style.backgroundImage = 'none'
+                  inner.style.display = 'flex'
+                  inner.style.alignItems = 'center'
+                  inner.style.justifyContent = 'center'
+                  inner.style.border = '2px dashed #ef4444'
+                  inner.style.borderRadius = '4px'
+                  inner.style.backgroundColor = 'rgba(239,68,68,0.1)'
+                  inner.innerHTML = '<span style="font-size:10px;color:#ef4444;text-align:center">⚠️</span>'
+                }
+              }
+            }
+            testImg.src = imgSrc
+          } else if (iconId) {
+            // No imageUrl at all — try loading via API
+            applyImage(`/api/icons/${iconId}/image`)
+          }
+
           wrapper.appendChild(inner)
 
           // Click/tap to select symbol for Moveable editing — ONLY in 'select' mode