From ea5a59ebd8cee3446c71d86cb433627a779f2a4c Mon Sep 17 00:00:00 2001
From: Daniel Widgren <daniel.widgren@gmail.com>
Date: Thu, 25 Jun 2026 10:23:13 +0200
Subject: [PATCH 1/2] feat: brighter ETSI buttons, copy-to-clipboard, ISO date
 picker

- Brighten the per-message 103707/103120 buttons (solid accent border +
  fill) so they stand out in the record card.
- Add a copy button to the XML panel that copies the pretty-printed XML
  to the clipboard (with a brief "copied" confirmation).
- Set lang="sv-SE" on the history datetime-local input so Chrome renders
  it as yyyy-mm-dd instead of the en-US mm/dd/yyyy.
---
 priv/assets/css/ldf.css                | 10 ++++++++--
 src/controllers/ldf_www_controller.erl |  3 ++-
 src/views/history.dtl                  |  2 +-
 src/views/message_row.dtl              |  2 +-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/priv/assets/css/ldf.css b/priv/assets/css/ldf.css
index af9c7ea..6cb7954 100644
--- a/priv/assets/css/ldf.css
+++ b/priv/assets/css/ldf.css
@@ -154,12 +154,18 @@ tbody tr.new { animation: flashin .7s ease-out; }
 
 /* per-message ETSI conversion */
 .rec-etsi { display: flex; gap: 8px; margin-top: 10px; }
-.etsi-btn { padding: 5px 11px; font-size: 10.5px; letter-spacing: .08em; }
+.etsi-btn {
+  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
+  padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: background .15s, box-shadow .15s;
+  border: 1px solid var(--live); background: rgba(46,230,166,.16); color: var(--live);
+}
+.etsi-btn:hover { background: rgba(46,230,166,.28); box-shadow: 0 0 0 3px rgba(46,230,166,.1); }
 .etsi:empty { display: none; }
 .etsi-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
 .etsi-label { color: var(--live); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
 .etsi-label.etsi-err { color: var(--danger); }
-.etsi-hide { margin-left: auto; padding: 4px 10px; font-size: 10.5px; }
+.etsi-copy { margin-left: auto; padding: 4px 11px; }
+.etsi-hide { padding: 4px 10px; font-size: 10.5px; }
 .etsi-pre { margin: 8px 0 0; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; max-height: 360px; overflow: auto; font-size: 11.5px; line-height: 1.45; white-space: pre; }
 .etsi-pre code { color: var(--text); }
 
diff --git a/src/controllers/ldf_www_controller.erl b/src/controllers/ldf_www_controller.erl
index 4d5aac7..d86ccf2 100644
--- a/src/controllers/ldf_www_controller.erl
+++ b/src/controllers/ldf_www_controller.erl
@@ -197,7 +197,8 @@ etsi_block(Format, MessageId, EscapedXml) ->
     iolist_to_binary([
         ~"<div class=\"etsi-bar\"><span class=\"etsi-label\">ETSI ",
         Format,
-        ~"</span><button class=\"btn-ghost etsi-hide\" data-on:click=\"@get('/www/message/",
+        ~"</span><button class=\"etsi-btn etsi-copy\" data-on:click=\"navigator.clipboard.writeText(el.closest('.etsi').querySelector('code').textContent);el.textContent='copied';setTimeout(()=>el.textContent='copy',1200)\">copy</button>",
+        ~"<button class=\"btn-ghost etsi-hide\" data-on:click=\"@get('/www/message/",
         MessageId,
         ~"/hide')\">hide</button></div><pre class=\"etsi-pre\"><code>",
         EscapedXml,
diff --git a/src/views/history.dtl b/src/views/history.dtl
index f486f74..2ab3280 100644
--- a/src/views/history.dtl
+++ b/src/views/history.dtl
@@ -13,7 +13,7 @@
       <input type="text" data-bind:value placeholder="target@example.com">
     </div>
     <div class="row" style="margin-top:12px">
-      <input type="datetime-local" step="1" data-bind:timestamp>
+      <input type="datetime-local" step="1" lang="sv-SE" data-bind:timestamp>
       <button class="btn" data-on:click="@post('/www/history')">Submit request</button>
     </div>
     <p class="hint">Replays messages from this point in time onward (UTC).</p>
diff --git a/src/views/message_row.dtl b/src/views/message_row.dtl
index abd6a9e..463ebff 100644
--- a/src/views/message_row.dtl
+++ b/src/views/message_row.dtl
@@ -1 +1 @@
-<div class="rec{% if new %} new{% endif %}"><div class="rec-head"><span class="rec-from">{% if email %}{{ email }}{% endif %}{% if phone %}<span class="rec-phone">{{ phone }}</span>{% endif %}{% if not email %}{% if not phone %}<span class="rec-phone">unidentified</span>{% endif %}{% endif %}</span><span class="rec-time">{{ time }}</span></div><div class="rec-body">{% if link %}<a href="{{ link }}" target="_blank" rel="noopener">{{ link }}</a>{% else %}{{ text }}{% endif %}</div><div class="rec-meta"><span><i>type</i>{{ type }}{% if action %} / {{ action }}{% endif %}</span><span><i>msg</i>{{ id }}</span><span><i>chat</i>{{ chat }}</span><span><i>sender</i>{{ sender }}</span><span><i>to</i>{{ recipient }}</span>{% if agent %}<span class="rec-agent"><i>agent</i>{{ agent }}</span>{% endif %}</div>{% if full_id %}<div class="rec-etsi"><button class="btn-ghost etsi-btn" data-on:click="@get('/www/message/{{ full_id }}/103707')">103707 XML</button><button class="btn-ghost etsi-btn" data-on:click="@get('/www/message/{{ full_id }}/103120')">103120 XML</button></div><div id="xml-{{ full_id }}" class="etsi"></div>{% endif %}</div>
+<div class="rec{% if new %} new{% endif %}"><div class="rec-head"><span class="rec-from">{% if email %}{{ email }}{% endif %}{% if phone %}<span class="rec-phone">{{ phone }}</span>{% endif %}{% if not email %}{% if not phone %}<span class="rec-phone">unidentified</span>{% endif %}{% endif %}</span><span class="rec-time">{{ time }}</span></div><div class="rec-body">{% if link %}<a href="{{ link }}" target="_blank" rel="noopener">{{ link }}</a>{% else %}{{ text }}{% endif %}</div><div class="rec-meta"><span><i>type</i>{{ type }}{% if action %} / {{ action }}{% endif %}</span><span><i>msg</i>{{ id }}</span><span><i>chat</i>{{ chat }}</span><span><i>sender</i>{{ sender }}</span><span><i>to</i>{{ recipient }}</span>{% if agent %}<span class="rec-agent"><i>agent</i>{{ agent }}</span>{% endif %}</div>{% if full_id %}<div class="rec-etsi"><button class="etsi-btn" data-on:click="@get('/www/message/{{ full_id }}/103707')">103707 XML</button><button class="etsi-btn" data-on:click="@get('/www/message/{{ full_id }}/103120')">103120 XML</button></div><div id="xml-{{ full_id }}" class="etsi"></div>{% endif %}</div>

From 08a0909beca16ee7ce47f30e2741ce18c650942a Mon Sep 17 00:00:00 2001
From: Daniel Widgren <daniel.widgren@gmail.com>
Date: Thu, 25 Jun 2026 10:27:51 +0200
Subject: [PATCH 2/2] fix: wrap long etsi copy-button line; add enter-to-submit

- Split the copy-button binary across iolist elements so it respects the
  elvis line_length limit (was 239 chars on one line).
- Listener and history target inputs now submit on Enter, same as the
  button (data-on:keydown).
---
 src/controllers/ldf_www_controller.erl | 4 +++-
 src/views/admin.dtl                    | 2 +-
 src/views/history.dtl                  | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/controllers/ldf_www_controller.erl b/src/controllers/ldf_www_controller.erl
index d86ccf2..949711a 100644
--- a/src/controllers/ldf_www_controller.erl
+++ b/src/controllers/ldf_www_controller.erl
@@ -197,7 +197,9 @@ etsi_block(Format, MessageId, EscapedXml) ->
     iolist_to_binary([
         ~"<div class=\"etsi-bar\"><span class=\"etsi-label\">ETSI ",
         Format,
-        ~"</span><button class=\"etsi-btn etsi-copy\" data-on:click=\"navigator.clipboard.writeText(el.closest('.etsi').querySelector('code').textContent);el.textContent='copied';setTimeout(()=>el.textContent='copy',1200)\">copy</button>",
+        ~"</span><button class=\"etsi-btn etsi-copy\" data-on:click=\"",
+        ~"navigator.clipboard.writeText(el.closest('.etsi').querySelector('code').textContent);",
+        ~"el.textContent='copied';setTimeout(()=>el.textContent='copy',1200)\">copy</button>",
         ~"<button class=\"btn-ghost etsi-hide\" data-on:click=\"@get('/www/message/",
         MessageId,
         ~"/hide')\">hide</button></div><pre class=\"etsi-pre\"><code>",
diff --git a/src/views/admin.dtl b/src/views/admin.dtl
index d2b040b..8a94605 100644
--- a/src/views/admin.dtl
+++ b/src/views/admin.dtl
@@ -10,7 +10,7 @@
     <div class="row">
       <label class="seg"><input type="radio" value="email" data-bind:type checked> Email</label>
       <label class="seg"><input type="radio" value="phone_number" data-bind:type> Phone</label>
-      <input type="text" data-bind:value placeholder="target@example.com   /   +4670…">
+      <input type="text" data-bind:value placeholder="target@example.com   /   +4670…" data-on:keydown="evt.key === 'Enter' && @post('/www/li')">
       <button class="btn" data-on:click="@post('/www/li')">Add target</button>
     </div>
   </div>
diff --git a/src/views/history.dtl b/src/views/history.dtl
index 2ab3280..0d8c63a 100644
--- a/src/views/history.dtl
+++ b/src/views/history.dtl
@@ -10,7 +10,7 @@
     <div class="row">
       <label class="seg"><input type="radio" value="email" data-bind:type checked> Email</label>
       <label class="seg"><input type="radio" value="phone_number" data-bind:type> Phone</label>
-      <input type="text" data-bind:value placeholder="target@example.com">
+      <input type="text" data-bind:value placeholder="target@example.com" data-on:keydown="evt.key === 'Enter' && @post('/www/history')">
     </div>
     <div class="row" style="margin-top:12px">
       <input type="datetime-local" step="1" lang="sv-SE" data-bind:timestamp>