From 45a4a9d5cec8eafc7e98ebd7ca2a9790c0ee94b4 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Mon, 6 Jul 2026 08:09:57 -0700
Subject: Icons in the receive selector and on silent-payment history rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The receive address-type picker was a native <select>, which can't
render SVG in <option>s. Replace it with a lightweight custom dropdown
(icon-select) that shows a glyph per rail — ₿ Bitcoin, ⚡ Lightning,
the Second mark for Ark, 🕶️ Silent payment — closing on select or an
outside tap. Receive modes gained an icon field; the address option is
built in app.js. Silent-payment receipts (which merge into history as
on-chain-looking rows) now get a rail glyph + SP tag via a
decorateTxRow so they're distinguishable, matching how ark/gift rows
already decorate.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/style.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

(limited to 'src/style.css')

diff --git a/src/style.css b/src/style.css
index 545891c..4fe0394 100644
--- a/src/style.css
+++ b/src/style.css
@@ -289,3 +289,24 @@ hr.divider { margin: 16px 0; }
   .words { grid-template-columns: repeat(2, 1fr); }
   .balance .amt { font-size: 28px; }
 }
+
+/* Icon dropdown (receive mode) — a <select> can't render SVG in options. */
+.icon-select-btn {
+  width: 100%; display: flex; align-items: center; gap: 9px;
+  font: inherit; color: var(--ink); background: var(--paper);
+  border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px; cursor: pointer;
+}
+.icon-select-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
+.icon-select-menu {
+  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px;
+  padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px;
+}
+.icon-select-item {
+  display: flex; align-items: center; gap: 9px; width: 100%;
+  font: inherit; color: var(--ink); background: transparent;
+  border: 0; border-radius: 8px; padding: 10px 10px; cursor: pointer; text-align: left;
+}
+.icon-select-item:hover { background: var(--hover, rgba(128,128,128,.12)); }
+.icon-select-item.active { background: var(--accent-soft, rgba(247,147,26,.14)); }
+.sel-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 16px; line-height: 1; }
+.sel-ico svg { display: block; }
-- 
cgit v1.2.3