Search Results Enhancement:
- Pass search query to document viewer via URL parameter
- Search results already show highlights via Meilisearch <mark> tags
PDF Document Viewer:
- Accept search query from URL (?q=search+term)
- Highlight matching text in PDF text layer
- Case-insensitive search term matching
- Auto-scroll to first match with smooth behavior
- Yellow highlight with pulsing animation for visibility
Highlighting Features:
- Uses regex to find all instances of search term
- Preserves PDF.js text layer positioning
- Highlights visible immediately after page render
- Text remains fully selectable
- Works with digitized/text-based PDFs
Styling:
- Yellow background (rgba(255, 215, 0, 0.6))
- Black text for contrast
- Pulsing animation on initial load
- Rounded corners for polish
User Flow:
1. User searches in SearchView
2. Clicks on search result
3. Navigates to DocumentView with ?q=term&page=X
4. PDF page renders with matching text highlighted
5. Page auto-scrolls to first match
This completes the search highlighting feature requested by the user,
making it easy to find searched terms within PDF documents.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added explicit z-index stacking order:
- Text layer: z-index 2 (top, for selectable text)
- Image overlays: z-index 1 (below text layer)
- Image overlays on hover: z-index 20 (brings to front)
- Enhanced text layer CSS with cross-browser support:
- Added -webkit-user-select, -moz-user-select, -ms-user-select
- Added pointer-events: auto to text layer spans
- Ensures text is selectable on all browsers
- Fixed image overlay z-index from 10 to 1
- Prevents blocking text selection
- Images still clickable, but text layer takes precedence
- Added user-select: auto to body and #app in main.css
- Ensures text selection is enabled globally
This fixes the issue where text was not selectable in the PDF viewer,
especially for digitized/text-based PDFs. The PDF.js text layer now
properly overlays the canvas and allows text selection while keeping
image overlays interactive.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created useToast composable with success/error/warning/info methods
- Added ToastContainer component with animations and colors
- Integrated toast notifications throughout the app:
* Upload success/failure feedback
* OCR completion/failure notifications
* Replaced alert() with toast messages
- Fixed HTML validation warning (div inside p tag)
- Added automatic toast notifications on job status changes
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed incorrect router navigation causing "No match found" error when
clicking on documents from the home page.
Issue:
- HomeView was navigating to /documents/{id} (plural)
- Router configured as /document/:id (singular)
- Result: Vue Router warning and blank page
Fix:
- Updated both document click handlers in HomeView.vue
- Changed @click routes from /documents/ to /document/
- Lines 230 and 256
Testing:
Clicking documents from home page now correctly navigates to DocumentView
at http://172.29.75.55:8083🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
This commit addresses multiple critical fixes and adds new functionality
for the NaviDocs local testing environment (port 8083):
Search Fixes:
- Fixed search to use backend /api/search instead of direct Meilisearch
- Resolves network accessibility issue when accessing from external IPs
- Search now works from http://172.29.75.55:8083/search
PDF Text Selection:
- Added PDF.js text layer for selectable text
- Imported pdf_viewer.css for proper text layer styling
- Changed text layer opacity to 1 for better interaction
- Added user-select: text for improved text selection
- Pink selection highlight (rgba(255, 92, 178, 0.3))
Database Cleanup:
- Created cleanup scripts to remove 20 duplicate documents
- Removed 753 orphaned entries from Meilisearch index
- Cleaned 17 document folders from filesystem
- Kept only newest version of each document
- Scripts: clean-duplicates.js, clean-meilisearch-orphans.js
Auto-Fill Feature:
- New /api/upload/quick-ocr endpoint for first-page OCR
- Automatically extracts metadata from PDFs on file selection
- Detects: boat make, model, year, name, and document title
- Checks both OCR text and filename for boat name
- Auto-fills upload form with extracted data
- Shows loading indicator during metadata extraction
- Graceful fallback to filename if OCR fails
Tenant Management:
- Updated organization ID to use boat name as tenant
- Falls back to "Liliane 1" for single-tenant setup
- Each boat becomes a unique tenant in the system
Files Changed:
- client/src/views/DocumentView.vue - Text layer implementation
- client/src/composables/useSearch.js - Backend API integration
- client/src/components/UploadModal.vue - Auto-fill feature
- server/routes/quick-ocr.js - OCR endpoint (new)
- server/index.js - Route registration
- server/scripts/* - Cleanup utilities (new)
Testing:
All features tested on local deployment at http://172.29.75.55:8083
- Backend: http://localhost:8001
- Frontend: http://localhost:8083
- Meilisearch: http://localhost:7700🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit implements comprehensive image extraction display for PDF documents:
1. Created useDocumentImages.js composable:
- fetchPageImages() function to retrieve images for specific page
- getImageUrl() helper to generate full image URLs
- Proper loading states and error handling
2. Created ImageOverlay.vue component:
- Positioned absolutely over PDF canvas at correct coordinates
- Semi-transparent border to indicate image location
- Hover tooltip displaying extracted OCR text with confidence level
- Click handler to open full-size image modal
- Accessibility support (keyboard navigation, ARIA labels)
- Responsive positioning with smooth hover effects
3. Modified DocumentView.vue:
- Imported and integrated useDocumentImages composable
- Added ImageOverlay components for each extracted image
- Integrated FigureZoom modal for full-size image viewing
- Automatically fetches images when page changes
- Displays image count in header
- Tracks canvas dimensions for proper image positioning
Features:
- Images overlay at exact PDF coordinates using scale conversion
- OCR text displayed in tooltip on hover
- Full-size image view on click with zoom/pan controls
- Reduced motion and high contrast mode support
- Seamless integration with existing PDF viewer
Generated with Claude Code (https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Comprehensive image extraction architecture design
- Database schema for document_images table
- Migration 004: Add document_images table with indexes
- Migration runner script
- Design and status documentation
Prepares foundation for image extraction feature with OCR on images.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
