770fdae832
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 <mark> 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 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| src | ||
| index.html | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
| vite.config.js | ||