search inside folders

static/js/rooms/searchManager.js

@@ -22,6 +22,7 @@ export class SearchManager {
         this.roomManager = roomManager;
         this.searchInput = document.getElementById('quickSearchInput');
         this.clearSearchBtn = document.getElementById('clearSearchBtn');
+        this.isSearching = false;
     }
     
     /**
@@ -35,9 +36,11 @@ export class SearchManager {
         // Create debounced search function
         const debouncedSearch = this.debounce((searchTerm) => {
             if (searchTerm) {
+                this.isSearching = true;
                 this.performSearch(searchTerm);
                 this.clearSearchBtn.style.display = 'block';
             } else {
+                this.isSearching = false;
                 this.roomManager.fileManager.fetchFiles(); // Reset to show all files
                 this.clearSearchBtn.style.display = 'none';
             }
@@ -53,6 +56,7 @@ export class SearchManager {
         if (this.clearSearchBtn) {
             this.clearSearchBtn.addEventListener('click', () => {
                 this.searchInput.value = '';
+                this.isSearching = false;
                 this.roomManager.fileManager.fetchFiles(); // Reset to show all files
                 this.clearSearchBtn.style.display = 'none';
             });
@@ -60,20 +64,25 @@ export class SearchManager {
     }
     
     /**
-     * Performs the search operation on the current file list.
-     * Filters files based on name and type matching the search term.
+     * Performs the search operation using the server-side search endpoint.
      * @param {string} searchTerm - The term to search for
      */
     performSearch(searchTerm) {
-        if (!this.roomManager.fileManager.currentFiles) return;
-        
-        const filteredFiles = this.roomManager.fileManager.currentFiles.filter(file => {
-            const searchLower = searchTerm.toLowerCase();
-            return file.name.toLowerCase().includes(searchLower) ||
-                   (file.type && file.type.toLowerCase().includes(searchLower));
-        });
-        
-        this.roomManager.viewManager.renderFiles(filteredFiles);
+        // Fetch all files from the server for searching
+        fetch(`/api/rooms/${this.roomManager.roomId}/search?query=${encodeURIComponent(searchTerm)}`)
+            .then(response => response.json())
+            .then(files => {
+                // Modify the file objects to show full paths in search results
+                const modifiedFiles = files.map(file => ({
+                    ...file,
+                    displayName: this.isSearching ? file.full_path : file.name
+                }));
+                
+                this.roomManager.viewManager.renderFiles(modifiedFiles);
+            })
+            .catch(error => {
+                console.error('Error performing search:', error);
+            });
     }
     
     /**

static/js/rooms/viewManager.js

@@ -255,6 +255,11 @@ export class ViewManager {
         const size = isFolder ? '-' : this.formatFileSize(file.size);
         const modified = new Date(file.modified).toLocaleString();
 
+        // Create file name element
+        const name = document.createElement('span');
+        name.className = 'file-name';
+        name.textContent = file.displayName || file.name;
+
         return `
             <tr data-index="${index}" class="file-row" style="cursor: pointer;" 
                 onclick="window.roomManager.fileManager.updateSelection(${index}, event)"
@@ -268,7 +273,7 @@ export class ViewManager {
                     <i class="fas ${icon}" style="font-size:1.5rem;color:${isFolder ? 'var(--primary-color)' : 'var(--secondary-color)'}"></i>
                 </td>
                 <td>
-                    <span class="file-name">${file.name}</span>
+                    ${name.outerHTML}
                 </td>
                 <td class="text-muted">${size}</td>
                 <td class="text-muted">${modified}</td>
@@ -294,6 +299,11 @@ export class ViewManager {
         const size = isFolder ? '-' : this.formatFileSize(file.size);
         const modified = new Date(file.modified).toLocaleString();
 
+        // Create file name element
+        const name = document.createElement('span');
+        name.className = 'file-name';
+        name.textContent = file.displayName || file.name;
+
         return `
             <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3">
                 <div class="card file-card h-100 border-0 shadow-sm position-relative" 
@@ -309,7 +319,7 @@ export class ViewManager {
                         <div class="mb-2">
                             <i class="fas ${icon}" style="font-size:2.5rem;color:${isFolder ? 'var(--primary-color)' : 'var(--secondary-color)'};"></i>
                         </div>
-                        <div class="fw-bold file-name-ellipsis mb-1" title="${file.name}">${file.name}</div>
+                        <div class="fw-bold file-name-ellipsis mb-1" title="${file.name}">${name.outerHTML}</div>
                         <div class="text-muted" style="font-size:0.85rem;">${modified}</div>
                         <div class="text-muted mb-2" style="font-size:0.85rem;">${size}</div>
                     </div>