copy cell content on click

Author: volmedo

web/static/css/admin.css

@@ -12,7 +12,7 @@ body {
 }
 
 .container {
-    max-width: 1600px;
+    max-width: 1650px;
     margin: 0 auto;
     padding: 0;
 }

web/templates/admin.html.tmpl

@@ -168,5 +168,75 @@
             {{end}}
         {{end}}
     </div>
+    <style>
+        .copy-icon {
+            display: none;
+            position: absolute;
+            right: 4px;
+            top: 50%;
+            transform: translateY(-50%) scaleX(-1);
+            width: 14px;
+            height: 14px;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        .providers-table tbody td {
+            position: relative;
+            padding-right: 24px;
+            transition: background-color 0.5s ease-out;
+        }
+
+        .providers-table tbody td:hover .copy-icon {
+            display: block;
+        }
+    </style>
+    <script>
+        // Make all table cells copyable on click with visual copy icon
+        document.addEventListener('DOMContentLoaded', function() {
+            const tables = document.querySelectorAll('.providers-table');
+
+            // SVG copy icon
+            const copyIconSVG = `
+                <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+            `;
+
+            tables.forEach(table => {
+                const cells = table.querySelectorAll('tbody td');
+
+                cells.forEach(cell => {
+                    cell.style.cursor = 'pointer';
+
+                    // Add copy icon to cell
+                    cell.insertAdjacentHTML('beforeend', copyIconSVG);
+
+                    cell.addEventListener('click', function() {
+                        // Get the text content
+                        const textToCopy = this.textContent.trim();
+
+                        if (!textToCopy || textToCopy === 'No stats available') {
+                            return;
+                        }
+
+                        // Copy to clipboard
+                        navigator.clipboard.writeText(textToCopy).then(() => {
+                            // Visual feedback with smooth fade
+                            const originalBg = this.style.backgroundColor;
+                            this.style.backgroundColor = '#d4edda';
+
+                            setTimeout(() => {
+                                this.style.backgroundColor = originalBg;
+                            }, 300);
+                        }).catch(err => {
+                            console.error('Failed to copy:', err);
+                        });
+                    });
+                });
+            });
+        });
+    </script>
 </body>
 </html>