browser-recall/app/templates/search.html

{% extends "base.html" %}

{% block title %}Browser History - Search{% endblock %}

{% block content %}
<div class="bg-dark-800 shadow sm:rounded-lg p-6 border border-dark-700">
  <form id="search-form">
    <div class="form-grid">
      <div>
        <label for="search-term" class="form-label">Search Term</label>
        <input type="text" name="search-term" id="search-term" placeholder="Enter search terms..."
          class="form-input w-full rounded-md">
      </div>
      <div>
        <label for="domain" class="form-label">Domain</label>
        <input type="text" name="domain" id="domain" placeholder="example.com" class="form-input w-full rounded-md">
      </div>
      <div>
        <label for="start-date" class="form-label">Start Date</label>
        <input type="date" name="start-date" id="start-date" class="form-input w-full rounded-md">
      </div>
      <div>
        <label for="end-date" class="form-label">End Date</label>
        <input type="date" name="end-date" id="end-date" class="form-input w-full rounded-md">
      </div>
    </div>
    <div class="flex justify-end">
      <button type="submit" class="search-button">
        <span class="flex items-center">
          <svg class="w-4 h-4 mr-2" 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" />
          </svg>
          Search
        </span>
      </button>
    </div>
  </form>

  <div id="results" class="mt-8">
    <div class="border-t border-dark-700 mt-4">
      <ul class="divide-y divide-gray-200" id="search-results">
        <!-- Results will be populated here -->
      </ul>
    </div>
  </div>
</div>

<!-- Add Marked.js -->
<script src="{{ url_for('static', path='/js/marked.min.js') }}"></script>

<script>
  // Configure marked for security
  marked.setOptions({
    headerIds: false,
    mangle: false
  });

  function highlightSearchTerm(text, searchTerm) {
    if (!searchTerm || !text) return text;
    const regex = new RegExp(`(${searchTerm})`, 'gi');
    return text.replace(regex, '<mark class="highlight-search">$1</mark>');
  }

  function getPreviewAroundMatch(text, searchTerm) {
    if (!text || !searchTerm) return '';

    const regex = new RegExp(searchTerm, 'i');
    const match = text.match(regex);
    if (!match) return text.slice(0, 200) + '...';

    const matchIndex = match.index;
    const previewLength = 150;
    const start = Math.max(0, matchIndex - previewLength);
    const end = Math.min(text.length, matchIndex + match[0].length + previewLength);

    let preview = text.slice(start, end);
    if (start > 0) preview = '...' + preview;
    if (end < text.length) preview = preview + '...';

    return preview;
  }

  function toggleContent(button, contentId) {
    const content = document.getElementById(contentId);
    const isCollapsed = content.classList.contains('collapsed');

    content.classList.toggle('collapsed');
    button.textContent = isCollapsed ? 'Show Less' : 'Show More';
  }

  document.getElementById('search-form').addEventListener('submit', async (e) => {
    e.preventDefault();

    const searchTerm = document.getElementById('search-term').value;
    const domain = document.getElementById('domain').value;
    const startDate = document.getElementById('start-date').value;
    const endDate = document.getElementById('end-date').value;

    const params = new URLSearchParams();
    if (searchTerm) params.append('search_term', searchTerm);
    if (domain) params.append('domain', domain);
    if (startDate) params.append('start_date', startDate);
    if (endDate) params.append('end_date', endDate);
    params.append('include_content', 'true');

    const response = await fetch(`/history/search?${params.toString()}`);
    const results = await response.json();

    const resultsContainer = document.getElementById('search-results');
    resultsContainer.innerHTML = results.map((entry, index) => {
      let contentHtml = '';

      if (entry.markdown_content) {
        const preview = getPreviewAroundMatch(entry.markdown_content, searchTerm);
        const fullContent = marked.parse(highlightSearchTerm(entry.markdown_content, searchTerm));
        const previewHtml = marked.parse(highlightSearchTerm(preview, searchTerm));

        contentHtml = `
          <div class="mt-2 text-sm text-gray-300">
            <div id="content-${index}" class="preview-text prose prose-invert max-w-none collapsed">
              ${fullContent}
            </div>
            <div class="mt-2">
              <button
                onclick="toggleContent(this, 'content-${index}')"
                class="expand-button"
              >
                Show More
              </button>
            </div>
          </div>
        `;
      }

      return `
        <li class="px-4 py-4">
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between mb-2">
              <p class="text-sm font-medium text-primary truncate">
                <a href="${entry.url}" target="_blank">${highlightSearchTerm(entry.title, searchTerm)}</a>
              </p>
              <p class="text-sm text-gray-400 ml-4">
                ${entry.domain} • ${new Date(entry.visit_time).toLocaleString()}
              </p>
            </div>
            ${contentHtml}
          </div>
        </li>
      `;
    }).join('');
  });
</script>
{% endblock %}