No description
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> |
||
|---|---|---|
| client | ||
| demo-screenshots | ||
| docs | ||
| scripts | ||
| server | ||
| test/data | ||
| tests/e2e | ||
| .gitignore | ||
| ANALYSIS_INDEX.md | ||
| ARCHITECTURE-SUMMARY.md | ||
| BRANDING_CREATIVE_BRIEF.md | ||
| BUILD_COMPLETE.md | ||
| capture-demo-screenshots.js | ||
| CLEANUP_COMPLETE.sh | ||
| DEMO-GUIDE.md | ||
| DEVELOPMENT.md | ||
| FEATURE-ROADMAP.md | ||
| GITEA_ACCESS.md | ||
| GOOGLE_DRIVE_OCR_QUICKSTART.md | ||
| IMPLEMENTATION_COMPLETE.md | ||
| NAVIDOCS_HANDOVER.md | ||
| navidocs_search_token_test_report.json | ||
| OCR_FINAL_RECOMMENDATION.md | ||
| OCR_PIPELINE_SETUP.md | ||
| playwright.config.js | ||
| PORT_ALLOCATION.md | ||
| PORT_MIGRATION_SUMMARY.md | ||
| QUICK_REFERENCE.md | ||
| QUICKSTART.md | ||
| README.md | ||
| README_NEW.md | ||
| REORGANIZE_FILES.sh | ||
| SERVICES_STATUS.md | ||
| SESSION-SUMMARY.md | ||
| SESSION_STATUS.md | ||
| STACKCP_ARCHITECTURE_ANALYSIS.md | ||
| STACKCP_DEBATE_BRIEF.md | ||
| STACKCP_EVALUATION_REPORT.md | ||
| STACKCP_QUICK_REFERENCE.md | ||
| STACKCP_VERIFICATION_SUMMARY.md | ||
| start-all.sh | ||
| stop-all.sh | ||
| test-backend-e2e.js | ||
| test-e2e.js | ||
| test-image-endpoints.sh | ||
| test-manual.pdf | ||
| TEST_RESULTS.md | ||
NaviDocs - Professional Boat Manual Management
Production-ready boat manual management platform with OCR and intelligent search
Built with Vue 3, Express, SQLite, and Meilisearch. Extracted from the lilian1 (FRANK-AI) prototype with clean, professional code only.
Features
- Upload PDFs - Drag and drop boat manuals
- OCR Processing - Automatic text extraction with Tesseract.js
- Intelligent Search - Meilisearch with boat terminology synonyms
- Offline-First - PWA with service worker caching
- Multi-Vertical - Supports boats, marinas, and properties
- Secure - Tenant tokens, file validation, rate limiting
Tech Stack
Backend
- Node.js 20 - Express 5
- SQLite - better-sqlite3 with WAL mode
- Meilisearch - Sub-100ms search with synonyms
- BullMQ - Background OCR job processing
- Tesseract.js - PDF text extraction
Frontend
- Vue 3 - Composition API with
<script setup> - Vite - Fast builds and HMR
- Tailwind CSS - Meilisearch-inspired design
- Pinia - State management
- PDF.js - Document viewer
Quick Start
Prerequisites
# Required
node >= 20.0.0
npm >= 10.0.0
# For OCR
pdftoppm (from poppler-utils)
tesseract >= 5.0.0
# For search
meilisearch >= 1.0.0
# For queue
redis >= 6.0.0
Installation
# Clone repository
cd ~/navidocs
# Install server dependencies
cd server
npm install
cp .env.example .env
# Edit .env with your configuration
# Initialize database
npm run init-db
# Install client dependencies
cd ../client
npm install
# Start services (each in separate terminal)
meilisearch --master-key=masterKey
redis-server
cd ~/navidocs/server && node workers/ocr-worker.js
cd ~/navidocs/server && npm run dev
cd ~/navidocs/client && npm run dev
Visit http://localhost:8080
Architecture
See docs/architecture/ for complete schema and configuration details.
Ship it. Learn from users. Iterate.