/**
* NaviDocs Search Integration - Complete Code Snippets
* Agent 10 Final Delivery
*
* This file contains all code snippets needed to complete the
* Apple Preview-style search integration in DocumentView.vue
*/
// ============================================================================
// SECTION 1: IMPORTS (Add to line ~315-320)
// ============================================================================
import SearchResultsSidebar from '../components/SearchResultsSidebar.vue'
import SearchSuggestions from '../components/SearchSuggestions.vue'
// ============================================================================
// SECTION 2: STATE VARIABLES (Add to line ~350-355)
// ============================================================================
// Search suggestions state
const showSearchSuggestions = ref(false)
const searchHistory = ref([])
const searchSuggestions = ref([
'engine', 'electrical', 'plumbing', 'safety', 'maintenance',
'fuel', 'navigation', 'bilge', 'hull', 'propeller'
])
const searchInputRef = ref(null) // Reference to search input element
// ============================================================================
// SECTION 3: EVENT HANDLERS (Add to line ~760, after clearSearch())
// ============================================================================
// Handle search suggestion selection
function handleSuggestionSelect(query) {
searchInput.value = query
showSearchSuggestions.value = false
performSearch()
// Add to search history
addToSearchHistory(query)
}
// Hide search suggestions with delay to allow click events
function hideSearchSuggestions() {
setTimeout(() => {
showSearchSuggestions.value = false
}, 200)
}
// Add search to history
function addToSearchHistory(query) {
const historyItem = {
query: query,
timestamp: Date.now(),
resultsCount: totalHits.value
}
// Remove duplicates
searchHistory.value = searchHistory.value.filter(item => item.query !== query)
// Add to beginning
searchHistory.value.unshift(historyItem)
// Limit to 10 items
if (searchHistory.value.length > 10) {
searchHistory.value = searchHistory.value.slice(0, 10)
}
// Save to localStorage
try {
localStorage.setItem(`navidocs-search-history-${documentId.value}`, JSON.stringify(searchHistory.value))
} catch (e) {
console.warn('Failed to save search history:', e)
}
}
// Clear search history
function clearSearchHistory() {
searchHistory.value = []
try {
localStorage.removeItem(`navidocs-search-history-${documentId.value}`)
} catch (e) {
console.warn('Failed to clear search history:', e)
}
}
// Load search history from localStorage
function loadSearchHistory() {
try {
const stored = localStorage.getItem(`navidocs-search-history-${documentId.value}`)
if (stored) {
searchHistory.value = JSON.parse(stored)
}
} catch (e) {
console.warn('Failed to load search history:', e)
}
}
// ============================================================================
// SECTION 4: KEYBOARD SHORTCUTS (Add inside onMounted(), around line 878)
// ============================================================================
// Global keyboard shortcuts for search
const handleKeyboardShortcuts = (event) => {
// Cmd/Ctrl + F: Focus search input
if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
event.preventDefault()
searchInputRef.value?.focus()
}
// Cmd/Ctrl + G: Next result
if ((event.metaKey || event.ctrlKey) && event.key === 'g' && !event.shiftKey) {
event.preventDefault()
if (totalHits.value > 0) {
nextHit()
}
}
// Cmd/Ctrl + Shift + G: Previous result
if ((event.metaKey || event.ctrlKey) && event.key === 'g' && event.shiftKey) {
event.preventDefault()
if (totalHits.value > 0) {
prevHit()
}
}
// Escape: Clear search
if (event.key === 'Escape' && searchQuery.value) {
clearSearch()
}
}
window.addEventListener('keydown', handleKeyboardShortcuts)
// Load search history on mount
loadSearchHistory()
// ============================================================================
// SECTION 5: CLEANUP (Add inside onBeforeUnmount(), around line 961)
// ============================================================================
window.removeEventListener('keydown', handleKeyboardShortcuts)
// ============================================================================
// SECTION 6: TEMPLATE CHANGES
// ============================================================================
/*
* TEMPLATE CHANGE 1: Update search input (around line 46-80)
*
* Replace the search input div with:
*/
/*
*/
/*
* TEMPLATE CHANGE 2: Add SearchResultsSidebar (around line 229-237)
*
* Add this after TocSidebar:
*/
/*
*/
// ============================================================================
// SECTION 7: INTEGRATION NOTES
// ============================================================================
/*
* Integration Summary:
*
* 1. Both SearchResultsSidebar and SearchSuggestions components exist and are complete
*
* 2. DocumentView.vue already has comprehensive search functionality:
* - Cross-page search (searchAllPages)
* - Apple Preview-style highlighting
* - Hit navigation with page jumping
* - Search statistics and state management
*
* 3. What's needed to complete:
* - Import the two components
* - Add state for suggestions and history
* - Add event handlers for suggestions
* - Add keyboard shortcuts
* - Update template to include components
*
* 4. The integration is relatively simple because:
* - Search logic already exists
* - Components are self-contained
* - Event emissions match existing handlers
*
* 5. Key features after integration:
* - Cmd/Ctrl+F to focus search
* - Suggestions dropdown with history
* - Sidebar with all results across all pages
* - Click to jump to any result
* - Keyboard navigation (Cmd/Ctrl+G for next, Cmd/Ctrl+Shift+G for prev)
* - LocalStorage persistence for search history
*
* 6. Potential conflicts:
* - Both TocSidebar and SearchResultsSidebar slide from left
* - May need to adjust positioning or add toggle between them
* - SearchResultsSidebar is positioned at left: 0, TocSidebar also from left
* - Consider z-index layering or exclusive visibility
*/
// ============================================================================
// SECTION 8: KEYBOARD SHORTCUTS REFERENCE
// ============================================================================
const KEYBOARD_SHORTCUTS = {
'Cmd/Ctrl + F': 'Focus search input',
'Enter': 'Perform search',
'Cmd/Ctrl + G': 'Next match',
'Cmd/Ctrl + Shift + G': 'Previous match',
'Escape': 'Clear search / Close suggestions',
'↑ / ↓ (in suggestions)': 'Navigate suggestions',
'Enter (in suggestions)': 'Select suggestion',
}
// ============================================================================
// SECTION 9: COMPONENT PROPS REFERENCE
// ============================================================================
/*
* SearchSuggestions Props:
*
* @prop {Array} history - Array of { query, timestamp, resultsCount }
* @prop {Array} suggestions - Array of suggested search terms (strings)
* @prop {Boolean} visible - Whether to show the dropdown
* @prop {String} documentId - Current document ID
* @prop {Number} maxHistory - Max history items to show (default: 10)
* @prop {Number} maxSuggestions - Max suggestions to show (default: 8)
*
* @emit select(query) - User selected a query
* @emit clear-history - User wants to clear history
*/
/*
* SearchResultsSidebar Props:
*
* @prop {Array} results - Array of hit objects with { page, snippet, ... }
* @prop {Number} currentIndex - Currently active result index
* @prop {Boolean} visible - Whether sidebar is visible
* @prop {String} searchTerm - The search query for highlighting
*
* @emit result-click(index) - User clicked a result
* @emit close - User wants to close sidebar
*/
// ============================================================================
// SECTION 10: TESTING COMMANDS
// ============================================================================
/*
* Manual Testing Steps:
*
* 1. Open any document in NaviDocs
* 2. Press Cmd/Ctrl+F → Search input should focus
* 3. Type "engine" → Suggestions dropdown should appear
* 4. Click a suggestion → Search should execute
* 5. Results sidebar should slide in from left showing all matches
* 6. Click a result in sidebar → Should jump to that page
* 7. Press Cmd/Ctrl+G → Should go to next match
* 8. Press Cmd/Ctrl+Shift+G → Should go to previous match
* 9. Press Escape → Search should clear
* 10. Search again for same term → Should appear in history
* 11. Click "Clear" in suggestions → History should be cleared
* 12. Refresh page → History should persist (localStorage)
*
* Edge Cases:
* - Search with no results
* - Search at end of document (next wraps to beginning)
* - Search at beginning of document (prev wraps to end)
* - Multiple words search
* - Special characters in search
* - Very long search query
* - Document with 100+ pages (performance test)
*/
// ============================================================================
// END OF INTEGRATION CODE
// ============================================================================