From 09a6337c6f6957f49a0b72be50d660f6119a81e3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 26 Feb 2026 09:18:28 +0000
Subject: [PATCH] fix(ui): prevent search input from clearing on each keystroke
 and add dedicated /search page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The debounceSearch() function in files.html called clearFullTextSearch()
when the query was shorter than 2 characters. Since clearFullTextSearch()
sets input.value = '', every single keystroke was immediately erased —
users could paste text but not type.

Fix: debounceSearch now only hides the results panel for short queries
without touching the input value.

Also adds a dedicated /search page with Google-style results showing
content previews (document title, filename, type badges, tag badges,
sender, and OCR text snippets with highlighted matches).

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
---
 app/views/__init__.py          |   2 +
 app/views/search.py            |  38 ++++++
 frontend/templates/base.html   |   2 +
 frontend/templates/files.html  |   5 +-
 frontend/templates/search.html | 241 +++++++++++++++++++++++++++++++++
 tests/test_views_search.py     |  41 ++++++
 6 files changed, 328 insertions(+), 1 deletion(-)
 create mode 100644 app/views/search.py
 create mode 100644 frontend/templates/search.html
 create mode 100644 tests/test_views_search.py

diff --git a/app/views/__init__.py b/app/views/__init__.py
index 12057a41..e979f101 100644
--- a/app/views/__init__.py
+++ b/app/views/__init__.py
@@ -9,6 +9,7 @@ from app.views.filemanager import router as filemanager_router
 
 # Import all the view routers
 from app.views.general import router as general_router
+from app.views.search import router as search_router
 from app.views.google_drive import router as google_drive_router
 from app.views.license_routes import router as license_router  # Add the license router
 from app.views.onedrive import router as onedrive_router
@@ -27,3 +28,4 @@ router.include_router(google_drive_router)
 router.include_router(license_router)  # Include the license router
 router.include_router(settings_router)
 router.include_router(filemanager_router)
+router.include_router(search_router)
diff --git a/app/views/search.py b/app/views/search.py
new file mode 100644
index 00000000..092658b4
--- /dev/null
+++ b/app/views/search.py
@@ -0,0 +1,38 @@
+"""
+Search view for dedicated full-text document search page.
+
+Provides a Google-style search experience with content previews,
+powered by Meilisearch via the existing ``/api/search`` backend.
+"""
+
+import logging
+from typing import Optional
+
+from fastapi import Query, Request
+
+from app.views.base import APIRouter, require_login, templates
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter()
+
+
+@router.get("/search")
+@require_login
+def search_page(
+    request: Request,
+    q: Optional[str] = Query(None, max_length=512, description="Full-text search query"),
+):
+    """Render the dedicated search page.
+
+    The page loads with an empty search box (or pre-filled when *q* is given).
+    Actual searching is performed client-side via ``fetch('/api/search')`` so
+    that results stream in without a full page reload.
+    """
+    return templates.TemplateResponse(
+        "search.html",
+        {
+            "request": request,
+            "query": q or "",
+        },
+    )
diff --git a/frontend/templates/base.html b/frontend/templates/base.html
index d39e6e44..ebe09847 100644
--- a/frontend/templates/base.html
+++ b/frontend/templates/base.html
@@ -59,6 +59,7 @@
             <a href="/" class="text-gray-700 hover:text-gray-900">Home</a>
             <a href="/upload" class="text-gray-700 hover:text-gray-900">Upload</a>
             <a href="/files" class="text-gray-700 hover:text-gray-900">Files</a>
+            <a href="/search" class="text-gray-700 hover:text-gray-900">Search</a>
 
             <!-- Admin dropdown (shown only for admin users via JS) -->
             <div id="adminMenuContainer" class="relative hidden">
@@ -150,6 +151,7 @@
               <a href="/" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Home</a>
               <a href="/upload" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Upload</a>
               <a href="/files" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Files</a>
+              <a href="/search" class="block px-3 py-3 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50">Search</a>
 
               <!-- Admin section in mobile menu (shown only for admin users via JS) -->
               <div id="mobileAdminSection" class="hidden">
diff --git a/frontend/templates/files.html b/frontend/templates/files.html
index ab44dbb5..d4f13beb 100644
--- a/frontend/templates/files.html
+++ b/frontend/templates/files.html
@@ -936,7 +936,10 @@
     function debounceSearch(value) {
       clearTimeout(_searchDebounceTimer);
       if (!value || value.trim().length < 2) {
-        clearFullTextSearch();
+        // Only hide the results panel; do NOT clear the input value so the
+        // user can continue typing characters until the query is long enough.
+        var _p = document.getElementById('search-results-panel');
+        if (_p) _p.style.display = 'none';
         return;
       }
       _searchDebounceTimer = setTimeout(() => {
diff --git a/frontend/templates/search.html b/frontend/templates/search.html
new file mode 100644
index 00000000..18d24575
--- /dev/null
+++ b/frontend/templates/search.html
@@ -0,0 +1,241 @@
+{% extends "base.html" %}
+{% block title %}Search Documents - DocuElevate{% endblock %}
+
+{% block head_extra %}
+  <script src="/static/js/common.js"></script>
+  <style>
+    .search-container { max-width: 800px; margin: 0 auto; }
+    .search-box {
+      display: flex; gap: 0.5rem; align-items: center;
+      margin-bottom: 1.5rem;
+    }
+    .search-box input {
+      flex: 1; padding: 0.75rem 1rem;
+      border: 1px solid #d1d5db; border-radius: 0.5rem;
+      font-size: 1rem; outline: none;
+    }
+    .search-box input:focus {
+      border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
+    }
+    .search-box button {
+      padding: 0.75rem 1.5rem; background-color: #3b82f6;
+      color: white; border: none; border-radius: 0.5rem;
+      font-size: 1rem; cursor: pointer; font-weight: 600;
+      white-space: nowrap;
+    }
+    .search-box button:hover { background-color: #2563eb; }
+    .search-summary {
+      font-size: 0.875rem; color: #6b7280;
+      margin-bottom: 1rem;
+    }
+    /* Google-style result cards */
+    .search-result {
+      margin-bottom: 1.5rem;
+    }
+    .search-result-title a {
+      font-size: 1.125rem; font-weight: 600;
+      color: #1a0dab; text-decoration: none;
+    }
+    .search-result-title a:hover { text-decoration: underline; }
+    .search-result-url {
+      font-size: 0.8rem; color: #006621; margin-top: 0.1rem;
+      word-break: break-all;
+    }
+    .search-result-meta {
+      display: flex; flex-wrap: wrap; gap: 0.4rem;
+      margin-top: 0.3rem;
+    }
+    .search-result-badge {
+      display: inline-block; padding: 0.1rem 0.5rem;
+      border-radius: 9999px; font-size: 0.7rem; font-weight: 500;
+    }
+    .badge-type { background: #eff6ff; color: #1d4ed8; }
+    .badge-tag  { background: #f0fdf4; color: #15803d; }
+    .badge-sender { background: #fef3c7; color: #92400e; }
+    .search-result-snippet {
+      font-size: 0.875rem; color: #4d5156;
+      line-height: 1.5; margin-top: 0.35rem;
+      word-break: break-word;
+    }
+    .search-result-snippet mark {
+      background: #fef08a; font-weight: 600;
+      border-radius: 2px; padding: 0 1px;
+    }
+    .search-pagination {
+      display: flex; justify-content: center;
+      gap: 0.5rem; margin-top: 2rem;
+    }
+    .search-pagination button {
+      padding: 0.4rem 1rem; border: 1px solid #d1d5db;
+      border-radius: 0.375rem; font-size: 0.875rem;
+      cursor: pointer; background: white; color: #374151;
+    }
+    .search-pagination button:hover { background: #f3f4f6; }
+    .search-pagination span {
+      padding: 0.4rem 0.75rem; font-size: 0.875rem; color: #6b7280;
+    }
+    .search-empty {
+      text-align: center; padding: 3rem 1rem; color: #9ca3af;
+    }
+    .search-empty i { font-size: 3rem; margin-bottom: 1rem; display: block; }
+  </style>
+{% endblock %}
+
+{% block content %}
+<div class="container mx-auto px-4 py-8">
+  <div class="search-container">
+    <h1 class="text-3xl font-bold mb-6"><i class="fas fa-search text-blue-500"></i> Document Search</h1>
+
+    <!-- Search box -->
+    <div class="search-box">
+      <input
+        type="text"
+        id="search-input"
+        placeholder="Search documents by content, sender, tags, type..."
+        value="{{ query }}"
+        autofocus
+      >
+      <button type="button" id="search-btn">
+        <i class="fas fa-search"></i> Search
+      </button>
+    </div>
+
+    <!-- Summary -->
+    <div id="search-summary" class="search-summary" style="display:none;"></div>
+
+    <!-- Results -->
+    <div id="search-results"></div>
+
+    <!-- Pagination -->
+    <div id="search-pagination" class="search-pagination" style="display:none;"></div>
+  </div>
+</div>
+
+<script>
+  const searchInput  = document.getElementById('search-input');
+  const searchBtn    = document.getElementById('search-btn');
+  const resultsDiv   = document.getElementById('search-results');
+  const summaryDiv   = document.getElementById('search-summary');
+  const paginationDiv = document.getElementById('search-pagination');
+
+  let _debounce = null;
+  let _currentPage = 1;
+  const PER_PAGE = 20;
+
+  function doSearch(page) {
+    const q = searchInput.value.trim();
+    if (!q) {
+      resultsDiv.innerHTML = '';
+      summaryDiv.style.display = 'none';
+      paginationDiv.style.display = 'none';
+      return;
+    }
+    _currentPage = page || 1;
+
+    // Update URL without reload
+    const url = new URL(window.location);
+    url.searchParams.set('q', q);
+    window.history.replaceState({}, '', url);
+
+    // Loading indicator
+    resultsDiv.innerHTML = '<div style="text-align:center;padding:2rem;color:#6b7280;"><i class="fas fa-spinner fa-spin fa-2x"></i><p style="margin-top:0.75rem;">Searching…</p></div>';
+    summaryDiv.style.display = 'none';
+    paginationDiv.style.display = 'none';
+
+    const params = new URLSearchParams({ q, page: _currentPage, per_page: PER_PAGE });
+    fetch('/api/search?' + params.toString())
+      .then(r => { if (!r.ok) throw new Error('Search returned ' + r.status); return r.json(); })
+      .then(data => renderResults(data, q))
+      .catch(err => {
+        resultsDiv.innerHTML = '<div style="text-align:center;padding:2rem;color:#dc2626;"><i class="fas fa-exclamation-triangle fa-2x"></i><p style="margin-top:0.5rem;">Search unavailable: ' + err.message + '</p></div>';
+      });
+  }
+
+  function escapeHtml(str) {
+    const d = document.createElement('div');
+    d.textContent = str;
+    return d.innerHTML;
+  }
+
+  function renderResults(data, q) {
+    const { results, total, page, pages } = data;
+
+    // Summary
+    summaryDiv.textContent = total + ' result' + (total !== 1 ? 's' : '') + ' for "' + q + '"';
+    summaryDiv.style.display = 'block';
+
+    if (!results || results.length === 0) {
+      resultsDiv.innerHTML = '<div class="search-empty"><i class="fas fa-search"></i><p>No documents found matching your query.</p></div>';
+      paginationDiv.style.display = 'none';
+      return;
+    }
+
+    resultsDiv.innerHTML = results.map(function(hit) {
+      var fmt = hit._formatted || {};
+      var title = fmt.document_title || hit.document_title || hit.original_filename || '(untitled)';
+      var filename = hit.original_filename || '';
+      var snippet = fmt.ocr_text || '';
+      var tags = Array.isArray(hit.tags) ? hit.tags : (hit.tags ? [hit.tags] : []);
+      var docType = hit.document_type || '';
+      var sender = hit.sender || hit.absender || '';
+      var fileUrl = '/files/' + hit.file_id;
+
+      // Build badges
+      var badges = '';
+      if (docType) badges += '<span class="search-result-badge badge-type">' + escapeHtml(docType) + '</span>';
+      if (sender)  badges += '<span class="search-result-badge badge-sender"><i class="fas fa-user"></i> ' + escapeHtml(sender) + '</span>';
+      tags.forEach(function(t) { badges += '<span class="search-result-badge badge-tag">' + escapeHtml(t) + '</span>'; });
+
+      // Snippet: use highlighted text, truncate if very long
+      var snippetHtml = '';
+      if (snippet) {
+        // The API returns highlighted HTML with <mark> tags; we trust it here
+        // because it comes from our own Meilisearch instance.
+        var trimmed = snippet.length > 500 ? snippet.substring(0, 500) + '…' : snippet;
+        snippetHtml = '<div class="search-result-snippet">…' + trimmed + '…</div>';
+      }
+
+      return '<div class="search-result">' +
+        '<div class="search-result-title"><a href="' + escapeHtml(fileUrl) + '">' + title + '</a></div>' +
+        '<div class="search-result-url">' + escapeHtml(filename) + '</div>' +
+        (badges ? '<div class="search-result-meta">' + badges + '</div>' : '') +
+        snippetHtml +
+        '</div>';
+    }).join('');
+
+    // Pagination
+    if (pages > 1) {
+      var btns = [];
+      if (page > 1) btns.push('<button onclick="doSearch(' + (page - 1) + ')">« Previous</button>');
+      btns.push('<span>Page ' + page + ' of ' + pages + '</span>');
+      if (page < pages) btns.push('<button onclick="doSearch(' + (page + 1) + ')">Next »</button>');
+      paginationDiv.innerHTML = btns.join('');
+      paginationDiv.style.display = 'flex';
+    } else {
+      paginationDiv.style.display = 'none';
+    }
+  }
+
+  // Event listeners
+  searchBtn.addEventListener('click', function() { doSearch(1); });
+  searchInput.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') { doSearch(1); }
+  });
+  searchInput.addEventListener('input', function() {
+    clearTimeout(_debounce);
+    var val = searchInput.value.trim();
+    if (val.length < 2) {
+      resultsDiv.innerHTML = '';
+      summaryDiv.style.display = 'none';
+      paginationDiv.style.display = 'none';
+      return;
+    }
+    _debounce = setTimeout(function() { doSearch(1); }, 400);
+  });
+
+  // If q was provided via URL, search immediately
+  if (searchInput.value.trim().length >= 2) {
+    doSearch(1);
+  }
+</script>
+{% endblock %}
diff --git a/tests/test_views_search.py b/tests/test_views_search.py
new file mode 100644
index 00000000..b3d6bbe3
--- /dev/null
+++ b/tests/test_views_search.py
@@ -0,0 +1,41 @@
+"""Tests for the dedicated search page view (app/views/search.py)."""
+
+import pytest
+
+
+@pytest.mark.unit
+class TestSearchPage:
+    """Tests for GET /search view endpoint."""
+
+    def test_search_page_renders(self, client):
+        """GET /search returns 200 with search template."""
+        response = client.get("/search")
+        assert response.status_code == 200
+        assert "Document Search" in response.text
+
+    def test_search_page_with_query(self, client):
+        """GET /search?q=invoice pre-fills the search input."""
+        response = client.get("/search?q=invoice")
+        assert response.status_code == 200
+        assert 'value="invoice"' in response.text
+
+    def test_search_page_empty_query(self, client):
+        """GET /search?q= renders page without error."""
+        response = client.get("/search?q=")
+        assert response.status_code == 200
+        assert "Document Search" in response.text
+
+    def test_search_page_contains_search_elements(self, client):
+        """GET /search contains required search UI elements."""
+        response = client.get("/search")
+        assert response.status_code == 200
+        assert 'id="search-input"' in response.text
+        assert 'id="search-btn"' in response.text
+        assert 'id="search-results"' in response.text
+        assert "/api/search" in response.text
+
+    def test_search_page_query_too_long(self, client):
+        """GET /search?q=<very long> returns 422 for exceeding max_length."""
+        long_query = "a" * 600
+        response = client.get(f"/search?q={long_query}")
+        assert response.status_code == 422