Upload fastsearch-tauri/ui/app.js

fastsearch-tauri/ui/app.js

@@ -0,0 +1,318 @@
+// ── DOM Elements ───────────────────────────────────────────────────
+const searchInput = document.getElementById('searchInput');
+const loadingSpinner = document.getElementById('loadingSpinner');
+const resultsContainer = document.getElementById('resultsContainer');
+const resultsList = document.getElementById('resultsList');
+const resultsFooter = document.getElementById('resultsFooter');
+const footerStats = document.getElementById('footerStats');
+const emptyState = document.getElementById('emptyState');
+const noResults = document.getElementById('noResults');
+
+// ── State ──────────────────────────────────────────────────────────
+let results = [];
+let selectedIndex = -1;
+let searchTimeout = null;
+let totalIndexed = 0;
+
+// ── Icon helpers ───────────────────────────────────────────────────
+function getFileIcon(name, isDir) {
+  if (isDir) return '📁';
+  
+  const ext = name.split('.').pop()?.toLowerCase() || '';
+  
+  const iconMap = {
+    exe: '⚙️',
+    lnk: '🔗',
+    pdf: '📄',
+    doc: '📝', docx: '📝',
+    xls: '📊', xlsx: '📊',
+    ppt: '📊', pptx: '📊',
+    jpg: '🖼️', jpeg: '🖼️', png: '🖼️', gif: '🖼️', bmp: '🖼️', svg: '🖼️', webp: '🖼️',
+    mp4: '🎬', mov: '🎬', avi: '🎬', mkv: '🎬',
+    mp3: '🎵', wav: '🎵', flac: '🎵', aac: '🎵',
+    zip: '📦', rar: '📦', '7z': '📦', tar: '📦', gz: '📦',
+    js: '📜', ts: '📜', jsx: '📜', tsx: '📜',
+    html: '🌐', css: '🎨', json: '📋', xml: '📋',
+    py: '🐍', rs: '🦀', go: '🐹', java: '☕', cpp: '⚙️', c: '⚙️',
+    txt: '📃', md: '📃', log: '📃',
+    db: '🗄️', sql: '🗄️',
+    ini: '⚙️', cfg: '⚙️', conf: '⚙️',
+  };
+  
+  return iconMap[ext] || '📄';
+}
+
+function getFileClass(name, isDir) {
+  if (isDir) return 'folder';
+  const ext = name.split('.').pop()?.toLowerCase() || '';
+  if (['exe', 'lnk', 'msi', 'bat', 'cmd'].includes(ext)) return 'app';
+  return 'file';
+}
+
+// ── Highlight query in result name ────────────────────────────────
+function highlightMatch(name, query) {
+  if (!query) return name;
+  const q = query.toLowerCase();
+  const n = name.toLowerCase();
+  const idx = n.indexOf(q);
+  if (idx === -1) return name;
+  return (
+    name.slice(0, idx) +
+    '<span class="highlight">' +
+    name.slice(idx, idx + query.length) +
+    '</span>' +
+    name.slice(idx + query.length)
+  );
+}
+
+// ── Render results ────────────────────────────────────────────────
+function renderResults() {
+  resultsList.innerHTML = '';
+  
+  results.forEach((item, idx) => {
+    const el = document.createElement('div');
+    el.className = 'result-item' + (idx === selectedIndex ? ' selected' : '');
+    el.dataset.index = idx;
+    el.addEventListener('click', () => selectAndOpen(idx));
+    el.addEventListener('dblclick', () => openItem(idx, true));
+    
+    const iconClass = getFileClass(item.name, item.is_dir);
+    const icon = getFileIcon(item.name, item.is_dir);
+    
+    const query = searchInput.value.trim();
+    const highlightedName = highlightMatch(item.name, query);
+    
+    // Format path - shorten if too long
+    let displayPath = item.path;
+    if (displayPath.length > 80) {
+      displayPath = '...' + displayPath.slice(-77);
+    }
+    
+    el.innerHTML = `
+      <div class="result-icon ${iconClass}">${icon}</div>
+      <div class="result-info">
+        <div class="result-name">${highlightedName}</div>
+        <div class="result-path">${escapeHtml(displayPath)}</div>
+      </div>
+      <div class="result-meta">${item.is_dir ? 'DIR' : 'FILE'}</div>
+    `;
+    
+    resultsList.appendChild(el);
+  });
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// ── Update selection ────────────────────────────────────────────
+function updateSelection() {
+  const items = resultsList.querySelectorAll('.result-item');
+  items.forEach((el, idx) => {
+    el.classList.toggle('selected', idx === selectedIndex);
+  });
+  
+  // Scroll into view
+  if (selectedIndex >= 0) {
+    const selected = items[selectedIndex];
+    if (selected) {
+      selected.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }
+}
+
+function selectNext() {
+  if (results.length === 0) return;
+  selectedIndex = (selectedIndex + 1) % results.length;
+  updateSelection();
+}
+
+function selectPrev() {
+  if (results.length === 0) return;
+  selectedIndex = (selectedIndex - 1 + results.length) % results.length;
+  updateSelection();
+}
+
+function selectAndOpen(index) {
+  selectedIndex = index;
+  updateSelection();
+  openItem(index, false);
+}
+
+// ── Open item ────────────────────────────────────────────────────
+function openItem(index, reveal) {
+  if (index < 0 || index >= results.length) return;
+  const item = results[index];
+  
+  if (typeof window.__TAURI__ !== 'undefined') {
+    if (reveal || item.is_dir) {
+      window.__TAURI__.invoke('cmd_open_folder', { path: item.path });
+    } else {
+      window.__TAURI__.invoke('cmd_open_file', { path: item.path });
+    }
+  } else {
+    // Fallback for dev
+    console.log('Open:', item.path);
+  }
+  
+  // Hide window after opening
+  setTimeout(() => {
+    if (typeof window.__TAURI__ !== 'undefined') {
+      window.__TAURI__.invoke('cmd_toggle_window');
+    }
+  }, 100);
+}
+
+// ── Perform search ───────────────────────────────────────────────
+function performSearch(query) {
+  if (!query) {
+    showEmptyState();
+    return;
+  }
+  
+  loadingSpinner.classList.add('active');
+  
+  if (typeof window.__TAURI__ !== 'undefined') {
+    window.__TAURI__.invoke('cmd_search', {
+      request: {
+        query: query,
+        limit: 50,
+        case_sensitive: false
+      }
+    }).then(response => {
+      loadingSpinner.classList.remove('active');
+      results = response.results || [];
+      totalIndexed = response.total_indexed;
+      
+      if (results.length > 0) {
+        showResults();
+        selectedIndex = 0;
+        renderResults();
+        updateFooter(response.elapsed_ms);
+      } else {
+        showNoResults();
+      }
+    }).catch(err => {
+      loadingSpinner.classList.remove('active');
+      console.error('Search error:', err);
+    });
+  } else {
+    // Dev mode - show empty
+    loadingSpinner.classList.remove('active');
+    showEmptyState();
+  }
+}
+
+// ── View states ───────────────────────────────────────────────────
+function showResults() {
+  resultsContainer.classList.add('visible');
+  emptyState.classList.add('hidden');
+  noResults.classList.remove('visible');
+}
+
+function showEmptyState() {
+  resultsContainer.classList.remove('visible');
+  emptyState.classList.remove('hidden');
+  noResults.classList.remove('visible');
+  results = [];
+  selectedIndex = -1;
+}
+
+function showNoResults() {
+  resultsContainer.classList.remove('visible');
+  emptyState.classList.add('hidden');
+  noResults.classList.add('visible');
+  results = [];
+  selectedIndex = -1;
+}
+
+function updateFooter(elapsedMs) {
+  footerStats.textContent = `${results.length} of ${totalIndexed.toLocaleString()} files · ${elapsedMs.toFixed(2)}ms`;
+}
+
+// ── Search input handler ─────────────────────────────────────────
+searchInput.addEventListener('input', (e) => {
+  const query = e.target.value.trim();
+  
+  clearTimeout(searchTimeout);
+  
+  if (!query) {
+    showEmptyState();
+    return;
+  }
+  
+  searchTimeout = setTimeout(() => {
+    performSearch(query);
+  }, 50); // 50ms debounce for instant feel
+});
+
+// ── Keyboard navigation ──────────────────────────────────────────
+document.addEventListener('keydown', (e) => {
+  // ESC - close window
+  if (e.key === 'Escape') {
+    if (typeof window.__TAURI__ !== 'undefined') {
+      window.__TAURI__.invoke('cmd_toggle_window');
+    }
+    return;
+  }
+  
+  // Arrow down - next result
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    selectNext();
+    return;
+  }
+  
+  // Arrow up - previous result
+  if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    selectPrev();
+    return;
+  }
+  
+  // Enter - open selected
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    const reveal = e.ctrlKey || e.metaKey;
+    openItem(selectedIndex, reveal);
+    return;
+  }
+  
+  // Tab - focus search input (if not focused)
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    searchInput.focus();
+    return;
+  }
+  
+  // Any printable key - focus search input
+  if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    if (document.activeElement !== searchInput) {
+      searchInput.focus();
+    }
+  }
+});
+
+// ── Focus search on show ──────────────────────────────────────────
+function resetSearch() {
+  searchInput.value = '';
+  searchInput.focus();
+  showEmptyState();
+}
+
+// ── Listen for toggle event from Rust ──────────────────��─────────
+if (typeof window.__TAURI__ !== 'undefined') {
+  window.__TAURI__.event.listen('toggle-search', () => {
+    resetSearch();
+  });
+  
+  // Load stats on startup
+  window.__TAURI__.invoke('cmd_get_stats').then(stats => {
+    totalIndexed = stats.total_indexed;
+  });
+}
+
+// Focus input on load
+searchInput.focus();