From 84a250e9552c25cb92916d3fd7d3f004eeb7e7e3 Mon Sep 17 00:00:00 2001
From: mariosemes <mario.semes@gmail.com>
Date: Thu, 26 Mar 2026 22:53:22 +0100
Subject: [PATCH] Add thumbnail hover preview on results table

Hovering a product thumbnail shows a 192x192 enlarged preview
in a dark container with border and shadow. Appears to the right
of the thumbnail with a smooth scale+fade animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/src/app.css                     | 10 ++++++++++
 src/client/src/routes/results/+page.svelte | 11 +++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/client/src/app.css b/src/client/src/app.css
index 74a4aa6..47a682a 100644
--- a/src/client/src/app.css
+++ b/src/client/src/app.css
@@ -60,3 +60,13 @@
     @apply block text-xs font-medium text-text-secondary mb-1.5;
   }
 }
+
+/* Thumbnail hover preview */
+.thumb-hover .thumb-preview {
+  @apply absolute left-full top-1/2 -translate-y-1/2 ml-3 z-50
+         opacity-0 scale-90 transition-all duration-150 ease-out;
+}
+
+.thumb-hover:hover .thumb-preview {
+  @apply opacity-100 scale-100;
+}
diff --git a/src/client/src/routes/results/+page.svelte b/src/client/src/routes/results/+page.svelte
index 1b19a6f..96c0599 100644
--- a/src/client/src/routes/results/+page.svelte
+++ b/src/client/src/routes/results/+page.svelte
@@ -310,8 +310,15 @@
             <tr class="border-b border-surface-border hover:bg-surface-hover/50 transition-colors duration-100 group">
               <td class="px-6 py-2">
                 {#if product.image}
-                  <div class="w-8 h-8 rounded bg-surface flex items-center justify-center overflow-hidden">
-                    <img src={product.image} alt="" class="max-w-full max-h-full object-contain" />
+                  <div class="relative thumb-hover">
+                    <div class="w-8 h-8 rounded bg-surface flex items-center justify-center overflow-hidden cursor-pointer">
+                      <img src={product.image} alt="" class="max-w-full max-h-full object-contain" />
+                    </div>
+                    <div class="thumb-preview pointer-events-none">
+                      <div class="w-48 h-48 rounded-lg bg-surface-raised border border-surface-border shadow-2xl shadow-black/50 p-3 flex items-center justify-center">
+                        <img src={product.image} alt={product.name} class="max-w-full max-h-full object-contain" />
+                      </div>
+                    </div>
                   </div>
                 {:else}
                   <div class="w-8 h-8 rounded bg-surface flex items-center justify-center">