From 770fdae8325d630acf0f78bd6f2b6edef2f654e2 Mon Sep 17 00:00:00 2001 From: ggq-admin Date: Mon, 20 Oct 2025 10:01:58 +0200 Subject: [PATCH] Redesign search results for information density and usability MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Based on expert UX feedback, completely redesigned search results to prioritize information scent over visual aesthetics. **Visual Hierarchy Changes:** - Flipped hierarchy: metadata small โ†’ snippet large โ†’ doc badge tiny - Page number now prominent (font-weight 600) - Document title moved to small right-aligned badge - Snippet is now the visual focus (15px, proper line-height) **Highlight Improvements:** - Yellow background (#FFE666) with high contrast black text - Added bold to highlighted terms for accessibility - Enhanced Meilisearch tags with .nv-hi class - WCAG AA compliant contrast ratios **Diagram Handling:** - Removed empty image thumbnails that looked broken - Replaced with "Diagram" chip (yellow accent) - Added hover preview popover (300ms delay) - Click to toggle preview on mobile - Graceful error handling for missing images **Information Density:** - Reduced card padding from 24px to 10-12px - Reduced card spacing from 16px (space-y-4) to 8px (space-y-2) - Search bar height reduced from 64px to 48px - Now shows 8-12 results per viewport instead of 3-4 - Condensed metadata into single compact row **Accessibility:** - Added keyboard support: Enter and Space to open - Added ARIA labels for diagram previews - Focus visible styles with pink ring - Mobile-responsive: hides doc badge on small screens **Performance:** - Debounced preview showing (300ms) - Lazy loading for diagram images - Removed heavy animations and blur effects **CSS Architecture:** - New .nv-* utility classes for search-specific styles - Scoped styles to avoid global pollution - Media queries for mobile optimization This transforms search from "pretty gradient cards" to "find the gasket size fast." Users can now scan sections, spot yellow highlights, and preview diagrams without leaving the results page. Next phase: Extract section metadata during OCR for even better organization. ๐Ÿค– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- client/src/views/SearchView.vue | 282 +++++++++++++++++++++++++------- 1 file changed, 222 insertions(+), 60 deletions(-) diff --git a/client/src/views/SearchView.vue b/client/src/views/SearchView.vue index 5308f95..1356df1 100644 --- a/client/src/views/SearchView.vue +++ b/client/src/views/SearchView.vue @@ -28,7 +28,7 @@ v-model="searchQuery" @input="performSearch" type="text" - class="w-full h-16 px-6 pr-14 rounded-2xl border-2 border-white/20 bg-white/10 backdrop-blur-lg text-white placeholder-white/50 shadow-lg focus:outline-none focus:border-pink-400 focus:ring-4 focus:ring-pink-400/20 transition-all duration-200 text-lg" + class="w-full h-12 px-5 pr-14 rounded-xl border-2 border-white/20 bg-white/10 backdrop-blur-lg text-white placeholder-white/50 shadow-lg focus:outline-none focus:border-pink-400 focus:ring-2 focus:ring-pink-400/20 transition-all duration-200" placeholder="Search your manuals..." autofocus /> @@ -61,69 +61,62 @@ -
-
+
-
-
- -
- -
-
- - - -
+ +
+ Page {{ result.pageNumber }} + ยท + + {{ result.boatMake }} {{ result.boatModel }} + + {{ result.title }} +
- -
-

- {{ result.title }} -

-
- - - - - Diagram - - - - - - {{ result.boatMake }} {{ result.boatModel }} - - - - - - Page {{ result.pageNumber }} - -
-

-
+ +

- -
- - - -
-
+ +
+ + Open page โ†’ +
+ + + -
+
@@ -164,6 +157,8 @@ const router = useRouter() const { results, loading, searchTime, search } = useSearch() const searchQuery = ref(route.query.q || '') +const activePreview = ref(null) +let previewTimer = null async function performSearch() { if (!searchQuery.value.trim()) { @@ -178,9 +173,33 @@ async function performSearch() { } } -function highlightMatch(text) { - // Meilisearch returns pre-highlighted text with tags - return text || '' +function formatSnippet(text) { + if (!text) return '' + + // Meilisearch returns tags, enhance them with bold + return text + .replace(//g, '') + .replace(/<\/mark>/g, '') +} + +function showPreview(id) { + clearTimeout(previewTimer) + previewTimer = setTimeout(() => { + activePreview.value = id + }, 300) +} + +function hidePreview(id) { + clearTimeout(previewTimer) + previewTimer = setTimeout(() => { + if (activePreview.value === id) { + activePreview.value = null + } + }, 300) +} + +function togglePreview(id) { + activePreview.value = activePreview.value === id ? null : id } function viewDocument(result) { @@ -195,8 +214,7 @@ function viewDocument(result) { } function handleImageError(event) { - // Hide broken image, show fallback icon instead - event.target.style.display = 'none' + event.target.closest('.nv-popover')?.remove() } // Watch for query changes from URL @@ -213,3 +231,147 @@ onMounted(() => { } }) + +