Add hover zoom preview for admin thumbnailsv1.1

Hovering over a thumbnail in the admin file table pops up the full
300×300 cached version near the cursor, making it easy to confirm
identity before deleting or editing.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 31 insertions, 0 deletions

diff --git a/views/admin/album.erb b/views/admin/album.erb
index 14a8f07..8c9ebe1 100644
--- a/views/admin/album.erb
+++ b/views/admin/album.erb
@@ -122,6 +122,37 @@
         e.preventDefault();
       }
     });
+
+    // Hover preview for admin thumbnails
+    (function () {
+      const preview = document.createElement('div');
+      preview.id = 'admin-thumb-preview';
+      preview.innerHTML = '<img alt="">';
+      document.body.appendChild(preview);
+      const pimg = preview.querySelector('img');
+
+      function reposition(e) {
+        const pw = 300 + 12, ph = 300 + 12;
+        let x = e.clientX + 18, y = e.clientY + 18;
+        if (x + pw > window.innerWidth)  x = e.clientX - pw - 8;
+        if (y + ph > window.innerHeight) y = e.clientY - ph - 8;
+        preview.style.left = x + 'px';
+        preview.style.top  = y + 'px';
+      }
+
+      document.querySelectorAll('.files-table td:first-child img').forEach(function (thumb) {
+        thumb.style.cursor = 'zoom-in';
+        thumb.addEventListener('mouseenter', function (e) {
+          pimg.src = thumb.src;
+          preview.style.display = 'block';
+          reposition(e);
+        });
+        thumb.addEventListener('mousemove', reposition);
+        thumb.addEventListener('mouseleave', function () {
+          preview.style.display = 'none';
+        });
+      });
+    })();
   })();
   </script>