From a7112fcc7296eded0f54f109368a2a6ba7bc70cd Mon Sep 17 00:00:00 2001
From: Local Dev <dev@localhost>
Date: Sat, 1 Aug 2026 00:13:14 +0200
Subject: [PATCH] Theseus: show the selected engine's favicon on the search
 dropdown button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The search box's dropdown button now displays the current engine's favicon
(emoji fallback) + a caret, instead of a generic magnifier — and updates when
the engine changes.
---
 chrome.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/chrome.html b/chrome.html
index fdf8371..905318e 100644
--- a/chrome.html
+++ b/chrome.html
@@ -66,10 +66,14 @@
   .searchbox { display: flex; align-items: center; width: 300px; background: var(--surface); border: 1px solid var(--line);
                border-radius: 999px; padding: 0 12px 0 3px; }
   .searchbox:focus-within { border-color: #4b7bec; }
-  .engine-btn { width: 34px; height: 30px; border: none; cursor: pointer; border-radius: 999px 0 0 999px; padding: 0;
-                background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b98a9' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M10.2 10.2 L14 14'/%3E%3C/svg%3E") no-repeat left 8px center / 14px; }
-  .engine-btn::after { content: "▾"; position: relative; left: 12px; font-size: 9px; color: var(--dim); }
+  /* dropdown button shows the SELECTED engine's favicon (emoji fallback) + a caret */
+  .engine-btn { display: flex; align-items: center; gap: 3px; height: 30px; border: none; cursor: pointer;
+                border-radius: 999px 0 0 999px; padding: 0 4px 0 8px; background: transparent; }
   .engine-btn:hover { background-color: var(--hover); }
+  .engine-btn #engineIcon { display: grid; place-items: center; width: 16px; height: 16px; }
+  .engine-btn .eimg { width: 16px; height: 16px; border-radius: 3px; }
+  .engine-btn .esym { font-size: 14px; line-height: 1; }
+  .engine-btn .cv { font-size: 8px; color: var(--dim); }
   #search { flex: 1; padding: 7px 4px; }
   .tor { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: #2b2f3a; color: var(--ink); cursor: pointer; white-space: nowrap; font-size: 12.5px; }
   .tor.connecting { background: #7a5c14; } .tor.on { background: #6b3fa0; }
@@ -116,7 +120,7 @@
       <button class="star" id="star" title="Save this page">☆</button>
     </div>
     <div class="searchbox">
-      <button id="engineBtn" class="engine-btn" title="Choose search engine"></button>
+      <button id="engineBtn" class="engine-btn" title="Choose search engine"><span id="engineIcon"></span><span class="cv">▾</span></button>
       <input id="search" placeholder="Search" spellcheck="false">
     </div>
     <button class="tor" id="tor" title="Route traffic through Tor">🧅 Tor: Off</button>
@@ -157,6 +161,11 @@
   function setEnginePlaceholder(d) {
     const cur = (d.engines || []).find((e) => e.id === d.current);
     $("search").placeholder = cur ? "Search with " + cur.name : "Search";
+    const icon = $("engineIcon");
+    const sym = (cur && cur.sym) || "🔍";
+    if (cur && cur.favicon)
+      icon.innerHTML = `<img class="eimg" src="${cur.favicon.replace(/"/g, "&quot;")}" onerror="this.replaceWith(Object.assign(document.createElement('span'),{className:'esym',textContent:'${sym}'}))">`;
+    else icon.innerHTML = `<span class="esym">${sym}</span>`;
   }
   $("engineBtn").onclick = () => {
     const r = $("engineBtn").getBoundingClientRect();