feat: mini vendor logos on chips

static/css/index.css

@@ -270,13 +270,30 @@
     .chip {
       border: 1px solid #ccdbf7;
       border-radius: 999px;
-      padding: 8px 12px;
+      padding: 6px 12px 6px 6px;
       background: #f7faff;
       color: #22427a;
       font-size: 13px;
       cursor: pointer;
       user-select: none;
       transition: .18s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+    }
+    .chip-logo {
+      width: 22px;
+      height: 22px;
+      object-fit: contain;
+      border-radius: 4px;
+      background: #fff;
+      flex-shrink: 0;
+    }
+    .chip.active .chip-logo {
+      filter: brightness(0) invert(1) opacity(.9);
+    }
+    .chip.dim .chip-logo {
+      opacity: .45;
     }
 
     .chip:hover {

static/js/index.js

@@ -205,7 +205,15 @@
       node.className = "chip";
       if (state.selectedVendors.has(vendor.id)) node.classList.add("active");
       else if (!allowedVendors.has(vendor.id)) node.classList.add("dim");
-      node.textContent = vendor.name;
+      if (vendor.logo) {
+        const img = document.createElement('img');
+        img.src = `/static/${vendor.logo}`;
+        img.alt = '';
+        img.className = 'chip-logo';
+        img.onerror = () => img.remove();
+        node.appendChild(img);
+      }
+      node.appendChild(document.createTextNode(vendor.name));
       node.addEventListener("click", () => {
         const wasSelected = state.selectedVendors.has(vendor.id);
         state.selectedVendors.clear();