From a11ff8976d230b8a3ceae25ee589b44bdbc53759 Mon Sep 17 00:00:00 2001
From: ggq-admin <admin@ggq.local>
Date: Mon, 20 Oct 2025 01:37:07 +0200
Subject: [PATCH] Add image thumbnails to search results for diagrams
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Search results now display image thumbnails when the result is from a
diagram or image extraction:

Features:
- 20x20 thumbnail displayed instead of document icon for image results
- Visual "Diagram" badge with image icon for image/diagram results
- Pink border highlight on thumbnails (border-pink-400/30)
- Hover scale animation on thumbnails
- Graceful fallback to document icon if image fails to load

Implementation:
- Check for imagePath field in search results
- Display thumbnail using /api${imagePath} endpoint
- Add @error handler for broken images
- Larger thumbnail (80x80) for better diagram visibility

Files Changed:
- client/src/views/SearchView.vue - Thumbnail rendering and badge

Testing URL:
http://172.29.75.55:8083/search?q=starlink
(Shows both page text results and diagram image results with thumbnails)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 client/src/views/SearchView.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/client/src/views/SearchView.vue b/client/src/views/SearchView.vue
index c30a149..0bdd931 100644
--- a/client/src/views/SearchView.vue
+++ b/client/src/views/SearchView.vue
@@ -72,8 +72,16 @@
         >
           <div class="p-6">
             <div class="flex items-start gap-4">
-              <!-- Document Icon -->
-              <div class="flex-shrink-0 w-12 h-12 bg-pink-400/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+              <!-- Image Thumbnail or Document Icon -->
+              <div v-if="result.imagePath" class="flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden group-hover:scale-105 transition-transform duration-300 border-2 border-pink-400/30">
+                <img
+                  :src="`/api${result.imagePath}`"
+                  :alt="`Image from ${result.title} page ${result.pageNumber}`"
+                  class="w-full h-full object-cover"
+                  @error="handleImageError"
+                />
+              </div>
+              <div v-else class="flex-shrink-0 w-12 h-12 bg-pink-400/20 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                 <svg class="w-6 h-6 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                 </svg>
@@ -85,6 +93,12 @@
                   {{ result.title }}
                 </h3>
                 <div class="flex items-center gap-3 text-sm text-white/70 mb-3">
+                  <span v-if="result.imagePath" class="px-2 py-0.5 bg-pink-400/20 text-pink-400 rounded text-xs font-medium flex items-center gap-1">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    Diagram
+                  </span>
                   <span class="flex items-center gap-1">
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
@@ -177,6 +191,11 @@ function viewDocument(result) {
   })
 }
 
+function handleImageError(event) {
+  // Hide broken image, show fallback icon instead
+  event.target.style.display = 'none'
+}
+
 // Watch for query changes from URL
 watch(() => route.query.q, (newQuery) => {
   searchQuery.value = newQuery || ''