feat: add frontend search functionality with real-time results

- Create search.js with debounced input (300ms) - Display results in dropdown modal with highlighted matches - Support keyboard navigation (arrows, Enter, Escape) - Show result count and 'no results' state - Highlight matching terms in results - Add autocomplete attribute to search input - Minimum 2 characters to trigger search
2026-01-29 20:20:50 -05:00
parent 5658dc70f4
commit e9afb127f8
2 changed files with 276 additions and 0 deletions
@@ -19,6 +19,7 @@ templ Header(user User, currentPath string) {
                               placeholder="Search your library..." 
                               class="w-full px-4 py-2 pl-10 border rounded-lg" 
                               style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
+                               autocomplete="off"
                        >
                        <svg class="absolute left-3 top-2.5 h-5 w-5" style="color: var(--text-secondary)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
@@ -0,0 +1,275 @@
+"use strict";
+
+let searchTimeout = null;
+const SEARCH_DEBOUNCE_MS = 300;
+const SEARCH_MIN_CHARS = 2;
+
+function initializeSearch() {
+    const searchInput = document.getElementById('header-search');
+    if (!searchInput) {
+        console.warn('Search input not found');
+        return;
+    }
+
+    searchInput.addEventListener('input', handleSearchInput);
+    searchInput.addEventListener('keydown', handleSearchKeydown);
+    searchInput.addEventListener('focus', () => {
+        if (searchInput.value.length >= SEARCH_MIN_CHARS) {
+            performSearch(searchInput.value);
+        }
+    });
+
+    document.addEventListener('click', (e) => {
+        const searchResults = document.getElementById('search-results');
+        const searchInput = document.getElementById('header-search');
+        
+        if (searchResults && !searchResults.contains(e.target) && e.target !== searchInput) {
+            hideSearchResults();
+        }
+    });
+}
+
+function handleSearchInput(e) {
+    const query = e.target.value.trim();
+    
+    clearTimeout(searchTimeout);
+    
+    if (query.length < SEARCH_MIN_CHARS) {
+        hideSearchResults();
+        return;
+    }
+    
+    searchTimeout = setTimeout(() => {
+        performSearch(query);
+    }, SEARCH_DEBOUNCE_MS);
+}
+
+function handleSearchKeydown(e) {
+    const searchResults = document.getElementById('search-results');
+    if (!searchResults || searchResults.classList.contains('hidden')) {
+        return;
+    }
+    
+    const items = searchResults.querySelectorAll('.search-result-item');
+    const currentIndex = parseInt(searchResults.dataset.selectedIndex || '-1');
+    
+    if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const nextIndex = Math.min(currentIndex + 1, items.length - 1);
+        selectSearchResult(items, nextIndex);
+    } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prevIndex = Math.max(currentIndex - 1, -1);
+        selectSearchResult(items, prevIndex);
+    } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (currentIndex >= 0 && items[currentIndex]) {
+            items[currentIndex].querySelector('a').click();
+        }
+    } else if (e.key === 'Escape') {
+        hideSearchResults();
+    }
+}
+
+function selectSearchResult(items, index) {
+    items.forEach((item, i) => {
+        if (i === index) {
+            item.classList.add('bg-opacity-80');
+        } else {
+            item.classList.remove('bg-opacity-80');
+        }
+    });
+    
+    const searchResults = document.getElementById('search-results');
+    searchResults.dataset.selectedIndex = index.toString();
+}
+
+function performSearch(query) {
+    const token = localStorage.getItem('token');
+    if (!token) {
+        console.warn('No authentication token found');
+        return;
+    }
+    
+    showSearchLoading();
+    
+    fetch(`/api/media-items/search?q=${encodeURIComponent(query)}`, {
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json'
+        }
+    })
+    .then(response => {
+        if (response.status === 404) {
+            return { error: 'no results found', results: [] };
+        }
+        return response.json();
+    })
+    .then(data => {
+        hideSearchLoading();
+        
+        if (data.error && data.error === 'no results found') {
+            showNoResults(query);
+        } else if (Array.isArray(data) && data.length > 0) {
+            showSearchResults(data, query);
+        } else {
+            showNoResults(query);
+        }
+    })
+    .catch(error => {
+        hideSearchLoading();
+        console.error('Search error:', error);
+        showSearchError();
+    });
+}
+
+function showSearchLoading() {
+    createSearchResultsContainer();
+    const searchResults = document.getElementById('search-results');
+    searchResults.innerHTML = `
+        <div class="p-4 text-center" style="color: var(--text-secondary)">
+            <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2" style="border-color: var(--accent)"></div>
+            <p class="mt-2 text-sm">Searching...</p>
+        </div>
+    `;
+    searchResults.classList.remove('hidden');
+}
+
+function hideSearchLoading() {
+    
+}
+
+function showSearchResults(results, query) {
+    createSearchResultsContainer();
+    const searchResults = document.getElementById('search-results');
+    searchResults.dataset.selectedIndex = '-1';
+    
+    const libraryIconMap = {
+        'ebooks': '📚',
+        'comics': '📖',
+        'manga': '🗾'
+    };
+    
+    let html = `
+        <div class="p-3 border-b" style="border-color: var(--border)">
+            <p class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">
+                ${results.length} result${results.length !== 1 ? 's' : ''} for "${escapeHtml(query)}"
+            </p>
+        </div>
+        <div class="max-h-96 overflow-y-auto">
+    `;
+    
+    results.forEach((item, index) => {
+        const icon = libraryIconMap[item.library_type_name] || '📁';
+        const titleHtml = highlightMatch(item.title, query);
+        const authorHtml = item.author ? highlightMatch(item.author, query) : '';
+        
+        html += `
+            <div class="search-result-item p-3 border-b hover:bg-opacity-50 transition-colors cursor-pointer" 
+                 style="border-color: var(--border); background-color: var(--bg-secondary)"
+                 data-index="${index}">
+                <a href="/bookshelf" 
+                   class="block"
+                   onclick="selectLibraryAndBook('${item.library_id}', '${item.id}')">
+                    <div class="flex items-start space-x-3">
+                        <div class="text-2xl">${icon}</div>
+                        <div class="flex-1 min-w-0">
+                            <h4 class="text-sm font-medium truncate" style="color: var(--text-primary)">
+                                ${titleHtml}
+                            </h4>
+                            ${authorHtml ? `<p class="text-xs truncate" style="color: var(--text-secondary)">${authorHtml}</p>` : ''}
+                            <p class="text-xs mt-1" style="color: var(--text-secondary)">
+                                ${item.library_name}
+                            </p>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        `;
+    });
+    
+    html += `
+        </div>
+        <div class="p-2 border-t text-center" style="border-color: var(--border)">
+            <p class="text-xs" style="color: var(--text-secondary)">
+                Press <kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">↑↓</kbd> to navigate, 
+                <kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">Enter</kbd> to select
+            </p>
+        </div>
+    `;
+    
+    searchResults.innerHTML = html;
+    searchResults.classList.remove('hidden');
+}
+
+function showNoResults(query) {
+    createSearchResultsContainer();
+    const searchResults = document.getElementById('search-results');
+    
+    searchResults.innerHTML = `
+        <div class="p-4 text-center">
+            <div class="text-4xl mb-2">🔍</div>
+            <p class="text-sm" style="color: var(--text-primary)">No results found for "${escapeHtml(query)}"</p>
+            <p class="text-xs mt-1" style="color: var(--text-secondary)">Try different keywords</p>
+        </div>
+    `;
+    searchResults.classList.remove('hidden');
+}
+
+function showSearchError() {
+    createSearchResultsContainer();
+    const searchResults = document.getElementById('search-results');
+    
+    searchResults.innerHTML = `
+        <div class="p-4 text-center">
+            <div class="text-4xl mb-2">⚠️</div>
+            <p class="text-sm" style="color: var(--text-primary)">Search error</p>
+            <p class="text-xs mt-1" style="color: var(--text-secondary)">Please try again</p>
+        </div>
+    `;
+    searchResults.classList.remove('hidden');
+}
+
+function hideSearchResults() {
+    const searchResults = document.getElementById('search-results');
+    if (searchResults) {
+        searchResults.classList.add('hidden');
+    }
+}
+
+function createSearchResultsContainer() {
+    let searchResults = document.getElementById('search-results');
+    if (!searchResults) {
+        searchResults = document.createElement('div');
+        searchResults.id = 'search-results';
+        searchResults.className = 'hidden absolute z-50 w-full max-w-2xl mt-2 rounded-lg shadow-lg border';
+        searchResults.style.cssText = 'background-color: var(--bg-secondary); border-color: var(--border)';
+        
+        const searchInput = document.getElementById('header-search');
+        const searchContainer = searchInput.closest('.relative');
+        searchContainer.appendChild(searchResults);
+    }
+}
+
+function highlightMatch(text, query) {
+    if (!text) return '';
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    return escapeHtml(text).replace(regex, '<mark style="background-color: var(--accent); color: var(--bg-primary); padding: 0 2px; border-radius: 2px;">$1</mark>');
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+function selectLibraryAndBook(libraryId, bookId) {
+    localStorage.setItem('selectedLibrary', libraryId);
+    localStorage.setItem('selectedBook', bookId);
+    hideSearchResults();
+}
+
+document.addEventListener('DOMContentLoaded', initializeSearch);
+
+window.selectLibraryAndBook = selectLibraryAndBook;