From 6275a6a2b3f6081e1e0e9901fe807c8ba1f83e88 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Wed, 13 May 2026 18:29:00 -0400
Subject: [PATCH] imaging: add visual feedback to device-id copy button

Click effect: button flashes green with "copied!" text and 1.15x
scale pulse, reverts after 1.2s. Failure case (clipboard API blocked
or HTTP context) shows red "failed" for 1.5s. Handler moved out of
inline onclick into a single delegated click listener at the doc
level so future copy buttons just need the .copy-btn class +
data-copy-text attribute.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 webapp/templates/imaging.html | 40 ++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/webapp/templates/imaging.html b/webapp/templates/imaging.html
index a639951..4c15007 100644
--- a/webapp/templates/imaging.html
+++ b/webapp/templates/imaging.html
@@ -45,9 +45,9 @@
           {% if s.pctype %}<span class="badge bg-info text-dark ms-2">{{ s.pctype }}</span>{% endif %}
           {% if s.machinenumber %}<span class="badge bg-secondary ms-1">#{{ s.machinenumber }}</span>{% endif %}
           {% if s.intune_device_id %}<div class="small text-muted mt-1">Intune: <code>{{ s.intune_device_id }}</code>
-            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 ms-1"
-                    style="font-size:0.7rem; line-height:1;"
-                    onclick="navigator.clipboard.writeText('{{ s.intune_device_id }}').then(()=>{this.textContent='copied';setTimeout(()=>{this.textContent='copy'},1500)});">copy</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 ms-1 copy-btn"
+                    style="font-size:0.7rem; line-height:1; transition: all 0.2s;"
+                    data-copy-text="{{ s.intune_device_id }}">copy</button>
           </div>{% endif %}
         </div>
       </div>
@@ -135,3 +135,37 @@ Content-Type: application/json
 </div>
 
 {% endblock %}
+
+{% block extra_scripts %}
+<script>
+document.addEventListener('click', function(e) {
+    var btn = e.target.closest('.copy-btn');
+    if (!btn) return;
+    var text = btn.getAttribute('data-copy-text');
+    if (!text) return;
+    navigator.clipboard.writeText(text).then(function() {
+        var origText = btn.dataset.origText || btn.textContent;
+        btn.dataset.origText = origText;
+        btn.textContent = 'copied!';
+        btn.classList.remove('btn-outline-secondary');
+        btn.classList.add('btn-success');
+        btn.style.transform = 'scale(1.15)';
+        setTimeout(function() {
+            btn.textContent = origText;
+            btn.classList.remove('btn-success');
+            btn.classList.add('btn-outline-secondary');
+            btn.style.transform = 'scale(1)';
+        }, 1200);
+    }).catch(function(err) {
+        btn.textContent = 'failed';
+        btn.classList.remove('btn-outline-secondary');
+        btn.classList.add('btn-danger');
+        setTimeout(function() {
+            btn.textContent = btn.dataset.origText || 'copy';
+            btn.classList.remove('btn-danger');
+            btn.classList.add('btn-outline-secondary');
+        }, 1500);
+    });
+});
+</script>
+{% endblock %}