Implement search

static/js/api/loraApi.js

@@ -199,13 +199,17 @@ export async function replacePreview(filePath) {
     input.click();
 }
 
-function appendLoraCards(loras) {
+export function appendLoraCards(loras) {
     const grid = document.getElementById('loraGrid');
     const sentinel = document.getElementById('scroll-sentinel');
     
     loras.forEach(lora => {
         const card = createLoraCard(lora);
-        grid.insertBefore(card, sentinel);
+        if (sentinel) {
+            grid.insertBefore(card, sentinel);
+        } else {
+            grid.appendChild(card);
+        }
     });
 }
 

static/js/main.js

@@ -7,6 +7,7 @@ import { loadMoreLoras, fetchCivitai, deleteModel, replacePreview, resetAndReloa
 import { showToast, lazyLoadImages, restoreFolderFilter, initTheme, toggleTheme, toggleFolder, copyTriggerWord } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
+import { SearchManager } from './utils/search.js';
 
 // Export all functions that need global access
 window.loadMoreLoras = loadMoreLoras;
@@ -33,20 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
     restoreFolderFilter();
     initializeLoraCards();
     initTheme();
-
-    // Search handler
-    const searchHandler = debounce(term => {
-        document.querySelectorAll('.lora-card').forEach(card => {
-            card.style.display = [card.dataset.name, card.dataset.folder]
-                .some(text => text.toLowerCase().includes(term)) 
-                ? 'block' 
-                : 'none';
-        });
-    }, 250);
-
-    document.getElementById('searchInput')?.addEventListener('input', e => {
-        searchHandler(e.target.value.toLowerCase());
-    });
+    window.searchManager = new SearchManager();
 });
 
 // Initialize event listeners

static/js/utils/search.js

@@ -0,0 +1,87 @@
+import { appendLoraCards } from '../api/loraApi.js';
+import { state } from '../state/index.js';
+import { resetAndReload } from '../api/loraApi.js';
+import { showToast } from './uiHelpers.js';
+
+export class SearchManager {
+    constructor() {
+        this.searchInput = document.getElementById('searchInput');
+        this.searchDebounceTimeout = null;
+        this.currentSearchTerm = '';
+        this.isSearching = false;
+        
+        if (this.searchInput) {
+            this.searchInput.addEventListener('input', this.handleSearch.bind(this));
+        }
+    }
+
+    handleSearch(event) {
+        if (this.searchDebounceTimeout) {
+            clearTimeout(this.searchDebounceTimeout);
+        }
+
+        this.searchDebounceTimeout = setTimeout(async () => {
+            const searchTerm = event.target.value.trim().toLowerCase();
+            
+            if (searchTerm !== this.currentSearchTerm && !this.isSearching) {
+                this.currentSearchTerm = searchTerm;
+                await this.performSearch(searchTerm);
+            }
+        }, 250);
+    }
+
+    async performSearch(searchTerm) {
+        const grid = document.getElementById('loraGrid');
+        
+        if (!searchTerm) {
+            state.currentPage = 1;
+            await resetAndReload();
+            return;
+        }
+
+        try {
+            this.isSearching = true;
+            state.loadingManager.showSimpleLoading('Searching...');
+
+            state.currentPage = 1;
+            state.hasMore = true;
+
+            const url = new URL('/api/loras', window.location.origin);
+            url.searchParams.set('page', '1');
+            url.searchParams.set('page_size', '20');
+            url.searchParams.set('sort_by', state.sortBy);
+            url.searchParams.set('search', searchTerm);
+
+            if (state.activeFolder) {
+                url.searchParams.set('folder', state.activeFolder);
+            }
+
+            const response = await fetch(url);
+            
+            if (!response.ok) {
+                throw new Error('Search failed');
+            }
+
+            const data = await response.json();
+            
+            if (searchTerm === this.currentSearchTerm) {
+                grid.innerHTML = '';
+                
+                if (data.items.length === 0) {
+                    grid.innerHTML = '<div class="no-results">No matching loras found</div>';
+                    state.hasMore = false;
+                } else {
+                    appendLoraCards(data.items);
+                    state.hasMore = state.currentPage < data.total_pages;
+                    state.currentPage++;
+                }
+            }
+        } catch (error) {
+            console.error('Search error:', error);
+            showToast('Search failed', 'error');
+        } finally {
+            this.isSearching = false;
+            state.loadingManager.hide();
+        }
+    }
+}